/* =============================================================================
   AIToolsay — "Choose AI Model" picker
   -----------------------------------------------------------------------------
   Trigger + dropdown list, on all ~2,000 tool pages. Loaded once by
   ai-tool-shell and ai-writers-shell.

   Unlike the Advanced Options panel, this markup is 100% shell-owned — no tool
   blade declares .pg-model-*, so there are no per-tool (0,1,0) overrides to beat
   and `.pg-root` + one class is enough. It stays additive on top of the shell's
   inline rules for the same reason as the other two files: partial overrides
   elsewhere still lean on that base.

   This is a CUSTOM dropdown (divs + JS), not a native <select> — so unlike the
   Advanced Options selects, the LIST here is fully ours to style.
   ========================================================================== */

.pg-root .pg-label-row,
.pg-root .pg-model-wrap {
  --mp-1: #4C8DF2;
  --mp-2: #3680ED;
  --mp-3: #2060C0;
  --mp-glow: 54, 128, 237;
  --mp-surface: #fff;
  --mp-raised: #f6f8fc;
  --mp-line: #e3e8ef;
  --mp-ink: #1a2230;
  --mp-ink-2: #5b6779;
  --mp-ink-3: #8b96a7;
  --mp-tint: rgba(54, 128, 237, .08);
  --mp-tint-2: rgba(54, 128, 237, .14);
}

/* ── SECTION LABEL ──────────────────────────────────────────────────────── */
.pg-root .pg-label-row {
  gap: 9px;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mp-ink-2);
}
.pg-root .pg-label-row .icon {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--mp-2);
  background: var(--mp-tint);
}

/* ── TRIGGER ────────────────────────────────────────────────────────────── */
.pg-root .pg-model-trigger {
  gap: 12px;
  min-block-size: 54px;
  padding: 10px 14px;
  border: 1.5px solid var(--mp-line);
  border-radius: 12px;
  background: var(--mp-surface);
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Logo gets a framed tile so mismatched brand PNGs sit on a common base. */
.pg-root .pg-model-trigger .pg-trigger-img {
  inline-size: 32px;
  block-size: 32px;
  padding: 4px;
  border: 1px solid var(--mp-line);
  border-radius: 9px;
  background: var(--mp-raised);
  object-fit: contain;
}
/* Two-line layout: name over description, badges trailing, chevron last.
   The trigger used to be a single line of text, which told you the model you
   had picked but nothing about it. */
.pg-root .pg-model-trigger .t-info {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pg-root .pg-model-trigger .t-desc {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mp-ink-3);
  /* wraps, never truncated — same rule as the dropdown rows */
  white-space: normal;
  overflow-wrap: anywhere;
}
.pg-root .pg-model-trigger .t-desc:empty { display: none; }
.pg-root .pg-model-trigger .t-badges {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-inline-size: 45%;
}
.pg-root .pg-model-trigger .t-badges:empty { display: none; }

.pg-root .pg-model-trigger .t-name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mp-ink);
  /* Long model names must not be clipped — wrap instead. */
  white-space: normal;
  line-height: 1.3;
  min-inline-size: 0;
}
/* Chevron matches the Advanced Options header: a real circular target. */
.pg-root .pg-model-trigger .t-chev {
  flex-shrink: 0;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--mp-ink-2);
  background: var(--mp-tint);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .2s ease, color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-model-trigger:hover {
    border-color: rgba(var(--mp-glow), .55);
    box-shadow: 0 6px 18px -10px rgba(var(--mp-glow), .6);
  }
  .pg-root .pg-model-trigger:hover .t-chev {
    background: var(--mp-tint-2);
    color: var(--mp-2);
  }
}
body:not(.admin-shell) .pg-root .pg-model-trigger:focus-visible {
  outline: none;
  border-color: var(--mp-2);
  box-shadow: 0 0 0 3px var(--mp-surface), 0 0 0 6px rgba(var(--mp-glow), .85);
}

.pg-root .pg-model-trigger.open {
  border-color: var(--mp-2);
  box-shadow: 0 0 0 4px rgba(var(--mp-glow), .16);
}
.pg-root .pg-model-trigger.open .t-chev {
  background: linear-gradient(135deg, var(--mp-1), var(--mp-3));
  color: #fff;
}

