/* ═══════════════════════════════════════════════════════════════════════════
   AITS select — panel styling.
   Paired with assets/js/aits-select.js. Uses the --aits-* tokens, declared with
   identical values in aitoolsay-admin.css and custom.ltr/rtl.css, so one sheet
   serves the admin and the public side.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ §SELX — THE ONE SELECT-FIELD CONTRACT ═════════════════════════════════
   Every closed <select> on the site — admin and public, light and dark, LTR
   and RTL — takes its caret, its gutter and its option-popup colours from
   here, and from nowhere else. The look is the Advanced Options field on the
   AI tool pages (`.pg-root .pg-acc-body select`, assets/css/ai-advanced-
   options.css), which is the reference this contract was matched to:

     glyph      polyline 6 9 · 12 15 · 18 9, 2.6 stroke, round caps
     rest ink   #5B6779 light  /  #9A9AA4 dark      (= the reference's --ao-ink-2)
     hover ink  #3680ED light  /  #60A4F5 dark
     geometry   right 13px center · 15px
     popup      color-scheme + explicit <option> colours, so the OS-drawn list
                follows the page theme instead of the OS's

   WHY IT IS BUILT THIS WAY (do not "simplify" it back):

   1. THE IMAGE LIVES IN A CUSTOM PROPERTY. A data: URI cannot read a var()
      for its stroke, so a themed caret used to need one background-image rule
      per theme — and a rule that supplies only background-image inherits
      whatever geometry won elsewhere. Holding the whole url() in --selx-chev
      means the rule that wins the image is ALWAYS the rule that carries the
      geometry, so the worst case a future host can produce is a MISSING
      caret, never a tiled one. Same shape as aits-datepicker.css.

   2. ONE APPLIER OWNS ALL FOUR background-* LONGHANDS. `background: <colour>`
      is a SHORTHAND: it resets background-repeat to `repeat`, -position to
      `0% 0%` and -size to `auto`. On 2026-08-24 `body.admin-shell
      .form-select:focus { background:var(--surface) }` (0,3,1) out-specified
      every geometry declaration on the field, while admin-ds.css's dark
      caret (0,3,1, later in the cascade) still supplied the IMAGE — so a
      focused select in the dark admin painted ~40 chevrons tiled across the
      value, and the same field in light mode lost its caret entirely.
      Those four shorthands are now `background-color`, and the geometry is
      restated beside every image swap below so the trap cannot reopen.

   3. SCOPE IS `[data-aits-sel]` + `.form-select`, NOT BARE `select`.
      aits-select.js stamps data-aits-sel on every single-select with more
      than one option, which is the sitewide net; .form-select catches the
      Tabler-classed fields on the layouts that do not load that script
      (auth, blog, v2-plain). A bare `select` rule would put a 38px gutter on
      bespoke kit fields that never reserved one. Kits with their own caret —
      the Advanced Options field itself — out-specify this and keep it.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --selx-chev:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6779' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --selx-chev-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233680ED' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --selx-chev-up:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233680ED' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
    --selx-chev-pos:   right 13px center;
    --selx-chev-size:  15px 15px;
    --selx-gutter:     38px;
    --selx-scheme:     light;
    --selx-opt-bg:     #FFFFFF;
    --selx-opt-ink:    #1A2230;
}

/* The POSITION token is what flips, so every state rule inherits the flip
   instead of each needing an RTL twin. */
[dir="rtl"] { --selx-chev-pos: left 13px center; }

/* The theme is a body CLASS and can disagree with the OS, so the dark twin
   hangs off .theme-dark — never off prefers-color-scheme. */
