/* ══════════════════════════════════════════════════════════════════════════
   AIToolsay — In-App Notifications  (public surfaces)
   ──────────────────────────────────────────────────────────────────────────
   Three surfaces share this sheet:
     • the header bell dropdown     (.aitsn-row inside .aitshd-notif-menu)
     • the full centre              (/notifications        → .aitsn-page)
     • the preference centre        (/notifications/prefs… → .aitsn-pref)

   TOKENS
   ──────
   Colour comes from the --aits-* set declared in custom.ltr.css /
   custom.rtl.css under `body:not(.admin-shell)`, with a dark twin under
   `body:not(.admin-shell).theme-dark`.

   THE ONE TRAP THIS SHEET EXISTS TO AVOID
   ───────────────────────────────────────
   `--aits-blue-dark` (#2060C0) is NOT redefined for dark mode. Any
   `color: var(--aits-blue-dark)` sitting on a dark surface therefore renders
   navy-on-near-black and the label disappears. Every brand-coloured *label*
   below reads --aitsn-brand-ink instead, which IS declared for both themes a
   few lines down. Same story for the semantic ink pairs (green/amber/red/
   violet), none of which have dark twins either.

   The --aitsn-* namespace is safe here ONLY because every name is declared
   below for both themes. Never reference an --aitsn-* token that this block
   does not define: an undefined var() falls through to its literal fallback,
   which looks right in light mode and breaks in dark.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 0a · FontAwesome 6 → 5 name shim ══════════════════════════════════════
   The server ships FontAwesome 5; these surfaces are written against FA6
   names. assets/css/fa6-shim.css already maps them, but it is only linked by
   components/admin/headerAssets.blade.php — the PUBLIC layouts never load it.
   Without the rules below the search icon, the clear ✕, archive, restore and
   half the type icons render as empty glyph boxes: the control is there, its
   symbol simply isn't.

   Additive only. Every selector here is an FA6-only name that has no rule in
   fontawesome.min.css, so nothing existing is overridden. Keep in sync with
   the corresponding block in fa6-shim.css. */
.fa-magnifying-glass:before    { content: "\f002"; } /* search */
.fa-xmark:before               { content: "\f00d"; } /* times */
.fa-circle-check:before        { content: "\f058"; } /* check-circle */
.fa-circle-exclamation:before  { content: "\f06a"; } /* exclamation-circle */
.fa-circle-info:before         { content: "\f05a"; } /* info-circle */
.fa-triangle-exclamation:before{ content: "\f071"; } /* exclamation-triangle */
.fa-box-archive:before         { content: "\f187"; } /* archive */
.fa-rotate-left:before         { content: "\f0e2"; } /* undo */
.fa-floppy-disk:before         { content: "\f0c7"; } /* save */
.fa-gauge-high:before          { content: "\f3fd"; } /* tachometer-alt */
.fa-shield-halved:before       { content: "\f3ed"; } /* shield-alt */
.fa-screwdriver-wrench:before  { content: "\f7d9"; } /* tools */
.fa-wand-magic-sparkles:before { content: "\f0d0"; } /* magic */
.fa-sparkles:before            { content: "\f0d0"; } /* magic (Pro-only in FA6) */

/* ══ 0 · Local tokens ══════════════════════════════════════════════════════ */

body:not(.admin-shell) {
    /* Brand text that stays legible on a tinted surface, in both themes. */
    --aitsn-brand-ink: #2060C0;
    --aitsn-brand-ink-hi: #1B54AC;

    /* Semantic inks with real dark twins (the --aits-*-ink set has none). */
    --aitsn-green-ink: #087F5B;
    --aitsn-amber-ink: #B45309;
    --aitsn-red-ink: #B71C1C;
    --aitsn-violet-ink: #4C2FBE;

    /* Elevation. Deliberately softer than --sh-* so a list of cards reads as
       one surface rather than a stack of floating tiles. */
    --aitsn-sh-1: 0 1px 2px rgba(15, 23, 42, .05);
    --aitsn-sh-2: 0 4px 12px -4px rgba(15, 23, 42, .10), 0 2px 4px -2px rgba(15, 23, 42, .06);
    --aitsn-sh-3: 0 18px 40px -18px rgba(15, 23, 42, .28);
    --aitsn-sh-brand: 0 10px 24px -10px rgba(54, 128, 237, .55);

    /* Glass used by the sticky toolbar. */
    --aitsn-glass: rgba(255, 255, 255, .82);

    /* Hero. A single place to retune the whole banner. */
    --aitsn-hero-from: #2060C0;
    --aitsn-hero-mid: #3680ED;
    --aitsn-hero-to: #1E4FB8;

    --aitsn-ease: cubic-bezier(.22, 1, .36, 1);
}

body:not(.admin-shell).theme-dark {
    --aitsn-brand-ink: #8DBEFF;
    --aitsn-brand-ink-hi: #B4D5FF;

    --aitsn-green-ink: #4ADE9E;
    --aitsn-amber-ink: #F0B44E;
    --aitsn-red-ink: #FF8A8A;
    --aitsn-violet-ink: #B79DFF;

    --aitsn-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --aitsn-sh-2: 0 4px 14px -4px rgba(0, 0, 0, .6);
    --aitsn-sh-3: 0 20px 46px -20px rgba(0, 0, 0, .8);
    --aitsn-sh-brand: 0 10px 26px -12px rgba(54, 128, 237, .7);

    --aitsn-glass: rgba(23, 23, 26, .82);

    --aitsn-hero-from: #102E63;
    --aitsn-hero-mid: #17417F;
    --aitsn-hero-to: #0A1E44;
}

