/* ══════════════════════════════════════════════════════════════════════
   AI Assistant widget — styling (WAVE5 port from NEW).
   ──────────────────────────────────────────────────────────────────────
   Source: NEW wwwroot/css/tickets-admin.css (the ".ai-*" floating-widget
   block, ~lines 7254-end). Copied verbatim below, with two OLD-specific
   adaptations bolted on so it drops into Syncfusion-v19 + Bootstrap
   without pulling in the asetrix theme:

     1. Bootstrap "variable shim" (this block): the widget CSS references
        asetrix design tokens (--accent-primary, --chrome-bg, color-mix()
        …). We resolve them to concrete Bootstrap-flavoured hex values,
        SCOPED to the widget roots (.ai-fab / .ai-panel) so custom props
        inherit to every descendant and nothing leaks into the rest of
        OLD. color-mix() is left intact (Chromium/Electron supports it and
        the vars now resolve).
     2. Font Awesome sizing compat (bottom of file): the original block
        sizes Lucide icons via width/height on <svg>/[data-lucide]. OLD
        uses FA <i class="fas …"> font-glyphs, which ignore width/height —
        so we restore sensible sizes via font-size.
   ══════════════════════════════════════════════════════════════════════ */
.ai-fab,
.ai-panel {
    --accent-primary: #0d6efd;
    --accent-10: rgba(13, 110, 253, 0.10);
    --accent-15: rgba(13, 110, 253, 0.15);
    --accent-20: rgba(13, 110, 253, 0.20);
    --accent-30: rgba(13, 110, 253, 0.30);
    --on-accent: #ffffff;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-inset: #f8f9fa;
    --border-primary: #dee2e6;
    --border-secondary: #ced4da;
    --text-primary: #212529;
    --text-secondary: #343a40;
    --text-tertiary: #495057;
    --text-muted: #6c757d;
    --chrome-bg: #212529;
    --chrome-text: #f8f9fa;
    --chrome-border: rgba(255, 255, 255, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

   .ai-fab    floating circular button bottom-right (always visible)
   .ai-panel  full chat panel anchored above the FAB (slides up)
   ════════════════════════════════════════════════════════════════════ */

/* ── FAB ─────────────────────────────────────────────────────────── */
.ai-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 998;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #7c3aed 100%);
    color: var(--on-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px -4px var(--accent-30),
        0 4px 12px -2px rgba(124, 58, 237, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                opacity 0.18s ease;
    overflow: visible;
}

.ai-fab.is-hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.ai-fab:hover {
    transform: scale(1.08) rotate(-4deg);
    box-shadow:
        0 12px 32px -4px var(--accent-30),
        0 6px 16px -2px rgba(124, 58, 237, 0.4);
}

.ai-fab:active {
    transform: scale(0.95);
}

.ai-fab-icon {
    width: 24px;
    height: 24px;
    color: var(--on-accent);
    z-index: 2;
    animation: ai-fab-sparkle 3.5s ease-in-out infinite;
}

@keyframes ai-fab-sparkle {
    0%, 100% { transform: scale(1) rotate(0deg);    filter: drop-shadow(0 0 0 transparent); }
    50%      { transform: scale(1.15) rotate(-8deg); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); }
}

/* Soft glow that pulses behind the icon */
.ai-fab-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-30), transparent 70%);
    opacity: 0;
    z-index: 1;
    animation: ai-fab-pulse 3s ease-in-out infinite;
}

@keyframes ai-fab-pulse {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50%      { opacity: 0.6; transform: scale(1.15); }
}