/* ── DROPDOWN ───────────────────────────────────────────────────────────── */
/* No `display` here — .pg-model-dropdown{display:none} + `.open` drives it. */
.pg-root .pg-model-dropdown {
  top: calc(100% + 8px);
  padding: 0 0 6px;
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: var(--mp-surface);
  box-shadow: 0 4px 10px -4px rgba(16, 26, 40, .10),
              0 24px 48px -20px rgba(16, 26, 40, .30);
  max-block-size: min(440px, 62vh);
  overscroll-behavior: contain;   /* stop the page scrolling once the list ends */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--mp-glow), .45) transparent;
}
.pg-root .pg-model-dropdown::-webkit-scrollbar { inline-size: 8px; }
.pg-root .pg-model-dropdown::-webkit-scrollbar-track { background: transparent; }
.pg-root .pg-model-dropdown::-webkit-scrollbar-thumb {
  background: rgba(var(--mp-glow), .4);
  border-radius: 99px;
  border: 2px solid var(--mp-surface);
}
.pg-root .pg-model-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(var(--mp-glow), .65); }

/* Provider header sticks while you scroll its section. */
.pg-root .pg-model-group {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 16px 7px;
  border-top: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--mp-ink-3);
  background: var(--mp-surface);
  box-shadow: 0 1px 0 var(--mp-line);
}

/* ── ITEMS ──────────────────────────────────────────────────────────────── */
.pg-root .pg-model-item {
  position: relative;
  gap: 12px;
  margin: 3px 6px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pg-root .pg-model-item .mi-ico-img {
  inline-size: 30px;
  block-size: 30px;
  padding: 4px;
  border: 1px solid var(--mp-line);
  border-radius: 8px;
  background: var(--mp-raised);
  object-fit: contain;
  transition: border-color .16s ease;
}
.pg-root .pg-model-item .mi-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mp-ink);
  gap: 7px;
}
/* Descriptions WRAP. They were `nowrap + ellipsis`, which silently ate the end
   of every longer model blurb once the column narrowed. */
.pg-root .pg-model-item .mi-desc {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--mp-ink-3);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-model-item:hover {
    background: var(--mp-tint);
    box-shadow: inset 3px 0 0 rgba(var(--mp-glow), .55);
  }
  .pg-root .pg-model-item:hover .mi-ico-img { border-color: rgba(var(--mp-glow), .45); }
}
.pg-root .pg-model-item:active { transform: scale(.995); }

/* Selected: the same tint + inset accent bar the TOC and nav rails use. */
.pg-root .pg-model-item.sel {
  background: var(--mp-tint-2);
  box-shadow: inset 3px 0 0 var(--mp-2);
}
.pg-root .pg-model-item.sel .mi-name { color: var(--mp-3); }
.pg-root .pg-model-item.sel .mi-ico-img { border-color: rgba(var(--mp-glow), .5); }

/* ── BADGES ─────────────────────────────────────────────────────────────────
   One chip shape, many tones. The tone slug comes from the LABEL TEXT via
   EngineCatalogue::BADGE_TONES, so an admin typing "Flagship" into
   engine_models.badge gets the violet chip with no code change. Adding a word
   to that map without adding a tone here just renders the neutral chip.

   Each tone is one --bt-* triple (tint bg / ink / border) so the whole set
   stays one visual system instead of a bag of unrelated colours. Two tones
   are deliberately SOLID rather than tinted — free and premium — because
   those are the two the eye should catch first in a 19-row list.

   (The per-model token chip that used to sit at the end of each row is gone:
   the allowance is enforced server-side and edited in admin, not advertised.)
--------------------------------------------------------------------------- */
.pg-root .pg-mbadge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bt-bg, var(--mp-tint-2));
  color: var(--bt-ink, var(--mp-3));
  border-color: var(--bt-line, transparent);
}