/* ── Per-accent tone triplet ───────────────────────────────────────────────
   One [data-accent] attribute drives the icon chip, the type pill and the
   left edge together, so a new accent is one rule, not four. */
.aitsn-row,
.aitsn-card {
    --tone: var(--aits-blue);
    --tone-soft: var(--aits-blue-tint-2);
    --tone-ink: var(--aitsn-brand-ink);
}
.aitsn-row[data-accent="green"],  .aitsn-card[data-accent="green"]  { --tone: var(--aits-green);  --tone-soft: var(--aits-green-soft);  --tone-ink: var(--aitsn-green-ink); }
.aitsn-row[data-accent="amber"],  .aitsn-card[data-accent="amber"]  { --tone: var(--aits-amber);  --tone-soft: var(--aits-amber-soft);  --tone-ink: var(--aitsn-amber-ink); }
.aitsn-row[data-accent="red"],    .aitsn-card[data-accent="red"]    { --tone: var(--aits-red);    --tone-soft: var(--aits-red-soft);    --tone-ink: var(--aitsn-red-ink); }
.aitsn-row[data-accent="violet"], .aitsn-card[data-accent="violet"] { --tone: var(--aits-violet); --tone-soft: var(--aits-violet-soft); --tone-ink: var(--aitsn-violet-ink); }

/* The *-soft tints are opaque pastels tuned for light mode; on dark they read
   as milky blocks. Drop them to a low-alpha wash of the tone instead. */
body:not(.admin-shell).theme-dark .aitsn-row,
body:not(.admin-shell).theme-dark .aitsn-card { --tone-soft: color-mix(in srgb, var(--tone) 16%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    body:not(.admin-shell).theme-dark .aitsn-row,
    body:not(.admin-shell).theme-dark .aitsn-card { --tone-soft: rgba(255, 255, 255, .07); }
}

/* ══ 1 · Bell dropdown ═════════════════════════════════════════════════════
   The shell (.aitshd-notif-menu / -head / -list / -foot) belongs to
   navbar.blade.php; this sheet loads after it, so the handful of overrides
   below win on equal specificity. Only the row internals originate here. */

.aitsn-pollhook { position: absolute; width: 0; height: 0; overflow: hidden; }

.aitsn-menu {
    width: min(400px, calc(100vw - 24px));
    padding: 6px;
    border-radius: 20px;
    box-shadow: var(--aitsn-sh-3);
}
.aitsn-list {
    max-height: min(60vh, 460px);
    padding: 6px 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.aitsn-list.is-busy { opacity: .5; pointer-events: none; }

/* The header's own footer link paints --aits-blue-dark on a blue tint: on a
   dark background that is navy-on-near-black, i.e. an invisible "View all
   notifications". Repaint it as a proper branded button. */
.aitshd-notif-foot { padding: 8px; }
.aitshd-notif-menu .aitshd-notif-foot a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px; border-radius: 12px;
    /* --aits-blue-dark, not --aits-blue: white on #3680ED is 3.84:1, under
       the 4.5:1 AA floor at this 13px size. #2060C0 clears it (5.94:1) and
       has no dark twin, so the fill holds in both themes — same fix as the
       admin .npv-frame-foot twin. */
    background: var(--aits-blue-dark);
    color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: -.005em;
    text-decoration: none;
    box-shadow: var(--aitsn-sh-brand);
    transition: background-color .16s var(--aitsn-ease), transform .16s var(--aitsn-ease);
}
/* Hover steps deeper still. #1B54AC matches light-mode --aitsn-brand-ink-hi
   but must stay a literal: that token flips pale for dark mode, and this
   fill carries a white label in both themes (7.2:1). The .aitshd prefix is
   load-bearing: the shell's `body.theme-dark .aitshd a:hover, …a:focus`
   (0,3,2) otherwise repaints the hovered/focused label pale blue on this
   deep fill. */
.aitshd .aitshd-notif-menu .aitshd-notif-foot a:hover { background: #1B54AC; color: #fff; transform: translateY(-1px); }
.aitshd .aitshd-notif-menu .aitshd-notif-foot a:focus { color: #fff; }
.aitshd-notif-menu .aitshd-notif-foot a:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }

/* Same fix for the head's "Mark all read" link. */
.aitshd-notif-menu .aitshd-notif-head a {
    padding: 4px 9px; border-radius: 999px;
    color: var(--aitsn-brand-ink); text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}
.aitshd-notif-menu .aitshd-notif-head a:hover { background: var(--aits-blue-tint-2); color: var(--aitsn-brand-ink-hi); }

.aitsn-badge { animation: aitsn-pop .28s var(--aitsn-ease); }
@keyframes aitsn-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.aitsn-row {
    position: relative;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 12px 12px 15px;
    border-radius: 14px;
    transition: background-color .16s ease;
}
.aitsn-row:hover { background: var(--aits-surface-2); }
.aitsn-row + .aitsn-row { margin-top: 2px; }

/* Unread edge: an inset, fully-rounded bar — a flush left border pokes
   through the row's 14px corner radius. */
.aitsn-row::before {
    content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px;
    width: 3px; border-radius: 999px; background: var(--tone);
    transition: opacity .16s ease;
}
.aitsn-row.is-read::before { opacity: 0; }

.aitsn-ico {
    flex: none;
    width: 36px; height: 36px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tone-soft); color: var(--tone-ink);
    font-size: 14px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
    transition: transform .18s var(--aitsn-ease);
}
.aitsn-row:hover .aitsn-ico { transform: scale(1.06); }
.aitsn-row.is-read .aitsn-ico { opacity: .72; }

.aitsn-body { flex: 1; min-width: 0; }

.aitsn-title {
    font-size: 13.5px; font-weight: 700; line-height: 1.35;
    color: var(--aits-ink); margin: 0 0 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aitsn-row.is-read .aitsn-title { font-weight: 600; color: var(--aits-ink-soft); }

.aitsn-text {
    font-size: 12.5px; line-height: 1.5; color: var(--aits-mut); margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.aitsn-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    font-size: 11.5px; color: var(--aits-faint);
}
.aitsn-type { font-weight: 700; color: var(--tone-ink); }

.aitsn-prio {
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    background: var(--aits-amber-soft); color: var(--aitsn-amber-ink);
}
.aitsn-prio.is-critical { background: var(--aits-red-soft); color: var(--aitsn-red-ink); }
body:not(.admin-shell).theme-dark .aitsn-prio { background: rgba(217, 119, 6, .18); }
body:not(.admin-shell).theme-dark .aitsn-prio.is-critical { background: rgba(224, 49, 49, .18); }

.aitsn-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 7px 13px;
    border-radius: 999px;
    /* --aits-blue-dark, not --aits-blue: white on #3680ED is 3.84:1, under
       the 4.5:1 AA floor at this 12px size — same constraint as the
       .aitshd-notif-foot button above. The fill has no dark twin and holds
       in both themes; hover steps to the #1B54AC literal (7.2:1). */
    background: var(--aits-blue-dark); color: #fff !important;
    font-size: 12px; font-weight: 700; text-decoration: none !important;
    box-shadow: var(--aitsn-sh-brand);
    transition: background-color .16s ease, transform .16s var(--aitsn-ease), box-shadow .16s ease;
}
.aitsn-cta:hover { background: #1B54AC; color: #fff !important; transform: translateY(-1px); }
.aitsn-cta:active { transform: translateY(0); }
.aitsn-cta:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }
.aitsn-cta i { font-size: 10px; transition: transform .16s var(--aitsn-ease); }
.aitsn-cta:hover i { transform: translateX(3px); }

/* Row actions dim rather than disappear. A control that is invisible until
   hover is undiscoverable on desktop and unreachable on touch — this keeps
   the affordance on screen and just lowers its contrast until wanted. */
.aitsn-rowacts {
    display: flex; flex-direction: column; gap: 4px; flex: none;
    opacity: .45; transition: opacity .16s ease;
}
.aitsn-row:hover .aitsn-rowacts,
.aitsn-row:focus-within .aitsn-rowacts { opacity: 1; }
@media (hover: none) { .aitsn-rowacts { opacity: 1; } }

.aitsn-rowacts button {
    width: 27px; height: 27px; border-radius: 9px;
    border: 1px solid var(--aits-line); background: var(--aits-card);
    color: var(--aits-mut); font-size: 11px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background-color .14s, color .14s, border-color .14s, transform .14s var(--aitsn-ease);
}
.aitsn-rowacts button:hover {
    background: var(--aits-blue-tint-2);
    color: var(--aitsn-brand-ink);
    border-color: var(--aits-blue-line);
    transform: translateY(-1px);
}
.aitsn-rowacts button:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }

.aitsn-unread-dot {
    position: absolute; top: 14px; right: 10px;
    width: 7px; height: 7px; border-radius: 999px; background: var(--tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent);
    transition: opacity .16s ease;
}
.aitsn-row:hover .aitsn-unread-dot,
.aitsn-row:focus-within .aitsn-unread-dot { opacity: 0; }

.aitsn-empty-t { font-weight: 700; color: var(--aits-ink); margin-bottom: 3px; }

/* ══ 2 · Full centre page ══════════════════════════════════════════════════ */

.aitsn-page { max-width: 1080px; margin: 0 auto; padding: 28px 16px 72px; }

/* ── Hero ── */
.aitsn-hero {
    position: relative; overflow: hidden;
    border-radius: 24px; padding: 28px 30px;
    background:
        radial-gradient(120% 140% at 88% -20%, rgba(255, 255, 255, .20), transparent 58%),
        linear-gradient(135deg, var(--aitsn-hero-from), var(--aitsn-hero-mid) 58%, var(--aitsn-hero-to));
    color: #fff;
    margin-bottom: 22px;
    box-shadow: var(--aitsn-sh-3);
}
/* A faint grid keeps a big flat gradient from reading as a plastic block. */
.aitsn-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(120% 120% at 20% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(120% 120% at 20% 0%, #000 20%, transparent 75%);
}
.aitsn-hero::after {
    content: ""; position: absolute; right: -70px; top: -90px;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 68%);
    pointer-events: none;
}
.aitsn-hero-row { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.aitsn-hero-ico {
    width: 56px; height: 56px; border-radius: 18px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); font-size: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
    backdrop-filter: blur(6px);
}
.aitsn-hero-copy { flex: 1; min-width: 220px; }
.aitsn-hero h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 5px; color: #fff; }
.aitsn-hero p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .85); }

.aitsn-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.aitsn-hero-stat {
    min-width: 92px; padding: 11px 15px; border-radius: 15px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17);
    transition: background-color .18s ease, transform .18s var(--aitsn-ease);
}
.aitsn-hero-stat:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.aitsn-hero-stat b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.aitsn-hero-stat span { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .82); }

.aitsn-hero-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 17px; border-radius: 999px; border: 0; cursor: pointer;
    background: #fff; color: var(--aits-blue-dark) !important;
    font-size: 13px; font-weight: 700; text-decoration: none !important;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55);
    transition: transform .18s var(--aitsn-ease), box-shadow .18s ease;
}
.aitsn-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .55); color: var(--aits-blue-dark) !important; }
.aitsn-hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Panel ── */
.aitsn-panel {
    background: var(--aits-card);
    border: 1px solid var(--aits-line);
    border-radius: 22px;
    box-shadow: var(--aitsn-sh-2);
    overflow: hidden;
}

