/* =============================================================================
   AIToolsay — Generate CTA
   -----------------------------------------------------------------------------
   The single primary action on all ~2,000 tool pages. Owned here rather than in
   each shell's inline <style>, because it used to live in BOTH ai-tool-shell and
   ai-writers-shell and the two copies had already drifted into different buttons.
   Both shells now @once this file and define no .pg-btn-gen rules of their own.

   Contract with Livewire (do not break):
     • .pg-gen-loading MUST resolve to display:none here. wire:loading reveals it
       by writing an inline display, and hides it by clearing that inline style —
       so this rule is the resting state, not decoration.
     • .pg-gen-label may take a display; wire:loading.remove overrides it inline
       while a request is in flight and restores this value afterwards.
     • wire:loading.attr="disabled" means :disabled covers BOTH "generating" and
       "guest out of credits". It has to read as busy/locked, never as broken.

   Theme: brand blue #3680ED, deep #2060C0, light #60A4F5. Every colour below is
   derived from the --gb-* tokens on the button, so dark mode is a token swap.
   ========================================================================== */

.pg-root .pg-btn-gen {
  /* Local palette — the dark-mode block at the bottom re-points these and the
     gradient, all four shadow layers and the focus ring follow automatically. */
  --gb-1: #4C8DF2;          /* gradient start  — lifted highlight */
  --gb-2: #3680ED;          /* brand blue      — the mid tone     */
  --gb-3: #2060C0;          /* gradient end    — grounded depth   */
  --gb-glow: 54, 128, 237;  /* rgb triplet for every glow layer   */
  --gb-ink: #fff;
  --gb-ring-gap: #fff;      /* page colour behind the focus ring  */

  position: relative;
  overflow: hidden;                    /* clips the sheen sweep to the radius */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Mobile-first: a full-width, thumb-sized target. Widened from 576px up. */
  inline-size: 100%;
  min-block-size: 52px;
  padding: 14px 24px;

  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gb-1) 0%, var(--gb-2) 46%, var(--gb-3) 100%);
  color: var(--gb-ink);

  font-family: inherit;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.2;                    /* NOT 1 — the label must survive a wrap */
  letter-spacing: .015em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* Depth: inner top highlight for the glassy edge, then two glow layers. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 8px 20px -8px rgba(var(--gb-glow), .55),
    0 2px 6px -2px rgba(var(--gb-glow), .40);

  transition:
    transform .22s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .22s ease,
    filter .22s ease;
}

/* Specular sheen across the top half — pure depth, never over the text. */
.pg-root .pg-btn-gen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Hover sweep. Parked off the left edge, crosses on hover. */
.pg-root .pg-btn-gen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              transparent 32%,
              rgba(255, 255, 255, .30) 50%,
              transparent 68%);
  transform: translateX(-115%);
  pointer-events: none;
  transition: transform .62s cubic-bezier(.4, 0, .2, 1);
}

/* The two states sit ABOVE both decorative layers. This is the rule that keeps
   the label readable — without it the sheen washes straight over the text. */
.pg-root .pg-btn-gen > * {
  position: relative;
  z-index: 1;
}

.pg-root .pg-gen-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.pg-root .pg-btn-gen .pg-gen-label i {
  margin: 0;                           /* gap owns the spacing now */
  font-size: 16px;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── HOVER ──────────────────────────────────────────────────────────────────
   Lift, deepen the glow, sweep the sheen, and give the wand a flick. Pointer
   devices only: on touch, :hover sticks after a tap and the button would sit
   permanently lifted. */
@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-btn-gen:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.04) saturate(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .28),
      0 16px 34px -12px rgba(var(--gb-glow), .62),
      0 6px 14px -6px rgba(var(--gb-glow), .48);
  }
  .pg-root .pg-btn-gen:hover:not(:disabled)::after { transform: translateX(115%); }
  .pg-root .pg-btn-gen:hover:not(:disabled) .pg-gen-label i {
    transform: rotate(-14deg) scale(1.14);
  }
}

/* ── ACTIVE ─────────────────────────────────────────────────────────────── */
.pg-root .pg-btn-gen:active:not(:disabled) {
  transform: translateY(1px) scale(.988);
  transition-duration: .08s;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .18),
    0 3px 10px -6px rgba(var(--gb-glow), .5);
}

/* ── FOCUS ──────────────────────────────────────────────────────────────────
   There was no keyboard affordance on this button at all before.

   Two things dictate the shape of this rule:

   1. The site kills outlines globally and rings focus with a box-shadow
      instead (custom.ltr.css: `button:focus-visible { outline:none;
      box-shadow:0 0 0 3px var(--ez-focus) }`). Fighting that with an outline
      loses, so use a shadow ring like the rest of the site.

   2. That global rule is `body:not(.admin-shell):not(.theme-dark)
      button:focus-visible` — specificity (0,3,2). A plain
      `.pg-root .pg-btn-gen:focus-visible` is only (0,3,0) and silently loses,
      taking the button's whole glow stack with it. Matching the `body:not(…)`
      prefix puts this at (0,4,1), which wins without needing !important.

   The ring is drawn as two spread layers — a gap in the page colour, then the
   brand blue — because a single low-alpha ring vanishes against a blue button. */
.pg-root .pg-btn-gen:focus { outline: none; }

body:not(.admin-shell) .pg-root .pg-btn-gen:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 8px 20px -8px rgba(var(--gb-glow), .5),
    0 0 0 3px var(--gb-ring-gap),
    0 0 0 6px rgba(var(--gb-glow), .9);
}

