/* =============================================================================
   AIToolsay — Tool-page OUTPUT FOOTER  (.pg-out-footer.pg-outfoot)
   -----------------------------------------------------------------------------
   The band that closes the result card: live stat badges (model, word count) on
   one side, the "Join Our Community" CTA on the other. Loaded once by
   ai-tool-shell and ai-writers-shell.

   ── THE REPORTED BUG: THE CTA LABEL WAS BEING CLIPPED ─────────────────────
   `.pg-tg-btn` shares a rule with `.pg-coffee-btn` that sets `overflow: hidden`
   (it clipped the old shine sweep) together with `white-space: nowrap`. It also
   sits inside `.foot-right`, a flex container, so it carries the default
   `flex-shrink: 1` — squeeze the row and the pill narrows while its label
   cannot, and the tail of "Join Our Community" is simply cut off with no
   padding left. Three things fix it for good, and none of them may be removed:
     · `overflow: visible` on the pill — the sheen clips ITSELF with
       `border-radius: inherit`, so nothing needs to clip the label;
     · `flex-shrink: 0`, so the pill is never narrowed below its content;
     · `white-space: normal`, so a long translation wraps instead of vanishing.
   The layout below then guarantees the room: it is a two-column grid that drops
   to two rows before anything has to compress.

   ── LAYOUT KEYS OFF THE CARD'S WIDTH, NOT THE VIEWPORT ────────────────────
   The result card sits in col-lg-9, so a viewport query stacks this footer on a
   full-width page while leaving it side-by-side in a 520px column. `.pg-outfoot`
   is the query container and `.pg-foot-inner` (a wrapper added to both shells)
   is what the queries actually restyle — an element cannot be restyled by its
   own container query.

   ── SPECIFICITY ───────────────────────────────────────────────────────────
   `.pg-outfoot` and `.pg-foot-inner` are the cascade hooks. What has to be
   cleared, all of it declared AFTER this file's <link>:

     ai-tool-shell     .pg-out-footer                              (0,1,0)
                       .pg-out-footer .foot-left                   (0,2,0)
                       .pg-foot-badge                              (0,1,0)
                       .pg-tg-btn / :hover                         (0,1,0)/(0,1,1)
                       body.theme-dark .pg-out-footer              (0,2,1)
     ai-writers-shell  .pg-root .pg-out-footer .foot-right         (0,3,0)  <--
                       .pg-root .pg-tg-btn / :hover                (0,2,0)/(0,2,1)
     floating-widgets  .card a:hover { color:#2060C0 }             (0,2,1)  <--
     (inline, before   body.theme-dark .card a:hover { #60A4F5 }   (0,3,1)  <--
      </body>)
     custom.ltr.css    body:not(.admin-shell):not(.theme-dark)
                         a:focus-visible                           (0,3,2)  <--

   The writers-shell `.foot-right` rule at (0,3,0) is why `.pg-foot-inner` earns
   its place twice: it is the container-query host AND the extra class that puts
   the same selector here at (0,4,0). Resulting ladder:
       footer (0,2,0) · badge (0,3,0) · CTA (0,3,0) · foot-right (0,4,0)
       CTA hover (0,5,1) · dark CTA hover (0,6,1) · focus (0,5,1)

   ── COLOUR ────────────────────────────────────────────────────────────────
   The CTA is brand BLUE on purpose: the coffee pill in this same card is
   Buy-Me-a-Coffee yellow, and the split is the signal — yellow is the support
   category, blue is the product. Its ramp is the measured AA one
   (#2E6FD0 / #2762C2 / #1B4E9E = 4.88 / 5.81 / 7.98:1 under white) rather than
   brand #3680ED, which is 3.84:1 under white and fails in BOTH themes. See
   ai-contrast-fix.css. Because the ink is white, hover DEEPENS this pill —
   the opposite of the yellow one, and deliberately so: each moves away from its
   own failing direction.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. THE BAND
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-outfoot {
  --of-1: #4C8DF2;
  --of-2: #3680ED;
  --of-3: #2060C0;
  /* the only stops that ever sit under white text */
  --of-fill-1: #2E6FD0;
  --of-fill-2: #2762C2;
  --of-fill-3: #1B4E9E;
  --of-glow: 54, 128, 237;

  --of-surface: #fff;
  --of-band: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
  --of-line: #e6ebf3;
  --of-ink: #16202c;
  --of-ink-2: #5b6779;
  --of-tint: rgba(54, 128, 237, .085);
  --of-chip: rgba(255, 255, 255, .20);
  --of-chip-line: rgba(255, 255, 255, .30);
  --of-chip-h: rgba(255, 255, 255, .32);
  --of-gloss: rgba(255, 255, 255, .22);
  --of-sheen: rgba(255, 255, 255, .30);
  --of-ring: 54, 128, 237;

  --of-ease: cubic-bezier(.34, 1.4, .64, 1);
  --of-ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  container-type: inline-size;
  display: block;
  padding: 16px 24px;
  border: 0;
  border-block-start: 1px solid var(--of-line);
  background: var(--of-band);
  /* the card clips its own corners, but state this anyway so the band still
     reads correctly if it is ever used outside one */
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.pg-root .pg-outfoot .pg-foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta cta";
  align-items: center;
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. STAT BADGES
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-outfoot .pg-foot-inner .foot-left {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-inline-size: 0;
  margin: 0;
}

