:root {
      /* Shufti brand — from logo SVG, App.vue left-nav, DashboardBanners */
      --red: #F24348;
      --red-light: #FF5574;
      --red-deep: #EF5350;
      --red-gradient: linear-gradient(135deg, #FF5574 0%, #EF5350 100%);
      --red-soft: #FFF0F2;
      --red-border: #FFD6DC;
      --red-glow: rgba(242, 67, 72, 0.18);
      --red-focus: rgba(255, 85, 116, 0.14);
      --blue: #2B6AD8;
      --blue-accent: #539FF9;
      --blue-soft: rgba(43, 106, 216, 0.08);
      --gold: #FAD92B;
      --navy: #0D1428;
      --navy-gradient: linear-gradient(254.54deg, rgba(13, 20, 40, 0.5) -231.91%, #0D1428 156.36%);
      --brand-stripe: linear-gradient(270deg, #539FF9 0%, #F24348 51%, #FAD92B 100%);
      /* same three brand colors, but repeating so the pattern tiles seamlessly — used where the
         stripe animates (composer border) so the loop has no visible seam. */
      --brand-stripe-flow: repeating-linear-gradient(90deg, #539FF9 0%, #F24348 33%, #FAD92B 66%, #539FF9 100%);
      --spark-gradient: linear-gradient(135deg, #539FF9 0%, #F24348 48%, #FAD92B 100%);
      --cool-gray-3: #91A1B4;
      --banner-bg: #F1F6FB;
      --banner-bg-2: #D7E0E9;
      --banner-bg-gradient: linear-gradient(107deg, #F1F6FB 0.15%, #D7E0E9 63.05%);
      --ink: #0D1428;
      --ink-1: #0D1428; /* alias of --ink; .card/.mode-menu reference this name directly */
      --ink-2: #002438;
      --ink-3: #323232;
      --muted: #5C6C80;
      --muted-2: #8C9DB5;
      --nav-muted: #9CAED0;
      --nav-text: #F1F6FB;
      --bg: #F1F6FB;
      --panel: #FFFFFF;
      --border: #D7E0E9;
      --border-light: #EAF1F8;
      --green: #00B67A;
      --warning: #F5B13D;
      --warning-text: #F5C46B;
      --warning-bg: rgba(245, 177, 61, 0.18);
      --warning-border: rgba(245, 177, 61, 0.25);
      --shadow: 0 1px 2px rgba(13, 20, 40, 0.05), 0 8px 24px rgba(13, 20, 40, 0.06);
      --focus-ring: 0 0 0 3px var(--red-focus);
      /* diagonal corner glow (blue top-right / gold bottom-left) layered over the base
         banner gradient on the page body only — matches the Figma widget backdrop.
         Stop shape (solid to 65%, fade to transparent by 100%) and colors (Shufti Blue
         #539FF9, #FAD92B) come straight from the Figma radial-gradient fills. */
      --page-glow: radial-gradient(1200px 820px at 102% -10%, rgba(83, 159, 249, .38) 0%, rgba(83, 159, 249, .38) 65%, rgba(83, 159, 249, 0) 100%),
                   radial-gradient(1050px 760px at -10% 110%, rgba(250, 217, 43, .34) 0%, rgba(250, 217, 43, .34) 65%, rgba(250, 217, 43, 0) 100%);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; font-family: 'Graphik';
      position: relative; background: var(--banner-bg-gradient); color: var(--ink); height: 100vh; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
    /* animated corner glow: a fixed layer behind all content that drifts slowly, so the
       backdrop feels alive instead of a static wash. */
    body::before { content: ''; position: fixed; inset: -12%; z-index: -1;
      background: var(--page-glow); background-repeat: no-repeat;
      animation: bgDrift 16s ease-in-out infinite alternate; }
    @keyframes bgDrift {
      0%   { transform: translate(0, 0) scale(1); }
      50%  { transform: translate(-2%, 1.5%) scale(1.05); }
      100% { transform: translate(1.5%, -2%) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

    /* header — matches App.vue .left-nav + WelcomeBanner brand stripe */
    header { position: relative; background: var(--navy-gradient); padding: 0 22px; height: 64px;
      flex: 0 0 64px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 10px rgba(13, 20, 40, 0.22); z-index: 5; }
    header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-stripe); }
    .brand { display: flex; align-items: center; gap: 12px; }
    .logo { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
    .logo img { width: 22px; height: 26px; display: block; }
    .brand .t1 { font-size: 15px; font-weight: 700; line-height: 1.1; color: #fff; }
    .brand .t2 { font-size: 11.5px; color: var(--nav-muted); margin-top: 3px; }
    .status { margin-left: auto; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
      background: rgba(255,255,255,.08); color: var(--nav-muted); display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.12); }
    .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
    .status.ok { background: rgba(0, 182, 122, 0.18); color: #5FE0A0; border-color: rgba(0, 182, 122, 0.25); }
    .status.ok .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(0, 182, 122, 0.22); }
    .status.wait { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
    .status.wait .dot { background: var(--warning); animation: pulse 1.2s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

    /* chat scroll */
    .chat { flex: 1; overflow-y: auto; padding: 30px 22px 8px; }
    .inner { max-width: 900px; margin: 0 auto; }
    .stream { display: flex; flex-direction: column; gap: 20px; }

    /* empty state */
    .empty { text-align: left; padding: 24px 0 6px; max-width: 600px; margin: 0 auto; }
    .empty-card { background: linear-gradient(135deg, #F4F1EA 0%, #EDF1F7 55%, #F6F1E7 100%);
      border: 1px solid rgba(13, 20, 40, .05); border-radius: 20px; padding: 22px 26px 24px; margin-bottom: 16px; }
    .empty-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
    .empty .badge { position: relative; width: 44px; height: 44px; border-radius: 13px; flex: 0 0 44px; margin: 0;
      background: var(--spark-gradient); display: flex; align-items: center; justify-content: center; color: #fff;
      box-shadow: 0 8px 20px rgba(242, 67, 72, .18); }
    .empty .badge svg { width: 22px; height: 22px; display: block; }
    .empty h2 { margin: 0; font-family: 'flecha m'; font-size: 27px; font-weight: 600; letter-spacing: -.3px; color: var(--navy); }
    .empty p { margin: 0; font-family: 'Graphik'; max-width: 480px; color: var(--muted); font-size: 14px; line-height: 1.55; }
    #emP:empty { display: none; }
    .sg-label { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 12px; }
    /* single-row chip layout (matches the Figma suggestion pills): each chip sizes to its own
       content instead of stretching to an equal grid column, kept compact so all of them
       fit on one line rather than wrapping. Flush left with no inset, so this row's left/right
       bounds match the hero card's own outer bounds (same width), not the card's inner padding. */
    .cards { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
    .card { text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px 7px 6px;
      cursor: pointer; display: flex; gap: 7px; align-items: center; color: var(--ink-1);
      box-shadow: 0 1px 2px rgba(17,21,28,.03); flex: 0 1 auto; min-width: 0;
      transition: border-color .14s, box-shadow .16s, transform .12s; }
    .card:hover { border-color: var(--red-border); box-shadow: 0 10px 24px var(--red-glow); transform: translateY(-2px); }
    .card:active { transform: translateY(0); }
    .card .ic { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: var(--red-soft); display: flex; align-items: center; justify-content: center; }
    .card .ic svg { width: 12px; height: 12px; stroke: var(--red); }
    .card .c1 { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 220px; }
    /* rotate through the brand accents (blue / red / navy) like the Figma suggestion chips */
    .card:nth-child(3n+1) .ic { background: var(--blue-soft); }
    .card:nth-child(3n+1) .ic svg { stroke: var(--blue-accent); }
    .card:nth-child(3n+2) .ic { background: var(--red-soft); }
    .card:nth-child(3n+2) .ic svg { stroke: var(--red); }
    .card:nth-child(3n+3) .ic { background: rgba(13,20,40,.08); }
    .card:nth-child(3n+3) .ic svg { stroke: var(--navy); }
    @media (max-width: 720px) { .cards { flex-wrap: wrap; overflow-x: visible; } .card { max-width: none; } .card .c1 { max-width: none; white-space: normal; } }

    /* entrance animation: elegant focus-in — soft rise + gentle scale + blur-clear,
       on a slow ease-out-expo curve so it settles gracefully rather than snapping. */
    @keyframes elegantIn {
      0%   { opacity: 0; transform: translateY(44px); filter: blur(5px); }
      100% { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    /* the greeting also eases its letter-spacing closed, which reads as refined/typeset */
    @keyframes elegantHeading {
      0%   { opacity: 0; transform: translateY(48px); letter-spacing: .12em; filter: blur(6px); }
      100% { opacity: 1; transform: translateY(0); letter-spacing: -.5px; filter: blur(0); }
    }
    /* the badge is a crisp icon graphic, not text — fade/rise only, no blur pass */
    @keyframes badgeIn {
      0%   { opacity: 0; transform: translateY(20px) scale(.92); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .empty.intro .badge { animation: badgeIn .6s cubic-bezier(.16,1,.3,1) backwards; }
    .empty.intro h2     { animation: elegantHeading 1.1s cubic-bezier(.16,1,.3,1) .16s backwards; }
    .empty.intro p      { animation: elegantIn 1s cubic-bezier(.16,1,.3,1) .32s backwards; }
    .empty.intro .sg-label { animation: elegantIn .9s cubic-bezier(.16,1,.3,1) .46s backwards; }
    .card { animation: elegantIn .9s cubic-bezier(.16,1,.3,1) backwards; }
    @media (prefers-reduced-motion: reduce) {
      .empty.intro .badge, .empty.intro h2, .empty.intro p, .empty.intro .sg-label, .card { animation: none; }
    }

    /* messages */
    .row { display: flex; gap: 12px; }
    .row.user { flex-direction: row-reverse; }
    /* smooth entrance so questions/answers glide in instead of popping */
    .row { animation: rowIn .42s cubic-bezier(.22,.7,.3,1) both; }
    .row.user { animation: rowInRight .42s cubic-bezier(.22,.7,.3,1) both; }
    .row .avatar { animation: avaIn .42s cubic-bezier(.22,.7,.3,1) both; }
    @keyframes rowIn { from { opacity: 0; transform: translateY(10px) translateX(-8px); } to { opacity: 1; transform: none; } }
    @keyframes rowInRight { from { opacity: 0; transform: translateY(10px) translateX(8px); } to { opacity: 1; transform: none; } }
    @keyframes avaIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
    /* answer text fading in when the working plan resolves into the reply */
    .row .msg.reveal { animation: msgReveal .5s ease both; }
    @keyframes msgReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    /* progressive ("typed") answer streaming */
    .tok { opacity: 0; }
    .tok.on { opacity: 1; transition: opacity .12s ease; }
    .blk-in { animation: blkIn .35s ease both; }
    @keyframes blkIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    /* line-by-line reveal for list items and table rows */
    .row-hide { opacity: 0; transform: translateY(4px); }
    .row-hide.show { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
    .stream-caret::after { content: '▍'; margin-left: 1px; color: var(--red); animation: caretBlink 1s steps(1) infinite; }
    @keyframes caretBlink { 50% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .row, .row.user, .row .avatar, .row .msg.reveal, .blk-in { animation: none !important; }
      .tok { opacity: 1 !important; }
    }
    .avatar { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; margin-top: 2px; }
    .avatar.bot { background: var(--spark-gradient); }
    .avatar.user { background: var(--border); color: var(--ink-2); border-radius: 50%; }
    .bubble { min-width: 0; }
    .msg { padding: 13px 16px; border-radius: 14px; line-height: 1.6; font-size: 14px; word-wrap: break-word; overflow-wrap: anywhere; }
    .row.user .msg { background: var(--bg); color: var(--navy); border-bottom-right-radius: 5px; white-space: pre-wrap; }
    .row.bot .msg { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--shadow); }
    .row.bot .msg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-stripe); }
    .row.err .msg { background: var(--red-soft); border: 1px solid var(--red-border); color: var(--red-deep); white-space: pre-wrap; }
    .typing .dots span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--muted-2); animation: bnc 1s infinite; }
    .typing .dots span:nth-child(2){ animation-delay: .15s; } .typing .dots span:nth-child(3){ animation-delay: .3s; }
    @keyframes bnc { 0%,80%,100%{ transform: translateY(0); opacity:.4 } 40%{ transform: translateY(-4px); opacity:1 } }

    .msg p { margin: 0 0 10px; } .msg p:last-child { margin-bottom: 0; }
    .msg h1,.msg h2,.msg h3,.msg h4 { margin: 14px 0 7px; line-height: 1.3; }
    .msg h1{font-size:18px} .msg h2{font-size:16px} .msg h3{font-size:15px} .msg h4{font-size:14px}
    .msg h1:first-child,.msg h2:first-child,.msg h3:first-child,.msg p:first-child{margin-top:0}
    .msg ul,.msg ol{ margin: 7px 0 11px; padding-left: 22px; } .msg li{ margin: 4px 0; } .msg li::marker{ color: var(--red); }
    .msg strong{ font-weight:700; color: var(--ink); } .msg em{ font-style: italic; }
    .msg a{ color: var(--blue); text-decoration: underline; }
    .msg a:hover { color: var(--ink); }
    .msg code{ background:#f1f2f4; border:1px solid var(--border); border-radius:5px; padding:1px 5px; font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:12.5px; }
    .msg pre{ background:#11151c; color:#e7eaf0; border-radius:11px; padding:13px 15px; overflow-x:auto; margin:9px 0; }
    .msg pre code{ background:none; border:none; color:inherit; padding:0; }
    .msg blockquote{ margin:9px 0; padding:5px 0 5px 13px; border-left:3px solid var(--red); color:var(--muted); }
    .msg hr{ border:none; border-top:1px solid var(--border); margin:13px 0; }
    .tbl-wrap{ width:100%; overflow-x:auto; margin:9px 0; border:1px solid var(--border); border-radius:10px; -webkit-overflow-scrolling:touch; }
    .msg table{ border-collapse:collapse; width:auto; min-width:100%; margin:0; font-size:13px; }
    .msg th,.msg td{ border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:8px 12px; text-align:left; vertical-align:top; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
    .msg th:last-child,.msg td:last-child{ border-right:none; }
    .msg tbody tr:last-child td{ border-bottom:none; }
    .msg thead th{ background: var(--border-light); font-weight:600; } .msg tbody tr:nth-child(even){ background:#FAFCFF; }
    .msg-foot { display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap; }
    .copy-btn { display:inline-flex; align-items:center; justify-content:center; gap:0; font-size:11.5px; font-weight:600; color:var(--muted);
      background:transparent; border:none; border-radius:7px; padding:5px; cursor:pointer; transition:all .12s; font-family:inherit; }
    .copy-btn span, .act-btn span { display:none; }
    .copy-btn:hover { color:var(--ink); background:rgba(13,20,40,.06); }
    .copy-btn.copied { color:var(--green); background:rgba(0,182,122,.12); }
    .copy-btn svg { width:14px; height:14px; stroke:currentColor; }
    .tools{ font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; }
    .tools svg{ width:12px; height:12px; stroke: var(--muted-2); }

    /* composer */
    .composer-wrap { padding: 12px 22px 18px; background: linear-gradient(180deg, rgba(241,246,251,0), var(--banner-bg) 45%); }
    .composer { max-width: 900px; margin: 0 auto; border: 1.5px solid transparent; border-radius: 999px;
      background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--brand-stripe-flow) border-box;
      background-size: 100% 100%, 200% 100%;
      animation: composerBorderFlow 8s linear infinite;
      box-shadow: var(--shadow); padding: 7px 7px 7px 16px; transition: box-shadow .15s; }
    @keyframes composerBorderFlow { to { background-position: 0 0, -200% 0; } }
    @media (prefers-reduced-motion: reduce) { .composer { animation: none; } }
    .composer:focus-within { box-shadow: 0 0 0 4px rgba(83, 159, 249, .16); }
    .composer-main { display: flex; align-items: flex-end; gap: 8px; }
    /* fixed single-line height — never grows with content; overflow (extra lines, long
       pastes, etc.) scrolls inside this box instead of resizing the composer pill. */
    .composer textarea { flex: 1; resize: none; border: none; outline: none; font-size: 14.5px; font-family: inherit; line-height: 1.5; padding: 9px 2px; height: 40px; max-height: 40px; overflow-y: auto; background: transparent; color: var(--ink); }
    .composer textarea:disabled { color: var(--muted-2); }

    /* composer scope selector (inline, compact) — plain sparkle glyph, no button chrome,
       matching the Figma input's inline mark. */
    .mode-wrap { position: relative; flex: 0 0 auto; align-self: center; }
    .mode-btn { position: relative; width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--red-light); transition: filter .12s, transform .05s; }
    .mode-btn:hover { filter: brightness(1.15); }
    .mode-btn:active { transform: translateY(1px); }
    .mode-btn svg { width: 24px; height: 24px; }
    .mode-menu { position: absolute; bottom: 42px; left: 0; width: 256px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(17,21,28,.16); padding: 6px; display: none; z-index: 30; }
    .mode-menu.open { display: block; }
    .mode-menu .mi { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink-1); }
    .mode-menu .mi:hover { background: var(--red-soft); color: var(--red-deep); }
    .mode-menu .mi svg.mic { width: 17px; height: 17px; flex: 0 0 17px; stroke: var(--ink-2); fill: none; }
    .mode-menu .mi:hover svg.mic { stroke: var(--red); }
    .mode-menu .mi .chk { margin-left: auto; width: 15px; height: 15px; stroke: var(--red); fill: none; opacity: 0; }
    .mode-menu .mi.active .chk { opacity: 1; }
    /* compact inline chip; only takes space when a mode is chosen */
    #modeChip:empty { display: none; }
    .mode-chip { display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; margin-bottom: 5px; padding: 4px 5px 4px 9px; border-radius: 999px;
      background: var(--red-soft); color: var(--red-deep); font-size: 12px; font-weight: 600; border: 1px solid var(--red-border); white-space: nowrap; max-width: 170px; }
    .mode-chip .lbl { overflow: hidden; text-overflow: ellipsis; }
    .mode-chip svg.mic { width: 13px; height: 13px; flex: 0 0 13px; stroke: var(--red-deep); fill: none; }
    .mode-chip .x { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .65; }
    .mode-chip .x:hover { opacity: 1; background: rgba(0,0,0,.08); }
    .mode-chip .x svg { width: 10px; height: 10px; stroke: var(--red-deep); }
    .send { position: relative; width: 42px; height: 42px; flex: 0 0 42px; border: none; border-radius: 50%; background: var(--blue-accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter .15s, transform .05s; }
    .send:hover { filter: brightness(0.95); } .send:active { transform: translateY(1px); } .send:disabled { opacity: .45; cursor: not-allowed; }
    .send svg { width: 19px; height: 19px; }
    .send.stop { background: #2a2f3a; }
    .send.stop:hover { filter: brightness(1.15); }
    .mode-btn[data-tooltip]::after, .send[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%;
      transform: translateX(-50%) translateY(4px); background: #1c2430; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap;
      padding: 5px 9px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
      transition: opacity .12s ease, transform .12s ease; z-index: 40; }
    .mode-btn[data-tooltip]:hover::after, .send[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .35s; }
    .conv-item .conv-spin { flex:0 0 13px; width:13px; height:13px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation: convspin .7s linear infinite; }
    @keyframes convspin { to { transform: rotate(360deg); } }
    .hint { max-width: 900px; margin: 8px auto 0; text-align: center; font-size: 11px; color: var(--muted); }

    /* login overlay */
    .overlay { position: fixed; inset: 0; background: rgba(17,21,28,.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
    .login-card { background: var(--panel); border-radius: 22px; max-width: 540px; width: 100%; padding: 38px 38px 30px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
    .login-card .badge { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 18px; background: var(--red-soft); display: flex; align-items: center; justify-content: center; }
    .login-card .badge img { width: 32px; height: 38px; display: block; }
    .login-card h2 { margin: 0 0 8px; font-size: 23px; font-weight: 800; letter-spacing: -.3px; }
    .login-card .lead { margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.6; }
    .login-card .lead b { color: var(--ink); }
    .steps { text-align: left; display: flex; flex-direction: column; gap: 15px; margin: 0 0 28px; }
    .step { display: flex; gap: 14px; align-items: flex-start; }
    .step .num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--red-gradient); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
    .step .copy b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
    .step .copy span { color: var(--muted); font-size: 13px; line-height: 1.5; }
    .step .copy code { background: #f1f2f4; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 12.5px; }
    .login-form { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; text-align: left; }
    .login-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; background: #fff; color: var(--ink); box-sizing: border-box; }
    .login-input:focus { outline: none; border-color: var(--red-light); box-shadow: 0 0 0 3px var(--red-focus); }
    #otpRow { width: 100%; }
    .login-msg { font-size: 12.5px; color: var(--red); min-height: 16px; }
    .login-msg.ok { color: var(--green); }
    .login-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .btn { border: none; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 14px; padding: 12px 24px; transition: background .15s, transform .05s; }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(13, 20, 40, 0.22); } .btn-primary:hover { background: var(--ink-2); }
    .btn-ghost { background: var(--border-light); color: var(--ink); } .btn-ghost:hover { background: var(--border); }
    .login-note { margin-top: 22px; font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; }
    .login-note svg { width: 14px; height: 14px; stroke: var(--green); }
    body.connected .overlay { display: none; }
    /* Confirmation dialog (e.g. before deleting a chat) — separate from the login overlay. */
    /* Transient action confirmation (see toast() in app.js). Bottom-centre so it never covers the
       composer or the conversation list, and above the dialog layer so a toast fired right after a
       dialog closes is still visible. */
    .toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 130; pointer-events: none; }
    .toast { max-width: 90vw; background: #11151c; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(13,20,40,.28); opacity: 0; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease; }
    .toast.show { opacity: 1; transform: none; }
    .toast-error { background: #b3261e; }
    @media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

    .cdlg-back { position: fixed; inset: 0; background: rgba(17,21,28,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 120; padding: 20px; opacity: 0; transition: opacity .12s ease; }
    .cdlg-back.show { opacity: 1; }
    .cdlg { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(13,20,40,.28); transform: translateY(6px) scale(.98); transition: transform .12s ease; }
    .cdlg-back.show .cdlg { transform: none; }
    .cdlg-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
    .cdlg-msg { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; word-break: break-word; }
    .cdlg-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .cdlg-btn { border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
    .cdlg-cancel { background: var(--border-light); color: var(--ink); } .cdlg-cancel:hover { background: var(--border); }
    .cdlg-danger { background: var(--red-gradient); color: #fff; } .cdlg-danger:hover { filter: brightness(.96); }
    /* Embedded auto sign-in: while we sign the user in with the host's credentials, show a
       spinner instead of the manual login form (no "log in again" screen). */
    #ssoPending { display: none; flex-direction: column; align-items: center; gap: 16px; }
    body.sso-pending .login-form,
    body.sso-pending .login-actions,
    body.sso-pending .login-note,
    body.sso-pending .login-card .lead { display: none; }
    body.sso-pending #ssoPending { display: flex; }
    .sso-spinner { width: 36px; height: 36px; border-radius: 50%;
      border: 3px solid var(--red-soft); border-top-color: #e2261c;
      animation: ssoSpin .8s linear infinite; }
    .sso-text { color: var(--muted); font-size: 14px; }
    @keyframes ssoSpin { to { transform: rotate(360deg); } }

    /* header client + resources */
    .client-chip { display:none; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--nav-text);
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:5px 11px; border-radius:999px; max-width:230px; }
    .client-chip.show { display:flex; }
    .client-chip .who { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .client-chip .ava { width:18px; height:18px; border-radius:50%; flex:0 0 18px; background:var(--red-gradient);
      color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
    .res-wrap { position:relative; }
    .res-btn { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#c4c9d4; background:#2f3441;
      border:1px solid #3a4150; border-radius:999px; padding:6px 12px; cursor:pointer; font-family:inherit; }
    .res-btn:hover { background:#363c4a; color:#fff; }
    .res-btn svg { width:13px; height:13px; stroke:currentColor; }
    .res-menu { position:absolute; right:0; top:42px; background:var(--panel); border:1px solid var(--border); border-radius:12px;
      box-shadow:0 14px 40px rgba(0,0,0,.18); min-width:230px; padding:6px; display:none; z-index:20; }
    .res-menu.open { display:block; }
    .res-menu a { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; font-size:13px; color:var(--ink);
      text-decoration:none; }
    .res-menu a:hover { background:#f5f6f8; }
    .res-menu a svg { width:15px; height:15px; stroke:var(--red); flex:0 0 15px; }

    /* answer footer actions */
    .act-btn { display:inline-flex; align-items:center; justify-content:center; gap:0; font-size:11.5px; font-weight:600; color:var(--muted);
      background:transparent; border:none; border-radius:7px; padding:5px; cursor:pointer; transition:all .12s; font-family:inherit; }
    .act-btn:hover { color:var(--ink); background:rgba(13,20,40,.06); }
    .act-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; }
    .act-btn.on-up { color:var(--green); background:rgba(0,182,122,.12); }
    .act-btn.on-down { color:var(--red-deep); background:var(--red-soft); }
    .followups { display:flex; flex-direction:column; gap:8px; margin-top:11px; }
    .fu-chips { display:flex; flex-wrap:wrap; gap:8px; }
    .fu-toggle { display:none; align-items:center; gap:6px; align-self:flex-start; background:none; border:none; cursor:pointer;
      font-family:inherit; font-size:12px; color:var(--muted); font-weight:600; padding:2px 0; }
    .fu-toggle:hover { color:var(--red-deep); }
    .fu-chev { width:13px; height:13px; stroke:currentColor; transition:transform .15s; }
    .followups.collapsed .fu-chips { display:none; }
    .followups.collapsed .fu-toggle { display:inline-flex; }
    .followups.collapsed.open .fu-chips { display:flex; }
    .followups.collapsed.open .fu-chev { transform:rotate(90deg); }
    .fchip { font-size:12.5px; color:var(--ink-2); background:var(--panel); border:1px solid var(--border); border-radius:999px;
      padding:7px 13px; cursor:pointer; transition:all .12s; font-family:inherit; text-align:left; }
    .fchip:hover { border-color:var(--red-border); background:var(--red-soft); color:var(--red-deep); }
    .fchip::before { content:'↳ '; color:var(--muted-2); }

    /* ambiguity clarification — options rendered as a normal bot bubble, styled from the app's
       own tokens (not a separate palette) so it matches every other interactive element. */
    .clarif-options { display:flex; flex-direction:column; gap:8px; margin-top:12px; width:100%; }
    .clarif-option { font-size:13.5px; font-weight:500; color:var(--ink-2); background:var(--panel);
      border:1px solid var(--border); border-radius:12px; padding:11px 15px; cursor:pointer;
      transition:all .12s; font-family:inherit; text-align:left; width:100%; white-space:normal;
      word-wrap:break-word; }
    .clarif-option:hover:not(:disabled) { border-color:var(--red-border); background:var(--red-soft); color:var(--red-deep); }
    .clarif-option:active:not(:disabled) { transform:translateY(1px); }
    .clarif-option:disabled { opacity:.5; cursor:not-allowed; }
    .clarif-option:first-child { background:var(--navy-gradient); color:#fff; border-color:transparent; }
    .clarif-option:first-child:hover:not(:disabled) { background:var(--ink-2); color:#fff; border-color:transparent; }
    .clarif-option-other { background:var(--border-light); color:var(--ink); border-color:var(--border); }
    .clarif-option-other:hover:not(:disabled) { background:var(--border); color:var(--ink); border-color:var(--border); }
    .clarif-option-other:first-child { background:var(--border-light); color:var(--ink); border-color:var(--border); }
    .clarif-option-other:first-child:hover:not(:disabled) { background:var(--border); color:var(--ink); border-color:var(--border); }
    .clarif-other-row { display:flex; gap:8px; width:100%; }
    .clarif-other-input { flex:1; padding:11px 15px; border:1px solid var(--border); border-radius:12px;
      background:#fff; color:var(--ink); font-size:13.5px; font-family:inherit; outline:none; box-sizing:border-box; }
    .clarif-other-input:focus { border-color:var(--red-light); box-shadow:var(--focus-ring); }
    .clarif-other-send { padding:11px 18px; border:none; border-radius:12px; background:var(--navy);
      color:#fff; font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap; }
    .clarif-other-send:hover:not(:disabled) { background:var(--ink-2); }
    .clarif-other-send:disabled { opacity:.5; cursor:not-allowed; }
    @media (max-width: 480px) { .clarif-option { font-size:13px; padding:10px 13px; } }

    /* scroll-to-latest */
    .scroll-bottom { position:fixed; right:26px; bottom:104px; width:38px; height:38px; border-radius:50%;
      background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); cursor:pointer; display:none;
      align-items:center; justify-content:center; z-index:8; }
    .scroll-bottom.show { display:flex; }
    .scroll-bottom svg { width:18px; height:18px; stroke:var(--ink-2); }

    /* chat navigator (jump between questions in the current chat) */
    .chat-nav-btn { position:fixed; right:26px; bottom:150px; width:38px; height:38px; border-radius:50%;
      background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); cursor:pointer;
      align-items:center; justify-content:center; z-index:8; display:none; }
    .chat-nav-btn.show { display:flex; }
    .chat-nav-btn:hover { border-color:var(--red-border); }
    .chat-nav-btn svg { width:18px; height:18px; stroke:var(--red); }
    .chat-nav-btn.active { background:var(--red-gradient); border-color:transparent; }
    .chat-nav-btn.active svg { stroke:#fff; }
    .chat-nav-panel { position:fixed; right:74px; bottom:150px; width:300px; max-height:46vh; overflow-y:auto;
      background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
      z-index:9; display:none; padding:6px; }
    .chat-nav-panel.show { display:block; }
    .chat-nav-panel .cn-head { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2);
      font-weight:700; padding:7px 9px 5px; }
    .chat-nav-item { display:flex; gap:9px; align-items:flex-start; padding:8px 9px; border-radius:9px; cursor:pointer;
      font-size:13px; color:var(--ink); line-height:1.35; }
    .chat-nav-item:hover { background:var(--red-soft); }
    .chat-nav-item .cn-num { flex:0 0 18px; height:18px; border-radius:50%; background:var(--red-soft); color:var(--red);
      font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
    .chat-nav-item .cn-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
      -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .row.nav-flash .msg { animation:navFlash 1.4s ease; }
    @keyframes navFlash { 0%,100% { box-shadow:none; } 25% { box-shadow:0 0 0 3px var(--red-focus); } }

    /* layout: sidebar + main — sidebar matches App.vue .left-nav / DashboardBanners .tabs-section */
    .app-body { flex:1; display:flex; min-height:0; }
    .sidebar { width:248px; flex:0 0 248px; background:var(--navy-gradient); border-right:1px solid rgba(255,255,255,.06);
      display:flex; flex-direction:column; padding:14px 12px; gap:6px; overflow-y:auto; transition:width .16s ease, flex-basis .16s ease; }
    /* collapsed: only the icon rail shows; the panel + lists appear on click */
    .sidebar.collapsed { width:64px; flex-basis:64px; background:transparent; border-right:none; overflow:visible; }
    .sidebar.collapsed .side-toolbar { flex-direction:column; }
    .sidebar.collapsed #newChatBtn { margin-left:0; }
    .sidebar.collapsed .side-label,
    .sidebar.collapsed #convSection,
    .sidebar.collapsed .side-item,
    .sidebar.collapsed .side-spacer { display:none !important; }
    .side-new { display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px; border-radius:80px;
      border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font-weight:600; font-size:13.5px;
      cursor:pointer; font-family:inherit; margin-bottom:8px; transition:background .14s, border-color .14s; }
    .side-new:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); }
    .side-new svg { width:16px; height:16px; stroke:currentColor; }
    .side-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:rgba(241,246,251,.55); margin:12px 6px 5px; font-weight:700; }
    .side-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; cursor:pointer; font-size:13.5px;
      color:var(--nav-text); border:1px solid transparent; transition:background .12s, border-color .12s, color .12s; text-decoration:none; }
    .side-item:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:#fff; }
    .side-item .si { width:30px; height:30px; flex:0 0 30px; border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
    .side-item:hover .si { background:rgba(255,255,255,.14); }
    .side-item .si svg { width:16px; height:16px; stroke:var(--blue-accent); fill:none; }
    .side-item .st { font-weight:500; line-height:1.2; }
    .side-spacer { flex:1; }
    /* compact icon toolbar (history toggle + new chat) */
    .side-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .side-icon { position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px;
      border:1px solid rgba(83,159,249,.32); background:rgba(83,159,249,.14); color:var(--blue-accent); cursor:pointer;
      transition:background .14s, border-color .14s, color .14s, box-shadow .14s; }
    .side-icon:hover { background:rgba(83,159,249,.24); border-color:rgba(83,159,249,.55); color:#fff; }
    .side-icon.active { background:var(--spark-gradient); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(83,159,249,.28); }
    .side-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; }
    .side-icon::after { content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-4px);
      background:#1c2430; color:#fff; font-size:11.5px; font-weight:600; white-space:nowrap; padding:5px 9px; border-radius:7px;
      box-shadow:0 4px 14px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; z-index:40; }
    .side-icon:hover::after { opacity:1; transform:translateX(-50%) translateY(0); transition-delay:.35s; }
    .sidebar.collapsed .side-icon::after { left:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(-4px); }
    .sidebar.collapsed .side-icon:hover::after { transform:translateY(-50%) translateX(0); }
    #newChatBtn { margin-left:auto; }
    .conv-empty { font-size:12.5px; color:rgba(241,246,251,.5); padding:6px 10px; }
    /* recent conversations */
    #convList { display:flex; flex-direction:column; gap:1px; max-height:60vh; overflow-y:auto; margin-bottom:4px; }
    .conv-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; cursor:pointer; font-size:13px;
      color:var(--nav-text); border:1px solid transparent; transition:background .12s, border-color .12s, color .12s; }
    .conv-item:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:#fff; }
    .conv-item.active { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.18); color:#fff; }
    .conv-item .ct { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }
    .conv-del { flex:0 0 auto; display:none; background:none; border:none; padding:3px; border-radius:6px; cursor:pointer; color:rgba(241,246,251,.6); }
    .conv-item:hover .conv-del { display:inline-flex; }
    .conv-del:hover { background:rgba(255,255,255,.14); color:#fff; }
    .conv-del svg { width:14px; height:14px; stroke:currentColor; fill:none; }
    .main-col { flex:1; display:flex; flex-direction:column; min-width:0; background:transparent; }

    /* account badge */
    .acct-badge { display:none; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px;
      background:rgba(0, 182, 122, 0.16); color:#5FE0A0; text-transform:uppercase; letter-spacing:.04em; border:1px solid rgba(0, 182, 122, 0.25); }
    .acct-badge.show { display:flex; }
    .acct-badge.sandbox { background:var(--warning-bg); color:var(--warning-text); }
    .acct-badge .d { width:6px; height:6px; border-radius:50%; background:currentColor; }

    /* charts inside an answer */
    .chart-card { margin:14px 0; padding:14px 14px 10px; border:1px solid var(--border); border-radius:14px; background:var(--card, #fff); box-shadow:0 1px 3px rgba(16,24,40,.04); }
    .chart-card .chart-title { font-size:13px; font-weight:700; color:var(--text, #1a1d23); margin:0 0 10px; letter-spacing:.01em; }
    .chart-card .chart-canvas-wrap { position:relative; width:100%; height:280px; }
    .chart-card .chart-loading { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); padding:18px 4px; }
    .chart-card .chart-loading .spinner.sm { margin:0; }
    @media (max-width:560px){ .chart-card .chart-canvas-wrap { height:230px; } }

    /* KPI stat tiles + outcome-breakdown table (```stats blocks the assistant emits for
       "how many / what's my rate" style summaries — a lighter-weight sibling of .chart-card
       for when the answer is a handful of headline numbers plus a categorical split). */
    .stats-card { margin:14px 0; }
    .stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:16px; }
    .stat-tile { background:var(--banner-bg); border:1px solid var(--border); border-radius:14px; padding:13px 15px; }
    .stat-tile .st-head { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
    .stat-tile .st-ic { width:16px; height:16px; flex:0 0 16px; display:flex; color:var(--muted); }
    .stat-tile .st-ic svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; }
    .stat-tile .st-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
    .stat-tile .st-value { font-family:'flecha m', 'Fraunces', Georgia, serif; font-size:26px; font-weight:600; letter-spacing:-.3px; color:var(--navy); line-height:1.15; }
    .stat-tile .st-bar { margin-top:10px; height:4px; border-radius:99px; background:var(--border-light); overflow:hidden; }
    .stat-tile .st-bar span { display:block; height:100%; border-radius:99px; background:var(--muted-2); }
    .stat-tile.tone-blue .st-ic { color:var(--blue-accent); } .stat-tile.tone-blue .st-bar span { background:var(--blue-accent); }
    .stat-tile.tone-red  .st-ic { color:var(--red); }        .stat-tile.tone-red  .st-bar span { background:var(--red); }
    .stat-tile.tone-gold .st-ic { color:var(--gold); }        .stat-tile.tone-gold .st-bar span { background:#D9A400; }
    .stat-tile.tone-green .st-ic { color:var(--green); }      .stat-tile.tone-green .st-bar span { background:var(--green); }
    @media (max-width:560px){ .stat-grid { grid-template-columns:1fr; } }

    .breakdown-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 8px; }
    .bd-table { border-collapse:collapse; width:100%; font-size:13px; }
    .bd-table thead th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
      color:var(--muted); background:var(--border-light); padding:8px 12px; }
    .bd-table thead th:not(:first-child) { text-align:right; }
    .bd-table tbody td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .bd-table tbody tr:last-child td { border-bottom:none; }
    .bd-table td.bd-status { display:flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:500; }
    .bd-table td.bd-count, .bd-table td.bd-share { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
    .bd-dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:var(--muted-2); }
    .bd-dot.tone-blue { background:var(--blue-accent); } .bd-dot.tone-red { background:var(--red); }
    .bd-dot.tone-gold { background:#D9A400; } .bd-dot.tone-green { background:var(--green); }
    .bd-share-wrap { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
    .bd-share-track { width:88px; height:5px; border-radius:99px; background:var(--border-light); overflow:hidden; }
    .bd-share-track span { display:block; height:100%; border-radius:99px; background:var(--muted-2); }
    .bd-share-track.tone-blue span { background:var(--blue-accent); } .bd-share-track.tone-red span { background:var(--red); }
    .bd-share-track.tone-gold span { background:#D9A400; } .bd-share-track.tone-green span { background:var(--green); }
    @media (max-width:560px){ .bd-share-track { width:52px; } }

    /* resource links inside an answer */
    .ans-res { margin-top:11px; padding-top:10px; border-top:1px dashed var(--border); }
    .ans-res .rl-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:6px; }

    /* live working plan + collapsed steps trace */
    .spinner { width:15px; height:15px; flex:0 0 15px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--red); animation:spin .7s linear infinite; }
    .spinner.sm { width:14px; height:14px; flex:0 0 14px; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .mini-spin { width:10px; height:10px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--red); animation:spin .7s linear infinite; display:block; }

    .steps-box { margin:0 0 10px; border:1px solid var(--border); border-radius:12px;
      background:var(--banner-bg-gradient); overflow:hidden; width:100%; }
    /* compact = the "Analyzing…" thinking indicator shown for every request — no card chrome,
       no avatar, just the spinner + label sitting flush on the page. */
    .steps-box.compact { border:none; background:transparent; box-shadow:none; border-radius:0; }
    .steps-box.compact .steps-toggle { padding:2px 0; color:var(--muted); font-weight:500; font-size:13.5px; }
    .working-row.light .avatar { display:none; }
    /* spoke (activity-indicator) spinner — 8 fading dashes rotating in discrete steps */
    .spoke-spin { width:18px; height:18px; flex:0 0 18px; display:flex; color:var(--muted-2); animation:spokeSpin 0.9s steps(8) infinite; }
    .spoke-spin svg { width:100%; height:100%; }
    @keyframes spokeSpin { to { transform:rotate(360deg); } }
    .steps-toggle { width:100%; display:flex; align-items:center; gap:8px; padding:8px 13px; background:none; border:none;
      cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--ink-2); font-weight:600; transition:background .12s; text-align:left; }
    /* same type family as the greeting ("How can I help…" / its subtext) so the "Analyzing…"
       loader matches instead of falling back to Inter. */
    .steps-title { font-family: 'Graphik', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    .steps-toggle .steps-title { flex:1; }
    .working-row .bubble { min-width:min(100%, 420px); }

    /* Mobile nav fallback: below 860px the sidebar no longer disappears entirely (it used to,
       with no replacement — new chat / history / resource links were all unreachable). It stays
       visible as the same compact icon rail already used on desktop while collapsed, and when
       expanded (tapping the history icon) it becomes a full-height overlay drawer above the chat
       instead of squeezing the narrow viewport, dismissed by its own backdrop. */
    .mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(13,20,40,.45); z-index: 55; }
    @media (max-width: 860px) {
      .sidebar { display: flex; }
      .sidebar:not(.collapsed) {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
        box-shadow: 0 0 40px rgba(0,0,0,.45);
      }
      body.mobile-sidebar-open .mobile-backdrop { display: block; }
    }
    @media (max-width: 620px) { .cards { grid-template-columns: 1fr; } .client-chip { max-width:120px; } }

    /* accessible focus rings for every interactive element (buttons/anchors already get this
       for free via keyboard nav; .card/.conv-item/.mi are plain divs made focusable via
       tabindex="0" below, so they need it explicitly too). Suppresses the default outline only
       for mouse clicks (:focus-visible), never for keyboard focus. */
    .card:focus-visible, .side-item:focus-visible, .conv-item:focus-visible, .fchip:focus-visible,
    .mode-btn:focus-visible, .mi:focus-visible, .side-icon:focus-visible, .act-btn:focus-visible,
    .copy-btn:focus-visible, .send:focus-visible, .scroll-bottom:focus-visible,
    .chat-nav-btn:focus-visible, .fu-toggle:focus-visible, .res-btn:focus-visible, .conv-del:focus-visible,
    .cdlg-btn:focus-visible, .btn:focus-visible, .login-input:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    /* Reduced-motion coverage for the remaining continuous "in progress" animations (loading
       spinners, pulsing status dot, blinking stream caret, decorative badge aura) — previously
       only the entrance/reveal animations above respected this. Loading indicators still render
       (so "something is happening" remains visible), just without the motion itself. */
    @media (prefers-reduced-motion: reduce) {
      .empty .badge::before,
      .stream-caret::after,
      .status.wait .dot,
      .spinner, .mini-spin, .mini-spin.convspin,
      .spoke-spin,
      .conv-item .conv-spin,
      .sso-spinner,
      .typing .dots span {
        animation: none !important;
      }
    }

    /* Clarification Dialog - Claude-style button UI */
    .clarif-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
    }

    .clarif-option {
      padding: 12px 16px;
      border: 1px solid #d0d0d0;
      border-radius: 8px;
      background: #ffffff;
      color: #1a1a1a;
      font-size: 14px;
      text-align: left;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 500;
      font-family: inherit;
      display: block;
      width: 100%;
      white-space: normal;
      word-wrap: break-word;
    }

    .clarif-option:hover:not(:disabled) {
      background: #f5f5f5;
      border-color: #4a90e2;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .clarif-option:active:not(:disabled) {
      background: #efefef;
      transform: scale(0.98);
    }

    .clarif-option:first-child {
      background: #1a3a52;
      color: white;
      border-color: #1a3a52;
    }

    .clarif-option:first-child:hover:not(:disabled) {
      background: #0f2541;
      border-color: #0f2541;
    }

    .clarif-option:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* "Other" button styling - outlined instead of filled */
    .clarif-option-other {
      background: #ffffff;
      border-color: #999;
      color: #666;
    }

    .clarif-option-other:hover:not(:disabled) {
      background: #f9f9f9;
      border-color: #666;
      color: #333;
    }

    .clarif-option-other:first-child {
      background: #ffffff;
      color: #666;
      border-color: #999;
    }

    .clarif-option-other:first-child:hover:not(:disabled) {
      background: #f9f9f9;
      color: #333;
      border-color: #666;
    }

    @media (max-width: 480px) {
      .clarif-option {
        font-size: 13px;
        padding: 11px 14px;
      }
    }

    /* Inline "Other" text input — replaces the Other button in place, same footprint */
    .clarif-other-row {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .clarif-other-input {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid #999;
      border-radius: 8px;
      background: #ffffff;
      color: #1a1a1a;
      font-size: 14px;
      font-family: inherit;
      outline: none;
    }

    .clarif-other-input:focus {
      border-color: #4a90e2;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .clarif-other-send {
      padding: 12px 16px;
      border: 1px solid #1a3a52;
      border-radius: 8px;
      background: #1a3a52;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
    }

    .clarif-other-send:hover:not(:disabled) {
      background: #0f2541;
      border-color: #0f2541;
    }

    .clarif-other-send:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }