/* =============================================================================
   AIToolsay — Prompt composer
   -----------------------------------------------------------------------------
   The main input every tool page opens on: textarea + character counter +
   "Try Random Prompt". Loaded once by ai-tool-shell and ai-writers-shell.

   Scoped to `.pg-root .pg-prompt-card` (0,2,0) so it outranks the shell's own
   `.pg-card` (0,1,0), which is shared with the Advanced Options and output
   cards and must keep its own look. The extra class is added in the Blade.

   Two things the shell already does that this must not fight:
     • syncCounter() auto-grows the textarea by writing an INLINE height. Size
       with min/max-block-size only — never `height`, it would be overridden
       anyway and the growth would jitter.
     • The dark theme is a token remap on .pg-root, so the --pb-* set below is
       swapped rather than restyled at the bottom.
   ========================================================================== */

.pg-root .pg-prompt-card {
  --pb-1: #4C8DF2;
  --pb-2: #3680ED;
  --pb-3: #2060C0;
  --pb-glow: 54, 128, 237;
  --pb-surface: #fff;
  --pb-raised: #f6f8fc;
  --pb-line: #e3e8ef;
  --pb-ink: #16202c;
  --pb-ink-2: #5b6779;
  --pb-ink-3: #98a2b3;
  --pb-tint: rgba(54, 128, 237, .08);
  --pb-warn: #C2740B;
  --pb-warn-bg: rgba(217, 146, 15, .14);
  --pb-stop: #C7362C;
  --pb-stop-bg: rgba(199, 54, 44, .12);

  position: relative;
  overflow: visible;                 /* the focus ring must not be clipped */
  border: 1.5px solid var(--pb-line);
  border-radius: 18px;
  background: var(--pb-surface);
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04),
              0 10px 28px -22px rgba(16, 26, 40, .35);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* NO accent hairline on this card — removed deliberately, do not re-add.
   The card must keep `overflow: visible` so the focus ring isn't clipped, which
   means a ::before bar sitting on the top edge can never be clipped to the
   corner radius either: it overhangs the curve and reads as a detached blue
   line floating above the box. The blue border + glow ring below are a complete
   focus cue on their own. (The trust-strip cards CAN carry that bar — they are
   overflow:hidden and have no ring.) */

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-prompt-card:hover:not(:focus-within) {
    border-color: rgba(var(--pb-glow), .38);
    box-shadow: 0 1px 2px rgba(16, 26, 40, .04),
                0 14px 32px -22px rgba(var(--pb-glow), .5);
  }
}

/* The moment of focus — this is the state the whole component is designed for. */
.pg-root .pg-prompt-card:focus-within {
  border-color: var(--pb-2);
  box-shadow: 0 0 0 4px rgba(var(--pb-glow), .14),
              0 18px 40px -26px rgba(var(--pb-glow), .55);
}

/* ── TEXTAREA ───────────────────────────────────────────────────────────── */
.pg-root .pg-prompt-card .pg-prompt-body { padding: 18px 20px 14px; }

.pg-root .pg-prompt-card .pg-textarea {
  /* min/max only — syncCounter() owns `height`. max stops a long prompt from
     pushing the Generate button off the bottom of the screen. */
  min-block-size: 128px;
  max-block-size: 46vh;
  overflow-y: auto;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--pb-ink);
  caret-color: var(--pb-2);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pb-glow), .35) transparent;
}
.pg-root .pg-prompt-card .pg-textarea::-webkit-scrollbar { inline-size: 8px; }
.pg-root .pg-prompt-card .pg-textarea::-webkit-scrollbar-track { background: transparent; }
.pg-root .pg-prompt-card .pg-textarea::-webkit-scrollbar-thumb {
  background: rgba(var(--pb-glow), .32);
  border-radius: 99px;
  border: 2px solid var(--pb-surface);
}
.pg-root .pg-prompt-card .pg-textarea::placeholder {
  color: var(--pb-ink-3);
  opacity: 1;                        /* Firefox dims placeholders by default */
  transition: opacity .2s ease;
}
/* Fade the hint once they start — it has done its job. */
.pg-root .pg-prompt-card:focus-within .pg-textarea::placeholder { opacity: .55; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.pg-root .pg-prompt-card .pg-prompt-footer {
  gap: 12px;
  flex-wrap: wrap;                   /* never let the two ends collide */
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--pb-line);
}

/* Counter as a pill. `is-near` / `is-full` are set by syncCounter(). */
.pg-root .pg-prompt-card .pg-char-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--pb-line);
  background: var(--pb-raised);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pb-ink-2);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.pg-root .pg-prompt-card .pg-char-count.is-near {
  color: var(--pb-warn);
  background: var(--pb-warn-bg);
  border-color: rgba(217, 146, 15, .3);
}
.pg-root .pg-prompt-card .pg-char-count.is-full {
  color: var(--pb-stop);
  background: var(--pb-stop-bg);
  border-color: rgba(199, 54, 44, .32);
}

/* "Try Random Prompt" — a real button, not a bare link. */
.pg-root .pg-prompt-card .pg-random-btn {
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--pb-tint);
  color: var(--pb-3);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pg-root .pg-prompt-card .pg-random-btn i {
  font-size: 11.5px;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-prompt-card .pg-random-btn:hover {
    /* opacity:.7 was the old hover — it just made the label harder to read. */
    opacity: 1;
    background: linear-gradient(135deg, var(--pb-1), var(--pb-3));
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(var(--pb-glow), .65);
  }
  .pg-root .pg-prompt-card .pg-random-btn:hover i { transform: rotate(-16deg) scale(1.1); }
}
.pg-root .pg-prompt-card .pg-random-btn:active { transform: translateY(0) scale(.985); }

/* The site-wide `button:focus-visible` reset at (0,3,2) outranks a plain
   component rule — match its `body:not(.admin-shell)` prefix to clear it.
   Same trap as the Generate CTA. */
body:not(.admin-shell) .pg-root .pg-prompt-card .pg-random-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pb-surface), 0 0 0 6px rgba(var(--pb-glow), .85);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .pg-root .pg-prompt-card { border-radius: 16px; }
  .pg-root .pg-prompt-card .pg-prompt-body { padding: 15px 15px 12px; }
  .pg-root .pg-prompt-card .pg-textarea {
    min-block-size: 116px;
    max-block-size: 40vh;
    font-size: 16px;                 /* 16px or iOS zooms the page on focus */
    line-height: 1.65;
  }
  .pg-root .pg-prompt-card .pg-prompt-footer { gap: 10px; }
  .pg-root .pg-prompt-card .pg-random-btn { padding: 8px 13px; min-block-size: 36px; }
}

/* Tablet and up: a little more room to think in. */
@media (min-width: 992px) {
  .pg-root .pg-prompt-card .pg-textarea { min-block-size: 140px; font-size: 16px; }
  .pg-root .pg-prompt-card .pg-prompt-body { padding: 20px 22px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-prompt-card,
  .pg-root .pg-prompt-card .pg-random-btn,
  .pg-root .pg-prompt-card .pg-random-btn i { transition: none; }
  .pg-root .pg-prompt-card .pg-random-btn:hover { transform: none; }
}

/* ── DARK ───────────────────────────────────────────────────────────────── */
body.theme-dark .pg-root .pg-prompt-card {
  --pb-1: #5C9BF5;
  --pb-2: #3F88EF;
  --pb-3: #8CBEFA;                   /* lifted: #2060C0 fails contrast on dark */
  --pb-glow: 96, 164, 245;
  --pb-surface: #17171A;
  --pb-raised: #1F1F23;
  --pb-line: rgba(255, 255, 255, .1);
  --pb-ink: #F5F5F6;
  --pb-ink-2: #A0A0A6;
  --pb-ink-3: #71717A;
  --pb-tint: rgba(96, 164, 245, .14);
  --pb-warn: #F3C368;
  --pb-warn-bg: rgba(245, 180, 60, .14);
  --pb-stop: #F58B84;
  --pb-stop-bg: rgba(224, 90, 80, .15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4),
              0 10px 28px -22px rgba(0, 0, 0, .7);
}
body.theme-dark .pg-root .pg-prompt-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--pb-glow), .16),
              0 18px 40px -26px rgba(0, 0, 0, .8);
}
/* The gradient hover fill needs dark ink, not white, at this lightness. */
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-prompt-card .pg-random-btn:hover { color: #0F0F11; }
}