.pg-root .pg-outfoot .pg-foot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-inline-size: 100%;
  padding: 5px 13px 5px 6px;
  border: 1.5px solid var(--of-line);
  border-radius: 999px;
  background: var(--of-surface);
  color: var(--of-ink-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Long provider strings must WRAP inside the pill, never be cut. The shells
     set `nowrap`, which is what turns a long model name into a clipped one. */
  white-space: normal;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

/* The icon becomes a tinted disc — same chip language as the history rows and
   the model picker tiles, so the whole card reads as one system. */
.pg-root .pg-outfoot .pg-foot-badge i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  color: var(--of-3);
  background: var(--of-tint);
  box-shadow: inset 0 0 0 1px rgba(var(--of-glow), .14);
  transition: background .2s ease, color .2s ease, transform .28s var(--of-ease-pop);
}

/* The VALUE carries the ink; the trailing label ("Words") keeps the muted
   micro-type set on the badge. That is the whole hierarchy. */
.pg-root .pg-outfoot .pg-foot-badge span {
  min-inline-size: 0;
  color: var(--of-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The model badge is the primary stat, so it takes the brand tint — same
   first-child idiom the history meta row already uses. */
.pg-root .pg-outfoot .pg-foot-badge:first-child {
  border-color: rgba(var(--of-glow), .24);
  background: var(--of-tint);
  text-transform: none;
  letter-spacing: 0;
}
.pg-root .pg-outfoot .pg-foot-badge:first-child span { color: var(--of-3); }
.pg-root .pg-outfoot .pg-foot-badge:first-child i {
  background: rgba(var(--of-glow), .16);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. THE CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-outfoot .pg-foot-inner .foot-right {
  grid-area: cta;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  inline-size: auto;
  margin: 0;
}

.pg-root .pg-outfoot .pg-tg-btn {
  position: relative;
  isolation: isolate;
  /* NOT hidden. See the file header — this is half of the clipped-label bug.
     The sheen clips itself with `border-radius: inherit`. */
  overflow: visible;
  /* the other half: never narrower than its own label */
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-inline-size: 100%;
  min-block-size: 40px;
  margin: 0;
  padding-block: 5px;
  padding-inline: 6px 18px;

  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(125% 165% at 18% -35%, var(--of-gloss), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--of-fill-1), var(--of-fill-2) 52%, var(--of-fill-3));
  color: #fff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .005em;
  text-decoration: none;
  /* wrap rather than clip — the last line of defence for a long translation */
  white-space: normal;
  cursor: pointer;
  filter: none;

  box-shadow:
    inset 0 1px 0 var(--of-gloss),
    0 10px 22px -12px rgba(var(--of-glow), .75),
    0 2px 6px -3px rgba(16, 26, 40, .22);

  transition: transform .22s var(--of-ease),
              box-shadow .24s ease,
              background-image .24s ease;
}

/* Translucent disc behind the glyph — the blue sibling of the coffee pill's
   cream one, so the two CTAs in this card read as a pair in two tones.
   `line-height:1` is load-bearing: Font Awesome sets its own and the glyph
   otherwise sits a pixel low inside a 28px circle. */
.pg-root .pg-outfoot .pg-tg-btn > i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  font-size: 12.5px;
  line-height: 1;
  color: #fff;
  background: var(--of-chip);
  box-shadow: inset 0 0 0 1px var(--of-chip-line);
  position: relative;
  z-index: 1;
  transition: transform .3s var(--of-ease-pop), background .24s ease, box-shadow .24s ease;
}
.pg-root .pg-outfoot .pg-tg-btn > span {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
  margin-inline-start: 0;
}

/* Sheen. Animates `background-position`, not `transform`, so the pill's own
   hover lift cannot displace it, and it clips itself rather than making the
   parent clip the label. */
.pg-root .pg-outfoot .pg-tg-btn::before,
.pg-root .pg-outfoot .pg-tg-btn::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: none;
  background: linear-gradient(100deg,
              rgba(255, 255, 255, 0) 38%,
              var(--of-sheen) 50%,
              rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%;
  background-position: 135% 0;
  transition: none;
}
/* ai-tool-shell paints the sweep on ::before and ai-writers-shell on ::after,
   so BOTH are claimed above and only one is ever shown. */
.pg-root .pg-outfoot .pg-tg-btn::before { display: none; }

/* ── INK LOCK, deliberately OUTSIDE any media query ────────────────────────
   `.card a:hover{color:#2060C0}` and `body.theme-dark .card-body a:hover
   {color:#60A4F5}` are injected before </body> and are NOT gated behind a
   pointer type, so on a phone a tap repaints this label mid-blue on blue while
   none of the hover treatment below applies. This pins white for every pointer.
   Must stay ABOVE the hover block so that block still wins on fine pointers. */
body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover,
body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:focus,
body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:active {
  color: #fff;
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. HOVER — the "after" state
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover {
    transform: translateY(-2px);
    /* DEEPER, not brighter. The ink is white here, so lifting the ramp toward
       the brand hue would cost contrast — the exact failure ai-contrast-fix.css
       exists to undo. One stop down keeps the state change legible AND moves
       away from the failing direction. */
    background-image:
      radial-gradient(125% 165% at 18% -35%, var(--of-gloss), rgba(255, 255, 255, 0) 60%),
      linear-gradient(135deg, var(--of-fill-2), var(--of-fill-3) 55%, #164285);
    box-shadow:
      inset 0 1px 0 var(--of-gloss),
      0 16px 30px -13px rgba(var(--of-glow), .85),
      0 3px 9px -4px rgba(16, 26, 40, .3);
  }
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover > i {
    background: var(--of-chip-h);
    box-shadow: inset 0 0 0 1px var(--of-chip-line),
                0 3px 8px -4px rgba(9, 20, 44, .4);
    transform: translateY(-1px) scale(1.06);
  }
  /* Transition declared HERE, not on the base rule, so un-hover snaps the
     sheen back to its park instead of sweeping backwards. */
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover::after {
    opacity: 1;
    background-position: -35% 0;
    transition: background-position .8s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  }

  /* Badges get a micro-response only — no lift and no pointer cursor, because
     they are read-outs, not controls. */
  .pg-root .pg-outfoot .pg-foot-badge:hover {
    border-color: rgba(var(--of-glow), .34);
    background: var(--of-tint);
  }
  .pg-root .pg-outfoot .pg-foot-badge:hover i {
    background: rgba(var(--of-glow), .18);
    transform: scale(1.06);
  }
}

body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:active {
  transform: translateY(0) scale(.985);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FOCUS
   ═══════════════════════════════════════════════════════════════════════════
   The site-wide `a:focus-visible` reset kills the outline AND forces
   `border-radius:6px`, so the pill radius has to be restated or a focused CTA
   visibly squares off. Declared outside the hover query so a keyboard user on a
   touch device still gets the lit state. */
body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:focus-visible {
  outline: none;
  border-radius: 999px;
  transform: translateY(-2px);
  background-image:
    radial-gradient(125% 165% at 18% -35%, var(--of-gloss), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--of-fill-2), var(--of-fill-3) 55%, #164285);
  box-shadow:
    0 0 0 3px var(--of-surface),
    0 0 0 6px rgba(var(--of-ring), .55),
    0 14px 26px -14px rgba(var(--of-glow), .8);
}
body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:focus-visible > i {
  background: var(--of-chip-h);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE — container queries on the card, not the viewport
   ═══════════════════════════════════════════════════════════════════════════ */

/* Narrow column: two rows. Stat badges keep the full width they need, the CTA
   gets its own line and stretches — nothing ever has to compress. */
@container (max-width: 520px) {
  .pg-root .pg-outfoot .pg-foot-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "meta"
      "cta";
    align-items: stretch;
    row-gap: 12px;
  }
  .pg-root .pg-outfoot .pg-foot-inner .foot-right {
    justify-content: stretch;
    inline-size: 100%;
  }
  /* Badges STRETCH to whatever row they land on. They hug their content by
     default, so a long provider name ("NVIDIA: Nemotron 3 Super" measures
     206px) pushes the words badge onto a second line and leaves two pills
     of different widths stacked above a full-bleed CTA — a ragged step
     that reads as broken rather than stacked. Growing them keeps the
     behaviour adaptive instead of guessing a breakpoint: two short badges
     still share one line, and anything that has to wrap fills its own line
     and lines up with the button beneath it.
     Not truncation — the file's own rule is that a model name never gets
     cut, and that still holds. */
  .pg-root .pg-outfoot .pg-foot-inner .foot-left { align-items: stretch; }
  .pg-root .pg-outfoot .pg-foot-badge { flex: 1 1 auto; }
  .pg-root .pg-outfoot .pg-tg-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 6px 20px;
  }
}

/* Middle band: still side by side, just tighter. */
@container (min-width: 520.02px) and (max-width: 700px) {
  .pg-root .pg-outfoot .pg-foot-inner { gap: 12px; }
  .pg-root .pg-outfoot .pg-foot-badge { padding-inline: 5px 11px; }
}

/* Fallback where container queries are unavailable — approximates the same
   intent from the viewport, assuming the sidebar case (the common one). */
@supports not (container-type: inline-size) {
  @media (max-width: 767.98px) {
    .pg-root .pg-outfoot .pg-foot-inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "meta" "cta";
      align-items: stretch;
      row-gap: 12px;
    }
    .pg-root .pg-outfoot .pg-foot-inner .foot-right {
      justify-content: stretch;
      inline-size: 100%;
    }
    .pg-root .pg-outfoot .pg-foot-inner .foot-left { align-items: stretch; }
    .pg-root .pg-outfoot .pg-foot-badge { flex: 1 1 auto; }
    .pg-root .pg-outfoot .pg-tg-btn { flex: 1 1 auto; justify-content: center; }
  }
}

/* Type scale and touch targets key off the VIEWPORT — they track the physical
   screen and the pointer, not the column the card happens to sit in. */
@media (max-width: 575.98px) {
  .pg-root .pg-outfoot { padding: 14px 16px; }
  .pg-root .pg-outfoot .pg-foot-badge { font-size: 10px; padding: 4px 11px 4px 5px; }
  .pg-root .pg-outfoot .pg-foot-badge i { inline-size: 20px; block-size: 20px; font-size: 9.5px; }
  .pg-root .pg-outfoot .pg-foot-badge span { font-size: 11px; }
  /* 46px — a 40px pill is under the comfortable tap target */
  .pg-root .pg-outfoot .pg-tg-btn { min-block-size: 46px; font-size: 13.5px; }
  .pg-root .pg-outfoot .pg-tg-btn > i { inline-size: 32px; block-size: 32px; font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. RTL
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .pg-root .pg-outfoot .pg-foot-badge { padding: 5px 6px 5px 13px; }
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover::after {
    background-position: 235% 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════
   The CTA's FILL is untouched: #2E6FD0 to #1B4E9E carries white at 4.88-7.98:1
   whatever is behind it, and re-tinting a fill because the card went dark is
   the exact move ai-contrast-fix.css exists to undo. Only the band, the badges
   and the depth modelling change. */
body.theme-dark .pg-root .pg-outfoot {
  --of-surface: #17171A;
  --of-band: linear-gradient(180deg, #1A1A1E 0%, #17171A 100%);
  --of-line: rgba(255, 255, 255, .09);
  --of-ink: #F5F5F6;
  --of-ink-2: #A0A0A6;
  --of-tint: rgba(54, 128, 237, .16);
  --of-glow: 96, 164, 245;
  --of-ring: 96, 164, 245;
  /* ink token, never a fill — see the file header */
  --of-3: #9CC6FB;
}
body.theme-dark .pg-root .pg-outfoot .pg-foot-badge {
  background: #1C1C1F;
  border-color: var(--of-line);
  color: var(--of-ink-2);
}
body.theme-dark .pg-root .pg-outfoot .pg-foot-badge span { color: var(--of-ink); }
body.theme-dark .pg-root .pg-outfoot .pg-foot-badge:first-child {
  background: var(--of-tint);
  border-color: rgba(var(--of-glow), .3);
}
body.theme-dark .pg-root .pg-outfoot .pg-foot-badge:first-child span { color: var(--of-3); }
body.theme-dark .pg-root .pg-outfoot .pg-foot-badge i {
  background: var(--of-tint);
  color: var(--of-3);
  box-shadow: inset 0 0 0 1px rgba(var(--of-glow), .22);
}
body.theme-dark .pg-root .pg-outfoot .pg-tg-btn {
  box-shadow:
    inset 0 1px 0 var(--of-gloss),
    inset 0 0 0 1px rgba(var(--of-glow), .22),
    0 10px 22px -12px rgba(0, 0, 0, .7),
    0 2px 6px -3px rgba(0, 0, 0, .5);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell).theme-dark .pg-root .pg-outfoot .pg-tg-btn:hover {
    box-shadow:
      inset 0 1px 0 var(--of-gloss),
      inset 0 0 0 1px rgba(var(--of-glow), .3),
      0 18px 34px -14px rgba(0, 0, 0, .8),
      0 4px 12px -5px rgba(0, 0, 0, .6);
  }
  body.theme-dark .pg-root .pg-outfoot .pg-foot-badge:hover {
    border-color: rgba(var(--of-glow), .34);
    background: var(--of-tint);
  }
}
body:not(.admin-shell).theme-dark .pg-root .pg-outfoot .pg-tg-btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--of-surface),
    0 0 0 6px rgba(var(--of-ring), .6),
    0 14px 26px -14px rgba(0, 0, 0, .75);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-outfoot .pg-tg-btn,
  .pg-root .pg-outfoot .pg-tg-btn > i,
  .pg-root .pg-outfoot .pg-foot-badge,
  .pg-root .pg-outfoot .pg-foot-badge i { transition: none; }
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover,
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:focus-visible,
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:active,
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover > i { transform: none; }
  body:not(.admin-shell) .pg-root .pg-outfoot .pg-tg-btn:hover::after { opacity: 0; }
  .pg-root .pg-outfoot .pg-foot-badge:hover i { transform: none; }
}