/* ── Tab chips ──
   Horizontally scrollable on a phone rather than wrapping to three rows. */
.aitsn-chipbar {
    display: flex; gap: 8px;
    padding: 16px 18px 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.aitsn-chipbar::-webkit-scrollbar { display: none; }

.aitsn-chip {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 9px 15px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--aits-line);
    background: var(--aits-surface-2); color: var(--aits-ink-soft);
    font-size: 13px; font-weight: 600; white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color .16s, color .16s, border-color .16s, transform .16s var(--aitsn-ease);
}
.aitsn-chip i { font-size: 11.5px; opacity: .75; }
.aitsn-chip:hover {
    background: var(--aits-blue-tint-2);
    border-color: var(--aits-blue-line);
    color: var(--aitsn-brand-ink);
    transform: translateY(-1px);
}
.aitsn-chip:hover i { opacity: 1; }
.aitsn-chip .n {
    font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
    background: var(--aits-line); color: var(--aits-ink-soft);
    transition: background-color .16s, color .16s;
}
.aitsn-chip:hover .n { background: var(--aits-blue-line); color: var(--aitsn-brand-ink); }
/* Active state repeats :hover/:focus. A single-class rule elsewhere in the
   cascade otherwise wins on hover and flips the label to dark-on-blue.
   --aits-blue-dark, not --aits-blue: white on #3680ED is 3.84:1, under the
   4.5:1 AA floor at this 13px size; #2060C0 clears it (5.94:1) and has no
   dark twin, so the fill holds in both themes. */
.aitsn-chip.is-active,
.aitsn-chip.is-active:hover,
.aitsn-chip.is-active:focus {
    background: var(--aits-blue-dark); border-color: var(--aits-blue-dark); color: #fff;
    box-shadow: var(--aitsn-sh-brand);
}
.aitsn-chip.is-active i { opacity: 1; }
.aitsn-chip.is-active .n,
.aitsn-chip.is-active:hover .n { background: rgba(255, 255, 255, .26); color: #fff; }
.aitsn-chip:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }

/* ── Toolbar ── */
.aitsn-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    padding: 0 18px 16px;
    border-bottom: 1px solid var(--aits-line);
}
.aitsn-search { position: relative; flex: 1 1 260px; min-width: 0; }
.aitsn-search i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--aits-faint); font-size: 13px; pointer-events: none;
    transition: color .16s ease;
}
.aitsn-search:focus-within i { color: var(--aits-blue); }
.aitsn-search input {
    width: 100%; padding: 10px 14px 10px 36px;
    border-radius: 12px; border: 1px solid var(--aits-line);
    background: var(--aits-surface-2); color: var(--aits-ink);
    font-size: 13.5px; font-family: inherit;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.aitsn-search input::placeholder { color: var(--aits-faint); }
.aitsn-search input:hover { border-color: var(--aits-line-strong); }
.aitsn-search input:focus {
    outline: 0;
    background: var(--aits-card);
    border-color: var(--aits-blue);
    box-shadow: 0 0 0 3px var(--aits-focus);
}

/* Native selects: the arrow is painted by hand so the control matches the
   inputs in both themes (a UA-drawn arrow stays black on dark). */
.aitsn-select {
    -webkit-appearance: none; appearance: none;
    padding: 10px 32px 10px 13px; border-radius: 12px;
    border: 1px solid var(--aits-line);
    background-color: var(--aits-surface-2); color: var(--aits-ink);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-size: 13px; font-family: inherit; font-weight: 600;
    max-width: 190px; cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.aitsn-select:hover { border-color: var(--aits-blue-line); }
.aitsn-select:focus { outline: 0; border-color: var(--aits-blue); box-shadow: 0 0 0 3px var(--aits-focus); }
/* Option lists are painted by the OS — force a readable pair on dark. */
body:not(.admin-shell).theme-dark .aitsn-select option { background: #17171A; color: #F5F5F6; }
[dir="rtl"] .aitsn-select { padding: 10px 13px 10px 32px; background-position: left 10px center; }

.aitsn-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 15px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--aits-line);
    background: var(--aits-surface-2); color: var(--aits-ink-soft);
    font-size: 13px; font-weight: 600; font-family: inherit;
    text-decoration: none !important; white-space: nowrap;
    transition: background-color .16s, color .16s, border-color .16s, transform .16s var(--aitsn-ease);
}
.aitsn-btn:hover {
    background: var(--aits-blue-tint-2);
    color: var(--aitsn-brand-ink);
    border-color: var(--aits-blue-line);
    transform: translateY(-1px);
}
.aitsn-btn:active { transform: translateY(0); }
.aitsn-btn.is-primary {
    /* White at 13px needs 4.5:1 — --aits-blue misses (3.84:1), the deep
       fill clears it and holds in both themes; hover takes the #1B54AC
       literal (the matching token flips pale in dark mode). */
    background: var(--aits-blue-dark); border-color: var(--aits-blue-dark); color: #fff;
    box-shadow: var(--aitsn-sh-brand);
}
.aitsn-btn.is-primary:hover { background: #1B54AC; border-color: #1B54AC; color: #fff; }
.aitsn-btn:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }
.aitsn-spacer { flex: 1 1 auto; }

/* ── Bulk bar ── */
.aitsn-bulk {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--aits-blue-tint-2);
    border-bottom: 1px solid var(--aits-blue-line);
    font-size: 13px; color: var(--aitsn-brand-ink); font-weight: 700;
    animation: aitsn-slide .22s var(--aitsn-ease);
}
@keyframes aitsn-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.aitsn-bulk .aitsn-btn { background: var(--aits-card); border-color: var(--aits-blue-line); }