/* Tinted tones */
.pg-root .pg-mbadge--new       { --bt-bg: rgba( 54,128,237,.14); --bt-ink:#1E5FBF; --bt-line: rgba( 54,128,237,.28); }
.pg-root .pg-mbadge--featured  { --bt-bg: rgba(217,146, 15,.16); --bt-ink:#96620A; --bt-line: rgba(217,146, 15,.32); }
.pg-root .pg-mbadge--flagship  { --bt-bg: rgba(139, 92,246,.15); --bt-ink:#6A31D9; --bt-line: rgba(139, 92,246,.30); }
.pg-root .pg-mbadge--pro       { --bt-bg: rgba( 79, 70,229,.14); --bt-ink:#4038B8; --bt-line: rgba( 79, 70,229,.28); }
.pg-root .pg-mbadge--popular   { --bt-bg: rgba(236, 72,128,.14); --bt-ink:#BE255F; --bt-line: rgba(236, 72,128,.28); }
.pg-root .pg-mbadge--fast      { --bt-bg: rgba(  8,164,190,.15); --bt-ink:#0A7A8E; --bt-line: rgba(  8,164,190,.30); }
.pg-root .pg-mbadge--reasoning { --bt-bg: rgba( 13,148,136,.15); --bt-ink:#0B6E64; --bt-line: rgba( 13,148,136,.30); }
.pg-root .pg-mbadge--vision    { --bt-bg: rgba(192, 38,211,.13); --bt-ink:#9B1FAF; --bt-line: rgba(192, 38,211,.28); }
.pg-root .pg-mbadge--coding    { --bt-bg: rgba(  2,132,199,.14); --bt-ink:#0369A1; --bt-line: rgba(  2,132,199,.28); }
.pg-root .pg-mbadge--beta      { --bt-bg: rgba(100,116,139,.15); --bt-ink:#475569; --bt-line: rgba(100,116,139,.30); }
.pg-root .pg-mbadge--default   { --bt-bg: rgba(100,116,139,.12); --bt-ink:#52607A; --bt-line: rgba(100,116,139,.24); }

/* Solid tones — the two that must win the row */
.pg-root .pg-mbadge--free {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px -2px rgba(16, 185, 129, .65);
}
.pg-root .pg-mbadge--premium {
  background: linear-gradient(135deg, #F4B740, #D9880F);
  color: #4A2E00;
  border-color: transparent;
  box-shadow: 0 2px 6px -2px rgba(217, 136, 15, .6);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* On a ~300px card the logo + badges + chevron leave the text about 67px,
     which wrapped the trigger to 107px tall. The description is the first
     thing to go — it is still right there in the dropdown when choosing. */
  .pg-root .pg-model-trigger .t-desc { display: none; }
  .pg-root .pg-model-trigger .t-badges { max-inline-size: 38%; gap: 4px; }
  .pg-root .pg-model-trigger .t-badges .pg-mbadge { font-size: 8.5px; padding: 2px 6px; }
  .pg-root .pg-model-trigger { min-block-size: 52px; padding: 9px 12px; gap: 10px; }
  .pg-root .pg-model-trigger .pg-trigger-img { inline-size: 28px; block-size: 28px; border-radius: 8px; }
  /* Two-line layout: name over description, badges trailing, chevron last.
   The trigger used to be a single line of text, which told you the model you
   had picked but nothing about it. */
.pg-root .pg-model-trigger .t-info {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pg-root .pg-model-trigger .t-desc {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mp-ink-3);
  /* wraps, never truncated — same rule as the dropdown rows */
  white-space: normal;
  overflow-wrap: anywhere;
}
.pg-root .pg-model-trigger .t-desc:empty { display: none; }
.pg-root .pg-model-trigger .t-badges {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-inline-size: 45%;
}
.pg-root .pg-model-trigger .t-badges:empty { display: none; }

.pg-root .pg-model-trigger .t-name { font-size: 14px; }
  .pg-root .pg-model-dropdown { max-block-size: min(400px, 58vh); }
  .pg-root .pg-model-item { gap: 10px; padding: 9px 10px; }
  .pg-root .pg-model-item .mi-ico-img { inline-size: 26px; block-size: 26px; }
  /* Two columns now that the token chip is gone, so the text gets the whole
     row and badges keep their place beside the name. (This used to need a
     flex-basis dance to stop the chip squeezing .mi-name until the badge
     orphaned onto its own line — no chip, no problem.) */
  .pg-root .pg-model-item .mi-info { min-inline-size: 0; }
  .pg-root .pg-mbadge { font-size: 8.5px; padding: 2px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-model-trigger,
  .pg-root .pg-model-trigger .t-chev,
  .pg-root .pg-model-item,
  .pg-root .pg-model-item .mi-ico-img { transition: none; }
  .pg-root .pg-model-item:active { transform: none; }
}

/* ── DARK MODE ──────────────────────────────────────────────────────────── */
body.theme-dark .pg-root .pg-label-row,
body.theme-dark .pg-root .pg-model-wrap {
  --mp-1: #5C9BF5;
  --mp-2: #3F88EF;
  --mp-3: #7FB4F8;          /* lifted: #2060C0 fails contrast on a dark tint */
  --mp-glow: 96, 164, 245;
  --mp-surface: #1b1b1e;
  --mp-raised: #232329;
  --mp-line: #34343a;
  --mp-ink: #E6E6E9;
  --mp-ink-2: #9A9AA4;
  --mp-ink-3: #82828C;
  --mp-tint: rgba(96, 164, 245, .12);
  --mp-tint-2: rgba(96, 164, 245, .2);
}
/* The shell's own dark rules are (0,2,1)/(0,2,0); these reach (0,3,x) so the
   --mp-* tokens stay in charge. */
body.theme-dark .pg-root .pg-model-dropdown,
body.theme-dark .pg-root .pg-model-group { background: var(--mp-surface); }
body.theme-dark .pg-root .pg-model-dropdown {
  border-color: var(--mp-line);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5),
              0 24px 50px -20px rgba(0, 0, 0, .75);
}
body.theme-dark .pg-root .pg-model-group { box-shadow: 0 1px 0 var(--mp-line); }
body.theme-dark .pg-root .pg-model-trigger {
  background: var(--mp-surface);
  border-color: var(--mp-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
/* Badge tones on dark: same hues, lifted ink and lower-alpha fills so they read
   on #1b1b1e without glowing. The old `.mi-limit.free` rule that used to live
   here carried a leftover RED border (#5a2222) from the pre-blue theme; the
   chip it styled no longer renders at all. */
body.theme-dark .pg-root .pg-mbadge--new       { --bt-bg: rgba( 96,164,245,.18); --bt-ink:#8CBEFA; --bt-line: rgba( 96,164,245,.32); }
body.theme-dark .pg-root .pg-mbadge--featured  { --bt-bg: rgba(245,180, 60,.16); --bt-ink:#F3C368; --bt-line: rgba(245,180, 60,.30); }
body.theme-dark .pg-root .pg-mbadge--flagship  { --bt-bg: rgba(167,124,250,.18); --bt-ink:#C4A7FC; --bt-line: rgba(167,124,250,.32); }
body.theme-dark .pg-root .pg-mbadge--pro       { --bt-bg: rgba(129,120,240,.18); --bt-ink:#ADA6FA; --bt-line: rgba(129,120,240,.32); }
body.theme-dark .pg-root .pg-mbadge--popular   { --bt-bg: rgba(244,114,160,.16); --bt-ink:#F79BBE; --bt-line: rgba(244,114,160,.30); }
body.theme-dark .pg-root .pg-mbadge--fast      { --bt-bg: rgba( 34,196,220,.16); --bt-ink:#6FDCEC; --bt-line: rgba( 34,196,220,.30); }
body.theme-dark .pg-root .pg-mbadge--reasoning { --bt-bg: rgba( 45,190,175,.16); --bt-ink:#6FD9CC; --bt-line: rgba( 45,190,175,.30); }
body.theme-dark .pg-root .pg-mbadge--vision    { --bt-bg: rgba(217, 90,235,.16); --bt-ink:#E29BF2; --bt-line: rgba(217, 90,235,.30); }
body.theme-dark .pg-root .pg-mbadge--coding    { --bt-bg: rgba( 56,160,225,.16); --bt-ink:#7CC3EE; --bt-line: rgba( 56,160,225,.30); }
body.theme-dark .pg-root .pg-mbadge--beta      { --bt-bg: rgba(148,163,184,.16); --bt-ink:#B4C0D0; --bt-line: rgba(148,163,184,.30); }
body.theme-dark .pg-root .pg-mbadge--default   { --bt-bg: rgba(148,163,184,.13); --bt-ink:#A3AEBF; --bt-line: rgba(148,163,184,.24); }
body.theme-dark .pg-root .pg-mbadge--free {
  background: linear-gradient(135deg, #23C58C, #12946A);
  color: #04170F;
  box-shadow: 0 2px 6px -2px rgba(16, 185, 129, .45);
}
body.theme-dark .pg-root .pg-mbadge--premium {
  background: linear-gradient(135deg, #F7C55C, #DE9518);
  color: #3A2300;
  box-shadow: 0 2px 6px -2px rgba(217, 136, 15, .45);
}
body.theme-dark .pg-root .pg-model-dropdown::-webkit-scrollbar-thumb {
  background: rgba(var(--mp-glow), .35);
  border-color: var(--mp-surface);
}