:root { --bg:#f4f6fa; --sidebar:#f8f9fc; --surface:#ffffff; --line:rgba(16,20,29,.11);
      --text:#10141d; --muted:#667085; --green:#178a62; --green-soft:#e8f5ef; --red:#b42318; --accent:#666bd8;
      --surface-2:#f6f8fb; --code-bg:#0e1219; --badge-bg:#f3f5f8; --bar-bg:#e8ebf0;
      --gate-warn-bg:#fcf6e8; --gate-warn-line:#e3c98a; --gate-info-bg:#eef6fc; --gate-info-line:#9ec6ea; --err-bg:#fdecec;
      color-scheme:light;
      --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    html[data-theme="dark"] {
      --bg:#090c12; --sidebar:#0f131b; --surface:#151a24; --line:rgba(255,255,255,.11);
      --text:#f5f7fb; --muted:#9aa4b2; --green:#57d3a2; --green-soft:#143126; --red:#ec7069; --accent:#aeb5ff;
      --surface-2:#1b2230; --code-bg:#090c12; --badge-bg:#202735; --bar-bg:#262d39;
      --gate-warn-bg:#2e2712; --gate-warn-line:#5a4a1e; --gate-info-bg:#132430; --gate-info-line:#2a5470; --err-bg:#2e1a1a;
      color-scheme:dark; }
    html[data-theme="dark"] .newtoken { border-color:#1f4a33; background:#132a1e; }
    html[data-theme="dark"] .send:disabled { background:#3a3d42; }
    html[data-theme="dark"] .voice-bar.error { border-color:#5a2a26; background:#2e1a18; }
    * { box-sizing:border-box; }
    [hidden] { display:none !important; }   /* class display rules (.settings/.voice-bar) must not override the hidden attr */
    html, body { height:100%; margin:0; }
    body { background:var(--bg); color:var(--text); font-family:var(--font); overflow-wrap:break-word; }
    body.html-preview-fullscreen-open { overflow:hidden; }
    a { color:var(--green); text-decoration:none; }
    input, textarea, select { font:inherit; color:var(--text); }
    button { font:inherit; cursor:pointer; }
    .muted { color:var(--muted); } .small { font-size:12px; }

    .app { display:flex; height:100vh; overflow:hidden; }

    /* ---- sidebar ---- */
    .sidebar { width:266px; flex:0 0 266px; background:var(--sidebar); border-right:1px solid var(--line);
      display:flex; flex-direction:column; min-height:0; }
    .sb-head { padding:12px; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid var(--line); }
    .sb-brand { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; }
    .brand-mark { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff;
      font-size:12px; font-weight:800; background:linear-gradient(135deg,#101111,#2c2c28); }
    .beta-badge { display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px; font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#0c7a4d; background:rgba(12,122,77,.12); border:1px solid rgba(12,122,77,.24); white-space:nowrap; }
    .new-chat { width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
      color:var(--text); font-weight:600; font-size:14px; transition:background .15s; }
    .new-chat:hover { background:var(--surface-2); }
    .conv-search { margin:8px 8px 0; width:calc(100% - 16px); box-sizing:border-box; min-height:34px; padding:6px 10px;
      border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-size:13px; }
    .conv-search:focus { outline:none; border-color:var(--accent, #6366f1); }
    .conv-list { flex:1; overflow-y:auto; padding:8px 8px 14px; display:flex; flex-direction:column; gap:2px; min-height:0; }
    .conv-empty { color:var(--muted); font-size:12.5px; padding:14px 12px; text-align:center; line-height:1.5; border:1px dashed var(--line); border-radius:10px; margin:6px; }
    .conv { display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:9px; cursor:pointer;
      font-size:13.5px; color:var(--text); }
    .conv:hover { background:rgba(255,255,255,.6); }
    .conv.active { background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
    .conv .ic { flex:0 0 auto; opacity:.6; font-size:13px; }
    .conv .title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .conv .acts { display:none; gap:1px; flex:0 0 auto; }
    .conv:hover .acts, .conv.active .acts { display:flex; }
    .conv .acts button { border:0; background:none; color:var(--muted); padding:2px 4px; border-radius:6px; font-size:13px; line-height:1; }
    .conv .acts button:hover { background:rgba(0,0,0,.07); color:var(--text); }
    .conv-group { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
      padding:12px 10px 4px; user-select:none; }
    .conv-group:first-child { padding-top:4px; }

    .sb-foot { border-top:1px solid var(--line); padding:12px; font-size:13px; }
    .sb-nav { display:none; gap:16px; padding:10px 12px 2px; border-top:1px solid var(--line); }
    .sb-nav a { color:var(--muted); font-size:13px; padding:6px 0; } .sb-nav a:hover { color:var(--text); }
    .sb-foot input, .sb-foot select { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--surface); }
    .mini-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:0 0 5px; }
    .acct-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
    .acct-email { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .link-btn { border:0; background:none; color:var(--green); font-size:12.5px; padding:0; }
    .newtoken { margin-top:8px; padding:8px; border:1px solid #b9dfce; background:#f0fbf6; border-radius:8px;
      font-family:var(--mono); font-size:11.5px; overflow-wrap:anywhere; }

    /* ---- main ---- */
    .main { flex:1; display:flex; flex-direction:column; min-width:0; }
    .topbar { height:52px; flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--surface); }
    .icon-btn { width:36px; height:36px; border:1px solid transparent; border-radius:9px; background:none; color:var(--text); font-size:16px; display:grid; place-items:center; }
    .icon-btn:hover { background:rgba(0,0,0,.05); }
    .icon-btn svg { width:19px; height:19px; display:block; }
    .send svg { width:18px; height:18px; display:block; }
    #sidebarToggle { display:none; }
    .topbar select#model { max-width:220px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:var(--surface); }
    .topnav { margin-left:auto; display:flex; gap:14px; font-size:14px; }

    .settings { flex:0 0 auto; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface); display:grid; gap:10px; }
    .set-field { display:grid; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
    .set-field textarea { border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:var(--surface); resize:vertical; font-weight:400; text-transform:none; letter-spacing:0; color:var(--text); }
    .check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
    .check input { width:auto; }
    .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .ghost { border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:0 12px; min-height:34px; font-size:13px; }
    .small-btn { min-height:32px; font-size:12.5px; }
    .primary { border:1px solid var(--green); background:var(--green); color:#fff; border-radius:8px; min-height:38px; padding:0 14px; font-weight:600; }
    .primary.block { width:100%; }
    button:disabled { opacity:.5; cursor:default; }

    /* ---- chat ---- */
    .chat { flex:1; overflow-y:auto; min-height:0; }
    .transcript { max-width:768px; margin:0 auto; padding:22px 16px 8px; display:flex; flex-direction:column; gap:18px; }
    .transcript:empty { display:none; }
    .msg { display:flex; flex-direction:column; gap:5px; max-width:100%; }
    .msg .who { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
    .msg.user .who { flex-direction:row-reverse; }
    .msg .ava { flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
      font-size:10.5px; font-weight:800; letter-spacing:0; color:#fff; }
    .msg.assistant .ava { background:linear-gradient(135deg,#101111,#2c2c28); }
    .msg.user .ava { background:var(--green); }
    /* gentle entrance for messages (respecting reduced-motion) */
    @media (prefers-reduced-motion: no-preference) {
      .msg { animation:msgIn .22s ease both; }
      @keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
    }
    /* per-message hover action (edit any earlier user turn, ChatGPT-style) */
    .msg-edit { align-self:flex-end; margin-top:5px; font-size:11.5px; color:var(--muted); background:none;
      border:1px solid var(--line); border-radius:7px; padding:3px 9px; opacity:0; transition:opacity .15s, background .15s, color .15s; }
    .msg.user:hover .msg-edit, .msg-edit:focus-visible { opacity:1; }
    .msg-edit:hover { background:var(--surface); color:var(--text); }
    /* collapsible reasoning trail persisted under an assistant answer (o1-style) */
    .reasoning { margin:0 0 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; }
    .reasoning > summary { list-style:none; cursor:pointer; padding:8px 12px; font-size:12.5px; color:var(--muted);
      display:flex; align-items:center; gap:7px; }
    .reasoning > summary::-webkit-details-marker { display:none; }
    .reasoning > summary::before { content:"▸"; font-size:10px; transition:transform .15s; }
    .reasoning[open] > summary::before { transform:rotate(90deg); }
    .reasoning > summary:hover { color:var(--text); }
    .reasoning .rtrail { padding:2px 12px 10px 26px; display:grid; gap:5px; }
    .reasoning .rline { font-size:12.5px; line-height:1.5; color:var(--muted); position:relative; }
    .reasoning .rline::before { content:""; position:absolute; left:-13px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--green); opacity:.6; }
    .msg.user { align-items:flex-end; }
    .msg.user .bubble { background:var(--green-soft); border:1px solid #cfe6da; border-radius:16px 16px 4px 16px; padding:11px 14px; max-width:88%; }
    .msg.assistant .bubble { background:var(--surface); border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:13px 15px; }
    .bubble { white-space:pre-wrap; line-height:1.6; font-size:15px; overflow-wrap:anywhere; }
    .msg.assistant .bubble { white-space:normal; }   /* markdown-rendered: structure comes from tags, not raw newlines */
    .bubble .md-tablewrap { overflow-x:auto; margin:9px 0; }
    .bubble .md-table { border-collapse:collapse; font-size:13px; }
    .bubble .md-table th, .bubble .md-table td { border:1px solid var(--line); padding:6px 11px; text-align:left; vertical-align:top; }
    .live-board { margin:8px 0; padding:8px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px; }
    .live-board__title { font-weight:600; margin-bottom:4px; opacity:.8; }
    .live-board__row { opacity:.9; line-height:1.5; }
    .live-board__persp { margin-top:5px; font-weight:600; }
    .bubble .md-table th { background:var(--surface); font-weight:700; white-space:nowrap; }
    .bubble .md-math { font-family:"Cambria Math","Latin Modern Math",Georgia,serif; font-style:italic; }
    .bubble .md-math--block { display:block; text-align:center; margin:9px 0; font-size:1.06em; }
    .bubble .md-math sup, .bubble .md-math sub { font-style:normal; }
    .bubble .md-math .mfrac { display:inline-flex; flex-direction:column; vertical-align:-0.48em; text-align:center; margin:0 .18em; font-style:normal; }
    .bubble .md-math .mfrac > .mnum { border-bottom:1px solid currentColor; padding:0 .35em; line-height:1.3; }
    .bubble .md-math .mfrac > .mden { padding:0 .35em; line-height:1.3; }
    .bubble .md-math .mroot > .msq { border-top:1px solid currentColor; padding:0 .16em; margin-left:1px; }
    .bubble .md-pre { position:relative; background:#0f1011; color:#eceae3; border-radius:9px; padding:28px 13px 11px; overflow:auto; font:12.5px/1.6 var(--mono); margin:8px 0; }
    .bubble .md-pre .md-lang { position:absolute; top:6px; left:11px; font:600 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#8b949e; pointer-events:none; }
    .bubble .md-pre code { background:none; color:inherit; padding:0; font:inherit; }
    /* syntax highlight tokens (code block bg is dark in both themes → one palette) */
    .md-pre .tok-com { color:#8b949e; font-style:italic; }
    .md-pre .tok-str { color:#7ee787; }
    .md-pre .tok-num { color:#ffa657; }
    .md-pre .tok-kw  { color:#ff7b72; }
    .md-pre .tok-typ { color:#79c0ff; }
    .code-tools { position:absolute; top:6px; right:6px; display:flex; gap:6px; align-items:center; opacity:.84; transition:opacity .15s; }
    .bubble .md-pre:hover .code-tools, .bubble .md-pre:focus-within .code-tools { opacity:1; }
    .code-copy, .code-preview-btn { font-size:10.5px; font-family:inherit; color:#cfcdc4; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:2px 7px; cursor:pointer; }
    .code-copy:hover, .code-preview-btn:hover { background:rgba(255,255,255,.2); color:#fff; }
    .html-preview { margin:-2px 0 10px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface); }
    .html-preview__head { padding:7px 10px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .html-preview__tools { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
    .html-preview__tools button { min-height:26px; padding:2px 8px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:11.5px; cursor:pointer; }
    .html-preview__tools button[aria-pressed="true"] { border-color:var(--green); color:var(--green); background:var(--green-soft); }
    .html-preview__frame { display:block; width:100%; height:min(52vh, 460px); min-height:320px; border:0; background:#fff; }
    .html-preview.fullscreen { position:fixed; inset:0; z-index:1200; width:100vw; height:100dvh; max-height:100dvh; margin:0; box-sizing:border-box; display:flex; flex-direction:column; border:0; border-radius:0; box-shadow:0 18px 70px rgba(0,0,0,.42); }
    .html-preview.fullscreen .html-preview__head { flex:0 0 auto; min-height:42px; }
    .html-preview.fullscreen .html-preview__frame { flex:1 1 auto; height:auto; min-height:0; }
    @media (max-width:720px) {
      .html-preview.fullscreen { inset:0; border-radius:0; border-left:0; border-right:0; }
      .html-preview__head { align-items:flex-start; flex-direction:column; }
      .html-preview__tools { justify-content:flex-start; }
    }
    .sess-meter { margin-left:auto; font-size:12px; font-family:var(--mono); color:var(--muted); white-space:nowrap; }
    .bubble .md-code { background:rgba(29,29,27,.07); border-radius:6px; padding:1px 6px; font:.88em var(--mono); }
    .bubble .md-ul, .bubble .md-ol { margin:6px 0; padding-left:22px; } .bubble .md-ul li, .bubble .md-ol li { margin:3px 0; }
    .bubble a { color:var(--green); text-decoration:underline; }
    .msg-copy { align-self:flex-start; margin-top:6px; font-size:11.5px; color:var(--muted); background:none; border:1px solid var(--line); border-radius:7px; padding:3px 9px; cursor:pointer; transition:background .15s, color .15s; }
    .msg-copy:hover { background:var(--surface); color:var(--text); }
    .turn-actions { display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap; margin:2px 0 10px; padding-left:2px; }
    .ta-group { display:flex; gap:8px; flex-wrap:wrap; }
    .turn-act { font-size:12px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:5px 11px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
    .turn-act:hover { background:var(--surface-2); color:var(--text); border-color:var(--muted); }
    /* keyboard accessibility: visible focus ring for keyboard users */
    .icon-btn:focus-visible, .send:focus-visible, button:focus-visible, a:focus-visible,
    input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
      outline:2px solid var(--green); outline-offset:2px; }
    .msg .attach-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:flex-start; }
    .msg-img { display:inline-block; line-height:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); transition:border-color .15s; }
    .msg-img img { display:block; max-width:220px; max-height:220px; width:auto; height:auto; object-fit:cover; }
    .msg-img:hover { border-color:var(--green); }
    .chip-file { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:3px 7px; background:var(--bg); text-decoration:none; cursor:pointer; transition:border-color .15s, color .15s; }
    .chip-file:hover { border-color:var(--green); color:var(--text); }
    .chip-file img { width:22px; height:22px; object-fit:cover; border-radius:4px; }

    .msg-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
    .badge { font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:var(--badge-bg); color:var(--muted); }
    .badge strong { color:var(--text); }
    .raw { margin-top:8px; } .raw summary { cursor:pointer; font-size:12px; color:var(--muted); }
    .code { background:var(--code-bg); border:1px solid var(--line); border-radius:8px; padding:10px; font-size:11.5px; overflow:auto; white-space:pre; margin-top:6px; max-height:480px; font-family:var(--mono); }
    .retry-btn { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:5px 12px; cursor:pointer; }
    .retry-btn:hover { background:var(--bg); }
    .attach .sz { flex:0 0 auto; color:var(--muted); font-size:10.5px; }

    /* live progress inside an assistant bubble */
    .prog { display:grid; gap:8px; }
    .bar { height:7px; border-radius:999px; background:var(--bar-bg); overflow:hidden; }
    .bar-fill { height:100%; width:2%; background:var(--green); transition:width .3s ease; }
    .prog .now { font-size:13px; color:var(--muted); }
    .prog .stats { font-size:12px; font-variant-numeric:tabular-nums; }
    /* phase checklist */
    .phases { list-style:none; margin:2px 0; padding:0; display:grid; gap:7px; }
    .phases li { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); transition:color .2s ease; }
    .phases li .pi { flex:0 0 auto; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:10px; line-height:1; color:transparent; }
    .phases li.done { color:var(--text); }
    .phases li.done .pi { background:var(--green); border-color:var(--green); color:#fff; }
    .phases li.active { color:var(--text); font-weight:600; }
    .phases li.active .pi { border-color:var(--green); border-style:solid; animation:phpulse 1.1s ease-in-out infinite; }
    @keyframes phpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(29,158,117,.35);} 50%{ box-shadow:0 0 0 4px rgba(29,158,117,0);} }
    /* intermediate "thinking out loud" — real evolving conclusions */
    .thinking { margin:8px 0 2px; border-left:2px solid var(--green); padding:2px 0 2px 10px; }
    .think-head { font-size:11px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
    .think-line { font-size:13px; line-height:1.55; color:var(--text); opacity:.9; margin:3px 0; }
    .think-line + .think-line { border-top:1px solid var(--line); padding-top:4px; }
    /* live-streamed answer inside the progress bubble */
    .stream-ans { font-size:14px; line-height:1.65; }
    .stream-ans:empty { display:none; }
    .prog.streaming .phases, .prog.streaming .now { display:none; }
    .prog.streaming { margin-top:8px; opacity:.75; }
    .prog.streaming .bar { height:4px; }
    .gate { padding:11px 13px; border-radius:9px; }
    .gate.approval { border:1px solid var(--gate-warn-line); background:var(--gate-warn-bg); }
    .gate.clarify { border:1px solid var(--gate-info-line); background:var(--gate-info-bg); }
    .gate-head { font-weight:600; margin-bottom:8px; font-size:13px; }
    .gate .estimate { white-space:pre-wrap; font-size:13px; margin:0 0 8px; }
    .gate .row { gap:8px; }
    .gate input { flex:1; min-width:140px; border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:var(--surface); }
    /* structured choice gate (elicitation buttons) */
    .gate.elicit { border:1px solid var(--gate-info-line); background:var(--gate-info-bg); }
    .eq { margin:10px 0; } .eq-t { font-size:13.5px; font-weight:600; margin-bottom:6px; }
    .eq-opts { display:flex; flex-wrap:wrap; gap:7px; }
    .eopt { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:999px;
      padding:6px 13px; font-size:13px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
    .eopt:hover { border-color:var(--muted); } .eopt.sel { background:var(--green); border-color:var(--green); color:#fff; }
    .eq-other { margin-top:7px; width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px;
      padding:8px 11px; font-size:13px; background:var(--bg); color:var(--text); }
    .eq-confirm { margin:8px 0; font-size:13px; }
    .feed { display:grid; gap:3px; margin-top:6px; max-height:220px; overflow:auto; }
    .feed .ev { font-size:12px; border-left:2px solid var(--line); padding:2px 0 2px 9px; }
    .feed .ev small { color:var(--muted); margin-left:6px; }
    .poll-recovery { display:grid; gap:7px; padding:10px 12px; border-radius:9px; border:1px solid var(--gate-warn-line); background:var(--gate-warn-bg); }
    .poll-recovery.paused { border-color:rgba(178,52,52,.36); background:var(--err-bg); }
    .poll-recovery__title { font-size:13px; font-weight:700; color:var(--text); }
    .poll-recovery__detail { font-size:12.5px; line-height:1.45; color:var(--muted); overflow-wrap:anywhere; }
    .poll-recovery__actions { display:flex; flex-wrap:wrap; gap:7px; }
    .poll-recovery .retry-btn { margin-top:0; background:var(--surface); }
    .err-text { display:block; padding:10px 13px; border-radius:11px; background:var(--err-bg); border:1px solid rgba(178,52,52,.30); color:var(--red); font-size:13.5px; line-height:1.5; }

    /* empty state */
    .empty { max-width:600px; margin:0 auto; padding:8vh 16px 0; text-align:center; }
    .empty.hidden { display:none; }
    .empty-mark { width:54px; height:54px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; color:#fff; font-size:24px; font-weight:800; background:linear-gradient(135deg,#101111,#2c2c28); }
    .empty h2 { margin:0 0 6px; font-size:22px; }
    .empty-caps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0 4px; text-align:left; }
    .empty-caps .cap { display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--surface); border-radius:11px; padding:11px 13px; font-size:13px; color:var(--text); width:100%; text-align:left; font-family:inherit; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
    .empty-caps .cap:hover { background:var(--surface-2); border-color:var(--muted); transform:translateY(-2px); box-shadow:0 12px 26px rgba(33,27,16,.08); }
    .empty-caps .cap:active { transform:translateY(0); }
    /* voice-clone controls in the settings panel */
    .voice-clone { border-top:1px solid var(--line); margin-top:2px; padding-top:12px; display:grid; gap:9px; }
    .vc-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
    .vc-head svg { width:14px; height:14px; }
    .vc-status { font-size:13px; color:var(--muted); }
    .vc-status.ready { color:var(--green); font-weight:600; }
    .ghost.small-btn svg { width:14px; height:14px; vertical-align:-2px; margin-right:5px; }
    .vc-hint { margin-top:1px; }
    .empty-caps button.cap { width:100%; text-align:left; font-family:inherit; cursor:pointer; transition:background .15s, border-color .15s, transform .1s; }
    .empty-caps button.cap:hover { background:var(--surface-2); border-color:var(--muted); }
    .empty-caps button.cap:active { transform:translateY(1px); }
    .empty-caps .cap-ic { font-size:17px; line-height:1; flex:0 0 auto; }
    .empty-try { margin:18px 0 0; text-align:left; }
    @media (max-width:520px) { .empty-caps { grid-template-columns:1fr; } }
    .suggest { display:grid; gap:8px; margin-top:8px; text-align:left; }
    .suggest button { border:1px solid var(--line); background:var(--surface); border-radius:11px; padding:12px 14px; font-size:13.5px; color:var(--text); }
    .suggest button:hover { background:var(--surface-2); }

    /* composer */
    .composer { flex:0 0 auto; border-top:1px solid var(--line); padding:12px 16px 16px; background:var(--bg); }
    .composer-inner { max-width:768px; margin:0 auto; }
    .composer-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
    .ctx-meter { display:inline-flex; align-items:center; gap:6px; color:var(--muted); white-space:nowrap; }
    .ctx-meter .ctx-fill { width:46px; height:5px; border-radius:999px; background:var(--line); position:relative; overflow:hidden; }
    .ctx-meter .ctx-fill::after { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--p,0%); background:var(--accent,#0c7a4d); border-radius:999px; transition:width .2s, background .2s; }
    .ctx-meter.warn { color:#b06a00; } .ctx-meter.warn .ctx-fill::after { background:#d98c00; }
    .ctx-meter.over { color:#b3261e; } .ctx-meter.over .ctx-fill::after { background:#b3261e; }
    .composer-row { display:flex; align-items:flex-end; gap:6px; border:1px solid var(--line); border-radius:18px; padding:7px 8px 7px 10px; background:var(--surface); box-shadow:0 2px 10px rgba(33,27,16,.05); }
    .composer-row textarea { flex:1; border:0; outline:none; resize:none; background:transparent; font-size:15px; line-height:1.5; padding:7px 4px; max-height:200px; }
    .send { width:38px; height:38px; flex:0 0 auto; border:0; border-radius:50%; background:var(--green); color:#fff; font-size:15px; display:grid; place-items:center; }
    .send:disabled { background:#b9c4bd; cursor:not-allowed; }
    .guest-composer-cta { min-height:38px; flex:0 0 auto; border:1px solid var(--green); border-radius:9px;
      background:var(--green); color:#fff; padding:0 14px; font:600 13px/1 var(--sans); white-space:nowrap; cursor:pointer; }
    .guest-composer-cta:hover { filter:brightness(.96); }
    .composer-note { margin-top:7px; text-align:center; min-height:15px; }
    .attachments { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .attachments:empty { display:none; }
    .attach { display:inline-flex; align-items:center; gap:8px; padding:5px 7px 5px 5px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:12px; max-width:220px; }
    .attach img { width:26px; height:26px; object-fit:cover; border-radius:5px; flex:0 0 auto; }
    .attach .ico { width:26px; height:26px; display:grid; place-items:center; border-radius:5px; background:var(--bg); }
    .attach .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .attach button { border:0; background:none; color:var(--muted); font-size:15px; line-height:1; padding:0 2px; }

    /* realtime voice */
    .voice-bar { display:flex; align-items:center; gap:9px; margin-bottom:8px; padding:8px 12px;
      border:1px solid #cfe6da; background:var(--green-soft); border-radius:11px; font-size:13px; color:var(--text); }
    .voice-dot { width:10px; height:10px; border-radius:50%; background:var(--green); flex:0 0 auto; }
    .voice-bar.listening .voice-dot { animation:vpulse 1.1s ease-in-out infinite; }
    .voice-bar.speaking .voice-dot { background:#2d5f9f; animation:vpulse .7s ease-in-out infinite; }
    .voice-bar.error { border-color:#e6b3ad; background:#fbecea; }
    @keyframes vpulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(1.5);} }
    #voiceBtn.active { background:var(--green); color:#fff; }
    .icon-btn.recording { background:var(--red); color:#fff; animation:micpulse 1s ease-in-out infinite; }
    @keyframes micpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(178,52,52,.45);} 50%{ box-shadow:0 0 0 6px rgba(178,52,52,0);} }
    #voiceMuteBtn.active { background:#fbecea; border-color:#e6b3ad; color:var(--red); }
    .voice-bar.error .voice-dot { background:var(--red); animation:none; }

    /* generated media + tts */
    .generated-files { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); display:grid; gap:0; }
    .generated-files__title { color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; margin-bottom:3px; }
    .generated-file { padding:9px 0; border-bottom:1px solid var(--line); min-width:0; }
    .generated-file:last-child { border-bottom:0; }
    .generated-file--archive { padding:10px; margin:5px 0; border:1px solid color-mix(in srgb,var(--green) 38%,var(--line)); background:var(--green-soft); border-radius:6px; }
    .generated-file__head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; }
    .generated-file__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 12.5px/1.35 var(--mono); }
    .generated-file__size { color:var(--muted); font-size:11px; white-space:nowrap; }
    .generated-file__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
    .generated-file__actions button { min-height:29px; display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); font-size:11.5px; cursor:pointer; }
    .generated-file__actions button:hover { border-color:var(--green); color:var(--green); }
    .generated-file__actions button svg { width:14px; height:14px; }
    .generated-file__download--primary { border-color:var(--green)!important; background:var(--green)!important; color:#fff!important; }
    .generated-file__preview { min-height:44px; margin-top:8px; display:grid; align-items:center; }
    .generated-file__preview img, .generated-file__preview video { display:block; width:100%; max-height:460px; object-fit:contain; background:#0f1011; border:1px solid var(--line); border-radius:6px; }
    .generated-file__preview audio { width:100%; margin:0; }
    .generated-file__error { color:var(--muted); font-size:11.5px; }
    .generated-files__support { margin-top:5px; color:var(--muted); font-size:11.5px; }
    .generated-files__support > summary { cursor:pointer; padding:5px 0; }
    .generated-html-preview { margin-top:8px; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
    .artifact-source { margin:0 0 10px; }
    .artifact-source > summary { cursor:pointer; color:var(--muted); font-size:12px; font-weight:700; }
    .artifact-source__body { margin-top:8px; }
    .msg-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .tts-btn { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:4px 10px; font-size:12px; color:var(--muted); }
    .tts-btn:hover { background:var(--surface-2); color:var(--text); }
    .tts-btn[disabled] { opacity:.5; }
    .tts-btn { display:inline-flex; align-items:center; gap:6px; }
    .tts-btn svg { width:15px; height:15px; }
    .feedback-actions { display:flex; align-items:center; gap:3px; margin-left:auto; }
    .feedback-btn { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid transparent;
      border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; }
    .feedback-btn:hover { border-color:var(--line); background:var(--surface-2); color:var(--text); }
    .feedback-btn svg { width:16px; height:16px; }
    .feedback-btn.selected.feedback-up { border-color:color-mix(in srgb,var(--green) 45%,var(--line)); color:var(--green); background:var(--green-soft); }
    .feedback-btn.selected.feedback-down { border-color:rgba(178,52,52,.34); color:var(--red); background:var(--err-bg); }
    .feedback-btn:disabled { cursor:default; opacity:.58; }
    .feedback-btn.selected:disabled { opacity:1; }
    .feedback-panel { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:grid; gap:8px; }
    .feedback-heading { font-size:13px; font-weight:700; color:var(--text); }
    .feedback-hint { max-width:580px; font-size:11.5px; line-height:1.45; color:var(--muted); }
    .feedback-types { display:flex; flex-wrap:wrap; gap:7px 12px; }
    .feedback-types label { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text); cursor:pointer; }
    .feedback-types input { width:15px; height:15px; accent-color:var(--green); }
    .feedback-panel textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:56px; max-height:150px;
      border:1px solid var(--line); border-radius:6px; padding:8px 9px; background:var(--surface); color:var(--text);
      font:12.5px/1.45 var(--sans); }
    .feedback-panel-actions { display:flex; align-items:center; gap:7px; }
    .feedback-panel-actions button { min-height:30px; padding:5px 10px; border:1px solid var(--line); border-radius:6px;
      background:var(--surface); color:var(--text); font-size:12px; cursor:pointer; }
    .feedback-panel-actions .feedback-send { border-color:var(--green); background:var(--green); color:#fff; }
    /* SVG icon sizing across the JS-built UI (chat list · capability grid · attachments · studio buttons) */
    .conv .ic { display:grid; place-items:center; }
    .conv .ic svg { width:15px; height:15px; display:block; }
    .empty-caps .cap-ic { display:grid; place-items:center; color:var(--green); }
    .empty-caps .cap-ic svg { width:20px; height:20px; }
    .attach .ico svg { width:16px; height:16px; }
    .primary svg { width:16px; height:16px; vertical-align:-3px; margin-right:7px; }
    .chip-file svg { width:14px; height:14px; vertical-align:-2px; }
    /* follow-up suggestion chips under the latest answer */
    .followups { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px; padding-left:2px; }
    .fu { font-size:12.5px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; transition:background .15s, border-color .15s; }
    .fu:hover { background:var(--surface-2); border-color:var(--muted); }
    /* prominent Stop pill floating above the composer while a run is in flight */
    .composer { position:relative; }
    .stop-pill { position:absolute; left:50%; top:-12px; transform:translate(-50%,-100%); z-index:5; display:inline-flex;
      align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text); background:var(--surface);
      border:1px solid var(--line); border-radius:999px; padding:8px 16px; box-shadow:0 4px 16px rgba(33,27,16,.14); }
    .stop-pill:hover { background:var(--surface-2); }
    .stop-pill svg { width:15px; height:15px; }
    /* full-window drag-&-drop overlay */
    .drop-overlay { position:fixed; inset:0; z-index:60; background:rgba(12,122,77,.10); backdrop-filter:blur(2px); display:grid; place-items:center; padding:24px; }
    .drop-card { display:flex; flex-direction:column; align-items:center; gap:12px; border:2px dashed var(--green);
      border-radius:18px; background:var(--surface); color:var(--text); font-size:15px; font-weight:600;
      padding:34px 48px; box-shadow:0 12px 40px rgba(33,27,16,.18); }
    .drop-card svg { width:34px; height:34px; color:var(--green); }
    .bubble audio { width:100%; margin-top:8px; }
    @media(max-width:620px){
      .generated-file__head { grid-template-columns:minmax(0,1fr) auto; }
      .generated-file__size { grid-column:1; grid-row:2; }
      .generated-file__actions { grid-column:2; grid-row:1 / span 2; }
      .generated-file__actions button span { display:none; }
      .generated-file__actions button { width:32px; justify-content:center; padding:4px; }
    }

    .toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); background:#101111; color:#fff;
      font-size:13px; padding:9px 15px; border-radius:999px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:50; max-width:90vw; }
    .toast.show { opacity:.96; } .toast.error { background:var(--red); } .toast.ok { background:var(--green); }
    .backdrop { position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:30; }

    /* typing indicator (assistant thinking, before first token streams) */
    .typing { display:inline-flex; gap:5px; padding:5px 2px; }
    .typing i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:tdot 1.1s infinite ease-in-out; }
    .typing i:nth-child(2) { animation-delay:.18s; } .typing i:nth-child(3) { animation-delay:.36s; }
    @keyframes tdot { 0%,80%,100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-4px); opacity:.95; } }
    /* jump-to-latest button (shown when scrolled up during a turn) */
    .chat { position:relative; }
    .to-bottom { position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateY(6px); z-index:20;
      display:none; align-items:center; gap:6px; background:var(--surface); color:var(--text); border:1px solid var(--line);
      border-radius:999px; padding:7px 14px; font-size:12.5px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.14);
      opacity:0; transition:opacity .18s ease, transform .18s ease; }
    .to-bottom.show { display:inline-flex; opacity:1; transform:translateX(-50%) translateY(0); }
    .to-bottom:hover { background:var(--bg); }
    /* chat-list skeleton while conversations load */
    .sk-row { height:34px; border-radius:8px; margin:5px 8px;
      background:linear-gradient(90deg, var(--line) 25%, rgba(0,0,0,.05) 37%, var(--line) 63%);
      background-size:400% 100%; animation:sk 1.3s ease infinite; }
    @keyframes sk { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
    /* clearer keyboard focus everywhere (a11y) */
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
      outline:2px solid var(--green); outline-offset:2px; border-radius:6px; }

    /* ---- 2026 workspace shell ---- */
    body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
    .app { height:100dvh; }
    .sidebar { width:280px; flex-basis:280px; box-shadow:inset -1px 0 0 var(--line); }
    .sb-head { padding:14px 12px 12px; gap:12px; }
    .sb-brand { min-height:36px; }
    .brand-mark { width:32px; height:32px; border-radius:8px; background:var(--text); color:var(--bg); box-shadow:0 7px 18px rgba(16,20,29,.13); }
    .beta-badge { margin-left:auto; color:var(--green); background:var(--green-soft); border-color:color-mix(in srgb,var(--green) 30%,transparent); }
    .new-chat { min-height:42px; border-color:var(--text); border-radius:8px; color:var(--bg); background:var(--text); }
    .new-chat:hover { color:var(--bg); background:color-mix(in srgb,var(--text) 88%,var(--bg)); }
    .conv { min-height:40px; border-radius:7px; }
    .conv:hover { background:var(--surface-2); }
    .conv.active { background:var(--surface); box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px var(--line); }
    .sb-foot { padding:12px; background:color-mix(in srgb,var(--sidebar) 94%,var(--surface)); }
    .acct-identity { min-width:0; display:grid; gap:3px; }
    .acct-balance { color:var(--muted); font-size:11.5px; }
    .acct-balance strong { color:var(--text); font-variant-numeric:tabular-nums; }
    .token-settings { margin-top:10px; border-top:1px solid var(--line); padding-top:9px; }
    .token-settings summary { cursor:pointer; color:var(--muted); font-size:12px; font-weight:650; }
    .token-settings__body { padding-top:10px; }

    .topbar { height:58px; gap:8px; padding:0 16px; background:var(--surface); }
    .model-badge { display:inline-flex; min-height:30px; align-items:center; gap:7px; flex:0 0 auto; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); font-size:12px; }
    .model-badge__dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent); }
    .chat-title { min-width:0; flex:1; overflow:hidden; color:var(--muted); font-size:13.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
    .icon-btn { width:38px; height:38px; flex:0 0 auto; border-color:var(--line); border-radius:8px; background:var(--surface); }
    .icon-btn:hover { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); background:var(--surface-2); }
    .sess-meter { margin-left:0; }

    .tool-drawer { position:fixed; z-index:70; top:58px; right:0; bottom:0; width:min(410px,100vw); overflow-y:auto; padding:0 18px 24px; border:0; border-left:1px solid var(--line); background:var(--surface); box-shadow:-24px 0 70px rgba(16,20,29,.16); align-content:start; }
    .drawer-head { position:sticky; z-index:2; top:0; display:flex; min-height:58px; align-items:center; justify-content:space-between; margin:0 -18px 8px; padding:0 18px; border-bottom:1px solid var(--line); background:var(--surface); }
    .drawer-head strong { font-size:14px; }
    .drawer-close { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface-2); font-size:20px; line-height:1; }

    .transcript { max-width:860px; padding:28px 22px 16px; gap:24px; }
    .msg.assistant .bubble { padding:14px 16px; border-radius:8px; box-shadow:0 8px 28px rgba(16,20,29,.035); }
    .msg.user .bubble { border-color:color-mix(in srgb,var(--green) 28%,var(--line)); border-radius:8px; }
    .reasoning,.gate,.poll-recovery { border-radius:8px; }

    .empty { max-width:760px; padding:clamp(38px,7vh,76px) 22px 40px; }
    .empty-mark { width:48px; height:48px; border-radius:8px; margin-bottom:16px; background:var(--text); color:var(--bg); font-size:20px; }
    .empty h2 { font-size:26px; }
    .empty > .muted { max-width:580px; margin:0 auto; line-height:1.6; }
    .guest-gate { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:22px 0 10px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 6%,var(--surface)); text-align:left; }
    .guest-copy { min-width:0; display:grid; gap:3px; }
    .guest-copy strong { font-size:13.5px; }
    .guest-copy span { color:var(--muted); font-size:12.5px; line-height:1.45; }
    .guest-actions { display:flex; flex:0 0 auto; gap:8px; }
    .guest-actions .primary,.guest-register { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:0 12px; white-space:nowrap; }
    .guest-register { color:var(--text); }
    .empty-caps { margin-top:16px; }
    .empty-caps .cap,.suggest button { border-radius:8px; }
    .empty-caps .cap:hover { transform:none; box-shadow:none; border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); }

    .composer { padding:10px 18px calc(12px + env(safe-area-inset-bottom)); background:var(--bg); }
    .composer-inner { max-width:860px; }
    .composer-row { min-height:56px; border-radius:12px; padding:8px; box-shadow:0 10px 34px rgba(16,20,29,.08); }
    .composer-row textarea { min-height:38px; padding:8px 5px; }
    .send { width:40px; height:40px; border-radius:8px; }
    .composer-note { margin-top:5px; text-align:left; }
    .composer-foot { min-height:18px; }
    .toast { bottom:calc(92px + env(safe-area-inset-bottom)); border-radius:8px; }

    @media (max-width:760px) {
      .sidebar { position:fixed; z-index:80; top:0; bottom:0; left:0; width:min(88vw,320px); transform:translateX(-100%); transition:transform .22s ease; box-shadow:20px 0 60px rgba(16,20,29,.22); }
      .app.sb-open .sidebar { transform:translateX(0); }
      #sidebarToggle { display:grid; }
      .topnav { display:none; }
      .sb-nav { display:flex; }
      .topbar { height:54px; padding:0 10px; gap:6px; }
      .model-badge { padding:0 8px; }
      .chat-title { display:none; }
      .topbar .icon-btn { width:36px; height:36px; }
      .tool-drawer { top:54px; width:100vw; }
      .transcript { padding:20px 14px 12px; }
      .empty { padding:30px 14px 28px; }
      .guest-gate { align-items:stretch; flex-direction:column; }
      .guest-actions { width:100%; }
      .guest-actions>* { flex:1; }
      .composer { padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
      .composer-row { gap:3px; padding:6px; }
      .composer-row .icon-btn { width:36px; height:36px; }
      .guest-composer-cta { min-height:36px; padding:0 11px; font-size:12px; }
      .composer-note { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ctx-meter { margin-left:auto; }
      .msg-edit { opacity:1; }
    }
    @media (max-width:430px) {
      #exportBtn { display:none; }
      .model-badge strong { font-size:11px; }
      .empty-caps { grid-template-columns:1fr; }
      .composer-foot { align-items:flex-start; flex-direction:column; gap:3px; }
      .ctx-meter { margin-left:0; }
    }