/* ── Cards ── */
.aitsn-cards { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.aitsn-cards.opacity-50 { opacity: .5; transition: opacity .15s ease; }

.aitsn-card {
    position: relative;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px 16px 22px;
    border-radius: 18px;
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s var(--aitsn-ease);
}
.aitsn-card:hover {
    background: var(--aits-card);
    border-color: var(--aits-line);
    box-shadow: var(--aitsn-sh-2);
    transform: translateY(-2px);
}
.aitsn-card.is-unread { background: var(--tone-soft); }
.aitsn-card.is-unread:hover {
    background: var(--tone-soft);
    border-color: color-mix(in srgb, var(--tone) 32%, transparent);
}
/* Accent rail — grows to full height on hover instead of appearing/vanishing. */
.aitsn-card::before {
    content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 999px; background: var(--tone);
    opacity: 0;
    transition: height .22s var(--aitsn-ease), opacity .18s ease;
}
.aitsn-card.is-unread::before { height: calc(100% - 34px); opacity: 1; }
.aitsn-card:hover::before { height: calc(100% - 26px); opacity: 1; }

.aitsn-card-chk {
    flex: none; margin-top: 13px; width: 17px; height: 17px;
    cursor: pointer; accent-color: var(--aits-blue);
}
.aitsn-card-chk:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }

.aitsn-card-ico {
    flex: none; width: 46px; height: 46px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tone-soft); color: var(--tone-ink); font-size: 17px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent);
    transition: transform .2s var(--aitsn-ease);
}
.aitsn-card:hover .aitsn-card-ico { transform: scale(1.05) rotate(-3deg); }

.aitsn-card-body { flex: 1; min-width: 0; }
.aitsn-card-top { display: flex; align-items: flex-start; gap: 10px; }

.aitsn-card-title {
    font-size: 15.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
    color: var(--aits-ink); margin: 0 0 5px; flex: 1; min-width: 0;
}
.aitsn-card.is-read .aitsn-card-title { font-weight: 600; color: var(--aits-ink-soft); }

.aitsn-card-text { font-size: 13.5px; line-height: 1.6; color: var(--aits-txt); margin: 0 0 10px; }

.aitsn-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 11.5px; color: var(--aits-faint); }
.aitsn-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--tone-soft); color: var(--tone-ink);
    font-size: 11px; font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent);
}
.aitsn-tag.is-neutral {
    background: var(--aits-surface-3); color: var(--aits-mut);
    box-shadow: inset 0 0 0 1px var(--aits-line);
}
.aitsn-pinflag { color: var(--aitsn-amber-ink); font-weight: 700; }

.aitsn-card-media {
    margin: 0 0 12px; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--aits-line); max-width: 440px;
}
.aitsn-card-media img { display: block; width: 100%; height: auto; transition: transform .3s var(--aitsn-ease); }
.aitsn-card:hover .aitsn-card-media img { transform: scale(1.02); }

/* Same contract as the bell: dimmed, never hidden. */
.aitsn-card-acts {
    display: flex; flex-direction: column; gap: 5px; flex: none;
    opacity: .55; transition: opacity .16s ease;
}
.aitsn-card:hover .aitsn-card-acts,
.aitsn-card:focus-within .aitsn-card-acts { opacity: 1; }
@media (hover: none) { .aitsn-card-acts { opacity: 1; } }

.aitsn-iconbtn {
    width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid var(--aits-line); background: var(--aits-card);
    color: var(--aits-mut); font-size: 12px; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .14s, color .14s, border-color .14s, transform .14s var(--aitsn-ease);
}
.aitsn-iconbtn:hover {
    background: var(--aits-blue-tint-2);
    color: var(--aitsn-brand-ink);
    border-color: var(--aits-blue-line);
    transform: translateY(-1px);
}
.aitsn-iconbtn.is-on {
    background: var(--aits-amber-soft); color: var(--aitsn-amber-ink);
    border-color: color-mix(in srgb, var(--aits-amber) 45%, transparent);
}
body:not(.admin-shell).theme-dark .aitsn-iconbtn.is-on { background: rgba(217, 119, 6, .18); }
.aitsn-iconbtn:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 2px; }

/* ── Empty + pagination ── */
.aitsn-empty { padding: 64px 24px; text-align: center; color: var(--aits-mut); }
.aitsn-empty .art {
    width: 80px; height: 80px; border-radius: 24px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--aits-blue-tint-2); color: var(--aits-blue); font-size: 30px;
    box-shadow: inset 0 0 0 1px var(--aits-blue-line);
}
.aitsn-empty .t { font-size: 17px; font-weight: 700; color: var(--aits-ink); margin-bottom: 6px; letter-spacing: -.015em; }
.aitsn-empty .s { font-size: 13.5px; line-height: 1.6; max-width: 400px; margin: 0 auto; }