/* Unread dot — small red ping when AI replies while panel is closed */
.ai-fab-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border: 2px solid var(--surface, #fff);
    border-radius: 50%;
    z-index: 3;
    animation: ai-fab-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes ai-fab-dot-pulse {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%      { transform: scale(1.1); box-shadow: 0 0 0 6px transparent; }
}

/* Counter badge — shows N matches when collapsed and assignments exist */
.ai-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    border: 2px solid var(--surface, #fff);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
    z-index: 3;
}

.ai-fab.has-unread .ai-fab-glow { animation-duration: 1.4s; opacity: 0.7; }

/* ── Panel ───────────────────────────────────────────────────────── */
.ai-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: min(560px, calc(100vw - 24px));
    height: min(740px, calc(100vh - 40px));
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 24px 64px -16px rgba(0, 0, 0, 0.4),
        0 8px 24px -8px var(--accent-20),
        0 0 0 1px var(--border-primary) inset;
    animation: ai-panel-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    transform-origin: bottom right;
}

@keyframes ai-panel-in {
    from { opacity: 0; transform: translateY(20px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Top highlight line */
.ai-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    pointer-events: none;
    z-index: 2;
}

[data-theme="dark"] .ai-panel::before,
[data-theme="spotify"] .ai-panel::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* ── Panel header ── */
.ai-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-primary);
    background: linear-gradient(135deg, var(--accent-15) 0%, transparent 50%, rgba(124, 58, 237, 0.08) 100%);
    overflow: hidden;
    flex-shrink: 0;
}

.ai-panel-header-glow {
    position: absolute;
    inset: -50% -30% auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--accent-20), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    animation: ai-glow-drift 8s ease-in-out infinite alternate;
}

.ai-panel-header-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
    min-width: 0;
}

.ai-panel-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
    color: var(--on-accent);
    flex-shrink: 0;
    box-shadow: 0 3px 10px -2px var(--accent-30);
}

.ai-panel-header-avatar [data-lucide] {
    width: 18px;
    height: 18px;
    animation: ai-sparkle 3.5s ease-in-out infinite;
}

.ai-panel-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ai-panel-header-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.ai-panel-header-subtitle {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}

/* ── Panel stats bar (compact) ── */
.ai-panel-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--surface-inset);
    flex-shrink: 0;
    font-size: 0.74rem;
}

.ai-panel-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
}

.ai-panel-stat [data-lucide] {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
}

.ai-panel-stat strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ai-panel-stat-success { color: #16a34a; }
.ai-panel-stat-success [data-lucide] { color: #16a34a; }
.ai-panel-stat-success strong { color: #16a34a; }

[data-theme="dark"] .ai-panel-stat-success,
[data-theme="dark"] .ai-panel-stat-success strong { color: #4ade80; }

/* Tiny "as of HH:mm" freshness pill on the Posted stat */
.ai-panel-stat-time {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* Spin the refresh icon while a refresh is in flight */
.ai-icon-btn.is-spinning [data-lucide] {
    animation: ai-icon-spin 0.8s linear infinite;
}

@keyframes ai-icon-spin {
    to { transform: rotate(360deg); }
}

/* ── Ticket-search / count results inside an AI bubble ─────────── */
.ai-tickets-scroll {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: auto;
}

.ai-tickets-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.ai-tickets-scroll::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 999px; }

.ai-tickets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.ai-tickets-table thead th {
    text-align: left;
    padding: 7px 10px;
    background: var(--surface-inset);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.68rem;
    border-bottom: 1px solid var(--border-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.ai-tickets-table .ai-th-num { text-align: right; }

.ai-tickets-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: middle;
    white-space: nowrap;
}

.ai-tickets-table tbody tr:last-child td { border-bottom: 0; }

.ai-tickets-table tbody tr:hover { background: var(--accent-10); }

.ai-tickets-table .ai-clip {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-tickets-table .ai-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ai-tickets-table .ai-td-mono {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}

/* Compact status pill */
.ai-status-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-10);
    color: var(--accent-primary);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--accent-20);
}

/* "+N more" caption when results exceed the visible cap */
.ai-results-more {
    padding: 8px 12px;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    background: var(--surface-inset);
    border-top: 1px solid var(--border-primary);
}

/* Counts breakdown — same base style as tickets table */
.ai-counts-table thead th { text-transform: uppercase; }
.ai-counts-table tbody tr:hover { background: var(--accent-10); }

/* ── Export-split dropdown (Excel button + caret) ─────────────────── */
.ai-export-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

.ai-export-group .ai-export-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
    z-index: 1;
}

.ai-export-group .ai-export-split {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 3px 6px;
}

.ai-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-width: 220px;
    animation: ai-banner-in 0.16s ease;
}

.ai-export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.84rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.ai-export-option:hover {
    background: var(--accent-10);
    color: var(--accent-primary);
}

.ai-export-option [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ai-export-option:hover [data-lucide] { color: var(--accent-primary); }

.ai-export-option + .ai-export-option {
    border-top: 1px solid var(--border-primary);
}

/* ── Contracts picker table ──────────────────────────────────── */
.ai-contracts-table .ai-mono {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    font-size: 0.78rem;
}

.ai-cell-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ai-cell-stack-right { align-items: flex-end; }
.ai-cell-sub { font-size: 0.66rem; color: var(--text-muted); }

/* Type pill (Sales/Purchase/Toll) — colour-coded for quick scanning */
.ai-type-sales {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.32);
}
.ai-type-purchase {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.32);
}
.ai-type-toll {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
    border-color: rgba(168, 85, 247, 0.32);
}