body.theme-dark {
    --selx-chev:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --selx-chev-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360A4F5' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --selx-chev-up:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360A4F5' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
    --selx-scheme:     dark;
    --selx-opt-bg:     var(--dk-surface-2, #17171B);
    --selx-opt-ink:    var(--dk-text, #F4F5F7);
}

/* ── The applier ────────────────────────────────────────────────────
   `body` is in the selector for one reason: it lifts this to (0,1,2), which
   clears the handful of kit rules that style a select at (0,2,1) but declare
   no caret of their own. Nothing here sets height, font or background-COLOUR
   — these fields sit beside text inputs in 2,331 files and must keep matching
   them; only the caret, the room for it and the popup colours are claimed. */
body select[data-aits-sel],
body select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-inline-end: var(--selx-gutter, 38px);
    background-image: var(--selx-chev);
    background-repeat: no-repeat;
    background-position: var(--selx-chev-pos, right 13px center);
    background-size: var(--selx-chev-size, 15px 15px);
    /* This is what themes the OS-drawn option list. Without it a light page
       on a dark-mode machine gets a black popup, and vice versa. */
    color-scheme: var(--selx-scheme, light);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease,
                background-color .18s ease;
}

/* ── The gutter, and why it needs its own selector list ─────────────
   The caret sits 13px from the edge and is 15px wide, so it occupies 13→28px
   of the field. The room for it cannot ride on the applier above, because two
   sheets set the field's padding with a SHORTHAND at a specificity the
   applier does not reach, and a shorthand takes the whole box:

     aitoolsay-admin.css  body.admin-shell .form-control,
                          body.admin-shell .form-select{padding:9px 13px}   (0,2,1)
     custom.*.css         body:not(.admin-shell):not(.theme-dark)
                          .form-control,.form-select{padding:10px 14px}     (0,4,1)

   Both collapse the gutter to the text inset and drop the tail of a long
   option under the arrow. This list mirrors each of them and beats it by one
   element — the same shape aits-datepicker.css uses for its 40px gutter. A
   list box is excluded rather than reset afterwards: it has no caret, so it
   must never be given the room for one. (Every `size=` select in the 9,287 in
   this codebase is also `multiple`, so `:not([multiple])` covers both.)

   `.form-select-sm` is carved out for the opposite reason: it is a compact
   control on a 13px glyph and owns a 1.85rem gutter in admin-ds.css §2g. A
   38px gutter inside a `max-width:110px` per-page picker is most of the
   field. */
body.admin-shell select[data-aits-sel]:not([multiple]):not(.form-select-sm),
body.admin-shell select.form-select:not([multiple]):not(.form-select-sm),
body:not(.admin-shell) select[data-aits-sel]:not([multiple]):not(.form-select-sm),
body:not(.admin-shell) select.form-select:not([multiple]):not(.form-select-sm),
body:not(.admin-shell):not(.theme-dark) select[data-aits-sel]:not([multiple]):not(.form-select-sm),
body:not(.admin-shell):not(.theme-dark) select.form-select:not([multiple]):not(.form-select-sm) {
    padding-inline-end: var(--selx-gutter, 38px);
}

/* Chrome and Firefox on Windows/Linux honour these; macOS and Safari draw
   the list themselves and take the colour-scheme above instead. */
body select[data-aits-sel] option,
body select.form-select option {
    background-color: var(--selx-opt-bg, #fff);
    color: var(--selx-opt-ink, #1A2230);
}

/* A multi-select is a LIST BOX, not a dropdown: no caret, no gutter, and the
   pointer stays a pointer. Placed after the applier so the `[multiple]` pair
   wins its (0,1,2) tie on document order. */
body select[data-aits-sel][multiple],
body select.form-select[multiple],
body select[size]:not([size="1"]) {
    background-image: none;
    padding-inline-end: 13px;
    cursor: default;
}

@media (hover: hover) {
    body select[data-aits-sel]:hover:not(:disabled),
    body select.form-select:hover:not(:disabled) {
        border-color: var(--aits-blue-line, #CFE0FA);
        background-image: var(--selx-chev-hover);
        background-repeat: no-repeat;
        background-position: var(--selx-chev-pos, right 13px center);
        background-size: var(--selx-chev-size, 15px 15px);
    }
}

select[data-aits-sel]:focus,
select[data-aits-sel][aria-expanded="true"] {
    outline: 0;
    border-color: var(--aits-blue, #3680ED);
    box-shadow: 0 0 0 3px var(--aits-blue-tint, #EAF2FD);
}

/* The caret flips while the panel is up, so the field says which state it is
   in rather than looking identical open and closed. Geometry restated, per
   the rule at the top of this section. */
body select[data-aits-sel][aria-expanded="true"] {
    background-image: var(--selx-chev-up);
    background-repeat: no-repeat;
    background-position: var(--selx-chev-pos, right 13px center);
    background-size: var(--selx-chev-size, 15px 15px);
}

/* A disabled field is not a control: it loses the hand and the hover ink but
   keeps the caret, which is what says "this is still a select". */
body select[data-aits-sel]:disabled,
body select.form-select:disabled { cursor: not-allowed; }

/* ── The panel ──────────────────────────────────────────────────────
   Fixed and parented to <body> by the script. The z-index clears the admin's
   sticky bars without reaching the search overlay's 2147480000; it sits one
   step under the date picker so the two can never argue. */
.aitssel {
    position: fixed;
    z-index: 2147469000;
    display: none;
    box-sizing: border-box;
    min-width: 240px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #E7ECF3);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 2px 6px rgba(16, 24, 40, .06),
        0 20px 48px -14px rgba(16, 24, 40, .26);
    animation: aitssel-in .14s ease-out;
}

.aitssel * { box-sizing: border-box; }
.aitssel.is-open { display: block; }

body.theme-dark .aitssel {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 2px 6px rgba(0, 0, 0, .5),
        0 20px 48px -14px rgba(0, 0, 0, .7);
}

@keyframes aitssel-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* ── Search ─────────────────────────────────────────────────────────── */

/* The field inside the panel borrows the SAME idiom as the closed select it
   belongs to — hairline at rest, blue hairline plus a soft tint halo on focus.
   It used to swap the hairline for a bare 1px blue line, which read as an
   outlined box rather than an emphasised field, and sat oddly beside the very
   control that opened it. */
.aitssel-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    margin-bottom: 6px;
    border-radius: 9px;                 /* matches the option rows below it */
    background: var(--aits-bg-2, #F7F9FC);
    /* --aits-line-soft (#F1F1F1) on a #F7F9FC fill is all but invisible, so at
       rest the field read as bare text until you focused it. */
    box-shadow: inset 0 0 0 1px var(--aits-line, #E4EAF2);
    transition: box-shadow .18s ease, background-color .18s ease;
}

.aitssel-search:focus-within {
    background: var(--aits-card, #fff);
    box-shadow: inset 0 0 0 1px var(--aits-blue, #3680ED),
                0 0 0 3px var(--aits-blue-tint, #EAF2FD);
}

.aitssel-search[hidden] { display: none; }

.aitssel-search svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--aits-mut, #6B7686);
    transition: color .18s ease;
}

/* The glyph picks up the focus colour, so the field says it is live without
   needing a second border. */
.aitssel-search:focus-within svg { color: var(--aits-blue, #3680ED); }

.aitssel-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--aits-ink, #0B1220);
    font: inherit;
    font-size: 13.5px;
}

/* Not --aits-faint: it resolves to #999 on the public side and reads at
   2.85:1 on the focused white fill. --aits-mut clears 5.7:1. */
.aitssel-search input::placeholder { color: var(--aits-mut, #6B7686); opacity: 1; }

body.theme-dark .aitssel-search {
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* (0,3,1) — has to outrank `body.theme-dark .aitssel-search` at (0,2,1), which
   otherwise beat the light `.aitssel-search:focus-within` at (0,2,0) and left
   dark mode with no visible focus at all. */
body.theme-dark .aitssel-search:focus-within {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px var(--aits-blue, #3680ED),
                0 0 0 3px rgba(54, 128, 237, .26);
}

body.theme-dark .aitssel-search:focus-within svg { color: var(--aits-blue-light, #8CBEFA); }

/* ── The list ───────────────────────────────────────────────────────── */

.aitssel-list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--aits-line, #E7ECF3) transparent;
}

.aitssel-list::-webkit-scrollbar { width: 6px; }
.aitssel-list::-webkit-scrollbar-track { background: transparent; }
.aitssel-list::-webkit-scrollbar-thumb { background: var(--aits-line, #E7ECF3); border-radius: 4px; }
.aitssel-list::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-line, #CFE0FA); }

body.theme-dark .aitssel-list { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
body.theme-dark .aitssel-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }

.aitssel-group {
    padding: 9px 10px 5px;
    color: var(--aits-mut, #6B7686);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.aitssel .aitssel-opt {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--aits-txt, #3D4757);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    text-align: start;
    cursor: pointer;
    /* No ellipsis and no nowrap: these are company and category names an
       editor has to be able to READ before choosing one, and the native list
       this replaces never truncated them either. A long label wraps and its
       row grows. */
    white-space: normal;
    word-break: break-word;
    /* Positioning context for the selected tick, which is absolute rather than
       floated so it stays put when a long label wraps to a second line. */
    position: relative;
    transition: background-color .13s ease, color .13s ease;
}

.aitssel .aitssel-opt.is-none { color: var(--aits-mut, #6B7686); font-style: italic; }

.aitssel .aitssel-opt.is-disabled {
    color: var(--aits-faint, #98A2B3);
    cursor: not-allowed;
}

/* Keyboard cursor and pointer hover are the SAME affordance and share one
   look — two different highlights on one list is how you lose track of which
   row Enter will take. */
.aitssel .aitssel-opt.is-cursor,
.aitssel .aitssel-opt:hover:not(.is-disabled) {
    background: var(--aits-bg-2, #F1F4F9);
    color: var(--aits-ink, #0B1220);
}

body.theme-dark .aitssel .aitssel-opt.is-cursor,
body.theme-dark .aitssel .aitssel-opt:hover:not(.is-disabled) {
    background: rgba(255, 255, 255, .07);
    color: var(--dk-text,#F4F5F7);
}

/* The CHOSEN row and the keyboard cursor are different states, so they carry
   different HUES rather than different strengths of the same one: the cursor
   is neutral, the chosen row is brand. A saturated fill was the old answer,
   but the default choice is usually row one, so opening any list dropped a
   dark slab across the top of the panel. Tint + brand ink + a tick reads as
   clearly "current" while letting the list stay a list. */
.aitssel .aitssel-opt.is-on {
    background: var(--aits-blue-tint, #EAF2FD);
    color: var(--aits-blue-dark, #2060C0);
    font-weight: 680;
    /* A placeholder row ("All categories") is .is-none AND .is-on at once.
       Without this it keeps the italic that marks the empty choice and renders
       as bold italic — the one thing in the panel that looked like a mistake. */
    font-style: normal;
}

/* Room for the tick, and only where a tick is actually drawn: multi-select
   swaps it for a checkbox and blanks the ::after below. */
.aitssel .aitssel-opt.is-on:not(.is-multi) { padding-inline-end: 32px; }

.aitssel .aitssel-opt.is-on::after {
    content: '';
    position: absolute;
    inset-inline-end: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232060C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* Chosen AND under the cursor — a third, deeper step so the keyboard position
   is still readable when it lands on the row that is already selected. */
.aitssel .aitssel-opt.is-on.is-cursor,
.aitssel .aitssel-opt.is-on:hover {
    background: var(--aits-blue-tint-2, #DBE8FB);
    color: var(--aits-blue-dark, #2060C0);
}

body.theme-dark .aitssel .aitssel-opt.is-on {
    background: rgba(54, 128, 237, .22);
    color: #A8CBFB;
}

body.theme-dark .aitssel .aitssel-opt.is-on.is-cursor,
body.theme-dark .aitssel .aitssel-opt.is-on:hover { background: rgba(54, 128, 237, .30); }

body.theme-dark .aitssel .aitssel-opt.is-on::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8CBFB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.aitssel-empty {
    padding: 20px 12px;
    color: var(--aits-mut, #6B7686);
    font-size: 13px;
    text-align: center;
}

/* The panel's ring, for the option rows and the footer buttons — every focus
   stop in here EXCEPT the search field, which is handled directly below. */
.aitssel :focus-visible { outline: 2px solid var(--aits-blue, #3680ED); outline-offset: -2px; }

/* ── The search field owns NO ring of its own ──────────────────────────────
   Two broad rules reach this input and both draw a hard blue ring inside the
   wrapper's own one:

     .aitssel :focus-visible               (0,2,0) above  — 2px, offset -2px
     body.admin-shell input:focus-visible  (0,2,2) admin-premium.css — 2px, +2px

   The input's own `outline: 0` is (0,1,1) and loses to both, so the field
   painted a doubled ring: the wrapper's 1px inset border and 3px tint halo,
   with a second hard outline drawn inside it (public) or between the two
   (admin). Reported 2026-08-25 on the searchable select.

   Suppressing the inner one costs nothing under WCAG 2.4.7: the wrapper still
   shows focus in both themes — `.aitssel-search:focus-within` swaps the fill,
   paints a 1px blue inset border plus a 3px halo, and turns the magnifier
   glyph blue. That indicator is the design; this input is only its interior.

   (0,3,1) so it outranks every broad rule that can reach here, and NOT by
   source order — these sheets get reordered and split. Both `:focus` and
   `:focus-visible`, because aits-select.js focuses this field
   PROGRAMMATICALLY on open (`search.focus()`), and a programmatic focus does
   not reliably match `:focus-visible`. */
.aitssel .aitssel-search input:focus,
.aitssel .aitssel-search input:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

/* ── Phone: a bottom sheet ──────────────────────────────────────────
   A panel matched to the field's width is right on a laptop and cramped on a
   phone, where it can also land under the keyboard. The script's inline
   top/left/width are measured coordinates that mean nothing in this layout,
   so they are overridden. */
@media (max-width: 560px) {
    .aitssel {
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: none;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        animation: aitssel-up .18s ease-out;
    }

    @keyframes aitssel-up {
        from { transform: translateY(10px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }

    .aitssel-list { max-height: 46vh; }
    .aitssel .aitssel-opt { padding: 13px 12px; font-size: 14.5px; }
    .aitssel-search { padding: 10px 12px; }
    .aitssel-search input { font-size: 16px; }  /* 16px stops iOS zooming the page on focus */
}

@media (prefers-reduced-motion: reduce) {
    .aitssel { animation: none; }
    .aitssel .aitssel-opt,
    select[data-aits-sel] { transition: none; }
}


/* ══ Multi-select ═══════════════════════════════════════════════════════════
   Replaces `<select multiple size="9">` and its "Hold Ctrl / Cmd" hint. That
   interaction is impossible on touch and unforgiving on a mouse — one stray
   click clears an entire selection with no undo.

   The native select is hidden but STILL PRESENT: bound, submitted, and the
   thing whose selectedOptions Livewire reads. Only its list box is replaced.
   ═══════════════════════════════════════════════════════════════════════ */

select[data-aits-ms] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0 !important;
}

.aitsms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid var(--aits-line, #E7ECF3);
    border-radius: 10px;
    background: var(--aits-card, #fff);
    color: var(--aits-txt, #3D4757);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.aitsms-ph { color: var(--aits-faint, #98A2B3); padding: 3px 2px; }

@media (hover: hover) { .aitsms:hover { border-color: var(--aits-blue-line, #CFE0FA); } }

.aitsms:focus-visible,
.aitsms.is-open {
    outline: 0;
    border-color: var(--aits-blue, #3680ED);
    box-shadow: 0 0 0 3px var(--aits-blue-tint, #EAF2FD);
}

/* A chip carries its own remove control. Reaching the panel to undo a mistake
   you can see in front of you is a step nobody should have to take. */
.aitsms-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 5px 4px 10px;
    border-radius: 999px;
    background: var(--aits-blue-tint, #EAF2FD);
    color: var(--aits-blue-dark, #2060C0);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    /* Chips wrap rather than truncate — these are tool names and a clipped
       one cannot be checked against what you meant to pick. */
    white-space: normal;
    word-break: break-word;
}

.aitsms-x {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 17px; height: 17px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .6;
    transition: background-color .15s ease, opacity .15s ease;
}

.aitsms-x svg { width: 8px; height: 8px; }
.aitsms-x:hover { opacity: 1; background: rgba(32, 96, 192, .18); }

.aitsms-more {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--aits-bg-2, #F7F9FC);
    color: var(--aits-mut, #6B7686);
    font-size: 12px;
    font-weight: 650;
}

body.theme-dark .aitsms {
    background: rgba(255, 255, 255, .04);
    border-color: var(--dk-line,rgba(255,255,255,.10));
}
body.theme-dark .aitsms-chip { background: rgba(54, 128, 237, .2); color: var(--aits-blue-light, #8CBEFA); }
body.theme-dark .aitsms-x:hover { background: rgba(140, 190, 250, .22); }
body.theme-dark .aitsms-more { background: rgba(255, 255, 255, .06); }

/* ── Multi rows in the panel ────────────────────────────────────────
   A checkbox, not a fill. In single mode the fill means "this is the current
   value" — reusing it for "one of several picked" would make two different
   ideas look identical. */
.aitssel .aitssel-opt.is-multi {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aitssel .aitssel-opt.is-multi::before {
    content: '';
    flex: 0 0 auto;
    width: 17px; height: 17px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1.5px var(--aits-line-strong, #D6DEE9);
    background: transparent no-repeat center / 11px 11px;
    transition: box-shadow .14s ease, background-color .14s ease;
}

.aitssel .aitssel-opt.is-multi.is-on {
    background: transparent;
    color: var(--aits-blue-dark, #2060C0);
    font-weight: 680;
}

.aitssel .aitssel-opt.is-multi.is-on::before {
    box-shadow: inset 0 0 0 1.5px transparent;
    background-color: var(--aits-blue-dark, #2060C0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.aitssel .aitssel-opt.is-multi.is-on::after { content: none; }

@media (hover: hover) {
    .aitssel .aitssel-opt.is-multi.is-on:hover {
        background: var(--aits-blue-tint, #EAF2FD);
        color: var(--aits-blue-dark, #2060C0);
    }
    body.theme-dark .aitssel .aitssel-opt.is-multi.is-on:hover { background: rgba(54, 128, 237, .2); }
}

body.theme-dark .aitssel .aitssel-opt.is-multi.is-on { color: var(--aits-blue-light, #8CBEFA); }

/* ── Panel footer (multi only) ──────────────────────────────────────── */

.aitssel-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--aits-line, #E7ECF3);
}

.aitssel-foot[hidden] { display: none; }

.aitssel-count {
    flex: 1 1 auto;
    color: var(--aits-mut, #6B7686);
    font-size: 12px;
    font-weight: 650;
}

.aitssel .aitssel-ghost {
    padding: 6px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--aits-mut, #6B7686);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.aitssel .aitssel-done {
    padding: 7px 16px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #357FEC 0%, #2B6BCC 30%, #1B4E9C 100%);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 5px 14px -5px rgba(53, 127, 236, .5);
    transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
    .aitssel .aitssel-ghost:hover { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); }
    body.theme-dark .aitssel .aitssel-ghost:hover { background: rgba(54, 128, 237, .2); color: var(--aits-blue-light, #8CBEFA); }
    .aitssel .aitssel-done:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -5px rgba(53, 127, 236, .6); }
}

.aitssel .aitssel-done:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    .aitsms, .aitsms-x, .aitssel .aitssel-done, .aitssel .aitssel-opt.is-multi::before { transition: none; }
    .aitssel .aitssel-done:hover, .aitssel .aitssel-done:active { transform: none; }
}