.aitsn-pager { padding: 14px 18px; border-top: 1px solid var(--aits-line); }
.aitsn-pager .pagination { margin: 0; justify-content: center; flex-wrap: wrap; gap: 4px; }
.aitsn-pager .page-link {
    border: 1px solid var(--aits-line); border-radius: 10px;
    background: var(--aits-surface-2); color: var(--aits-ink-soft);
    font-size: 13px; font-weight: 600; padding: 7px 12px;
    transition: background-color .14s, color .14s, border-color .14s;
}
.aitsn-pager .page-link:hover { background: var(--aits-blue-tint-2); color: var(--aitsn-brand-ink); border-color: var(--aits-blue-line); }
/* Deep fill, not --aits-blue: white at this 13px size needs 4.5:1 AA. */
.aitsn-pager .page-item.active .page-link { background: var(--aits-blue-dark); border-color: var(--aits-blue-dark); color: #fff; }
/* custom.ltr/rtl.css repaint active pagination with --ez-red (= --aits-blue,
   3.84:1 under white) in BOTH themes, from (0,6,1) selectors that silently
   beat the rule above. The doubled class lifts this to (0,7,1) so the AA
   fill wins in both themes regardless of sheet order. */
body:not(.admin-shell) .aitsn-pager.aitsn-pager .pagination .page-item.active .page-link { background: var(--aits-blue-dark); border-color: var(--aits-blue-dark); color: #fff; }
.aitsn-pager .page-item.disabled .page-link { opacity: .45; }

/* ══ 3 · Preference centre ═════════════════════════════════════════════════
   Reached from the link in every notification. Signed-URL page, so a visitor
   may land here signed out — it has to look right on its own. */

.aitsn-pref { max-width: 720px; margin: 0 auto; padding: 32px 16px 72px; }

.aitsn-pref-hero {
    position: relative; overflow: hidden;
    padding: 30px 30px 26px;
    background:
        radial-gradient(110% 130% at 88% -25%, rgba(54, 128, 237, .16), transparent 60%),
        linear-gradient(135deg, var(--aits-blue-tint-2), var(--aits-card) 70%);
    border: 1px solid var(--aits-line);
    border-radius: 24px;
    box-shadow: var(--aitsn-sh-2);
    margin-bottom: 18px;
}
.aitsn-pref-hero .ico {
    width: 58px; height: 58px; border-radius: 18px; margin-bottom: 15px;
    display: grid; place-items: center; font-size: 22px; color: #fff;
    background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
    box-shadow: var(--aitsn-sh-brand);
}
.aitsn-pref-hero h1 { margin: 0 0 6px; font-size: clamp(21px, 3vw, 25px); font-weight: 800; letter-spacing: -.025em; color: var(--aits-ink); }
.aitsn-pref-hero p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--aits-mut); max-width: 54ch; }

.aitsn-pref-flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: 14px; margin-bottom: 16px;
    font-size: 13.5px; font-weight: 600; line-height: 1.5;
    animation: aitsn-slide .22s var(--aitsn-ease);
}
.aitsn-pref-flash.ok {
    background: var(--aits-green-soft); color: var(--aitsn-green-ink);
    border: 1px solid color-mix(in srgb, var(--aits-green) 32%, transparent);
}
.aitsn-pref-flash.err {
    background: var(--aits-red-soft); color: var(--aitsn-red-ink);
    border: 1px solid color-mix(in srgb, var(--aits-red) 32%, transparent);
}
body:not(.admin-shell).theme-dark .aitsn-pref-flash.ok { background: rgba(12, 166, 120, .14); }
body:not(.admin-shell).theme-dark .aitsn-pref-flash.err { background: rgba(224, 49, 49, .14); }

.aitsn-pref-card {
    padding: 24px; margin-bottom: 16px;
    background: var(--aits-card);
    border: 1px solid var(--aits-line);
    border-radius: 20px;
    box-shadow: var(--aitsn-sh-1);
}
.aitsn-pref-card h2 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 6px; font-size: 15.5px; font-weight: 800;
    letter-spacing: -.015em; color: var(--aits-ink);
}
.aitsn-pref-card h2 i { color: var(--aits-blue); font-size: 14px; }
.aitsn-pref-card .hint { margin: 0 0 16px; color: var(--aits-mut); font-size: 12.5px; line-height: 1.6; }

/* Category checklist */
.aitsn-pref-cats { display: flex; flex-direction: column; gap: 7px; }
.aitsn-pref-cats label {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px; border-radius: 14px;
    background: var(--aits-surface-2);
    border: 1px solid var(--aits-line);
    cursor: pointer;
    transition: background-color .16s, border-color .16s, transform .16s var(--aitsn-ease);
}
.aitsn-pref-cats label:hover {
    border-color: var(--aits-blue-line);
    background: var(--aits-blue-tint-2);
    transform: translateX(2px);
}
/* .is-on is rendered server-side by Livewire; :has() is the instant-feedback
   twin for browsers that support it. Keeping both means the selected state
   still shows where :has() is unavailable. */
.aitsn-pref-cats label.is-on,
.aitsn-pref-cats label:has(input:checked) {
    background: var(--aits-blue-tint-2);
    border-color: var(--aits-blue-line);
    box-shadow: inset 3px 0 0 var(--aits-blue);
}
.aitsn-pref-cats label:focus-within { outline: 2px solid var(--aits-focus); outline-offset: 2px; }
.aitsn-pref-cats input { width: 18px; height: 18px; accent-color: var(--aits-blue); cursor: pointer; flex: none; }
.aitsn-pref-cats .n { flex: 1; min-width: 0; }
.aitsn-pref-cats .n strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--aits-ink); letter-spacing: -.005em; }
.aitsn-pref-cats .n span { display: block; font-size: 12px; line-height: 1.5; color: var(--aits-mut); margin-top: 2px; }