/* Contract status pills */
.ai-cstatus-open    { background: rgba(34, 197, 94, 0.12); color: #16a34a; border-color: rgba(34, 197, 94, 0.32); }
.ai-cstatus-pending { background: rgba(245, 158, 11, 0.12); color: #d97706; border-color: rgba(245, 158, 11, 0.32); }
.ai-cstatus-future  { background: rgba(99, 102, 241, 0.12); color: #4f46e5; border-color: rgba(99, 102, 241, 0.32); }
.ai-cstatus-closed  { background: rgba(100, 116, 139, 0.14); color: #475569; border-color: rgba(100, 116, 139, 0.30); }

/* Mini inline progress bar inside contract rows */
.ai-mini-progress {
    position: relative;
    width: 110px;
    height: 18px;
    border-radius: 999px;
    background: var(--surface-inset);
    overflow: hidden;
    border: 1px solid var(--border-primary);
}

.ai-mini-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.ai-mini-progress-low      { background: linear-gradient(90deg, #ef4444, #f97316); }
.ai-mini-progress-good     { background: linear-gradient(90deg, #f59e0b, #eab308); }
.ai-mini-progress-great    { background: linear-gradient(90deg, #84cc16, #22c55e); }
.ai-mini-progress-complete { background: linear-gradient(90deg, #16a34a, #15803d); }

.ai-mini-progress-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-primary);
    mix-blend-mode: difference;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ai-td-action { white-space: nowrap; padding-right: 12px !important; }

.ai-mini-btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
    color: var(--on-accent);
    border-color: transparent;
}

.ai-mini-btn-primary:hover {
    background: linear-gradient(135deg, #ff258f, #8b5cf6);
    color: var(--on-accent);
}

.ai-mini-btn-primary [data-lucide] { color: var(--on-accent); }

/* ── Posted-tickets confirmation card ────────────────────────── */
.ai-posted-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
    border: 1px solid rgba(34, 197, 94, 0.32);
    box-shadow: 0 2px 12px -4px rgba(34, 197, 94, 0.18);
    animation: ai-banner-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.ai-posted-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.ai-posted-card-icon [data-lucide] { width: 22px; height: 22px; }

.ai-posted-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ai-posted-card-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #15803d;
}

[data-theme="dark"] .ai-posted-card-title,
[data-theme="spotify"] .ai-posted-card-title { color: #4ade80; }

.ai-posted-card-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.ai-posted-card-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ai-posted-num {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid rgba(34, 197, 94, 0.32);
    color: #15803d;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .ai-posted-num,
[data-theme="spotify"] .ai-posted-num { color: #4ade80; }

/* ════════════════════════════════════════════════════════════════════
   Fullscreen mode — the panel takes the whole viewport, content
   centres into a comfortable reading column, and everything else
   scales up gracefully. Triggered by .ai-panel.is-fullscreen.
   ════════════════════════════════════════════════════════════════════ */

.ai-panel.is-fullscreen {
    /* Cover the viewport with breathing room around the edges.
       Calc'd inset gives a 24px gutter on desktop. */
    inset: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
    max-height: none;
    max-width: none;
    border-radius: 18px;
    transform-origin: center;
    animation: ai-panel-grow 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    /* Stronger shadow + accent ring to match the larger surface area */
    box-shadow:
        0 40px 100px -24px rgba(0, 0, 0, 0.5),
        0 16px 48px -12px var(--accent-20),
        0 0 0 1px var(--border-primary) inset;
}

@keyframes ai-panel-grow {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Header — taller, more presence */
.ai-panel.is-fullscreen .ai-panel-header {
    padding: 18px 26px;
}

.ai-panel.is-fullscreen .ai-panel-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.ai-panel.is-fullscreen .ai-panel-header-avatar [data-lucide] {
    width: 22px;
    height: 22px;
}

.ai-panel.is-fullscreen .ai-panel-header-name { font-size: 1.1rem; }
.ai-panel.is-fullscreen .ai-panel-header-subtitle { font-size: 0.82rem; }

.ai-panel.is-fullscreen .ai-panel-header-glow {
    width: 320px;
    height: 320px;
}

/* Stats bar — centered, larger */
.ai-panel.is-fullscreen .ai-panel-stats {
    padding: 12px 26px;
    justify-content: center;
    font-size: 0.84rem;
    gap: 16px;
}

.ai-panel.is-fullscreen .ai-panel-stat strong { font-size: 1.05rem; }

/* Chat thread — centered reading column with comfortable max-width
   (~900 px is the ChatGPT/Claude.ai default — proven). */
.ai-panel.is-fullscreen .ai-chat {
    padding: 24px 0;
    align-items: center;
    background:
        radial-gradient(circle at 0% 0%,    var(--accent-10),       transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.05), transparent 35%),
        var(--surface-inset);
}

/* Wrap each bubble in a constrained row so the centered column works.
   Bubbles stay aligned left/right inside the row. */
.ai-panel.is-fullscreen .ai-chat > .ai-bubble {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.ai-panel.is-fullscreen .ai-chat > .ai-bubble-system {
    max-width: 900px;
}

/* Bigger, more readable bubbles */
.ai-panel.is-fullscreen .ai-bubble-text {
    font-size: 0.94rem;
    padding: 12px 16px;
    line-height: 1.55;
}

.ai-panel.is-fullscreen .ai-bubble-avatar {
    width: 36px;
    height: 36px;
}

.ai-panel.is-fullscreen .ai-bubble-avatar [data-lucide] {
    width: 18px;
    height: 18px;
}

/* Results table can sprawl — give it the room it deserves */
.ai-panel.is-fullscreen .ai-bubble-results {
    width: 100%;
    max-width: 100%;
}

.ai-panel.is-fullscreen .ai-results-table {
    font-size: 0.86rem;
}

.ai-panel.is-fullscreen .ai-results-table thead th,
.ai-panel.is-fullscreen .ai-results-table tbody td {
    padding: 10px 14px;
}

/* ════════════════════════════════════════════════════════════════
   COMPOSER — FULLSCREEN
   ────────────────────────────────────────────────────────────────
   THE CENTERING BUG: in a flex-column parent (.ai-composer is
   `display: flex; flex-direction: column`), `margin-left: auto;
   margin-right: auto` on a child doesn't always centre the child
   when align-items: stretch (default) is in play. The child either
   stretches to fill OR collapses to its content width — neither
   honours `max-width: 900px` cleanly.

   THE FIX: make the .ai-composer a plain BLOCK in fullscreen (no
   flex). Then margin auto works exactly like a normal block. The
   children (.ai-composer-row, .ai-composer-pending, .ai-overwrite-gate)
   become block elements, can claim `width: 100%` of their natural
   parent, get capped by max-width: 900px, and centre cleanly.
   ════════════════════════════════════════════════════════════════ */

.ai-panel.is-fullscreen .ai-composer {
    display: block;                    /* override the column flex */
    padding: 18px 32px 22px;
    background: var(--surface);
    border-top: 1px solid var(--border-primary);
}

/* All the centred children share the same width contract — they sit
   in a 900-pixel column centred horizontally, padding-free at this
   level (each component handles its own padding). */
.ai-panel.is-fullscreen .ai-composer-pending,
.ai-panel.is-fullscreen .ai-composer-row,
.ai-panel.is-fullscreen .ai-overwrite-gate {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;                    /* honest block centring */
    box-sizing: border-box;
}

.ai-panel.is-fullscreen .ai-composer-pending {
    margin-bottom: 10px;
}

/* The composer row itself — a substantial card. Buttons + textarea
   live inside as normal flex items, vertically centered so the
   paperclip and send sit at the middle of the input rather than
   anchored to its bottom edge. */
.ai-panel.is-fullscreen .ai-composer-row {
    display: flex;                     /* row flex stays */
    align-items: center;
    padding: 14px 14px 14px 18px;
    border-radius: 20px;
    box-shadow:
        0 8px 24px -10px rgba(0, 0, 0, 0.12),
        0 2px 6px -2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-primary);
    background: var(--surface);
    min-height: 96px;
    gap: 12px;
}

/* Input is the hero — fills available space, generous min-height. */
.ai-panel.is-fullscreen .ai-composer-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 1.05rem;
    line-height: 1.55;
    min-height: 68px;
    max-height: 280px;
    padding: 8px 4px;
}

.ai-panel.is-fullscreen .ai-composer-attach {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ai-panel.is-fullscreen .ai-composer-attach [data-lucide] {
    width: 22px;
    height: 22px;
}

.ai-panel.is-fullscreen .ai-composer-send {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    flex-shrink: 0;
}

.ai-panel.is-fullscreen .ai-composer-send [data-lucide] {
    width: 22px;
    height: 22px;
}

/* Hint hidden in fullscreen — keyboard shortcut lives on the Send
   tooltip. Drop hint is self-evident. */
.ai-panel.is-fullscreen .ai-composer-hint {
    display: none !important;
}

/* Overwrite gate — centered + matching width budget */
.ai-panel.is-fullscreen .ai-overwrite-gate {
    max-width: 900px;
    margin: 12px auto 0;
}

/* Footer commit button — also constrained + centered */
.ai-panel.is-fullscreen .ai-panel-footer {
    padding: 14px 0;
    background: var(--surface-inset);
}

.ai-panel.is-fullscreen .ai-panel-footer .ai-btn-commit {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Welcome bubble suggestions — extra polish in fullscreen */
.ai-panel.is-fullscreen .ai-bubble-suggestions {
    margin-top: 8px;
    gap: 8px;
}

.ai-panel.is-fullscreen .ai-suggestion {
    padding: 6px 14px;
    font-size: 0.84rem;
}

/* Hide the FAB completely while in fullscreen — the panel covers
   the whole screen, the FAB shouldn't peek through anywhere. */
.ai-panel.is-fullscreen ~ .ai-fab,
.ai-fab:has(~ .ai-panel.is-fullscreen) {
    /* :has fallback for browsers that support it */
    display: none;
}

/* ── Tablet (≤ 1100 px wide) — narrower reading column ── */
@media (max-width: 1100px) {
    .ai-panel.is-fullscreen .ai-chat > .ai-bubble,
    .ai-panel.is-fullscreen .ai-composer-pending,
    .ai-panel.is-fullscreen .ai-composer-row,
    .ai-panel.is-fullscreen .ai-composer-hint,
    .ai-panel.is-fullscreen .ai-overwrite-gate,
    .ai-panel.is-fullscreen .ai-panel-footer .ai-btn-commit {
        max-width: 760px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ── Mobile (≤ 720 px) — fullscreen behaves like the bottom-sheet:
       full viewport, no insets, no padding mismatch. The maximize
       button is largely cosmetic on phones (default already is full
       sheet) but tapping it removes the drag handle and lets the
       chat span the entire viewport. ── */
@media (max-width: 720px) {
    .ai-panel.is-fullscreen {
        inset: 0;
        border-radius: 0;
    }

    .ai-panel.is-fullscreen::after {
        display: none; /* drag handle removed in fullscreen */
    }

    .ai-panel.is-fullscreen .ai-panel-header { padding: 14px 16px; }
    .ai-panel.is-fullscreen .ai-chat { padding: 14px 0; }
    .ai-panel.is-fullscreen .ai-chat > .ai-bubble,
    .ai-panel.is-fullscreen .ai-composer-pending,
    .ai-panel.is-fullscreen .ai-composer-row,
    .ai-panel.is-fullscreen .ai-composer-hint,
    .ai-panel.is-fullscreen .ai-overwrite-gate {
        padding-left: 14px;
        padding-right: 14px;
    }
    .ai-panel.is-fullscreen .ai-bubble { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-panel.is-fullscreen { animation: none !important; }
}

/* ── Panel footer (commit button only) ── */
.ai-panel-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border-primary);
    background: var(--surface-inset);
    flex-shrink: 0;
}

.ai-panel-footer .ai-btn-commit {
    width: 100%;
    justify-content: center;
}

/* ── Status pills on rows that can't be saved ── */
.ai-row-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.ai-row-status-pill [data-lucide] { width: 11px; height: 11px; }

.ai-row-status-blocked {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.32);
}

[data-theme="dark"] .ai-row-status-blocked,
[data-theme="spotify"] .ai-row-status-blocked { color: #94a3b8; }

.ai-row-status-missing {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.32);
}

.ai-row-disabled td { opacity: 0.55; }
.ai-row-disabled td input[type="checkbox"] { cursor: not-allowed; }

.ai-card-disabled { opacity: 0.6; cursor: not-allowed; }
.ai-card-status-blocked { background: rgba(100, 116, 139, 0.14); color: #475569; border-color: rgba(100, 116, 139, 0.32); }
.ai-card-status-missing { background: rgba(239, 68, 68, 0.10); color: #dc2626; border-color: rgba(239, 68, 68, 0.32); }

/* Adjust the existing chat thread to fit nicely inside the panel */
.ai-panel .ai-chat {
    border-radius: 0;
    padding: 12px 14px 6px;
    background:
        radial-gradient(circle at 0% 0%,    var(--accent-10),     transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.06), transparent 40%),
        var(--surface-inset);
}

.ai-panel .ai-composer { padding: 8px 12px 10px; border-radius: 0; }
.ai-panel .ai-overwrite-gate { margin: 8px 12px 0; padding: 10px 12px; }

.ai-panel .ai-bubble { max-width: 88%; }

/* Tighter chips inside the panel — accommodates 6+ attachments
   without pushing the textarea off-screen. */
.ai-panel .ai-chip-compact { max-width: 200px; }
.ai-panel .ai-chip-compact .ai-chip-body { max-width: 130px; }
.ai-panel .ai-bubble-files .ai-chip-compact { max-width: 200px; }

/* Make the embedded results smaller in the floating panel */
.ai-panel .ai-bubble-results { width: 100%; max-width: 100%; }
.ai-panel .ai-results-table { font-size: 0.78rem; }
.ai-panel .ai-results-table thead th,
.ai-panel .ai-results-table tbody td { padding: 6px 8px; }

/* Mobile — full-screen sheet for the panel, not a corner card */
@media (max-width: 720px) {
    .ai-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 92vh;
        border-radius: 18px 18px 0 0;
        animation: ai-panel-in-mobile 0.34s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    @keyframes ai-panel-in-mobile {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Drag handle pill */
    .ai-panel::after {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--border-secondary);
        z-index: 3;
    }

    .ai-panel-header { padding: 18px 14px 12px; }

    .ai-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; }
    .ai-fab-icon { width: 22px; height: 22px; }

    .ai-panel .ai-bubble { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-fab, .ai-fab-icon, .ai-fab-glow, .ai-fab-dot { animation: none !important; }
    .ai-panel { animation: none !important; }
    .ai-panel-header-glow, .ai-panel-header-avatar [data-lucide] { animation: none !important; }
}

/* =============================================================================
   Print dropdown — replaces the standalone bulk Slip button on /ticketsAdmin.
   Same UX as the /operators Print dropdown but scoped to .ta-print-menu so
   it can co-exist with the operators .op-print-menu without class collisions.
   ============================================================================= */
.ta-print-menu {
    position: relative;
    display: inline-block;
}
.ta-print-menu-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.ta-print-menu-trigger .ta-print-chev {
    width: 14px; height: 14px;
    transition: transform .15s ease;
}
.ta-print-menu.open .ta-print-menu-trigger .ta-print-chev {
    transform: rotate(180deg);
}
.ta-print-menu-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Transparent click-trap behind the menu to close on outside click */
.ta-print-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
    cursor: default;
}

/* The menu card */
.ta-print-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    min-width: 300px;
    background: var(--surface-elevated, var(--chrome-bg, #ffffff));
    border: 1.5px solid var(--border-primary, var(--chrome-border));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: ta-print-menu-in 140ms ease-out;
}
@keyframes ta-print-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.ta-print-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary, var(--chrome-text));
    transition: background .12s ease, border-color .12s ease;
}
.ta-print-menu-item:hover {
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary, #2563eb) 28%, transparent);
}
.ta-print-menu-item > i {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    color: var(--accent-primary, #2563eb);
}
.ta-print-menu-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ta-print-menu-title {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
}
.ta-print-menu-sub {
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.3;
}

@media (max-width: 600px) {
    .ta-print-menu-list { min-width: 240px; }
}



/* ══════════════════════════════════════════════════════════════════════
   Font Awesome sizing compat (WAVE5)
   The widget block above sizes Lucide icons via width/height on <svg>.
   FA font-glyphs ignore width/height, so re-establish sizes by font-size.
   Colour still flows through the original `color:` rules (which target
   plain `i` / [data-lucide] and thus also hit the FA <i>).
   ══════════════════════════════════════════════════════════════════════ */
.ai-fab i,
.ai-panel i.fas,
.ai-panel i.far { line-height: 1; }

.ai-fab-icon { font-size: 22px; }
.ai-panel-header-avatar i { font-size: 16px; }
.ai-bubble-avatar i { font-size: 14px; }
.ai-icon-btn i { font-size: 15px; }
.ai-posted-card-icon i { font-size: 22px; }
.ai-overwrite-icon i { font-size: 20px; }
.ai-composer-attach i,
.ai-composer-send i { font-size: 17px; }
.ai-composer-dropmask i { font-size: 28px; }
.ai-btn i,
.ai-bubble-error i,
.ai-bubble-suggestions i,
.ai-bubble-results-summary i,
.ai-results-bar-title i,
.ai-export-main i,
.ai-export-option i { font-size: 14px; }
.ai-panel-stat i,
.ai-mini-btn i,
.ai-composer-hint i,
.ai-chip-icon i,
.ai-card-reason i,
.ai-diff-cell i { font-size: 12px; }
.ai-row-status-pill i,
.ai-row-overwrite-pill i,
.ai-card-overwrite-pill i,
.ai-results-overwrite-badge i { font-size: 11px; }