/* ── BUSY / DISABLED ────────────────────────────────────────────────────────
   Also the in-flight state, so it keeps its colour and just stops responding —
   greying it out mid-generation reads as failure. */
.pg-root .pg-btn-gen:disabled {
  cursor: not-allowed;
  transform: none;
  filter: saturate(.6);
  opacity: .72;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 3px 10px -6px rgba(var(--gb-glow), .35);
}
.pg-root .pg-btn-gen:disabled::after { display: none; }

/* ── LOADING ────────────────────────────────────────────────────────────────
   display:none is load-bearing — see the Livewire contract at the top. */
.pg-root .pg-gen-loading { display: none; }
.pg-root .pg-spinner {
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pgGenSpin .7s linear infinite;
  display: inline-block;
  vertical-align: -3px;
  margin-inline-end: 8px;
}
@keyframes pgGenSpin { to { transform: rotate(360deg); } }

/* ── LAYOUT / RESPONSIVE ────────────────────────────────────────────────────
   Mobile: edge to edge. Tablet up: intrinsic width with a comfortable floor. */
.pg-root .pg-gen-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 22px 0 18px;
}

@media (min-width: 576px) {
  .pg-root .pg-gen-wrap { align-items: center; }
  .pg-root .pg-btn-gen {
    inline-size: auto;
    min-inline-size: 240px;
    min-block-size: 54px;
    padding: 15px 44px;
  }
}

@media (min-width: 992px) {
  .pg-root .pg-btn-gen {
    min-inline-size: 252px;
    min-block-size: 58px;
    font-size: 17.5px;
    border-radius: 15px;
  }
  .pg-root .pg-btn-gen .pg-gen-label i { font-size: 17px; }
  .pg-root .pg-spinner { inline-size: 17px; block-size: 17px; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────────
   Keep the colour and depth, drop the movement. The spinner survives: it is
   status, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-btn-gen,
  .pg-root .pg-btn-gen::after,
  .pg-root .pg-btn-gen .pg-gen-label i { transition: none; }
  .pg-root .pg-btn-gen:hover:not(:disabled),
  .pg-root .pg-btn-gen:active:not(:disabled) { transform: none; }
  .pg-root .pg-btn-gen:hover:not(:disabled)::after { transform: translateX(-115%); }
  .pg-root .pg-btn-gen:hover:not(:disabled) .pg-gen-label i { transform: none; }
}

/* ── DARK MODE ──────────────────────────────────────────────────────────────
   A token swap, not a restyle. The old rule inverted to a pale fill with #0F0F11
   text on hover, which read as a different button mid-interaction; the label
   stays white here at every state. Glows are pulled back because saturated blue
   blooms hard against the #0F0F11 canvas. */
body.theme-dark .pg-root .pg-btn-gen {
  --gb-1: #5C9BF5;
  --gb-2: #3F88EF;
  --gb-3: #2A6BCC;
  --gb-glow: 96, 164, 245;
  --gb-ink: #fff;
  --gb-ring-gap: #0F0F11;   /* dark canvas, so the ring still reads as a ring */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 8px 22px -10px rgba(var(--gb-glow), .42),
    0 2px 6px -2px rgba(0, 0, 0, .5);
}
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-btn-gen:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      0 18px 38px -14px rgba(var(--gb-glow), .5),
      0 6px 16px -8px rgba(0, 0, 0, .6);
  }
}
body.theme-dark .pg-root .pg-btn-gen:disabled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 3px 10px -6px rgba(0, 0, 0, .5);
}

/* ── STOP BUTTON (token streaming) ──────────────────────────────────────────
   Injected by the shell's JS only while a generation is streaming, and removed
   the moment it ends — no tool blade carries this markup. Everything here is
   scoped to `.pg-stop-btn`, a class nothing else in the product uses, so this
   block cannot reach any existing element.

   Deliberately quiet: the primary CTA is already showing "Generating…" right
   above it, and a second loud button beside a loud button reads as a choice
   between equals. This is a secondary out. */
.pg-root .pg-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 10px;
  background: transparent;
  color: rgba(15, 23, 42, .62);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.pg-root .pg-stop-btn .pg-stop-ico {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-stop-btn:hover {
    color: #b42318;
    border-color: rgba(180, 35, 24, .38);
    background: rgba(180, 35, 24, .06);
  }
}

/* Match the site-wide focus convention (box-shadow ring, not an outline) —
   see the focus-reset note in the header of this file. */
body:not(.admin-shell) .pg-root .pg-stop-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .28);
}

body.theme-dark .pg-root .pg-stop-btn {
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .62);
}

@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-stop-btn:hover {
    color: #ff8a80;
    border-color: rgba(255, 138, 128, .42);
    background: rgba(255, 138, 128, .08);
  }
}

/* ── STREAMING CARET ────────────────────────────────────────────────────────
   Appended to the rendered article while tokens are arriving so the output
   reads as "still being written" rather than "finished and short". */
.pg-root .pg-stream-caret {
  display: inline-block;
  inline-size: 2px;
  block-size: 1.05em;
  margin-inline-start: 2px;
  vertical-align: -.16em;
  background: currentColor;
  opacity: .75;
  animation: pgCaretBlink 1.05s steps(2, start) infinite;
}
@keyframes pgCaretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-stream-caret { animation: none; }
}