/* Frequency segmented control */
.aitsn-pref-freq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.aitsn-pref-freq label {
    position: relative;
    padding: 14px 10px; border-radius: 14px; cursor: pointer; text-align: center;
    background: var(--aits-surface-2);
    border: 1px solid var(--aits-line);
    color: var(--aits-ink-soft);
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
    transition: background-color .16s, border-color .16s, color .16s, transform .16s var(--aitsn-ease), box-shadow .16s;
}
.aitsn-pref-freq label:hover {
    border-color: var(--aits-blue-line);
    background: var(--aits-blue-tint-2);
    color: var(--aitsn-brand-ink);
    transform: translateY(-2px);
}
.aitsn-pref-freq label.is-on,
.aitsn-pref-freq label:has(input:checked) {
    background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
    color: #fff; border-color: transparent;
    box-shadow: var(--aitsn-sh-brand);
}
.aitsn-pref-freq label:focus-within { outline: 2px solid var(--aits-focus); outline-offset: 2px; }
/* Visually-hidden, not display:none — a display:none radio leaves the group
   unreachable by keyboard and invisible to a screen reader. */
.aitsn-pref-freq input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.aitsn-pref-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aitsn-pref-field > label {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: -.005em;
    color: var(--aits-ink); margin-bottom: 7px;
}
.aitsn-pref-field select,
.aitsn-pref-field input[type="number"] {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--aits-line); border-radius: 12px;
    background: var(--aits-surface-2); color: var(--aits-ink);
    font-size: 13.5px; font-weight: 500; font-family: inherit;
    transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.aitsn-pref-field select {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
[dir="rtl"] .aitsn-pref-field select { padding-right: 13px; padding-left: 34px; background-position: left 11px center; }
body:not(.admin-shell).theme-dark .aitsn-pref-field select option { background: #17171A; color: #F5F5F6; }
.aitsn-pref-field select:hover,
.aitsn-pref-field input[type="number"]:hover { border-color: var(--aits-blue-line); }
.aitsn-pref-field select:focus,
.aitsn-pref-field input[type="number"]:focus {
    outline: 0; background: var(--aits-card);
    border-color: var(--aits-blue); box-shadow: 0 0 0 3px var(--aits-focus);
}

/* Buttons */
.aitsn-pref-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 13px;
    font-size: 13.5px; font-weight: 800; letter-spacing: .01em; font-family: inherit;
    cursor: pointer; text-decoration: none !important;
    border: 1px solid transparent;
    transition: transform .18s var(--aitsn-ease), box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.aitsn-pref-btn:focus-visible { outline: 2px solid var(--aits-focus); outline-offset: 3px; }
.aitsn-pref-btn:active { transform: translateY(0); }

.aitsn-pref-btn.is-primary {
    background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
    color: #fff; box-shadow: var(--aitsn-sh-brand);
}
.aitsn-pref-btn.is-primary:hover { transform: translateY(-2px); color: #fff; filter: brightness(1.06); }

.aitsn-pref-btn.is-ghost {
    background: var(--aits-card); border-color: var(--aits-line); color: var(--aits-ink);
}
.aitsn-pref-btn.is-ghost:hover {
    border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2);
    color: var(--aitsn-brand-ink); transform: translateY(-2px);
}

/* Destructive: red, because the action is destructive. The rest of the page
   is blue — this is the one place the brand colour would misinform. */
.aitsn-pref-btn.is-danger {
    background: var(--aits-card);
    border-color: color-mix(in srgb, var(--aits-red) 40%, transparent);
    color: var(--aitsn-red-ink);
}
.aitsn-pref-btn.is-danger:hover {
    background: var(--aits-red); border-color: var(--aits-red); color: #fff;
    transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(224, 49, 49, .6);
}

.aitsn-pref-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.aitsn-pref-pause {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 20px; margin-bottom: 16px;
    background: linear-gradient(135deg, var(--aits-amber-soft), var(--aits-card) 75%);
    border: 1px solid color-mix(in srgb, var(--aits-amber) 38%, transparent);
    border-radius: 16px;
}
body:not(.admin-shell).theme-dark .aitsn-pref-pause { background: linear-gradient(135deg, rgba(217, 119, 6, .16), var(--aits-card) 75%); }
.aitsn-pref-pause .ic {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 15px; color: #fff;
    background: var(--aits-amber);
}
.aitsn-pref-pause .body { flex: 1; min-width: 160px; }
.aitsn-pref-pause .body strong { display: block; font-size: 13px; font-weight: 800; color: var(--aits-ink); }
.aitsn-pref-pause .body span { font-size: 12px; color: var(--aits-mut); }

.aitsn-pref-danger {
    padding: 22px;
    background: linear-gradient(135deg, var(--aits-red-soft), var(--aits-card) 75%);
    border: 1px solid color-mix(in srgb, var(--aits-red) 30%, transparent);
    border-radius: 18px;
}
body:not(.admin-shell).theme-dark .aitsn-pref-danger { background: linear-gradient(135deg, rgba(224, 49, 49, .12), var(--aits-card) 75%); }
.aitsn-pref-danger h2 { color: var(--aitsn-red-ink); }
.aitsn-pref-danger h2 i { color: var(--aitsn-red-ink); }
.aitsn-pref-danger .hint { color: var(--aits-mut); }

/* ══ 4 · Toast ═════════════════════════════════════════════════════════════ */

.aitsn-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
    z-index: 1080; max-width: min(420px, calc(100vw - 32px));
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px; border-radius: 16px;
    background: var(--aits-ink); color: var(--aits-card);
    font-size: 13.5px; font-weight: 600;
    box-shadow: var(--aitsn-sh-3);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s var(--aitsn-ease);
}
.aitsn-toast i { color: #4ADE9E; }
.aitsn-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ══ 5 · Responsive ════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .aitsn-hero-stats { order: 3; width: 100%; }
    .aitsn-hero-stat { flex: 1 1 0; min-width: 0; }
    .aitsn-hero-btn { order: 4; }
}

@media (max-width: 720px) {
    .aitsn-page { padding: 18px 12px 56px; }

    .aitsn-hero { padding: 22px 20px; border-radius: 20px; }
    .aitsn-hero-row { gap: 14px; }
    .aitsn-hero-ico { width: 48px; height: 48px; border-radius: 15px; font-size: 19px; }
    /* Stay beside the icon rather than dropping to its own line — a 220px
       floor would force a wrap on a 360px viewport. */
    .aitsn-hero-copy { flex: 1 1 0; min-width: 0; }
    .aitsn-hero h1 { font-size: 20px; }
    .aitsn-hero-btn { width: 100%; justify-content: center; }

    .aitsn-panel { border-radius: 18px; }
    .aitsn-chipbar { padding: 14px 12px 12px; scroll-padding-inline: 12px; }
    .aitsn-toolbar { padding: 0 12px 14px; gap: 8px; }
    .aitsn-search { flex: 1 1 100%; }
    .aitsn-select { max-width: none; flex: 1 1 132px; }
    .aitsn-bulk { padding: 11px 12px; }

    .aitsn-cards { padding: 8px; }
    .aitsn-card {
        padding: 14px 14px 14px 18px;
        gap: 11px;
        flex-wrap: wrap;
        /* No lift on touch — a transform under a finger just looks like lag. */
        transform: none !important;
    }
    .aitsn-card-ico { width: 40px; height: 40px; font-size: 15px; border-radius: 13px; }
    .aitsn-card:hover .aitsn-card-ico { transform: none; }
    .aitsn-card-title { font-size: 14.5px; }
    .aitsn-card-text { font-size: 13px; }
    /* Actions drop under the body so the copy keeps full width on a phone. */
    .aitsn-card-acts {
        flex-direction: row; width: 100%;
        justify-content: flex-end; gap: 6px;
        padding-top: 10px; margin-top: 2px;
        border-top: 1px solid var(--aits-line);
    }
    .aitsn-iconbtn { width: 36px; height: 36px; font-size: 13px; }

    .aitsn-empty { padding: 48px 18px; }
    .aitsn-empty .art { width: 68px; height: 68px; border-radius: 20px; font-size: 25px; }

    .aitsn-pref { padding: 20px 12px 56px; }
    .aitsn-pref-hero { padding: 24px 20px 22px; border-radius: 20px; }
    .aitsn-pref-card { padding: 18px; border-radius: 16px; }
    .aitsn-pref-actions .aitsn-pref-btn { flex: 1 1 100%; }
}

@media (max-width: 520px) {
    .aitsn-pref-freq { grid-template-columns: repeat(2, 1fr); }
    .aitsn-pref-two { grid-template-columns: 1fr; }
}

/* Touch targets: the WCAG 2.5.8 minimum is 24px, but a thumb wants ~44. */
@media (pointer: coarse) {
    .aitsn-rowacts button { width: 34px; height: 34px; font-size: 13px; }
    .aitsn-chip { padding: 10px 16px; }
}

/* ══ 6 · RTL ═══════════════════════════════════════════════════════════════ */

[dir="rtl"] .aitsn-row::before { left: auto; right: 5px; }
[dir="rtl"] .aitsn-card::before { left: auto; right: 8px; }
[dir="rtl"] .aitsn-unread-dot { right: auto; left: 10px; }
[dir="rtl"] .aitsn-search i { left: auto; right: 14px; }
[dir="rtl"] .aitsn-search input { padding: 10px 36px 10px 14px; }
[dir="rtl"] .aitsn-cta:hover i { transform: translateX(-3px); }
[dir="rtl"] .aitsn-hero::after { right: auto; left: -70px; }
[dir="rtl"] .aitsn-pref-cats label:hover { transform: translateX(-2px); }
[dir="rtl"] .aitsn-pref-cats label:has(input:checked) { box-shadow: inset -3px 0 0 var(--aits-blue); }

/* ══ 7 · Motion + print ════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .aitsn-badge,
    .aitsn-bulk,
    .aitsn-pref-flash { animation: none; }
    .aitsn-row, .aitsn-card, .aitsn-chip, .aitsn-btn, .aitsn-cta, .aitsn-iconbtn,
    .aitsn-rowacts button, .aitsn-hero-stat, .aitsn-hero-btn, .aitsn-toast,
    .aitsn-card-ico, .aitsn-ico, .aitsn-card-media img,
    .aitsn-pref-btn, .aitsn-pref-cats label, .aitsn-pref-freq label {
        transition: none;
    }
    .aitsn-card:hover, .aitsn-chip:hover, .aitsn-btn:hover, .aitsn-cta:hover,
    .aitsn-iconbtn:hover, .aitsn-hero-stat:hover, .aitsn-hero-btn:hover,
    .aitsn-pref-btn:hover, .aitsn-pref-cats label:hover, .aitsn-pref-freq label:hover {
        transform: none;
    }
    .aitsn-card:hover .aitsn-card-ico, .aitsn-row:hover .aitsn-ico { transform: none; }
}

/* Forced-colors: the whole design is tone-on-tint, which High Contrast Mode
   flattens. Put the structure back with borders it will not strip. */
@media (forced-colors: active) {
    .aitsn-card, .aitsn-row, .aitsn-chip, .aitsn-btn, .aitsn-iconbtn,
    .aitsn-rowacts button, .aitsn-pref-card { border: 1px solid CanvasText; }
    .aitsn-chip.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Print: a notification list is not a document. */
@media print {
    .aitsn-hero, .aitsn-toolbar, .aitsn-chipbar, .aitsn-card-acts,
    .aitsn-pager, .aitsn-bulk, .aitsn-toast { display: none !important; }
    .aitsn-panel { border: 0; box-shadow: none; }
    .aitsn-card { break-inside: avoid; box-shadow: none; }
}