/* hubLlm — design system v2. Ink & Signal: flat elevated surfaces, hairline borders,
   one accent ramp, motion only on transform/opacity. Dark is the default theme. */

:root {
 --ink-950:#1c1c1f; --ink-900:#202023; --ink-850:#242428; --ink-800:#2a2a2e;
 --ink-750:#303034; --ink-700:#38383c; --ink-600:#424247;

 --bg-sidebar:#19191b; --bg-rail:#151517;

 --acc-100:#dbe7ff; --acc-300:#8db3f5; --acc-400:#5b8ef2; --acc-500:#3f74e0;
 --acc-600:#2f5cc4; --acc-800:#1e3d8f;
 --color-primary:74, 143, 240;
 --color-teal:63, 185, 128; --color-amber:210, 153, 34; --color-red:248, 81, 73;

 --color-openai:16, 163, 127; --color-claude:201, 138, 90;
 --color-gemini:66, 133, 244; --color-grok:224, 224, 224;
 --color-deepseek:124, 110, 240; --color-mistral:255, 122, 57;
 --color-meta:24, 119, 242; --color-qwen:154, 90, 200;
 --color-cohere:255, 122, 138; --color-perplexity:32, 178, 170;
 --color-moonshot:255, 194, 68;

 --bg-base:var(--ink-900); --bg-main:var(--ink-950); --bg-surface:var(--bg-sidebar);
 --bg-elevated:var(--ink-800); --bg-tertiary:var(--ink-750); --bg-hover:rgba(255,255,255,0.055);
 --bg-sunken:rgba(0,0,0,0.22);

 --text-default:#ececee; --text-secondary:#bcbcc1; --text-subtle:#96969c; --text-muted:#78787e;
 --text-inverse:#101012;

 --primary:var(--acc-400); --color-accent:var(--acc-500);
 --success:rgb(var(--color-teal)); --warning:rgb(var(--color-amber)); --danger:rgb(var(--color-red));

 --border:rgba(255,255,255,0.095); --border-soft:rgba(255,255,255,0.06);
 --border-strong:rgba(255,255,255,0.18); --border-accent:rgba(var(--color-primary),0.55);

 --ring:0 0 0 2px var(--bg-base), 0 0 0 4px var(--acc-400);
 --ring-inset:0 0 0 3px rgba(var(--color-primary),0.22);

 /* Depth system: five surface planes (0 shell, 1 chrome, 2 cards/messages/
    composer, 3 popovers/menus/sheets, 4 modals/palette) and a matching
    --elev-0..5 shadow scale. Every shadow is three stacked layers (contact,
    key, ambient) in a dark-ink color, never pure black, plus a top inner
    highlight that grows with the level — light always falls from above, so
    every offset is positive on Y and every highlight sits on the top edge.
    --elev-edge adds the thin dark bottom edge used only on raised elements. */
 --shadow-ink:8, 8, 10;
 --surface-0:var(--bg-base); --surface-1:var(--bg-surface);
 --surface-2:var(--ink-850); --surface-3:var(--ink-800); --surface-4:var(--ink-750);

 --elev-0:none;
 --elev-1:0 1px 1px rgba(var(--shadow-ink),0.4), 0 2px 4px -1px rgba(var(--shadow-ink),0.34), inset 0 1px 0 rgba(255,255,255,0.04);
 --elev-2:0 1px 1px rgba(var(--shadow-ink),0.42), 0 4px 9px -3px rgba(var(--shadow-ink),0.4), 0 10px 22px -12px rgba(var(--shadow-ink),0.32), inset 0 1px 0 rgba(255,255,255,0.05);
 --elev-3:0 1px 1px rgba(var(--shadow-ink),0.44), 0 7px 16px -5px rgba(var(--shadow-ink),0.46), 0 18px 34px -16px rgba(var(--shadow-ink),0.36), inset 0 1px 0 rgba(255,255,255,0.06);
 --elev-4:0 1px 2px rgba(var(--shadow-ink),0.46), 0 12px 26px -8px rgba(var(--shadow-ink),0.5), 0 28px 54px -22px rgba(var(--shadow-ink),0.4), inset 0 1px 0 rgba(255,255,255,0.07);
 --elev-5:0 2px 3px rgba(var(--shadow-ink),0.5), 0 18px 38px -10px rgba(var(--shadow-ink),0.55), 0 42px 76px -28px rgba(var(--shadow-ink),0.45), inset 0 1px 0 rgba(255,255,255,0.08);
 --elev-edge:inset 0 -1px 0 rgba(0,0,0,0.3);
 --elev-sunk-1:inset 0 1px 3px rgba(var(--shadow-ink),0.5), inset 0 -1px 0 rgba(255,255,255,0.04);
 --elev-sunk-2:inset 0 1px 4px rgba(var(--shadow-ink),0.6), inset 0 -1px 0 rgba(255,255,255,0.05);
 --glow-accent:0 0 0 3px rgba(var(--color-primary),0.18), 0 0 18px -4px rgba(var(--color-primary),0.55);

 --z-composer:120; --z-header:420; --z-dropdown:430; --z-sidebar:500;
 --z-popover:600; --z-tooltip:700; --z-modal:900; --z-toast:1000;
 --z-palette:1100; --z-workspace:1200; --z-layer:1300;

 --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:17px; --r-xl:22px; --r-pill:999px;

 --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

 --font-sans:"IBM Plex Sans", "Segoe UI", Helvetica, sans-serif;
 --font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 --fs-xs:0.75rem; --fs-sm:0.8125rem; --fs-md:0.9375rem; --fs-lg:1.0625rem; --fs-xl:1.25rem;
 --lh-tight:1.3; --lh-body:1.65;

 --ease-out:cubic-bezier(0.33,1,0.68,1);
 --ease-in:cubic-bezier(0.32,0,0.67,0);
 --ease-inout:cubic-bezier(0.65,0,0.35,1);
 --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
 --t-xs:150ms; --t-s:200ms; --t-m:300ms;

 --header-height:56px;
 --panel-width:340px;
 --side-width:312px;
 --measure:min(100%, 58rem);
 --safe-bottom:env(safe-area-inset-bottom, 0px);
}

.theme-light {
 --bg-base:#f4f5f9; --bg-main:#fbfbfd; --bg-surface:#ffffff;
 --bg-elevated:#ffffff; --bg-tertiary:#eef0f6; --bg-hover:rgba(15,23,42,0.05);
 --bg-sunken:rgba(15,23,42,0.04);
 --text-default:#11151f; --text-secondary:#3d4557; --text-subtle:#5b6478; --text-muted:#767e93; --text-inverse:#ffffff;
 --primary:var(--acc-600); --color-accent:var(--acc-600);
 --border:rgba(15,23,42,0.1); --border-soft:rgba(15,23,42,0.14);
 --border-strong:rgba(15,23,42,0.24);
 --ring:0 0 0 2px var(--bg-main), 0 0 0 4px var(--acc-500);

 /* Light theme: blue-grey tinted shadows, no white highlight edges — planes
    separate mostly by border + shadow, per PLAN.md 2/20. */
 --shadow-ink:30, 41, 59;
 --surface-0:var(--bg-base); --surface-1:var(--bg-surface);
 --surface-2:#ffffff; --surface-3:#ffffff; --surface-4:#ffffff;

 --elev-0:none;
 --elev-1:0 1px 2px rgba(var(--shadow-ink),0.06);
 --elev-2:0 1px 2px rgba(var(--shadow-ink),0.05), 0 3px 8px -3px rgba(var(--shadow-ink),0.1);
 --elev-3:0 1px 2px rgba(var(--shadow-ink),0.05), 0 8px 20px -8px rgba(var(--shadow-ink),0.16);
 --elev-4:0 2px 3px rgba(var(--shadow-ink),0.06), 0 16px 36px -14px rgba(var(--shadow-ink),0.2);
 --elev-5:0 2px 4px rgba(var(--shadow-ink),0.07), 0 26px 54px -20px rgba(var(--shadow-ink),0.24);
 --elev-edge:inset 0 -1px 0 rgba(15,23,42,0.06);
 --elev-sunk-1:inset 0 1px 3px rgba(var(--shadow-ink),0.12);
 --elev-sunk-2:inset 0 1px 4px rgba(var(--shadow-ink),0.16);
 --glow-accent:0 0 0 3px rgba(var(--color-primary),0.16), 0 0 16px -6px rgba(var(--color-primary),0.4);
}

*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}

/* The UA rule for [hidden] loses to any class that declares display, so every
   panel toggled through el.hidden needs this to actually disappear. */
[hidden]{display:none !important;}

html{font-size:100%;height:100%;}
body{min-height:100%;font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-default);background:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty;}

h1,h2,h3,h4,h5,h6{font-weight:500;line-height:var(--lh-tight);letter-spacing:-0.01em;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
button,input,select,textarea{font:inherit;color:inherit;}

::selection{background:rgba(var(--color-primary),0.32);color:#fff;}
::placeholder{color:var(--text-muted);}

*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:content-box;}
*{scrollbar-width:thin;scrollbar-color:var(--border-soft) transparent;}

:focus-visible{outline:none;box-shadow:var(--ring);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.icon-xs{width:14px;height:14px;}
.icon-sm{width:16px;height:16px;}
.icon-lg{width:24px;height:24px;}

/* ---------- primitives ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:9px 14px;border:1px solid var(--border-soft);border-radius:var(--r-md);background:transparent;color:var(--text-default);font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color var(--t-s) var(--ease-out),border-color var(--t-s) var(--ease-out),color var(--t-s) var(--ease-out),transform 100ms var(--ease-out),opacity var(--t-xs) var(--ease-out);}
.btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong);}
.btn:active:not(:disabled){transform:scale(0.97);}
.btn:disabled{opacity:0.38;cursor:not-allowed;}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}

.btn-primary{background:var(--acc-500);border-color:transparent;color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--acc-400);border-color:transparent;}
.btn-secondary{background:var(--bg-tertiary);border-color:var(--border);}
.btn-danger{background:transparent;border-color:rgba(var(--color-red),0.4);color:var(--danger);}
.btn-danger:hover:not(:disabled){background:rgba(var(--color-red),0.12);border-color:rgba(var(--color-red),0.6);}
.btn-warning{border-color:rgba(var(--color-amber),0.4);color:var(--warning);}
.btn-sm{padding:6px 10px;font-size:var(--fs-xs);}

.btn-icon{width:34px;height:34px;padding:0;border-color:transparent;border-radius:var(--r-md);color:var(--text-secondary);}
.header-rail{display:flex;align-items:center;gap:1px;height:34px;padding:3px;border-radius:var(--r-md);background:var(--surface-1);box-shadow:var(--elev-sunk-1);}
.header-rail .btn-icon{width:28px;height:28px;box-shadow:none;background:transparent;}
.header-rail .btn-icon:hover:not(:disabled){box-shadow:var(--elev-1);background:var(--bg-elevated);}
.btn-icon:hover:not(:disabled){background:var(--bg-hover);color:var(--text-default);border-color:transparent;}
.btn-icon-small{width:30px;height:30px;padding:0;border-color:transparent;border-radius:var(--r-sm);color:var(--text-subtle);}
.btn-icon-small:hover:not(:disabled){background:var(--bg-hover);color:var(--text-default);}
.btn-icon-small.active{background:rgba(var(--color-primary),0.16);color:var(--acc-300);box-shadow:inset 0 0 0 1px var(--border-accent);}
.btn-icon-small.active:hover{background:rgba(var(--color-primary),0.24);}
.toggle-btn.active{color:var(--acc-300);}
.btn-group{display:flex;gap:var(--s-2);}

.ripple{position:relative;overflow:hidden;}
.ripple::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--t-m) var(--ease-out);pointer-events:none;}
.ripple:active::after{opacity:0.1;transition-duration:0ms;}

.form-control{width:100%;padding:9px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-default);font-size:var(--fs-sm);transition:border-color var(--t-xs) var(--ease-out),box-shadow var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);}
.form-control:hover{border-color:var(--border-soft);}
.form-control:focus{outline:none;border-color:var(--border-accent);box-shadow:var(--ring-inset);}
textarea.form-control{resize:vertical;line-height:var(--lh-body);}
select.form-control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-subtle) 50%),linear-gradient(135deg,var(--text-subtle) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px;}
select.form-control option{background:var(--bg-elevated);color:var(--text-default);}
label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);margin-bottom:var(--s-2);}

input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;padding:0;background:var(--border-soft);border:none;border-radius:var(--r-pill);cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--r-pill);background:var(--acc-400);border:2px solid var(--bg-surface);transition:transform var(--t-xs) var(--ease-spring);}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:var(--r-pill);background:var(--acc-400);border:2px solid var(--bg-surface);}

.model-badge,.file-ext-badge{display:inline-flex;align-items:center;gap:var(--s-1);padding:2px 7px;border-radius:var(--r-xs);background:var(--bg-hover);border:1px solid var(--border);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-subtle);}
.model-openai{background:rgba(var(--color-openai),0.12);border-color:rgba(var(--color-openai),0.28);color:rgb(var(--color-openai));}
.model-claude{background:rgba(var(--color-claude),0.12);border-color:rgba(var(--color-claude),0.28);color:rgb(var(--color-claude));}
.model-gemini{background:rgba(var(--color-gemini),0.12);border-color:rgba(var(--color-gemini),0.28);color:rgb(var(--color-gemini));}
.model-grok{background:rgba(var(--color-grok),0.12);border-color:rgba(var(--color-grok),0.28);color:rgb(var(--color-grok));}
.model-deepseek{background:rgba(var(--color-deepseek),0.12);border-color:rgba(var(--color-deepseek),0.28);color:rgb(var(--color-deepseek));}
.model-mistral{background:rgba(var(--color-mistral),0.12);border-color:rgba(var(--color-mistral),0.28);color:rgb(var(--color-mistral));}
.model-meta{background:rgba(var(--color-meta),0.12);border-color:rgba(var(--color-meta),0.28);color:rgb(var(--color-meta));}
.model-qwen{background:rgba(var(--color-qwen),0.12);border-color:rgba(var(--color-qwen),0.28);color:rgb(var(--color-qwen));}
.model-cohere{background:rgba(var(--color-cohere),0.12);border-color:rgba(var(--color-cohere),0.28);color:rgb(var(--color-cohere));}
.model-perplexity{background:rgba(var(--color-perplexity),0.12);border-color:rgba(var(--color-perplexity),0.28);color:rgb(var(--color-perplexity));}
.model-moonshot{background:rgba(var(--color-moonshot),0.12);border-color:rgba(var(--color-moonshot),0.28);color:rgb(var(--color-moonshot));}
.file-ext-txt{color:var(--text-subtle);}
.file-ext-pdf{background:rgba(var(--color-red),0.12);border-color:rgba(var(--color-red),0.28);color:var(--danger);}
.file-ext-img{background:rgba(var(--color-teal),0.12);border-color:rgba(var(--color-teal),0.28);color:var(--success);}
.file-ext-doc{background:rgba(var(--color-gemini),0.12);border-color:rgba(var(--color-gemini),0.28);color:rgb(var(--color-gemini));}
.file-ext-csv{background:rgba(var(--color-amber),0.12);border-color:rgba(var(--color-amber),0.28);color:var(--warning);}

.loading{display:inline-block;width:14px;height:14px;border:1.5px solid var(--border-soft);border-top-color:var(--acc-400);border-radius:var(--r-pill);animation:spin 700ms linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes rise{from{opacity:0;transform:translateY(10px);}}
@keyframes pop{from{opacity:0;transform:scale(0.96);}}

/* ---------- app shell ---------- */

body.app{overflow:hidden;height:100dvh;}
#app-container{display:flex;height:100dvh;overflow:hidden;background:
 radial-gradient(1100px 620px at 22% -8%, rgba(var(--color-primary),0.14), transparent 58%),
 radial-gradient(1000px 560px at 88% 12%, rgba(var(--color-gemini),0.10), transparent 60%),
 var(--bg-base);}
#chat-area{flex:1;display:flex;flex-direction:column;position:relative;min-width:0;overflow:hidden;}

#chat-header{position:relative;z-index:420;display:flex;align-items:center;gap:var(--s-2);height:var(--header-height);padding:0 var(--s-3);background:color-mix(in srgb, var(--bg-surface) 82%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
#chat-info{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 var(--s-2);}
#conversation-title{max-width:min(46ch,100%);padding:4px 10px;border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:500;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;transition:background-color var(--t-xs) var(--ease-out),box-shadow var(--t-xs) var(--ease-out);}
#conversation-title:hover:not([contenteditable="false"]){background:var(--bg-hover);}
#conversation-title:focus{background:var(--bg-sunken);box-shadow:var(--ring-inset);white-space:normal;}
.header-actions{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0;}
#menu-toggle-btn{color:var(--text-secondary);}

/* header pickers: model (left) and effort (right) */
.hpicker{position:relative;}
.hchip{display:inline-flex;align-items:center;gap:6px;height:34px;max-width:190px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);color:var(--text-secondary);font-size:var(--fs-xs);font-weight:500;cursor:pointer;transition:background-color var(--t-s) var(--ease-out),border-color var(--t-s) var(--ease-out),color var(--t-s) var(--ease-out),transform 100ms var(--ease-out);}
.hchip:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong);color:var(--text-default);}
.hchip:active:not(:disabled){transform:scale(0.97);}
.hchip:disabled{opacity:0.4;cursor:not-allowed;}
.hchip[aria-expanded="true"]{border-color:var(--border-accent);color:var(--text-default);background:rgba(var(--color-primary),0.12);}
.hchip-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--text-muted);flex-shrink:0;}
.hchip-dot.model-openai{background:rgb(var(--color-openai));}
.hchip-dot.model-claude{background:rgb(var(--color-claude));}
.hchip-dot.model-gemini{background:rgb(var(--color-gemini));}
.hchip-dot.model-grok{background:rgb(var(--color-grok));}
.hchip-dot.model-deepseek{background:rgb(var(--color-deepseek));}
.hchip-dot.model-mistral{background:rgb(var(--color-mistral));}
.hchip-dot.model-meta{background:rgb(var(--color-meta));}
.hchip-dot.model-qwen{background:rgb(var(--color-qwen));}
.hchip-dot.model-cohere{background:rgb(var(--color-cohere));}
.hchip-dot.model-perplexity{background:rgb(var(--color-perplexity));}
.hchip-dot.model-moonshot{background:rgb(var(--color-moonshot));}
.hchip-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hchip-caret{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0.55;transition:transform var(--t-s) var(--ease-out);}
.hchip[aria-expanded="true"] .hchip-caret{transform:rotate(180deg);}
.hchip-effort{gap:5px;padding:0 9px;}
.effort-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px;}
.effort-bars i{display:block;width:3px;border-radius:1px;background:var(--border-strong);transition:background-color var(--t-s) var(--ease-out),height var(--t-s) var(--ease-out);}
.effort-bars i:nth-child(1){height:4px;}
.effort-bars i:nth-child(2){height:8px;}
.effort-bars i:nth-child(3){height:12px;}
.hchip-effort[data-level="off"] .effort-bars i{background:var(--border-strong);}
.hchip-effort[data-level="1"] .effort-bars i:nth-child(1){background:rgb(var(--color-teal));}
.hchip-effort[data-level="2"] .effort-bars i:nth-child(-n+2){background:rgb(var(--color-amber));}
.hchip-effort[data-level="3"] .effort-bars i{background:rgb(var(--color-red));}

.picker-pop{position:fixed;z-index:600;width:min(320px,calc(100vw - 24px));max-height:min(60vh,460px);display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--elev-4);overflow:hidden;animation:pop 160ms var(--ease-out) both;}
.picker-pop[hidden]{display:none;}
.picker-search{padding:var(--s-3) var(--s-3) var(--s-2);border-bottom:1px solid var(--border);position:relative;display:flex;align-items:center;flex-shrink:0;}
.picker-search-icon{position:absolute;left:calc(var(--s-3) + 8px);width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:2;pointer-events:none;}
.picker-search-input{width:100%;padding:6px 10px 6px 30px;background:var(--surface-2,var(--bg-sunken));border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-default);font-size:var(--fs-sm);}
.picker-item-dot{width:6px;height:6px;flex-shrink:0;}
.picker-item-highlight{background:var(--bg-hover);}
.picker-recent-section{border-bottom:1px solid var(--border-soft);margin-bottom:4px;padding-bottom:4px;}
.picker-list{flex:1;overflow-y:auto;padding:var(--s-2);}
.picker-group{padding:var(--s-3) var(--s-2) var(--s-1);font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.picker-item{display:flex;align-items:center;gap:var(--s-2);width:100%;padding:8px 10px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);font-size:var(--fs-sm);text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.picker-item:hover{background:var(--bg-hover);color:var(--text-default);}
.picker-item:focus-visible{outline:none;box-shadow:var(--ring-inset);}
.picker-item[aria-selected="true"]{background:rgba(var(--color-primary),0.14);color:var(--text-default);}
.picker-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-item-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.picker-check{width:14px;height:14px;stroke:var(--acc-300);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.picker-item[aria-selected="true"] .picker-check{opacity:1;}
.picker-empty{padding:var(--s-4);text-align:center;font-size:var(--fs-sm);color:var(--text-muted);}
.picker-foot{padding:var(--s-3);border-top:1px solid var(--border);display:flex;align-items:center;gap:var(--s-2);}
.picker-foot .form-control{flex:1;}
.picker-hint{padding:0 var(--s-3) var(--s-3);font-size:var(--fs-xs);color:var(--text-muted);}

/* header dropdown */
#header-dropdown-menu{position:absolute;top:calc(var(--header-height) - 4px);right:var(--s-3);z-index:430;width:272px;padding:var(--s-2);display:flex;flex-direction:column;gap:2px;background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--elev-4);opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.98);transform-origin:top right;transition:transform var(--t-s) var(--ease-out),opacity var(--t-xs) var(--ease-out),visibility var(--t-s);}
#header-dropdown-menu.visible{opacity:1;visibility:visible;transform:none;}
.menu-item{display:flex;align-items:center;gap:var(--s-3);width:100%;padding:9px 10px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);font-size:var(--fs-sm);text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
#conv-map-toggle-btn.active{background:rgba(var(--color-primary),0.14);color:var(--text-default);}
.menu-item:hover{background:var(--bg-hover);color:var(--text-default);}
.menu-item:focus-visible{outline:none;box-shadow:var(--ring-inset);}
.menu-item .icon{width:16px;height:16px;}
.menu-item-danger-hover:hover{background:rgba(var(--color-red),0.14);color:var(--danger);}
.menu-item-shortcut{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.menu-group-label{padding:var(--s-2) 10px 4px;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.menu-group-label:first-child{padding-top:2px;}
.menu-separator{height:1px;margin:var(--s-1) 6px;background:var(--border);}
#model-info-box{padding:var(--s-2) 10px;font-family:var(--font-mono);font-size:10px;line-height:1.6;border-bottom:1px solid var(--border);margin-bottom:var(--s-1);}
#model-info-box:empty{display:none;}
.model-info-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.model-info-label{color:var(--text-muted);}
.model-info-value{color:var(--text-secondary);}
.model-select-item{padding:var(--s-2) 6px var(--s-3);}
.model-select-item label{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:6px;}

/* ---------- side panel ---------- */

#side-panel{position:fixed;top:0;left:0;z-index:500;width:var(--side-width);max-width:88vw;height:100dvh;display:flex;flex-direction:column;background:var(--bg-surface);border-right:1px solid var(--border);box-shadow:var(--elev-4);transform:translateX(-100%);transition:transform var(--t-m) var(--ease-out);contain:layout paint;}
#side-panel.visible{transform:none;}
.side-panel-backdrop{position:fixed;inset:0;z-index:480;background:rgba(3,5,10,0.55);opacity:0;visibility:hidden;transition:opacity var(--t-s) var(--ease-out),visibility var(--t-s);}
.side-panel-backdrop.visible{opacity:1;visibility:visible;}
.side-panel-content{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.panel-section{display:none;flex-direction:column;min-height:0;flex:1;}
.panel-section.active{display:flex;}
.panel-section h3{padding:var(--s-5) var(--s-4) var(--s-3);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);}

#conversations-list{flex:1;min-height:0;overflow-y:auto;list-style:none;padding:0 var(--s-2) var(--s-2);display:flex;flex-direction:column;gap:2px;}
/* flex-shrink:0 is required: #conversations-list is a flex column, and with
   the default shrink:1 a long list gets squeezed to fit instead of scrolling. */
#conversations-list li{position:relative;flex-shrink:0;padding:0;border-radius:var(--r-md);color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;overflow:hidden;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);animation:rise 260ms var(--ease-out) both;}
.conv-row-inner{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--s-2);padding:7px 10px;background:var(--surface-1);border-radius:var(--r-md);}
.conv-row-inner .provider-dot{margin-top:6px;}
.conv-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.conv-row-line1{display:flex;align-items:center;gap:var(--s-2);min-width:0;}
.conv-row-subtitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--text-muted);}
.provider-dot-empty{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--text-muted)!important;}
.provider-dot-unknown{background:var(--text-muted)!important;box-shadow:none!important;}
/* Kept out of the flow until a swipe actually starts - the row background is
   translucent when active/hovered, so an always-painted red layer bleeds through. */
.conv-swipe-delete{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--s-4);color:#fff;background:var(--danger);font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-md);opacity:0;pointer-events:none;}
#conversations-list li.swiping .conv-swipe-delete{opacity:1;}
.conv-rename-input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text-default);font:inherit;padding:2px 6px;}
#conversations-list li::before{content:"";position:absolute;z-index:2;left:0;top:50%;width:2px;height:0;border-radius:0 2px 2px 0;background:var(--acc-400);transform:translateY(-50%);transition:height var(--t-s) var(--ease-out);}
#conversations-list li:hover .conv-row-inner{background:var(--bg-hover);color:var(--text-default);}
#conversations-list li.active .conv-row-inner{background:rgba(var(--color-primary),0.14);color:var(--text-default);}
#conversations-list li.active::before{height:18px;}
#conversations-list li.placeholder{justify-content:center;color:var(--text-muted);cursor:default;font-size:var(--fs-xs);padding:var(--s-5) 0;}
#conversations-list li.placeholder:hover{background:transparent;}
#conversations-list li .conversation-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#conversations-list li.generating .conversation-title::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:var(--r-pill);background:var(--acc-300);vertical-align:middle;animation:dotPulseGrow 1.2s var(--ease-inout) infinite;}
#conversations-list li time,#conversations-list li .conv-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);flex-shrink:0;}
.conversation-delete-btn{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;border:none;border-radius:var(--r-xs);background:transparent;color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
#conversations-list li:hover .conversation-delete-btn{opacity:1;}
.conversation-delete-btn:hover{background:rgba(var(--color-red),0.16);color:var(--danger);}
.load-more-item{justify-content:center;color:var(--text-subtle)!important;font-size:var(--fs-xs);border-top:1px solid var(--border);margin-top:var(--s-2);}

.conversation-brief-tooltip{position:fixed;z-index:700;max-width:360px;padding:var(--s-3) var(--s-4);background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-md);box-shadow:var(--elev-4);font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.55;white-space:pre-line;}
.conversation-brief-tooltip p{margin-bottom:var(--s-2);}
.conversation-brief-tooltip p:last-child{margin-bottom:0;}
.conversation-brief-tooltip ol{padding-left:1.1rem;}
.conversation-brief-tooltip li{margin-bottom:4px;}

.side-panel-footer{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);}
.side-panel-footer .btn{width:100%;}
.side-panel-user-info{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);background:var(--bg-sunken);}
.user-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-pill);background:rgba(var(--color-primary),0.16);color:var(--acc-300);flex-shrink:0;}
.user-avatar .icon{width:18px;height:18px;}
.user-details{flex:1;min-width:0;cursor:pointer;border-radius:var(--r-sm);padding:2px 4px;margin:-2px -4px;}
.user-details:hover{background:var(--surface-2);}
.user-details:focus-visible{outline:none;box-shadow:var(--ring);}
.user-name{font-size:var(--fs-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-email{font-size:var(--fs-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-panel-buttons{display:flex;gap:var(--s-1);}
.user-btn{width:30px;height:30px;display:grid;place-items:center;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-subtle);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.user-btn:hover{background:var(--bg-hover);color:var(--text-default);}
.user-btn .icon{width:16px;height:16px;}

/* profile takes over the whole side panel */
.profile-fullscreen{position:absolute;inset:0;z-index:2;background:var(--bg-surface);transform:translateX(100%);transition:transform var(--t-m) var(--ease-out);display:flex!important;flex-direction:column;}
.profile-fullscreen.active{transform:none;}
.profile-header{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3);border-bottom:1px solid var(--border);}
.profile-header h3{padding:0;font-size:var(--fs-md);font-weight:500;text-transform:none;letter-spacing:-0.01em;color:var(--text-default);font-family:var(--font-sans);}
.profile-content{flex:1;overflow-y:auto;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);}
.profile-section{padding:var(--s-4);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);}
.profile-main-info{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);}
.profile-avatar-large{width:64px;height:64px;display:grid;place-items:center;border-radius:var(--r-pill);background:rgba(var(--color-primary),0.16);color:var(--acc-300);}
.profile-avatar-large .icon{width:30px;height:30px;}
.profile-username-display{font-size:var(--fs-lg);font-weight:500;}
.profile-tier-badge{padding:2px 10px;border-radius:var(--r-pill);background:var(--bg-hover);border:1px solid var(--border);font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-subtle);}
.profile-tier-badge.tier-pro,.profile-tier-badge.tier-plus{background:rgba(var(--color-primary),0.16);border-color:var(--border-accent);color:var(--acc-300);}
.profile-field{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm);}
.profile-field:last-child{border-bottom:none;}
.profile-label{color:var(--text-muted);}
.profile-value{color:var(--text-default);text-align:right;word-break:break-word;}
.profile-value-editable{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:2px 4px;border-radius:var(--r-xs);color:var(--text-default);font:inherit;cursor:pointer;}
.profile-value-editable:hover{background:var(--bg-hover);}
.profile-value-editable .icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;color:var(--text-muted);}
.profile-email-field,#profile-email-field{flex-wrap:wrap;}
.profile-email-edit{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end;flex-wrap:wrap;}
.profile-email-input{min-width:0;flex:1;max-width:220px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text-default);font:inherit;padding:3px 6px;}
.profile-section-title{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s-2);}
.profile-section-desc{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--s-3);}
.profile-action-btn{width:100%;margin-top:var(--s-3);}
.profile-instructions-wrapper{position:relative;}
.profile-instructions-textarea{min-height:120px;font-family:var(--font-mono);font-size:var(--fs-xs);resize:vertical;}
.instructions-counter{display:block;text-align:right;margin-top:4px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.instructions-counter.limit-warning{color:var(--warning);}
.instructions-counter.limit-exceeded{color:var(--danger);}
.profile-section-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2);}
.profile-section-title-row .profile-section-title{margin-bottom:0;}
.profile-instructions-textarea-full{width:100%;height:100%;resize:none;font-family:var(--font-mono);font-size:var(--fs-sm);border:none;background:transparent;padding:var(--s-4);}
.profile-instructions-textarea-full:focus{outline:none;}
.profile-footer{text-align:center;}
.profile-tiny-id{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);word-break:break-all;}

/* ---------- messages ---------- */

#chat-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-5) clamp(var(--s-4),5vw,var(--s-6)) var(--s-6);}
#chat-messages::-webkit-scrollbar-track{background:transparent;}
/* Any element wide enough to overflow (code blocks, tables) scrolls within
   itself, never the message list (PLAN.md 11) — a stray horizontal scrollbar
   on #chat-messages otherwise reads as a rendering artifact above the composer. */
.message pre{overflow-x:auto;max-width:100%;}
.message table{display:block;overflow-x:auto;max-width:100%;}
.message-wrapper{display:flex;flex-direction:column;width:100%;}
.message-wrapper.user{align-items:flex-end;}
.message-wrapper.assistant,.message-wrapper.system{align-items:stretch;}
.message-wrapper.new{animation:rise 400ms var(--ease-out) both;}

.message{position:relative;min-width:0;max-width:90%;border-radius:var(--r-lg);transition:border-color var(--t-s) var(--ease-out),opacity var(--t-s) var(--ease-out);}
.message.user{padding:var(--s-3) var(--s-4);background:rgba(var(--color-primary),0.14);border:1px solid var(--border-accent);border-bottom-right-radius:var(--r-xs);}
.message.assistant{padding:var(--s-3) var(--s-4);background:var(--bg-surface);border:1px solid var(--border);border-bottom-left-radius:var(--r-xs);}
@media (max-width:767px){
 .message.assistant{background:none;border:0;border-radius:0;padding:0;box-shadow:none;max-width:100%;}
 .message.user{max-width:85%;}
 .message.assistant .tool-row,
 .message.assistant .reasoning-block,
 .message.assistant .message-content pre{width:100%;max-width:100%;}
}
@media (min-width:768px){
 .message.assistant{width:100%;max-width:var(--measure);margin-inline:auto;box-shadow:var(--elev-1);}
}
.message.excluded{opacity:0.42;}
.message.system-message{align-self:center;padding:var(--s-2) var(--s-4);background:var(--bg-sunken);border:1px dashed var(--border-soft);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--text-muted);text-align:center;}
.message .message-role-label{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:var(--text-muted);}
.message.system-message .message-role-label{display:none;}
.message-more-btn{display:none;margin-left:auto;width:28px;height:28px;flex:none;align-items:center;justify-content:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);cursor:pointer;}
.message-more-btn:hover{background:var(--bg-hover);color:var(--text-default);}
.message .message-content strong{font-weight:700;}
.message .message-content{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-default);word-wrap:break-word;overflow-wrap:anywhere;}
.message-content-mixed{display:flex;flex-direction:column;width:100%;gap:var(--s-3);}
.message-images-part{display:flex;flex-wrap:wrap;gap:var(--s-2);}

.message-files{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);}
.file-tag{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 9px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-xs);color:var(--text-subtle);}
.file-tag-icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.75;flex-shrink:0;}
.file-tag-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .file-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer;border-radius:50%;flex-shrink:0;} .file-tag-remove:hover{color:var(--danger, #ef4444);background:var(--bg-surface, #f9fafb);}

.message-token-count{margin-top:var(--s-2);font-family:var(--font-mono);font-size:10px;color:var(--text-muted);opacity:0;transition:opacity var(--t-xs) var(--ease-out);}
.message-wrapper:hover .message-token-count{opacity:1;}
/* Always rendered at a dim opacity instead of hidden until hover - a
   hover-only reveal made these look like they didn't exist at all on
   touch devices (no hover state) and was easy to miss even with a mouse. */
.message-controls,.message-actions{display:flex;gap:2px;margin-top:var(--s-1);opacity:0.55;transition:opacity var(--t-xs) var(--ease-out);}
.message-wrapper:hover .message-controls,.message-wrapper:focus-within .message-controls{opacity:1;}
.message-action-btn{width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.message-action-btn:hover{background:var(--bg-hover);color:var(--text-default);}
.message-action-btn:focus-visible{outline:none;box-shadow:var(--ring-inset);}
.message-action-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.message-action-btn.loading{pointer-events:none;}
.message-action-btn.loading svg{animation:spin 800ms linear infinite;}
.delete-message-btn:hover{color:var(--danger);background:rgba(var(--color-red),0.12);}

/* reasoning + tools */
/* width:100% is required: a flex container with no explicit width sizes to
   fit-content by default, so a short turn (reasoning/badge only, no answer
   text yet) shrinks to its narrowest child instead of filling the bubble. */
.turn-timeline{display:flex;flex-direction:column;width:100%;gap:var(--s-2);margin-bottom:var(--s-3);}
.turn-timeline > .answer-body{margin:var(--s-1) 0;}
.reasoning-block{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);overflow:hidden;}
.reasoning-toggle{display:flex;align-items:center;gap:var(--s-2);width:100%;padding:8px 12px;border:none;background:transparent;color:var(--text-subtle);font-size:var(--fs-xs);text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.reasoning-toggle:hover{background:var(--bg-hover);color:var(--text-default);}
.reasoning-toggle:focus-visible{outline:none;box-shadow:var(--ring-inset);}
.reasoning-block.streaming .reasoning-toggle{color:var(--acc-300);}
.reasoning-content{padding:0 12px 12px;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.6;color:var(--text-subtle);white-space:pre-wrap;max-height:340px;overflow-y:auto;}
.reasoning-content.collapsed{display:none;}

.tool-rows{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-3);}
.tool-row{align-self:flex-start;max-width:100%;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-sunken);overflow:hidden;}
.tool-row.pending{border-color:rgba(var(--color-amber),0.32);}
.tool-row.done{border-color:rgba(var(--color-teal),0.28);}
.tool-row.error{border-color:rgba(var(--color-red),0.38);}
.tool-head{display:flex;align-items:center;gap:6px;width:100%;padding:4px 9px;border:none;background:transparent;color:var(--text-muted);font-size:11px;text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.tool-head:hover{color:var(--text-secondary);}
.tool-head:hover{background:var(--bg-hover);}
.tool-head:focus-visible{outline:none;box-shadow:var(--ring-inset);}
.tool-icon{flex:none;}
.tool-icon-pending{color:rgb(var(--color-amber));}
.tool-icon-done{color:rgb(var(--color-teal));}
.tool-icon-error{color:rgb(var(--color-red));}
.tool-name{flex:1;min-width:0;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tool-truncated{font-size:10px;color:var(--text-muted);}
.tool-args{padding:0 9px 5px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);word-break:break-all;}
.tool-result{border-top:1px solid var(--border);}
.tool-result.collapsed{display:none;}
.tool-result pre{margin:0;padding:12px;max-height:320px;overflow:auto;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.55;color:var(--text-secondary);white-space:pre-wrap;}

/* --- grouped tool calls (PLAN.md 33) ---------------------------------------- */
.tool-group{border-radius:var(--r-sm);background:var(--bg-sunken);box-shadow:var(--elev-sunk-1);overflow:hidden;}
.tool-group .tool-row{border:0;border-radius:0;border-top:1px solid var(--border);box-shadow:none;background:transparent;}
.tool-group .tool-row:first-child{border-top:0;}
.tool-group-head{display:flex;align-items:center;gap:6px;width:100%;padding:5px 9px;border:none;background:transparent;color:var(--text-muted);font-size:11px;text-align:left;cursor:pointer;}
.tool-group-head:hover{color:var(--text-secondary);background:var(--bg-hover);}
.tool-group-head:focus-visible{outline:none;box-shadow:var(--ring-inset);}
.tool-group-count{flex:none;font-family:var(--font-mono);font-size:10px;padding:0 5px;border-radius:var(--r-pill);background:var(--bg-elevated);color:var(--text-secondary);}
.tool-group-names{flex:1;min-width:0;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tool-group-body{border-top:1px solid var(--border);}
.tool-group.collapsed .tool-group-body{display:none;}
.tool-image{max-width:100%;display:block;margin:8px 9px;border-radius:var(--r-sm);}

.turn-notices{display:flex;flex-direction:column;gap:var(--s-2);}
.turn-notice{padding:8px 12px;border-radius:var(--r-sm);background:rgba(var(--color-amber),0.1);border:1px solid rgba(var(--color-amber),0.28);font-size:var(--fs-xs);color:var(--warning);}
.turn-error{padding:8px 12px;border-radius:var(--r-sm);background:rgba(var(--color-red),0.1);border:1px solid rgba(var(--color-red),0.32);font-size:var(--fs-xs);color:var(--danger);}

.turn-status{display:inline-flex;align-items:center;padding:var(--s-2) 0;font-size:var(--fs-xs);color:var(--text-muted);font-family:var(--font-mono);}
.turn-status[hidden]{display:none;}
.stream-waiting{display:inline-flex;align-items:center;gap:5px;padding:var(--s-2) 0;}
.stream-waiting-dot{width:5px;height:5px;border-radius:var(--r-pill);background:var(--acc-300);animation:dotPulseGrow 1.2s var(--ease-inout) infinite;}
.stream-waiting-dot:nth-child(2){animation-delay:0.15s;}
.stream-waiting-dot:nth-child(3){animation-delay:0.3s;}
.stream-waiting.fade-out{opacity:0;transition:opacity var(--t-s) var(--ease-in);}
/* Growing pulse: stream-waiting dots and the sidebar "still generating"
   indicator (PLAN.md 3) — kept separate from dotPulseStatus below so the two
   no longer silently overwrite each other via duplicate @keyframes names. */
@keyframes dotPulseGrow{0%,60%,100%{transform:scale(1);opacity:0.35;}30%{transform:scale(1.35);opacity:1;}}

/* ---------- markdown ---------- */

.message .message-content h1,.message .message-content h2,.message .message-content h3,
.message .message-content h4,.message .message-content h5,.message .message-content h6{margin:var(--s-5) 0 var(--s-2);font-weight:500;letter-spacing:-0.015em;}
.message .message-content h1{font-size:1.35rem;}
.message .message-content h2{font-size:1.2rem;}
.message .message-content h3{font-size:1.06rem;}
.message .message-content h4,.message .message-content h5,.message .message-content h6{font-size:1rem;color:var(--text-secondary);}
.message .message-content > :first-child{margin-top:0;}
.message .message-content p{margin-bottom:var(--s-3);}
.message .message-content p:last-child{margin-bottom:0;}
.message .message-content ul,.message .message-content ol{margin:0 0 var(--s-3);padding-left:1.35rem;}
.message .message-content li{margin-bottom:var(--s-1);}
.message .message-content li > ul,.message .message-content li > ol{margin-top:var(--s-1);margin-bottom:0;}
.message .message-content ol li::marker{color:var(--text-muted);font-family:var(--font-mono);font-size:0.85em;}
.message .message-content ul li::marker{color:var(--acc-400);}
.message .message-content input[type="checkbox"]{margin-right:6px;accent-color:var(--acc-500);}
.message .message-content blockquote{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-4);border-left:2px solid var(--border-accent);border-radius:0;background:var(--bg-sunken);color:var(--text-secondary);}
.message .message-content blockquote p:last-child{margin-bottom:0;}
.message .message-content hr{margin:var(--s-5) 0;border:none;border-top:1px solid var(--border);}
.message .message-content a{color:var(--acc-300);text-decoration:underline;text-decoration-color:var(--border-accent);text-underline-offset:2px;transition:text-decoration-color var(--t-xs) var(--ease-out);}
.message .message-content a:hover{text-decoration-color:currentColor;}
.message .message-content img{max-width:100%;height:auto;border-radius:var(--r-md);}
.message .message-content del{color:var(--text-muted);}
.message .message-content em{font-style:italic;}

.message .message-content table{width:100%;margin-bottom:var(--s-3);border-collapse:collapse;font-size:var(--fs-sm);display:block;overflow-x:auto;}
.message .message-content thead{background:var(--bg-sunken);}
.message .message-content th{padding:8px 12px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border-soft);white-space:nowrap;}
.message .message-content td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.message .message-content tbody tr:last-child td{border-bottom:none;}
.message .message-content tbody tr:hover{background:var(--bg-hover);}
.message .message-content td[align="center"]{text-align:center;}
.message .message-content td[align="right"]{text-align:right;}

.message .message-content code{padding:0.1em 0.3em;border-radius:var(--r-xs);background:var(--bg-sunken);border:none;font-family:var(--font-mono);font-size:0.86em;color:var(--acc-100);}
.message .message-content pre{position:relative;margin:0 0 var(--s-3);padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);overflow-x:auto;}
.message .message-content pre code{padding:0;border:none;background:transparent;color:var(--text-default);font-size:var(--fs-xs);line-height:1.65;}
.code-actions{position:sticky;top:8px;z-index:2;float:right;display:flex;gap:6px;margin:0 0 -36px 8px;pointer-events:none;}
.copy-button,.download-button{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-elevated);color:var(--text-subtle);cursor:pointer;pointer-events:auto;opacity:0;transition:opacity var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out),border-color var(--t-xs) var(--ease-out);}
.message .message-content pre:hover .copy-button,.message .message-content pre:hover .download-button{opacity:1;}
.copy-button:hover,.download-button:hover{color:var(--text-default);border-color:var(--border-strong);}
.copy-button.copied{color:var(--success);border-color:rgba(var(--color-teal),0.5);}
.answer-body > :last-child{margin-bottom:0;}
.footnotes{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted);}

.message-image,.image-preview{max-width:100%;border-radius:var(--r-md);border:1px solid var(--border);cursor:zoom-in;transition:transform var(--t-s) var(--ease-out),border-color var(--t-s) var(--ease-out);}
.message-image:hover,.image-preview:hover{transform:scale(1.01);border-color:var(--border-strong);}
.message-image{max-height:340px;object-fit:cover;}

/* ---------- subagent + multi-answer ---------- */

.subagent-panel{margin-bottom:var(--s-3);padding:var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);position:relative;overflow:hidden;}
.subagent-panel.running{border-color:var(--border-accent);}
.subagent-panel.running::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc-400),transparent);animation:sweep 1.4s linear infinite;}
@keyframes sweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.subagent-panel.complete{border-color:rgba(var(--color-teal),0.28);}
.subagent-panel.failed{border-color:rgba(var(--color-red),0.36);}
.subagent-head{display:flex;align-items:center;gap:var(--s-2);margin-bottom:6px;}
.subagent-icon{font-size:13px;}
.subagent-title{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-default);}
.subagent-query{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.subagent-timer{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.subagent-status{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-xs);color:var(--text-subtle);}
.subagent-phase{flex:1;min-width:0;}
.subagent-panel.has-error .subagent-phase{color:var(--danger);}
.subagent-spinner{width:12px;height:12px;border:1.5px solid var(--border-soft);border-top-color:var(--acc-400);border-radius:var(--r-pill);animation:spin 700ms linear infinite;}
.subagent-panel:not(.running) .subagent-spinner{display:none;}
.subagent-counters{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.subagent-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2);}
.subagent-source{padding:2px 8px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-elevated);font-size:10px;color:var(--text-subtle);text-decoration:none;transition:border-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.subagent-source:hover{border-color:var(--border-accent);color:var(--text-default);text-decoration:none;}
.subagent-source.more{color:var(--text-muted);}
.subagent-log-toggle,.subagent-result-toggle{margin-top:var(--s-2);padding:4px 0;border:none;background:transparent;color:var(--text-muted);font-size:10px;font-family:var(--font-mono);cursor:pointer;transition:color var(--t-xs) var(--ease-out);}
.subagent-log-toggle:hover,.subagent-result-toggle:hover{color:var(--text-default);}
.subagent-log{margin-top:var(--s-2);display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto;}
.subagent-log.collapsed,.subagent-result-body.collapsed{display:none;}
.subagent-log-item{display:flex;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.subagent-log-item.phase-error{color:var(--danger);}
.log-icon{flex-shrink:0;}
.log-text{min-width:0;word-break:break-word;}
.subagent-result-body{margin-top:var(--s-2);padding:var(--s-3);max-height:300px;overflow:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:10px;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap;}

.multi-answer-group{display:flex;flex-direction:column;gap:var(--s-3);}
.multi-answer-item{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);overflow:hidden;}
.multi-answer-header{display:flex;align-items:center;gap:var(--s-2);padding:8px var(--s-3);border-bottom:1px solid var(--border);background:var(--bg-sunken);}
.multi-answer-model-badge{padding:2px 8px;border-radius:var(--r-xs);border:1px solid var(--border);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-subtle);}
.multi-answer-model-badge.model-openai{border-color:rgba(var(--color-openai),0.3);color:rgb(var(--color-openai));}
.multi-answer-model-badge.model-claude{border-color:rgba(var(--color-claude),0.3);color:rgb(var(--color-claude));}
.multi-answer-model-badge.model-gemini{border-color:rgba(var(--color-gemini),0.3);color:rgb(var(--color-gemini));}
.multi-answer-model-badge.model-grok{border-color:rgba(var(--color-grok),0.3);color:rgb(var(--color-grok));}
.multi-answer-model-badge.model-deepseek{border-color:rgba(var(--color-deepseek),0.3);color:rgb(var(--color-deepseek));}
.multi-answer-model-badge.model-mistral{border-color:rgba(var(--color-mistral),0.3);color:rgb(var(--color-mistral));}
.multi-answer-model-badge.model-meta{border-color:rgba(var(--color-meta),0.3);color:rgb(var(--color-meta));}
.multi-answer-model-badge.model-qwen{border-color:rgba(var(--color-qwen),0.3);color:rgb(var(--color-qwen));}
.multi-answer-model-badge.model-cohere{border-color:rgba(var(--color-cohere),0.3);color:rgb(var(--color-cohere));}
.multi-answer-model-badge.model-perplexity{border-color:rgba(var(--color-perplexity),0.3);color:rgb(var(--color-perplexity));}
.multi-answer-model-badge.model-moonshot{border-color:rgba(var(--color-moonshot),0.3);color:rgb(var(--color-moonshot));}
.multi-answer-status{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.multi-answer-status.streaming{color:var(--acc-300);}
.multi-answer-status.done{color:var(--success);}
.multi-answer-status.error{color:var(--danger);}
.multi-answer-content{padding:var(--s-3) var(--s-4);}
.multi-answer-error{padding:var(--s-3) var(--s-4);color:var(--danger);font-size:var(--fs-sm);}
.multi-answer-provider-group{margin-bottom:var(--s-4);}
.multi-answer-provider-name{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s-2);}
.multi-answer-model-item{display:flex;align-items:center;gap:var(--s-2);padding:7px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out);}
.multi-answer-model-item:hover{background:var(--bg-hover);color:var(--text-default);}
.multi-answer-model-item input[type="checkbox"]{accent-color:var(--acc-500);width:15px;height:15px;}
#multi-answer-model-count{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);}
#multi-answer-btn.active svg{color:var(--acc-300);}

/* ---------- composer ---------- */

#chat-input-area{position:relative;isolation:isolate;z-index:120;flex-shrink:0;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) clamp(var(--s-4),5vw,var(--s-6));padding-bottom:calc(var(--s-3) + var(--safe-bottom));background:linear-gradient(180deg,transparent,var(--bg-base) 40%);transition:background-color var(--t-s) var(--ease-out);}
#chat-input-area::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border) 15%,var(--border) 85%,transparent);pointer-events:none;}
.composer{width:100%;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--elev-3);transition:border-color var(--t-s) var(--ease-out);}
.composer:focus-within{border-color:var(--border-accent);box-shadow:var(--elev-3),var(--ring-inset);}
.textarea-wrapper{position:relative;display:flex;align-items:flex-end;padding:var(--s-2) var(--s-4) 0;transition:padding var(--t-s) var(--ease-out);}
#user-input{flex:1;max-height:40vh;min-height:24px;padding:0;border:none;background:transparent;color:var(--text-default);font-size:var(--fs-md);line-height:1.6;resize:none;overflow-y:auto;}
#user-input:focus{outline:none;box-shadow:none;border:none;}
.tool-autocomplete{position:absolute;left:var(--s-4);right:var(--s-4);bottom:100%;margin-bottom:var(--s-2);display:flex;flex-direction:column;gap:2px;padding:var(--s-2);background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-md);box-shadow:var(--elev-3);max-height:220px;overflow-y:auto;z-index:20;}
.tool-autocomplete-item{display:flex;align-items:baseline;gap:var(--s-2);width:100%;padding:var(--s-1) var(--s-2);background:transparent;border:none;border-radius:var(--r-sm);color:var(--text-default);font-family:var(--font-mono);font-size:var(--fs-sm);text-align:left;cursor:pointer;}
.tool-autocomplete-item .tool-autocomplete-name{flex-shrink:0;color:var(--acc-300);}
.tool-autocomplete-item .tool-autocomplete-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-family:var(--font-sans);}
.tool-autocomplete-item.active,.tool-autocomplete-item:hover{background:var(--bg-hover);}
#mic-button-wrapper{position:relative;padding-left:var(--s-2);}
.mic-button{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out),transform 100ms var(--ease-out);}
.mic-button:hover{background:var(--bg-hover);color:var(--text-default);}
.mic-button:active{transform:scale(0.94);}
.mic-button.recording{background:rgba(var(--color-red),0.16);color:var(--danger);animation:micPulse 1.6s var(--ease-inout) infinite;}
.mic-button.processing{color:var(--acc-300);}
.mic-button.processing svg{animation:spin 900ms linear infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--color-red),0.4);}50%{box-shadow:0 0 0 6px rgba(var(--color-red),0);}}
.mic-indicator{position:absolute;right:2px;bottom:2px;width:6px;height:6px;border-radius:var(--r-pill);background:var(--text-muted);}
.mic-indicator.active{background:var(--danger);}

.composer-bar{display:flex;align-items:center;gap:var(--s-2);padding:4px var(--s-3) var(--s-2);transition:padding var(--t-s) var(--ease-out);}
@media (max-width:767px){
 /* Collapsed empty-composer row (no text typed, not focused): textarea and
    icon rail share one line, so they need the same vertical center and a
    consistent gap instead of each getting its own leftover spacing. */
 .composer:has(#user-input:placeholder-shown):not(:focus-within){flex-direction:row;align-items:center;gap:var(--s-1);}
 .composer:has(#user-input:placeholder-shown):not(:focus-within) .mode-chips{display:none;}
 .composer:has(#user-input:placeholder-shown):not(:focus-within) .textarea-wrapper{flex:1;align-items:center;padding:0 0 0 var(--s-3);}
 .composer:has(#user-input:placeholder-shown):not(:focus-within) .composer-bar{padding:4px var(--s-3) 4px 0;gap:var(--s-1);}
 .composer:has(#user-input:placeholder-shown):not(:focus-within) .input-actions-column{gap:2px;}
}
.input-actions-column{display:flex;align-items:center;gap:var(--s-1);}
.toggle-buttons-row{display:flex;align-items:center;gap:var(--s-1);}
.expand-menu-wrapper{position:relative;}
.btn-expand{width:30px;height:30px;padding:0;border-color:transparent;border-radius:var(--r-sm);color:var(--text-subtle);}
.btn-expand:hover{background:var(--bg-hover);color:var(--text-default);}
.send-button-wrapper{position:relative;margin-left:auto;display:flex;align-items:center;gap:var(--s-2);}
#send-button{width:36px;height:36px;padding:0;border-radius:var(--r-md);}
#send-button.sending{cursor:pointer;}
#send-button.sending .icon{animation:none;}
.input-token-count{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);cursor:default;}
.input-token-count:hover{color:var(--text-subtle);}

#thinking-toggle-btn .thinking-toggle-x-line{opacity:0;transition:opacity var(--t-xs) var(--ease-out);}
#thinking-toggle-btn.active .thinking-toggle-x-line{opacity:1;}
#paste-inline-toggle-btn .paste-inline-toggle-x-line{opacity:0;transition:opacity var(--t-xs) var(--ease-out);}
#paste-inline-toggle-btn.active .paste-inline-toggle-x-line{opacity:1;}

.attachments-preview-area{width:100%;display:flex;flex-wrap:wrap;gap:var(--s-2);}
.attachment-image-item,.image-preview-item{position:relative;}
.attachment-image-preview{width:58px;height:58px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);transition:border-color var(--t-xs) var(--ease-out);}
.attachment-image-preview:hover{border-color:var(--border-strong);}
.attachment-remove-btn,.image-remove-btn{position:absolute;top:-6px;right:-6px;width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--border-soft);border-radius:var(--r-pill);background:var(--bg-elevated);color:var(--text-subtle);font-size:12px;line-height:1;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.attachment-remove-btn:hover,.image-remove-btn:hover{background:rgba(var(--color-red),0.18);color:var(--danger);}
.uploaded-file-item{display:inline-flex;align-items:center;gap:var(--s-2);padding:6px 10px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-xs);color:var(--text-secondary);}
.uploaded-file-item:hover{border-color:var(--border-soft);}
.uploaded-file-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uploaded-file-remove{border:none;background:transparent;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer;}

.pending-queue-indicator{width:100%;display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-2);}
.pending-queue-chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:4px 8px 4px 10px;background:var(--bg-sunken);border:1px solid var(--border-soft);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--text-secondary);}
.pending-queue-chip::before{content:'⏳';font-size:10px;}
.pending-queue-chip-text{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pending-queue-chip-remove{border:none;background:transparent;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer;padding:0 2px;}
.pending-queue-chip-remove:hover{color:var(--danger);}
.uploaded-file-remove:hover{color:var(--danger);}

.load-more-indicator{position:sticky;top:0;z-index:10;padding:var(--s-2);text-align:center;font-size:var(--fs-xs);color:var(--text-muted);}

/* ---------- conversation map ---------- */

#conversation-map{position:absolute;right:2px;top:var(--header-height);bottom:0;width:14px;z-index:110;opacity:0;pointer-events:none;transition:opacity var(--t-s) var(--ease-out);}
#conversation-map.active{opacity:0.4;pointer-events:auto;}
#conversation-map.active:hover{opacity:1;}
.conv-map-tick{position:absolute;right:4px;width:7px;height:2px;border-radius:var(--r-pill);background:var(--border-strong);cursor:pointer;transition:width var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);}
.conv-map-tick.user{background:rgba(var(--color-primary),0.75);}
.conv-map-tick.assistant{background:var(--border-strong);}
.conv-map-tick:hover{width:11px;background:var(--acc-300);}
#conversation-map-viewport{position:absolute;right:0;width:100%;border-radius:var(--r-xs);background:rgba(var(--color-primary),0.12);border:1px solid var(--border-accent);pointer-events:none;display:none;}
.conversation-map-tooltip{display:none;position:fixed;z-index:700;padding:5px 9px;max-width:280px;border-radius:var(--r-sm);background:var(--bg-elevated);border:1px solid var(--border-soft);box-shadow:var(--elev-3);font-size:var(--fs-xs);line-height:1.5;color:var(--text-secondary);pointer-events:none;}

/* ---------- workspace mini tree (always-visible, non-blocking) ---------- */

/* Status-bar workspace indicator (PLAN.md 10): a compact folder+count button
   instead of a floating list that used to sit on top of the messages. */
#workspace-mini-tree{position:relative;}
#workspace-mini-tree[hidden]{display:none;}
.ws-mini-btn{display:inline-flex;align-items:center;gap:4px;}
.ws-mini-btn .icon{width:12px;height:12px;}
.ws-mini-list{display:none;position:absolute;left:0;bottom:calc(100% + 6px);z-index:var(--z-popover);flex-direction:column;gap:1px;min-width:160px;max-width:220px;max-height:220px;overflow:auto;padding:4px;border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--border-soft);box-shadow:var(--elev-4);}
@media (pointer:fine){
 #workspace-mini-tree:hover .ws-mini-list{display:flex;}
}
.ws-mini-item{display:flex;align-items:center;gap:5px;width:100%;padding:2px 4px;border:0;background:none;border-radius:var(--r-xs);font-size:10px;line-height:1.4;color:var(--text-secondary);cursor:pointer;text-align:left;}
.ws-mini-item:hover{background:var(--bg-hover);color:var(--text-default);}
.ws-mini-icon{flex:0 0 auto;width:10px;height:10px;}
.ws-mini-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-mini-more{padding:2px 4px;font-size:10px;color:var(--text-muted);}

/* ---------- empty state ---------- */

.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);padding:var(--s-6) var(--s-4);text-align:center;}
.empty-state-logo{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-lg);background:rgba(var(--color-primary),0.14);border:1px solid var(--border-accent);color:var(--acc-300);animation:rise 500ms var(--ease-out) both;}
.empty-state-logo svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.empty-state-title{font-size:1.5rem;font-weight:500;letter-spacing:-0.02em;animation:rise 500ms var(--ease-out) 80ms both;}
.empty-state-subtitle{max-width:52ch;color:var(--text-subtle);font-size:var(--fs-sm);animation:rise 500ms var(--ease-out) 160ms both;}
.empty-state-suggestions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s-3);width:100%;max-width:min(100%,var(--measure));margin-top:var(--s-4);animation:rise 500ms var(--ease-out) 240ms both;}
.empty-state-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);text-align:left;cursor:pointer;transition:border-color var(--t-s) var(--ease-out),transform var(--t-s) var(--ease-out),background-color var(--t-s) var(--ease-out);}
.empty-state-card:hover{border-color:var(--border-accent);background:var(--bg-elevated);transform:translateY(-2px);}
.empty-state-card:focus-visible{outline:none;box-shadow:var(--ring);}
.empty-state-card-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:rgba(var(--color-primary),0.12);color:var(--acc-300);margin-bottom:2px;}
.empty-state-card-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.empty-state-card-title{font-size:var(--fs-sm);font-weight:500;color:var(--text-default);}
.empty-state-card-desc{font-size:var(--fs-xs);color:var(--text-muted);}
.empty-state-conv-dot{margin-bottom:2px;}
.empty-state-template-row{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:min(100%,var(--measure));margin-top:var(--s-3);justify-content:center;}
.empty-state-template-chip{padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-full,999px);background:var(--bg-surface);color:var(--text-secondary);font-size:var(--fs-xs);cursor:pointer;}
.empty-state-template-chip:hover{background:var(--bg-hover);color:var(--text-default);}

/* ---------- settings panel ---------- */

.slide-down-panel{position:absolute;top:calc(var(--header-height) + 6px);left:50%;z-index:410;width:min(var(--panel-width),calc(100vw - 24px));max-height:calc(100dvh - var(--header-height) - 32px);display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--elev-4);opacity:0;visibility:hidden;transform:translate(-50%,-10px) scale(0.98);transform-origin:top center;transition:transform var(--t-s) var(--ease-out),opacity var(--t-xs) var(--ease-out),visibility var(--t-s);overflow:hidden;}
.slide-down-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);}
.panel-header{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);position:relative;}
.settings-autosave-note{margin-left:var(--s-2);font-size:10px;letter-spacing:0.04em;text-transform:none;color:var(--success,var(--text-subtle));opacity:0;animation:autosaveNoteFade 1.8s ease-out;}
@keyframes autosaveNoteFade{0%{opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{opacity:0;}}
.settings-danger-zone{margin-top:var(--s-5);}
.settings-danger-divider{height:1px;background:var(--border);margin-bottom:var(--s-4);}
.settings-danger-title{color:var(--danger);}
.panel-content{flex:1;min-height:0;overflow-y:auto;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-5);}
.panel-footer{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);background:var(--bg-sunken);}
.panel-footer .btn{flex:1;}
.settings-group{display:flex;flex-direction:column;gap:var(--s-4);}
.settings-group-title{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);}
.settings-group-title .icon{width:13px;height:13px;}
.setting-row{display:flex;flex-direction:column;gap:6px;}
.setting-row.setting-row-in-header{display:none;}
.setting-row-label-line{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);}
.setting-row-label-line label{margin:0;}

/* PLAN.md 54: one popover replacing the old prompt-buttons + prompt-templates-grid pair */
.prompt-picker-wrap{position:relative;}
.prompt-picker-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:var(--z-popover);max-height:340px;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--bg-elevated,var(--bg-sunken));border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--elev-4);}
.prompt-picker-search{flex-shrink:0;}
.prompt-picker-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.prompt-picker-item{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-default);text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out);}
.prompt-picker-item:hover{background:var(--bg-hover);}
.prompt-picker-item-name{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);}
.prompt-picker-item-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);padding:1px 5px;border:1px solid var(--border-soft);border-radius:var(--r-pill);}
.prompt-picker-item-desc{font-size:11px;color:var(--text-muted);}
.prompt-picker-empty{padding:var(--s-3);text-align:center;font-size:var(--fs-xs);color:var(--text-muted);}
@media (max-width:600px){
 .prompt-picker-panel{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:70vh;border-radius:var(--r-lg) var(--r-lg) 0 0;}
}
.setting-help{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;}
.temperature-range::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);background:linear-gradient(90deg,rgb(var(--color-gemini)),rgb(var(--color-teal)),rgb(var(--color-amber)),rgb(var(--color-red)));}
.temperature-range::-moz-range-track{height:4px;border-radius:var(--r-pill);background:linear-gradient(90deg,rgb(var(--color-gemini)),rgb(var(--color-teal)),rgb(var(--color-amber)),rgb(var(--color-red)));}
#thinking-input-container{display:flex;flex-direction:column;gap:6px;}
.prompt-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2);}
.prompt-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:transparent;color:var(--text-subtle);font-size:var(--fs-xs);cursor:pointer;transition:border-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);}
.prompt-btn:hover{border-color:var(--border-accent);color:var(--text-default);background:rgba(var(--color-primary),0.1);}
.prompt-btn:active{transform:scale(0.97);}
.prompt-templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s-2);}
.prompt-template-item{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-sunken);text-align:left;cursor:pointer;transition:border-color var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);}
.prompt-template-item:hover{border-color:var(--border-accent);background:var(--bg-hover);}
.prompt-template-name{font-size:var(--fs-xs);font-weight:500;color:var(--text-default);}
.prompt-template-desc{font-size:10px;color:var(--text-muted);}
.prompt-templates-loading,.prompt-templates-empty,.prompt-templates-error{grid-column:1/-1;padding:var(--s-3);text-align:center;font-size:var(--fs-xs);color:var(--text-muted);}
.prompt-templates-error{color:var(--danger);}
.token-count-container{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.summary-download-container{display:flex;gap:var(--s-2);}

/* ---------- modals + context menu ---------- */

.universal-modal-overlay,.modal-overlay{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:var(--s-4);background:rgba(3,5,10,0.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity var(--t-s) var(--ease-out);}
.universal-modal-overlay.visible,.modal-overlay.visible{opacity:1;}
.universal-modal-container,.modal-container{display:flex;flex-direction:column;width:min(560px,100%);max-height:min(82dvh,760px);background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--elev-4);overflow:hidden;transform:translateY(10px) scale(0.98);transition:transform var(--t-s) var(--ease-out);}
.universal-modal-overlay.visible .universal-modal-container,.modal-overlay.visible .modal-container{transform:none;}
.universal-modal-container.modal-sm{width:min(380px,100%);}
.universal-modal-container.modal-md{width:min(560px,100%);}
.universal-modal-container.modal-lg{width:min(760px,100%);}
.universal-modal-container.modal-xl{width:min(1000px,100%);}
.universal-modal-container.modal-full{width:100%;height:100%;max-height:none;}
.universal-modal-header,.modal-header{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);}
.universal-modal-title,.modal-title{flex:1;font-size:var(--fs-md);font-weight:500;}
.universal-modal-close,.modal-close{width:30px;height:30px;display:grid;place-items:center;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-subtle);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.universal-modal-close:hover,.modal-close:hover{background:var(--bg-hover);color:var(--text-default);}
.universal-modal-body,.modal-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-4);}
.universal-modal-footer,.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);background:var(--bg-sunken);}
.universal-modal-footer > span:first-child{margin-right:auto;}
.modal-json{font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.6;white-space:pre-wrap;word-break:break-word;}
#edit-message-content{width:100%;min-height:180px;font-family:var(--font-mono);font-size:var(--fs-xs);}

.context-menu{position:fixed;z-index:950;min-width:186px;padding:var(--s-1);background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-md);box-shadow:var(--elev-4);animation:pop 140ms var(--ease-out) both;}
.context-menu-item{display:flex;align-items:center;gap:var(--s-2);width:100%;padding:7px 10px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);font-size:var(--fs-sm);text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.context-menu-item:hover:not(.disabled){background:var(--bg-hover);color:var(--text-default);}
.context-menu-item:active:not(.disabled){transform:scale(0.99);}
.context-menu-item.disabled{opacity:0.4;cursor:not-allowed;}
.context-menu-item.danger{color:var(--danger);}
.context-menu-item.danger:hover:not(.disabled){background:rgba(var(--color-red),0.12);}
.context-menu-icon{display:grid;place-items:center;color:var(--text-muted);}
.context-menu-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.context-menu-label{flex:1;}
.context-menu-shortcut{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.context-menu-separator{height:1px;margin:var(--s-1) 0;background:var(--border);}

/* ---------- file tree + previews ---------- */

.file-system-tree{display:flex;flex-direction:column;gap:2px;list-style:none;}
.folder-item,.file-item{list-style:none;}
.folder-label,.file-label{display:flex;align-items:center;gap:var(--s-2);padding:6px 8px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.folder-label:hover,.file-label:hover{background:var(--bg-hover);color:var(--text-default);}
.folder-content{display:none;padding-left:var(--s-4);}
.folder-open > .folder-content{display:block;}
.folder-icon,.file-icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;color:var(--text-muted);flex-shrink:0;}
.folder-toggle{width:12px;color:var(--text-muted);transition:transform var(--t-xs) var(--ease-out);}
.folder-open > .folder-label .folder-toggle{transform:rotate(90deg);}
.folder-name,.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-upload-area{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-5);border:1px dashed var(--border-soft);border-radius:var(--r-md);color:var(--text-muted);font-size:var(--fs-xs);cursor:pointer;transition:border-color var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);}
.file-upload-area:hover{border-color:var(--border-accent);background:var(--bg-hover);}
.file-reference,.file-tag{max-width:220px;}
.files-scroll-container{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;}
.files-scroll-container::-webkit-scrollbar{display:none;}
.files-scroll-btn{width:22px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-sunken);color:var(--text-subtle);cursor:pointer;}
.files-scroll-btn:hover{color:var(--text-default);border-color:var(--border-soft);}

/* ---------- auth ---------- */

body.auth{display:grid;place-items:center;min-height:100dvh;padding:var(--s-5) var(--s-4);background:
 radial-gradient(900px 520px at 50% -18%, rgba(var(--color-primary),0.16), transparent 62%),
 var(--bg-base);}
.auth-shell{width:100%;max-width:392px;animation:rise 500ms var(--ease-out) both;}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);}
.auth-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-lg);background:rgba(var(--color-primary),0.16);border:1px solid var(--border-accent);color:var(--acc-300);}
.auth-mark svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.auth-wordmark{font-family:var(--font-mono);font-size:var(--fs-lg);letter-spacing:-0.02em;color:var(--text-default);}
.auth-tagline{font-size:var(--fs-sm);color:var(--text-muted);}
.auth-card{padding:var(--s-5);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--elev-3);}
.auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;margin-bottom:var(--s-5);background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);}
.auth-tab{padding:8px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-subtle);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background-color var(--t-s) var(--ease-out),color var(--t-s) var(--ease-out);}
.auth-tab:hover:not(.active){color:var(--text-default);}
.auth-tab.active{background:var(--acc-500);color:#fff;}
.auth-tab:focus-visible{outline:none;box-shadow:var(--ring);}
.auth-form{display:flex;flex-direction:column;gap:var(--s-4);}
.auth-form.hidden{display:none;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{margin:0;font-size:var(--fs-xs);font-weight:500;letter-spacing:0.02em;color:var(--text-muted);}
.field input{padding:11px 13px;}
.auth-button{width:100%;margin-top:var(--s-1);padding:11px;}
.auth-button[aria-busy="true"]{color:transparent;pointer-events:none;position:relative;}
.auth-button[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border:1.5px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:var(--r-pill);animation:spin 650ms linear infinite;}
.error-message{min-height:18px;margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--danger);text-align:center;transition:opacity var(--t-xs) var(--ease-out);}
.auth-foot{margin-top:var(--s-4);text-align:center;font-size:var(--fs-xs);color:var(--text-muted);}

/* ---------- responsive ---------- */

/* The column grows with the viewport instead of staying mobile-wide. */
@media (min-width:1100px){
 :root{--measure:min(100%, 66rem);--side-width:300px;}
 #chat-messages{padding-inline:var(--s-6);}
}

@media (min-width:1500px){
 :root{--measure:min(100%, 76rem);--side-width:324px;}
 #chat-messages{padding-inline:var(--s-7);}
}

@media (min-width:1900px){
 :root{--measure:min(100%, 88rem);}
}

@media (max-width:768px){
 :root{--header-height:52px;}
 #chat-messages{padding:var(--s-4) var(--s-3) var(--s-5);gap:var(--s-4);}
 #chat-input-area{padding:var(--s-2) var(--s-3);padding-bottom:calc(var(--s-2) + var(--safe-bottom));}
 .composer{border-radius:var(--r-lg);}
 .slide-down-panel{width:calc(100vw - 16px);max-height:calc(100dvh - var(--header-height) - 16px);}
 /* #settings-panel is now a layer.js size-l (PLAN.md point 13) - its mobile
    bottom-sheet presentation, backdrop and drag-to-close come from layer.js. */
 #settings-panel .panel-footer{padding-bottom:calc(var(--s-3) + var(--safe-bottom));}
 #header-dropdown-menu{right:var(--s-2);width:calc(100vw - 16px);max-width:280px;}
 .picker-pop{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:64dvh;}
 .hchip{max-width:112px;}
 .hchip-label{max-width:64px;}
 #conversation-title{font-size:var(--fs-sm);}
 .empty-state-suggestions{grid-template-columns:1fr;}
}

@media (max-width:420px){
 .hchip-effort .hchip-label{display:none;}
 .header-actions{gap:var(--s-1);}
}

/* PLAN.md 9: below 480px the title no longer fits inline with the icon rail
   and chips, so it drops to its own full-width row instead of being squeezed
   to an unreadable sliver. */
@media (max-width:480px){
 :root{--header-height:84px;}
 /* justify-content:space-between spreads the hamburger and the header-actions
    rail to the two edges of the row once the title drops to its own line -
    otherwise they'd stay bunched on the left, leaving a lopsided gap on the right. */
 #chat-header{flex-wrap:wrap;height:auto;min-height:var(--header-height);align-content:flex-start;justify-content:space-between;padding-bottom:var(--s-1);}
 .header-actions{flex-shrink:1;justify-content:flex-end;}
 /* A hairline top border reads as an intentional second row of the header
    instead of the title looking like it awkwardly wrapped off the icon rail. */
 #chat-info{order:3;flex-basis:100%;width:100%;height:32px;justify-content:center;align-items:center;padding:4px var(--s-1) 0;margin-top:2px;border-top:1px solid var(--border-soft);}
 #conversation-title{text-align:center;max-width:100%;font-size:var(--fs-sm);font-weight:400;padding-left:2px;}
}

@media (pointer:coarse){
 .btn-icon,.message-action-btn,.user-btn{min-width:44px;min-height:44px;}
 .btn-icon-small,.btn-expand,.mic-button{min-width:44px;min-height:44px;}
 .conversation-delete-btn{min-width:32px;min-height:32px;}
 #conversations-list li{padding-block:11px;}
 .conv-search-input{min-height:40px;}
 .message-token-count{display:none;}
 .message-more-btn{display:inline-flex;}
 .copy-button,.download-button{opacity:1;}
 .conversation-delete-btn{display:none;}
}
@media (pointer:fine){
 .message-more-btn{display:none;}
}

@media (max-height:520px) and (orientation:landscape){
 #chat-messages{padding-top:var(--s-3);}
 .empty-state{gap:var(--s-2);padding:var(--s-4);}
 .empty-state-logo{display:none;}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}
}

@media (prefers-contrast:more){
 :root{--border:rgba(255,255,255,0.2);--border-soft:rgba(255,255,255,0.3);--text-muted:#9aa3ba;}
}

/* ---------- light theme corrections ---------- */

.theme-light .message.user{background:rgba(var(--color-primary),0.1);border-color:rgba(var(--color-primary),0.28);}
.theme-light .message.assistant{background:var(--bg-surface);border-color:var(--border);box-shadow:var(--elev-1);}
.theme-light .message .message-content code{color:var(--acc-600);}
.theme-light .empty-state-logo,.theme-light .auth-mark,.theme-light .user-avatar,.theme-light .profile-avatar-large{background:rgba(var(--color-primary),0.1);color:var(--acc-600);}
.theme-light .conv-map-tick.assistant{background:rgba(15,23,42,0.28);}
.theme-light .universal-modal-overlay,.theme-light .modal-overlay,.theme-light .side-panel-backdrop{background:rgba(15,23,42,0.35);}
.theme-light .subagent-panel,.theme-light .tool-row,.theme-light .reasoning-block{background:var(--bg-tertiary);}

/* ---------- scroll-to-bottom ---------- */

/* PLAN.md 12: anchored to the right edge of the reading column instead of the
   horizontal center, so it never sits on top of answer text or a tool list. */
.scroll-bottom-btn{position:absolute;right:max(var(--s-3), calc(50% - var(--measure) / 2));bottom:100%;z-index:calc(var(--z-popover) - 10);display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-soft);border-radius:var(--r-pill);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;box-shadow:var(--elev-3);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(0) scale(0.9);transition:opacity var(--t-s) var(--ease-out),transform var(--t-s) var(--ease-out),visibility var(--t-s),color var(--t-xs) var(--ease-out),border-color var(--t-xs) var(--ease-out);}
.scroll-bottom-btn.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-10px) scale(1);}
.scroll-bottom-btn:hover{color:var(--text-default);border-color:var(--border-accent);}
.scroll-bottom-btn.visible:active{transform:translateY(-10px) scale(0.94);}
.scroll-bottom-btn.has-new{border-color:var(--acc-500);}
.scroll-bottom-btn.has-new::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--acc-500);box-shadow:0 0 0 2px var(--bg-elevated);animation:scrollBtnPulse 1.6s ease-in-out infinite;}
@keyframes scrollBtnPulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
@media (prefers-reduced-motion:reduce){
 .scroll-bottom-btn.has-new::after{animation:none;}
}
/* Hidden whenever a panel is open above the composer (tools, modes,
   autocomplete) so it never overlaps that panel's content. scroller.render
   in ui.js applies the same rule as a JS fallback for browsers without :has. */
#chat-input-area:has(.tools-toggle-panel:not([hidden]),.modes-panel:not([hidden]),.tool-autocomplete:not([hidden])) .scroll-bottom-btn{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.scroll-bottom-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* App container chip */
.app-chip[hidden]{display:none !important;}
.app-chip{max-width:none;gap:8px;cursor:default;padding:0 4px 0 10px;}
.app-chip-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.2);}
.app-chip[data-status="starting"] .app-chip-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,0.2);}
.app-chip[data-status="exited"] .app-chip-dot{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.2);}
.app-chip-link{color:var(--text-default);text-decoration:none;font-variant-numeric:tabular-nums;}
.app-chip-link:hover{text-decoration:underline;}
.app-chip-time{font-variant-numeric:tabular-nums;color:var(--text-secondary);}
.app-chip-stop{height:26px;padding:0 10px;border:1px solid rgba(239,68,68,0.5);border-radius:var(--r-md);background:rgba(239,68,68,0.12);color:#ef4444;font-size:var(--fs-xs);font-weight:600;cursor:pointer;}
.app-chip-stop:hover:not(:disabled){background:rgba(239,68,68,0.22);}
.app-chip-stop:disabled{opacity:0.5;cursor:wait;}
@media (max-width:600px){.app-chip-time{display:none;}}

/* Workspace browser */
.ws-panel[hidden]{display:none !important;}
.ws-panel{position:fixed;inset:0;z-index:1200;}
.ws-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);}
.ws-drawer{position:absolute;top:0;right:0;bottom:0;width:min(1100px,100%);display:flex;flex-direction:column;background:var(--bg-main);border-left:1px solid var(--border);box-shadow:-12px 0 32px rgba(0,0,0,0.35);}
.ws-head{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:nowrap;}
.ws-head h3{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--text-default);white-space:nowrap;}
.ws-head-spacer{flex:1;}
.ws-btn{height:30px;min-width:30px;padding:0 8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);color:var(--text-secondary);font-size:var(--fs-xs);cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.ws-btn:hover{background:var(--bg-hover);color:var(--text-default);}
.ws-btn-label{display:none;}
@media (min-width:768px){
 .ws-btn-label{display:inline;}
}
.ws-selection-bar{display:flex;align-items:center;gap:10px;padding:6px 14px;border-bottom:1px solid var(--border);background:var(--surface-1);}
.ws-selection-bar[hidden]{display:none;}
.ws-body{flex:1;display:grid;grid-template-columns:minmax(220px,32%) 1fr;min-height:0;}
.ws-tree{overflow:auto;border-right:1px solid var(--border);padding:6px 0;}
.ws-list{list-style:none;margin:0;padding:0;}
.ws-row{display:flex;align-items:center;gap:6px;width:100%;padding:4px 10px 4px 8px;border:0;background:none;color:var(--text-secondary);font-size:var(--fs-xs);text-align:left;cursor:pointer;}
.ws-row:hover{background:var(--bg-hover);color:var(--text-default);}
.ws-row.selected{background:rgba(var(--color-primary),0.16);color:var(--text-default);}
.ws-row.checked{background:rgba(var(--color-primary),0.1);}
.ws-caret{width:14px;flex:none;color:var(--text-secondary);display:inline-flex;align-items:center;}
.ws-caret svg{transition:transform var(--t-xs) var(--ease-out);}
.ws-caret-open svg{transform:rotate(90deg);}
.ws-icon{flex:none;font-size:12px;}
.ws-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-size{flex:none;color:var(--text-secondary);opacity:0.7;font-size:11px;font-variant-numeric:tabular-nums;}
.ws-check{flex:none;margin:0;}
.ws-dir-zip,.ws-rename,.ws-delete{flex:none;height:auto;min-width:auto;padding:2px 6px;font-size:10px;opacity:0;transition:opacity var(--t-xs) var(--ease-out);}
.ws-row:hover .ws-dir-zip,.ws-row:hover .ws-rename,.ws-row:hover .ws-delete,.ws-row.checked .ws-check{opacity:1;}
.ws-selection-count{color:var(--text-secondary);font-size:var(--fs-xs);white-space:nowrap;}
.ws-preview{display:flex;flex-direction:column;min-width:0;min-height:0;}
.ws-preview-head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);}
.ws-preview-path{flex:1;display:flex;align-items:center;min-width:0;overflow:hidden;font-family:monospace;font-size:var(--fs-xs);color:var(--text-default);}
.ws-breadcrumb-btn{flex:none;border:0;background:none;padding:0 2px;color:var(--text-secondary);font-family:monospace;font-size:var(--fs-xs);cursor:pointer;}
.ws-breadcrumb-btn:hover{color:var(--text-default);text-decoration:underline;}
.ws-breadcrumb-sep{flex:none;color:var(--text-secondary);opacity:0.6;display:inline-flex;align-items:center;}
.ws-breadcrumb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;}
@media (max-width:600px){
 .ws-preview-path .ws-breadcrumb-btn{max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
.ws-preview-body{flex:1;overflow:auto;display:flex;flex-direction:column;}
.ws-code{display:flex;margin:0;padding:12px 0;font-family:monospace;font-size:12.5px;line-height:1.55;}
.ws-gutter{flex:none;padding:0 12px;text-align:right;color:var(--text-secondary);opacity:0.5;user-select:none;white-space:pre;}
.ws-text{flex:1;padding-right:16px;color:var(--text-default);white-space:pre;tab-size:2;}
.ws-editor-wrap{flex:1;display:flex;min-height:0;overflow:auto;}
.ws-editor-wrap .ws-gutter{overflow:hidden;padding:12px 8px;line-height:1.55;font-size:12.5px;}
.ws-editor{flex:1;width:100%;margin:0;padding:12px 16px;border:0;resize:none;background:none;color:var(--text-default);font-family:monospace;font-size:12.5px;line-height:1.55;tab-size:2;}
.ws-editor:focus{outline:none;}
.ws-wrap-toggle.active{background:rgba(var(--color-primary),0.16);color:var(--text-default);}
.ws-save:disabled{opacity:0.5;cursor:default;}
.ws-image{display:block;max-width:100%;margin:16px auto;background:repeating-conic-gradient(#8882 0 25%,transparent 0 50%) 0 0/16px 16px;}
#toast-region{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:var(--z-toast,2000);display:flex;flex-direction:column-reverse;gap:8px;align-items:center;pointer-events:none;}
.toast{pointer-events:auto;padding:10px 18px;border-radius:var(--r-md);color:#fff;font-size:var(--fs-sm);box-shadow:var(--elev-3);opacity:0;transform:translateY(8px);transition:opacity var(--t-s) var(--ease-out),transform var(--t-s) var(--ease-out);}
.toast-in{opacity:1;transform:translateY(0);}
.toast-success{background:var(--success);}
.toast-error{background:var(--danger);}

#sticky-question-bar{
 display:flex;align-items:center;gap:var(--s-2);
 width:100%;padding:6px var(--s-4);
 background:var(--surface-1);box-shadow:var(--elev-2);
 border:0;border-bottom:1px solid var(--border);
 color:var(--text-secondary);font-size:var(--fs-xs);text-align:left;cursor:pointer;
 opacity:0;transform:translateY(-6px);
 transition:opacity var(--t-s) var(--ease-out),transform var(--t-s) var(--ease-out);
}
#sticky-question-bar[hidden]{display:none;}
#sticky-question-bar:not([hidden]){opacity:1;transform:translateY(0);}
#sticky-question-bar:hover{color:var(--text-default);}
.sticky-question-icon{flex:none;width:12px;height:12px;transform:rotate(90deg);}
.sticky-question-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-empty{padding:16px;color:var(--text-secondary);font-size:var(--fs-xs);}
.ws-note{flex:none;padding:6px 12px;color:var(--text-secondary);font-size:11px;border-top:1px solid var(--border);}
#workspace-btn:disabled{opacity:0.4;cursor:not-allowed;}

.tools-toggle-wrap{position:relative;}
.modes-wrap{position:relative;}
.modes-btn-count{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:var(--r-pill);background:rgb(var(--color-primary));color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center;}
.modes-panel{position:absolute;bottom:calc(100% + 8px);left:0;z-index:var(--z-popover);width:280px;max-width:calc(100vw - 24px);padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--elev-4);}
.modes-panel-row{display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-secondary);text-align:left;cursor:pointer;}
.modes-panel-row:hover{background:var(--bg-hover);}
.modes-panel-row.active{color:var(--text-default);}
.modes-panel-row.active .modes-panel-switch{background:rgb(var(--color-primary));}
.modes-panel-row.active .modes-panel-switch::after{transform:translateX(14px);}
.modes-panel-icon{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.modes-panel-icon svg{width:16px;height:16px;}
.modes-panel-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.modes-panel-label{font-size:var(--fs-sm);}
.modes-panel-desc{font-size:11px;color:var(--text-muted);}
.modes-panel-switch{position:relative;flex:none;width:30px;height:18px;border-radius:var(--r-pill);background:var(--bg-sunken);box-shadow:var(--elev-sunk-1);transition:background-color var(--t-xs) var(--ease-out);}
.modes-panel-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--t-xs) var(--ease-out);}
@media (max-width:767px){
 /* right:0 is relative to the tiny .modes-wrap button, not the viewport - on
    a narrow screen the 280px panel can overflow past the left edge entirely.
    A fixed bottom sheet (matching .tools-toggle-panel) sidesteps that. */
 .modes-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;}
}
.mode-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.mode-chips[hidden]{display:none;}
.mode-chip{display:flex;align-items:center;gap:6px;padding:3px 8px;border:0;border-radius:var(--r-pill);background:rgba(var(--color-primary),0.16);color:var(--text-default);font-size:11px;cursor:pointer;}
.mode-chip:hover{background:rgba(var(--color-primary),0.24);}
.mode-chip-x{color:var(--text-muted);font-size:13px;line-height:1;}
.tools-toggle-panel{position:absolute;bottom:calc(100% + 8px);left:0;z-index:var(--z-popover);width:300px;max-width:calc(100vw - 24px);max-height:60vh;overflow-x:hidden;overflow-y:auto;background:var(--bg-elevated,var(--bg-sunken));border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--elev-4);padding:6px 0;
 background-image:linear-gradient(var(--bg-elevated) 30%,transparent) local,linear-gradient(transparent,var(--bg-elevated) 70%) local,linear-gradient(rgba(0,0,0,0.22),transparent) scroll,linear-gradient(transparent,rgba(0,0,0,0.22)) scroll;
 background-repeat:no-repeat;background-size:100% 24px,100% 24px,100% 10px,100% 10px;background-position:top,bottom,top,bottom;background-attachment:local,local,scroll,scroll;}
.tools-toggle-head{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:var(--fs-xs);font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border);margin-bottom:4px;}
.tools-toggle-head-actions{margin-left:auto;display:flex;gap:6px;}
.tools-toggle-head-btn{border:0;background:transparent;color:var(--text-muted);font-size:10px;text-decoration:underline;cursor:pointer;}
.tools-toggle-head-btn:hover{color:var(--text-default);}
.tools-toggle-group-head{padding:6px 12px 2px;font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);}
.tools-toggle-list{margin:0;padding:0;}
.tools-toggle-item{display:flex;align-items:flex-start;gap:8px;padding:6px 12px;cursor:pointer;}
.tools-toggle-item:hover{background:var(--bg-hover);}
.tools-toggle-item input{margin:2px 0 0;flex:none;width:14px;height:14px;}
.tools-toggle-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.tools-toggle-name{font-size:var(--fs-xs);line-height:1.4;color:var(--text-default);font-family:monospace;overflow-wrap:anywhere;word-break:break-word;}
.tools-toggle-desc{font-size:10.5px;line-height:1.35;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tools-toggle-empty{padding:10px 12px;font-size:var(--fs-xs);color:var(--text-secondary);}
@media (max-width:767px){
 .tools-toggle-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:70vh;}
}
@media (max-width:700px){.ws-body{grid-template-columns:1fr;grid-template-rows:minmax(auto,35dvh) 1fr;}.ws-tree{border-right:0;border-bottom:1px solid var(--border);max-height:35dvh;}}

.msg-list-wrap{display:flex;flex-direction:column;gap:8px;min-height:0;}
.msg-list-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--border-soft);font-size:13px;}
.msg-list-all{display:flex;align-items:center;gap:6px;cursor:pointer;}
.msg-list-count{color:var(--text-muted);}
.msg-list{display:flex;flex-direction:column;gap:2px;max-height:56dvh;overflow-y:auto;}
.msg-list-item{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;}
.msg-list-item:hover{background:var(--bg-hover);}
.msg-list-role{padding:1px 6px;border-radius:999px;font-size:11px;text-transform:uppercase;background:var(--bg-subtle);color:var(--text-muted);}
.msg-list-role-user{background:var(--accent-soft,var(--bg-subtle));color:var(--accent,var(--text-muted));}
.msg-list-idx{color:var(--text-muted);font-variant-numeric:tabular-nums;}
.msg-list-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-list-empty{padding:16px;text-align:center;color:var(--text-muted);}

/* Live voice mode */
:root{--live-user:rgb(var(--color-teal));--live-agent:var(--acc-400);--live-tool:rgb(var(--color-amber));--live-error:rgb(var(--color-red));--live-muted:var(--text-muted);}
.theme-light{--live-agent:var(--acc-600);--live-user:#0f9f85;--live-tool:#c27c0e;--live-error:#d64545;}
.live-panel{width:100%;display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--elev-3);transition:border-color var(--t-s) var(--ease-out);}
.live-panel[hidden]{display:none !important;}
.live-panel[data-state="listening"]{border-color:rgba(var(--color-teal),0.45);}
.live-panel[data-state="speaking"],.live-panel[data-state="thinking"]{border-color:var(--border-accent);}
.live-panel[data-state="tool"]{border-color:rgba(var(--color-amber),0.45);}
.live-panel[data-state="error"]{border-color:rgba(var(--color-red),0.55);}
.live-orb{width:72px;height:72px;flex:none;display:block;}
.live-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.live-state{font-weight:600;font-size:var(--fs-md);color:var(--text-default);}
.live-panel[data-state="error"] .live-state{color:var(--live-error);}
.live-caption{min-height:1.3em;font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.live-actions{display:flex;align-items:center;gap:var(--s-1);flex:none;}
.live-actions .btn-icon-small{width:36px;height:36px;}
.live-close:hover:not(:disabled){color:var(--live-error);}
.chat-live-active .composer,.chat-live-active #attachments-preview-area{display:none !important;}
#live-mode-btn.active{color:var(--live-agent);background:rgba(var(--color-primary),0.12);}
.model-badge.live-badge{margin-left:var(--s-1);color:var(--live-user);border-color:rgba(var(--color-teal),0.4);}
@media (max-width:600px){.live-orb{width:56px;height:56px;}.live-panel{gap:var(--s-3);padding:var(--s-2) var(--s-3);}}

/* ============ v3 depth pass — real elevation on existing components ============
   The tokens above already carried --elev-1..4 but almost nothing used them, so
   every surface read as a flat block of colour. This pass wires elevation into
   the existing components: raised things get a cast shadow plus a lit top edge,
   recessed things get an inner shadow, and interactive things move between the
   two on hover/press. Selectors only — no markup or JS hooks are touched. */

/* --- surfaces: the three planes of the app --------------------------------- */

/* the shell itself sits deepest; panels cast onto it */
#chat-header{
 background:color-mix(in srgb, var(--bg-surface) 88%, transparent);
 box-shadow:none;
 border-bottom-color:transparent;
 transition:box-shadow var(--t-s) var(--ease-out);
}
#chat-header.is-scrolled{
 box-shadow:var(--elev-3);
}
#chat-input-area.has-content-below{
 box-shadow:0 -14px 24px -16px rgba(0,0,0,0.55);
}
#chat-input-area.has-content-below::before{
 opacity:1;
}
#side-panel{
 box-shadow:var(--elev-4), inset -1px 0 0 rgba(255,255,255,0.04);
}
.side-panel-user-info{
 box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), var(--elev-sunk-1);
}
#chat-input-area{
 background:linear-gradient(180deg,transparent,var(--bg-base) 42%);
}
/* replace the flat hairline above the composer with a lit edge */
#chat-input-area::before{
 background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07) 18%,rgba(255,255,255,0.07) 82%,transparent);
}

/* --- raised: buttons, chips, cards ----------------------------------------- */

.hchip{
 background:var(--bg-elevated);
 box-shadow:var(--elev-1);
 transition:background-color var(--t-s) var(--ease-out),border-color var(--t-s) var(--ease-out),
  color var(--t-s) var(--ease-out),transform 120ms var(--ease-out);
}
.hchip:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--elev-2);}
.hchip:active:not(:disabled){transform:translateY(0) scale(0.98);box-shadow:var(--elev-sunk-1);}
.hchip[aria-expanded="true"]{
 box-shadow:var(--elev-sunk-1), 0 0 0 1px var(--border-accent);
 transform:none;
}
/* the model dot reads as a lit indicator, not a painted circle */
.hchip-dot{box-shadow:0 0 6px -1px currentColor, inset 0 1px 0 rgba(255,255,255,0.35);}
.hchip-dot.model-openai{color:rgb(var(--color-openai));}
.hchip-dot.model-claude{color:rgb(var(--color-claude));}
.hchip-dot.model-gemini{color:rgb(var(--color-gemini));}
.hchip-dot.model-grok{color:rgb(var(--color-grok));}

.btn{transition:background-color var(--t-s) var(--ease-out),border-color var(--t-s) var(--ease-out),
 color var(--t-s) var(--ease-out),transform 120ms var(--ease-out),
 opacity var(--t-xs) var(--ease-out);}
.btn-primary{
 background:linear-gradient(180deg,var(--acc-400),var(--acc-500));
 box-shadow:var(--elev-2), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover:not(:disabled){
 background:linear-gradient(180deg,var(--acc-300),var(--acc-400));
 transform:translateY(-1px);
 box-shadow:var(--elev-3), 0 4px 16px -6px rgba(var(--color-primary),0.55), inset 0 1px 0 rgba(255,255,255,0.26);
}
.btn-primary:active:not(:disabled){
 transform:translateY(0) scale(0.98);
 box-shadow:var(--elev-sunk-2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-secondary{box-shadow:var(--elev-1);}
.btn-secondary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--elev-2);}
.btn-secondary:active:not(:disabled){transform:translateY(0) scale(0.98);box-shadow:var(--elev-sunk-1);}
.btn-icon:hover:not(:disabled){box-shadow:var(--elev-1);}
.btn-icon:active:not(:disabled){box-shadow:var(--elev-sunk-1);}
.btn-icon-small.active{
 box-shadow:var(--elev-sunk-1), inset 0 0 0 1px var(--border-accent);
}

#send-button{
 background:linear-gradient(180deg,var(--acc-400),var(--acc-500));
 box-shadow:var(--elev-2), 0 3px 14px -6px rgba(var(--color-primary),0.6), inset 0 1px 0 rgba(255,255,255,0.22);
}
#send-button:hover:not(:disabled){
 transform:translateY(-1px);
 box-shadow:var(--elev-3), 0 6px 20px -6px rgba(var(--color-primary),0.7), inset 0 1px 0 rgba(255,255,255,0.28);
}
#send-button:active:not(:disabled){transform:translateY(0) scale(0.94);box-shadow:var(--elev-sunk-2);}

.empty-state-card{
 box-shadow:var(--elev-1);
 transition:border-color var(--t-s) var(--ease-out),transform var(--t-s) var(--ease-out),
  background-color var(--t-s) var(--ease-out);
}
.empty-state-card:hover{transform:translateY(-3px);box-shadow:var(--elev-3);}
.empty-state-card:active{transform:translateY(-1px) scale(0.99);box-shadow:var(--elev-1);}
.empty-state-logo{
 box-shadow:var(--elev-2), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 24px -8px rgba(var(--color-primary),0.6);
}
.empty-state-card-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);}

.prompt-btn{transition:border-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out),
 background-color var(--t-xs) var(--ease-out),transform 120ms var(--ease-out),box-shadow var(--t-xs) var(--ease-out);}
.prompt-btn:hover{transform:translateY(-1px);box-shadow:var(--elev-1);}
.prompt-btn:active{transform:translateY(0) scale(0.97);box-shadow:var(--elev-sunk-1);}

.prompt-template-item{
 box-shadow:var(--elev-sunk-1);
 transition:border-color var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out),
  transform 140ms var(--ease-out),box-shadow var(--t-xs) var(--ease-out);
}
.prompt-template-item:hover{
 background:var(--bg-elevated);
 transform:translateY(-2px);
 box-shadow:var(--elev-2);
}
.prompt-template-item:active{transform:translateY(0) scale(0.99);box-shadow:var(--elev-sunk-1);}

/* --- recessed: wells that hold data ---------------------------------------- */

.composer{
 box-shadow:var(--elev-3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.composer:focus-within{
 box-shadow:var(--elev-3), var(--ring-inset), var(--glow-accent),
  inset 0 1px 0 rgba(255,255,255,0.06);
}
.form-control{box-shadow:var(--elev-sunk-1);}
.form-control:focus{box-shadow:var(--elev-sunk-1), var(--ring-inset);}

.reasoning-block{box-shadow:var(--elev-sunk-1);}
.reasoning-content{
 background:rgba(0,0,0,0.18);
 box-shadow:var(--elev-sunk-2);
 border-top:1px solid rgba(255,255,255,0.04);
}
.tool-row{box-shadow:var(--elev-sunk-1);}
.tool-row.pending{box-shadow:var(--elev-sunk-1), 0 0 0 1px rgba(var(--color-amber),0.18);}
.tool-row.done{box-shadow:var(--elev-sunk-1), 0 0 0 1px rgba(var(--color-teal),0.16);}
.tool-row.error{box-shadow:var(--elev-sunk-1), 0 0 0 1px rgba(var(--color-red),0.22);}
.tool-result pre{background:rgba(0,0,0,0.16);box-shadow:var(--elev-sunk-1);}
.subagent-panel{box-shadow:var(--elev-sunk-1);}
.subagent-result-body{box-shadow:var(--elev-sunk-1);}

.message .message-content pre{box-shadow:var(--elev-sunk-2), inset 0 -1px 0 rgba(255,255,255,0.05);}
.message .message-content blockquote{box-shadow:var(--elev-sunk-1);border-radius:var(--r-xs);}
.message .message-content thead{box-shadow:inset 0 -1px 0 rgba(255,255,255,0.05);}
.copy-button,.download-button{box-shadow:var(--elev-1);}
.copy-button:hover,.download-button:hover{box-shadow:var(--elev-2);transform:translateY(-1px);}

.auth-tabs{box-shadow:var(--elev-sunk-1);}
.auth-tab.active{
 background:linear-gradient(180deg,var(--acc-400),var(--acc-500));
 box-shadow:var(--elev-1), inset 0 1px 0 rgba(255,255,255,0.2);
}
.auth-card{box-shadow:var(--elev-3), inset 0 1px 0 rgba(255,255,255,0.04);}
.auth-mark{box-shadow:var(--elev-2), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 24px -8px rgba(var(--color-primary),0.6);}

/* --- conversations list ----------------------------------------------------- */

/* edge shadows that only show up when there is more content to scroll to */
/* .tools-toggle-panel is excluded here - it already has its own solid base
   color plus edge shadow at its own definition; this shorthand `background`
   would otherwise reset that color to transparent and win by source order. */
#conversations-list,.picker-list,.panel-content,.ws-tree{
 background:
  linear-gradient(var(--bg-surface) 30%,transparent) local,
  linear-gradient(transparent,var(--bg-surface) 70%) local,
  linear-gradient(rgba(0,0,0,0.22),transparent) scroll,
  linear-gradient(transparent,rgba(0,0,0,0.22)) scroll;
 background-repeat:no-repeat;
 background-size:100% 24px,100% 24px,100% 10px,100% 10px;
 background-position:top,bottom,top,bottom;
 background-attachment:local,local,scroll,scroll;
}

#conversations-list li{
 transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);
}
#conversations-list li.active .conv-row-inner{
 background:rgba(var(--color-primary),0.18);
 box-shadow:0 2px 10px -4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
#conversations-list li.active::before{
 background:var(--acc-300);
 box-shadow:var(--glow-accent);
}

/* --- messages ---------------------------------------------------------------- */

.message.user{
 background-image:linear-gradient(180deg,rgba(var(--color-primary),0.07),rgba(var(--color-primary),0.02));
 box-shadow:var(--elev-2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.message.assistant{
 box-shadow:var(--elev-1), inset 0 1px 0 rgba(255,255,255,0.03);
}
.message.system-message{box-shadow:var(--elev-sunk-1);}

/* --- floating layers: the highest plane -------------------------------------- */

.picker-pop,
#header-dropdown-menu,
.slide-down-panel,
.context-menu,
.universal-modal-container,.modal-container,
.conversation-brief-tooltip,
.conversation-map-tooltip,
.tool-autocomplete{
 box-shadow:var(--elev-4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.picker-item[aria-selected="true"]{
 box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 2px 0 0 var(--acc-400);
}
.scroll-bottom-btn{box-shadow:var(--elev-3), inset 0 1px 0 rgba(255,255,255,0.06);}
.scroll-bottom-btn:hover{box-shadow:var(--elev-4), inset 0 1px 0 rgba(255,255,255,0.08);}

.ws-drawer{box-shadow:var(--elev-4), inset 1px 0 0 rgba(255,255,255,0.05);}
.ws-btn{box-shadow:var(--elev-1);}
.ws-btn:hover{transform:translateY(-1px);box-shadow:var(--elev-2);}
.ws-row.selected{box-shadow:inset 2px 0 0 var(--acc-400);}
.ws-preview-path{font-family:var(--font-mono);}
.ws-code{font-family:var(--font-mono);}
.live-panel{box-shadow:var(--elev-3), inset 0 1px 0 rgba(255,255,255,0.05);}

/* --- light theme: shadows must be softer and the lit edges disappear --------- */

.theme-light #chat-header{box-shadow:0 4px 14px -12px rgba(15,23,42,0.5), inset 0 -1px 0 rgba(15,23,42,0.06);}
.theme-light .hchip,
.theme-light .btn-secondary,
.theme-light .empty-state-card,
.theme-light .ws-btn,
.theme-light .copy-button,
.theme-light .download-button{box-shadow:var(--elev-1);}
.theme-light .btn-primary,
.theme-light #send-button,
.theme-light .auth-tab.active{box-shadow:var(--elev-2);}
.theme-light .message.user,
.theme-light .message.assistant{box-shadow:var(--elev-1);}
.theme-light .reasoning-content,
.theme-light .tool-result pre,
.theme-light .message .message-content pre{background:var(--bg-sunken);box-shadow:inset 0 1px 2px rgba(15,23,42,0.08);}
.theme-light .form-control,
.theme-light .auth-tabs,
.theme-light .prompt-template-item,
.theme-light .reasoning-block,
.theme-light .tool-row,
.theme-light .subagent-panel{box-shadow:inset 0 1px 2px rgba(15,23,42,0.06);}
.theme-light .picker-pop,
.theme-light #header-dropdown-menu,
.theme-light .slide-down-panel,
.theme-light .context-menu,
.theme-light .universal-modal-container,
.theme-light .modal-container,
.theme-light .ws-drawer,
.theme-light .live-panel{box-shadow:var(--elev-4);}
.theme-light .hchip-dot{box-shadow:0 0 4px -1px currentColor;}
.theme-light .empty-state-logo,
.theme-light .auth-mark{box-shadow:var(--elev-1);}

/* --- reduced motion: keep the depth, drop the movement ----------------------- */

@media (prefers-reduced-motion:reduce){
 .hchip:hover:not(:disabled),
 .btn-primary:hover:not(:disabled),
 .btn-secondary:hover:not(:disabled),
 .empty-state-card:hover,
 .prompt-btn:hover,
 .prompt-template-item:hover,
 #send-button:hover:not(:disabled),
 .ws-btn:hover,
 .copy-button:hover,
 .download-button:hover{transform:none;}
}

/* --- high contrast: shadows stop carrying meaning, so restore real borders --- */

@media (prefers-contrast:more){
 .hchip,.btn-primary,.btn-secondary,#send-button,.empty-state-card,
 .message.user,.message.assistant,.composer,.picker-pop,.context-menu,
 .universal-modal-container,.modal-container,.slide-down-panel,
 #header-dropdown-menu,.tools-toggle-panel,.tool-autocomplete,.ws-drawer,.live-panel{
  border:1px solid var(--border-strong);
 }
}

/* --- reduced transparency: drop the blur, use a solid plane background ------ */

@media (prefers-reduced-transparency:reduce){
 #chat-header{
  background:var(--surface-1);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
 }
 .picker-pop,#header-dropdown-menu,.context-menu,.tools-toggle-panel,.tool-autocomplete,
 .universal-modal-container,.modal-container{
  background:var(--surface-3);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
 }
}


/* ============ v3: conversation list, search and status bar ============ */

/* --- sidebar heading + count ------------------------------------------- */

.panel-section h3{display:flex;align-items:center;gap:var(--s-2);}
.panel-count{
 padding:1px 6px;border-radius:var(--r-xs);
 background:var(--bg-sunken);box-shadow:var(--elev-sunk-1);
 font-family:var(--font-mono);font-size:9px;color:var(--text-muted);
 letter-spacing:0.04em;
}
.panel-count:empty{display:none;}

/* --- conversation filter ------------------------------------------------ */

.conv-search{
 position:relative;display:flex;align-items:center;gap:var(--s-2);
 margin:0 var(--s-3) var(--s-3);padding:0 10px;
 background:var(--bg-sunken);border-radius:var(--r-sm);
 box-shadow:var(--elev-sunk-1);
 transition:box-shadow var(--t-xs) var(--ease-out);
}
.conv-search:focus-within{box-shadow:var(--elev-sunk-1),var(--ring-inset);}
.conv-search-icon{
 width:13px;height:13px;flex-shrink:0;
 stroke:var(--text-muted);fill:none;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round;
}
.conv-search-input{
 flex:1;min-width:0;padding:7px 0;border:none;background:transparent;
 color:var(--text-default);font-size:var(--fs-sm);
}
.conv-search-input:focus{outline:none;}
.conv-search-input::-webkit-search-cancel-button{display:none;}
.conv-search-clear{
 width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;
 border:none;border-radius:var(--r-xs);background:transparent;
 color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;
 transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);
}
.conv-search-clear:hover{background:var(--bg-hover);color:var(--text-default);}
.conv-search-clear[hidden]{display:none;}

/* --- date groups + provider dots ---------------------------------------- */

.conv-group-label{
 flex-shrink:0;
 padding:var(--s-4) 10px var(--s-1);
 font-family:var(--font-mono);font-size:9px;font-weight:500;
 letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);
 cursor:default;pointer-events:none;
}
.conv-group-label:first-child{padding-top:var(--s-1);}
#conversations-list li.conv-group-label:hover{background:transparent;}

.provider-dot,.conv-dot{
 width:6px;height:6px;flex-shrink:0;border-radius:var(--r-pill);
 background:var(--text-muted);color:var(--text-muted);
 box-shadow:0 0 5px -1px currentColor,inset 0 1px 0 rgba(255,255,255,0.3);
 transition:transform var(--t-xs) var(--ease-spring),box-shadow var(--t-xs) var(--ease-out);
}
#conversations-list li:hover .provider-dot{transform:scale(1.35);}
.provider-openai,.hchip-dot.model-openai{background:rgb(var(--color-openai));color:rgb(var(--color-openai));}
.provider-claude,.hchip-dot.model-claude{background:rgb(var(--color-claude));color:rgb(var(--color-claude));}
.provider-gemini,.hchip-dot.model-gemini{background:rgb(var(--color-gemini));color:rgb(var(--color-gemini));}
.provider-grok,.hchip-dot.model-grok{background:rgb(var(--color-grok));color:rgb(var(--color-grok));}
.provider-deepseek{background:rgb(var(--color-deepseek));color:rgb(var(--color-deepseek));}
.provider-mistral{background:rgb(var(--color-mistral));color:rgb(var(--color-mistral));}
.provider-meta{background:rgb(var(--color-meta));color:rgb(var(--color-meta));}
.provider-qwen{background:rgb(var(--color-qwen));color:rgb(var(--color-qwen));}
.provider-cohere{background:rgb(var(--color-cohere));color:rgb(var(--color-cohere));}
.provider-perplexity{background:rgb(var(--color-perplexity));color:rgb(var(--color-perplexity));}
.provider-moonshot{background:rgb(var(--color-moonshot));color:rgb(var(--color-moonshot));}

/* the delete button used to carry inline styles that beat the stylesheet;
   now it is driven entirely from here */
.conversation-delete-btn{margin-left:2px;}
#conversations-list li time{font-variant-numeric:tabular-nums;}
#conversations-list li:hover time{opacity:0;}
#conversations-list li time{transition:opacity var(--t-xs) var(--ease-out);}
.load-more-plus{margin-right:4px;font-size:1.1em;line-height:1;}

/* --- status bar ---------------------------------------------------------- */

.status-bar{
 flex-shrink:0;display:flex;align-items:center;gap:var(--s-4);
 height:24px;padding:0 var(--s-3);
 padding-bottom:0;
 background:var(--bg-surface);
 box-shadow:0 -4px 14px -10px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.05);
 font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
 user-select:none;
}
.status-item{
 display:inline-flex;align-items:center;gap:5px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.status-item:empty{display:none;}
.status-spacer{flex:1;}
.status-state{color:var(--text-subtle);}
.status-dot{
 width:6px;height:6px;flex-shrink:0;border-radius:var(--r-pill);
 background:rgb(var(--color-teal));color:rgb(var(--color-teal));
 box-shadow:0 0 6px -1px currentColor;
}
.status-bar[data-state="busy"] .status-dot{
 background:var(--acc-400);color:var(--acc-400);
 animation:dotPulseStatus 1.2s var(--ease-inout) infinite;
}
.status-bar[data-state="busy"] .status-state{color:var(--acc-300);}
#status-model{color:var(--text-subtle);}
#status-tokens{position:relative;padding-bottom:4px;color:var(--text-subtle);}
#status-tokens::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:currentColor;opacity:0.25;}
#status-tokens::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--fill-pct,0%);border-radius:1px;background:currentColor;}
#status-tokens[data-level="ok"]{color:var(--text-subtle);}
#status-tokens[data-level="warn"]{color:var(--warning);}
#status-tokens[data-level="crit"]{color:var(--danger);}

.theme-light .status-bar{
 box-shadow:0 -3px 12px -10px rgba(15,23,42,0.4),inset 0 1px 0 rgba(15,23,42,0.06);
}

/* the composer no longer sits on the window edge, so it keeps its own inset
   and the status bar carries the safe-area padding instead */
body.app #chat-input-area{padding-bottom:var(--s-3);}
.status-bar{padding-bottom:var(--safe-bottom);height:calc(24px + var(--safe-bottom));}

@media (max-width:768px){
 .status-hide-sm{display:none;}
 .status-bar{gap:var(--s-3);}
 .conv-search{margin-inline:var(--s-2);}
}

/* ============ v4: polish sweep — motion, keyboard focus, badges, empty states ============ */

/* --- collapsible date groups ---------------------------------------------- */

.conv-group-label{
 display:flex;align-items:center;gap:6px;
 cursor:pointer;user-select:none;
 transition:color var(--t-xs) var(--ease-out);
}
.conv-group-label:hover{color:var(--text-subtle);}
.conv-group-label:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs);}
.conv-group-caret{
 width:10px;height:10px;flex-shrink:0;
 stroke:currentColor;fill:none;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round;
 transform:rotate(90deg);
 transition:transform var(--t-s) var(--ease-spring);
}
.conv-group-label.collapsed .conv-group-caret{transform:rotate(0deg);}
#conversations-list li.hidden-by-group{display:none;}

/* --- keyboard navigation on conversation list ---------------------------- */

#conversations-list li[data-id]{
 position:relative;
 animation:convItemEnter var(--t-m) var(--ease-out) both;
 animation-delay:var(--conv-enter-delay,0ms);
}
#conversations-list li[data-id]:focus-visible{
 outline:none;
 box-shadow:var(--ring),0 2px 10px -4px rgba(0,0,0,0.6);
}
#conversations-list li.load-more-item:focus-visible{
 outline:none;box-shadow:var(--ring);border-radius:var(--r-sm);
}
.load-more-item{
 text-align:center;padding:var(--s-2);cursor:pointer;
 color:var(--acc-300);font-size:0.875rem;
 border-top:1px solid var(--border-soft);
 margin-top:var(--s-2);
 transition:color var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);
}
.load-more-item:hover{background:var(--bg-hover);color:var(--acc-100);}
.load-more-item.is-loading{cursor:default;pointer-events:none;opacity:0.7;}
.conv-filter-note{margin:0 var(--s-3) var(--s-2);padding:var(--s-1) var(--s-2);font-size:var(--fs-xs);color:var(--text-subtle);background:var(--surface-1);border-radius:var(--r-sm);line-height:1.4;}

@keyframes convItemEnter{
 from{opacity:0;transform:translateY(-4px);}
 to{opacity:1;transform:translateY(0);}
}

/* --- pinned conversations get a subtle marker --------------------------- */

#conversations-list li.pinned::after{
 content:"";position:absolute;top:8px;right:6px;
 width:5px;height:5px;border-radius:50%;
 background:var(--acc-400);
 box-shadow:0 0 4px rgba(var(--color-primary),0.6);
}

/* --- message count badge on long conversations -------------------------- */

.conv-msg-count{
 flex-shrink:0;
 padding:1px 5px;border-radius:var(--r-xs);
 background:rgba(0,0,0,0.22);box-shadow:var(--elev-sunk-1);
 font-family:var(--font-mono);font-size:9px;color:var(--text-muted);
 letter-spacing:0.03em;
 margin-left:2px;
}
#conversations-list li.active .conv-msg-count{background:rgba(0,0,0,0.28);color:var(--text-secondary);}

/* --- generating indicator on the list item ------------------------------- */

#conversations-list li.generating .provider-dot{
 animation:dotPulseGrow 1.4s var(--ease-inout) infinite;
}

/* --- empty state cards inside the list ---------------------------------- */

.conv-empty-state{
 display:flex !important;flex-direction:column;align-items:center;
 gap:var(--s-2);padding:var(--s-5) var(--s-3) !important;
 background:transparent !important;color:var(--text-muted);
 text-align:center;cursor:default !important;
}
.conv-empty-state:hover{background:transparent !important;}
.conv-empty-icon{
 width:32px;height:32px;
 stroke:var(--text-muted);fill:none;stroke-width:1.5;
 stroke-linecap:round;stroke-linejoin:round;
 opacity:0.55;
}
.conv-empty-title{font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);}
.conv-empty-hint{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4;}

/* --- status bar: interactive items -------------------------------------- */

.status-clickable{
 cursor:pointer;
 padding:0 var(--s-2);border-radius:var(--r-xs);
 transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);
}
.status-clickable:hover{background:rgba(255,255,255,0.08);color:var(--text-default);}
.status-clickable:focus-visible{outline:none;box-shadow:var(--ring);}
.status-clickable:active{background:rgba(255,255,255,0.03);}
#status-cost{font-variant-numeric:tabular-nums;color:var(--acc-300);}
#status-cost:empty{display:none;}

/* PLAN.md point 12: #modes-btn/#tools-toggle-btn moved from the composer bar
   into the status bar. The bar stays 24px tall, so the 44px touch target is
   an invisible enlarged hit zone (::before) rather than extra button size.
   `.status-item` clips overflow for text-ellipsis purposes, which would also
   clip this element's own oversized ::before - override it here so the hit
   zone isn't cut down to the visible 16px box. A little extra horizontal
   margin keeps the two buttons' hit zones from crowding the bar edge. */
.status-icon-btn{
 position:relative;flex-shrink:0;overflow:visible;
 display:inline-flex;align-items:center;justify-content:center;
 width:16px;height:16px;padding:0;margin:0 var(--s-1);border:0;background:transparent;color:inherit;
 font:inherit;touch-action:manipulation;
}
.status-icon-btn::before{
 content:"";position:absolute;top:50%;left:50%;
 width:44px;height:44px;transform:translate(-50%,-50%);
 z-index:1;
}
.status-icon-btn .icon{width:13px;height:13px;}
.status-icon-btn.active{color:rgb(var(--color-primary));}
.modes-btn-count{
 position:absolute;top:-4px;right:-6px;
 min-width:12px;height:12px;padding:0 3px;border-radius:var(--r-pill);
 background:rgb(var(--color-primary));color:#fff;
 font-size:8px;line-height:12px;text-align:center;
}

/* Shrinking pulse: status bar dot only (PLAN.md 3). */
@keyframes dotPulseStatus{
 0%,100%{opacity:1;transform:scale(1);}
 50%{opacity:0.55;transform:scale(0.85);}
}

/* --- tool badges: pulsing glow while running --------------------------- */

.tool-badge.run,.hb-tool-badge.run{
 animation:toolBadgeRunPulse 1.6s var(--ease-inout) infinite;
}
@keyframes toolBadgeRunPulse{
 0%,100%{box-shadow:0 0 6px rgba(210,153,34,0.25);}
 50%{box-shadow:0 0 12px rgba(210,153,34,0.55);}
}

/* --- reasoning content: fade edges on scroll --------------------------- */

.reasoning-content{
 mask-image:linear-gradient(to bottom,transparent 0,black 8px,black calc(100% - 8px),transparent 100%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,black 8px,black calc(100% - 8px),transparent 100%);
}

/* --- tool row: truncate long arguments --------------------------------- */

.tool-row{max-width:100%;}
.tool-row .tool-arg,.tool-row [data-tool-arg]{
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 max-width:32ch;flex-shrink:1;
}
.tool-row:hover .tool-arg,.tool-row:hover [data-tool-arg]{
 max-width:none;white-space:normal;word-break:break-all;
}

/* --- message actions: stagger reveal on hover ------------------------- */

.message-actions .message-action-btn{
 opacity:0;transition:opacity var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);
}
.message:hover .message-actions .message-action-btn:nth-child(1){opacity:1;transition-delay:0ms;}
.message:hover .message-actions .message-action-btn:nth-child(2){opacity:1;transition-delay:30ms;}
.message:hover .message-actions .message-action-btn:nth-child(3){opacity:1;transition-delay:60ms;}
.message:hover .message-actions .message-action-btn:nth-child(4){opacity:1;transition-delay:90ms;}
.message:hover .message-actions .message-action-btn:nth-child(n+5){opacity:1;transition-delay:120ms;}
.message:focus-within .message-actions .message-action-btn{opacity:1;}

/* --- global focus-visible sweep --------------------------------------- */

.btn:focus-visible,.hchip:focus-visible,.picker-item:focus-visible,
.menu-item:focus-visible,.tab-button:focus-visible,.prompt-btn:focus-visible,
.prompt-template-item:focus-visible,.empty-state-card:focus-visible,
.copy-button:focus-visible,.download-button:focus-visible,
.message-action-btn:focus-visible,.conversation-delete-btn:focus-visible{
 outline:none;box-shadow:var(--ring);
}

/* --- ripple: a proper implementation for classes that had the marker --- */

.ripple{position:relative;overflow:hidden;}
.ripple::after{
 content:"";position:absolute;inset:0;border-radius:inherit;
 background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%),
  rgba(255,255,255,0.16) 0,transparent 45%);
 opacity:0;pointer-events:none;
 transition:opacity var(--t-s) var(--ease-out);
}
.ripple:active::after{opacity:1;transition-duration:60ms;}

/* --- high contrast completeness --------------------------------------- */

@media (prefers-contrast:more){
 .conv-search,.status-bar,.conv-group-label,.conv-msg-count{
  border:1px solid var(--border-strong);
 }
 .provider-dot,.conv-dot{border:1px solid rgba(255,255,255,0.4);}
 .status-clickable:hover{outline:2px solid var(--text-default);}
}

/* --- reduced motion: block the new animations too --------------------- */

@media (prefers-reduced-motion:reduce){
 #conversations-list li[data-id]{animation:none;}
 .tool-badge.run,.hb-tool-badge.run{animation:none;}
 #conversations-list li.generating .provider-dot{animation:none;}
 .status-bar[data-state="busy"] .status-dot{animation:none;}
 .conv-group-caret{transition:none;}
 #conversations-list li:hover .provider-dot{transform:none;}
}

/* --- print styles: hide chrome ---------------------------------------- */

@media print{
 #status-bar,.conv-search,#side-panel,.status-bar,
 .composer-bar,.hchip,.btn-icon,.message-actions,
 .scroll-bottom-btn{display:none !important;}
 .message{page-break-inside:avoid;box-shadow:none;border:1px solid #ccc;}
 body,.app,#chat-area{background:white !important;color:black !important;}
}

/* --- light theme parity for new elements ------------------------------ */

.theme-light .conv-search{background:var(--bg-sunken);}
.theme-light .conv-empty-icon{opacity:0.4;}
.theme-light .status-clickable:hover{background:rgba(15,23,42,0.06);color:var(--text-default);}
.theme-light #status-cost{color:var(--acc-500);}
.theme-light .conv-msg-count{background:rgba(15,23,42,0.06);}

.command-palette{position:fixed;inset:0;z-index:1300;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;}
.command-palette-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);}
.command-palette-dialog{position:relative;width:min(560px,92vw);max-height:60vh;display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--elev-4);overflow:hidden;}
.command-palette-search{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex:none;}
.command-palette-search-icon{flex:none;color:var(--text-secondary);display:inline-flex;}
.command-palette-input{flex:1;border:0;background:none;color:var(--text-default);font-size:var(--fs-md);outline:none;}
.command-palette-list{flex:1;overflow:auto;padding:6px 0;mask-image:linear-gradient(to bottom,transparent 0,black 8px,black calc(100% - 8px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 8px,black calc(100% - 8px),transparent 100%);}
.command-palette-section-label{padding:6px 14px 4px;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-subtle);}
.command-palette-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border:0;background:none;color:var(--text-default);font-size:var(--fs-sm);text-align:left;cursor:pointer;}
.command-palette-item.active,.command-palette-item:hover{background:var(--bg-hover);}
.command-palette-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.command-palette-item-time{flex:none;color:var(--text-secondary);font-size:var(--fs-xs);}
.command-palette-dot{flex:none;}
.command-palette-empty{padding:16px;text-align:center;color:var(--text-secondary);font-size:var(--fs-sm);}
@media (max-width:768px){
 .command-palette{padding-top:0;align-items:stretch;}
 .command-palette-dialog{width:100%;max-height:100vh;height:100%;border-radius:0;}
}

/* --- Layer system (PLAN.md: universal overlay) -----------------------------
   One mechanism for every floating box: notify/confirm/prompt (s), pickers,
   menus, lists (m), forms/editors (l). Desktop: anchored above the composer
   column via inline left/width/bottom set in layer.js. Mobile (<=768px): m/l
   become bottom sheets; s stays a small box above the composer. */
.layer-host{position:fixed;inset:0;z-index:var(--z-layer);pointer-events:none;}
.layer-backdrop{position:fixed;inset:0;background:rgba(3,5,10,0.5);opacity:0;transition:opacity var(--t-s) var(--ease-out);pointer-events:auto;}
.layer-backdrop:not([hidden]){opacity:1;}
.theme-light .layer-backdrop{background:rgba(15,23,42,0.32);}

.layer{position:fixed;display:flex;flex-direction:column;pointer-events:auto;background:var(--surface-3);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--elev-4);opacity:0;transform:translateY(14px) scale(0.98);transition:transform var(--t-m) var(--ease-out),opacity var(--t-s) var(--ease-out);max-height:min(70vh,640px);overflow:hidden;}
.layer.layer-in{opacity:1;transform:translateY(0) scale(1);}
.layer.layer-recede{transform:translateY(-10px) scale(0.97);opacity:0.55;filter:saturate(0.85);pointer-events:none;}
.layer.layer-busy{opacity:0.7;pointer-events:none;}

.layer-s{position:fixed;max-width:340px;max-height:none;border-radius:var(--r-md);box-shadow:var(--elev-3);background:var(--surface-4);}
.layer-s-error{border-left:3px solid rgb(var(--color-red));}
.layer-s-success{border-left:3px solid var(--acc-400);}
.layer-s-confirm,.layer-s-prompt{max-width:380px;}

.layer-m{border-radius:var(--r-lg);box-shadow:var(--elev-4);}
.layer-l{border-radius:var(--r-xl);box-shadow:var(--elev-5);max-height:min(82vh,760px);}

.layer-handle{flex:none;width:36px;height:4px;border-radius:var(--r-pill);background:var(--border-strong);margin:var(--s-2) auto 0;cursor:grab;}

.layer-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);}
.layer-title{margin:0;font-size:var(--fs-md);font-weight:600;letter-spacing:-0.01em;}
.layer-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-subtle);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.layer-close svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.layer-close:hover{background:var(--bg-hover);color:var(--text-default);}

.layer-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-3) var(--s-4);}
.layer-s .layer-body{padding:var(--s-3) var(--s-4);}
.layer-footer{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);}
.layer-s .layer-footer{border-top:none;padding-top:0;justify-content:flex-end;}
.layer-error{flex:none;margin:0 var(--s-4);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:rgba(var(--color-red),0.12);color:rgb(var(--color-red));font-size:var(--fs-xs);}

.layer-notify-text,.layer-confirm-text,.layer-prompt-text{font-size:var(--fs-sm);color:var(--text-default);line-height:1.5;white-space:pre-wrap;}
.layer-prompt-text{margin-bottom:var(--s-2);}
.layer-s .layer-body .form-control{margin-top:var(--s-2);}

/* sections + search (PLAN.md: model picker, tools panel, ...) */
.layer-search{flex:none;position:relative;display:flex;align-items:center;gap:var(--s-2);padding:0 0 var(--s-3);}
.layer-search-icon{position:absolute;left:var(--s-2);stroke:var(--text-muted);fill:none;stroke-width:2;pointer-events:none;}
.layer-search-input{flex:1;width:100%;padding:6px 10px 6px 28px;background:var(--surface-2,var(--bg-sunken));border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-default);font-size:var(--fs-sm);}
.layer-search-count{position:absolute;right:var(--s-2);font-size:var(--fs-xs);color:var(--text-muted);}

.layer-body>#settings-panel{display:flex;flex-direction:column;min-height:0;}
.layer-body>#settings-panel .panel-content{overflow:visible;padding:var(--s-4) 0;}
.layer-body>#settings-panel .panel-header{margin:calc(var(--s-3) * -1) calc(var(--s-4) * -1) 0;}
.layer-body>#settings-panel .panel-footer{margin:0 calc(var(--s-4) * -1) calc(var(--s-3) * -1);position:sticky;bottom:calc(var(--s-3) * -1);}
.layer-sections{display:flex;flex-direction:column;min-height:0;}
.layer-section{display:flex;flex-direction:column;}
.layer-section-head{display:flex;align-items:center;gap:var(--s-2);width:100%;padding:var(--s-2) 0;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;text-align:left;}
div.layer-section-head{cursor:default;}
.layer-section-title{flex:1;}
.layer-section-count{color:var(--text-subtle);}
.layer-section-caret{display:inline-flex;transition:transform var(--t-s) var(--ease-out);}
.layer-section-collapsed .layer-section-caret{transform:rotate(-90deg);}
.layer-section-actions{display:flex;gap:var(--s-2);margin:-4px 0 var(--s-2);}
.layer-section-switch-btn{flex:none;margin-left:auto;padding:var(--s-1);background:transparent;border:none;cursor:pointer;display:inline-flex;align-items:center;}
.layer-section-head-with-switch .layer-section-caret{margin-left:0;}
.layer-section-action{padding:2px 8px;border:1px solid var(--border);border-radius:var(--r-xs);background:transparent;color:var(--text-secondary);font-size:var(--fs-xs);cursor:pointer;}
.layer-section-action:hover{background:var(--bg-hover);}
.layer-section-body{display:flex;flex-direction:column;}

/* list block: action/single/multi/toggle */
.layer-list{display:flex;flex-direction:column;gap:1px;}
.layer-list-item{display:flex;align-items:flex-start;gap:var(--s-2);width:100%;padding:8px 10px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);font-size:var(--fs-sm);text-align:left;cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);}
.layer-list-item:hover,.layer-list-item:focus-visible{background:var(--bg-hover);color:var(--text-default);outline:none;}
.layer-list-item-disabled{opacity:0.45;cursor:not-allowed;}
.layer-list-item-danger{color:rgb(var(--color-red));}
.layer-list-item-dot{width:7px;height:7px;flex:none;border-radius:var(--r-pill);background:var(--text-muted);}
.layer-list-item-icon{display:inline-flex;flex:none;width:16px;height:16px;}
.layer-list-item-text{flex:1;display:flex;flex-direction:column;min-width:0;}
.layer-list-item-label{overflow-wrap:anywhere;white-space:normal;}
.layer-list-item-desc{font-size:var(--fs-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.layer-list-item-meta{flex:none;font-size:var(--fs-xs);color:var(--text-muted);}
.layer-list-item-pin{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-sm);color:var(--text-muted);opacity:0.5;transition:opacity var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out),background-color var(--t-xs) var(--ease-out);}
.layer-list-item:hover .layer-list-item-pin{opacity:1;}
.layer-list-item-pin:hover{background:var(--bg-hover);}
.layer-list-item-pin-on{opacity:1;color:var(--acc-400);}
.layer-list-item-check{flex:none;width:16px;height:16px;opacity:0;transition:opacity var(--t-xs) var(--ease-out);}
.layer-list-item-check svg{stroke:var(--acc-400);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.layer-list-item-selected .layer-list-item-check{opacity:1;}
.layer-list-item-switch{flex:none;width:32px;height:18px;border-radius:var(--r-pill);background:var(--border-soft);position:relative;transition:background-color var(--t-s) var(--ease-out);}
.layer-list-item-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--t-s) var(--ease-spring);}
.layer-list-item-on .layer-list-item-switch{background:var(--acc-400);}
.layer-list-item-on .layer-list-item-switch::after{transform:translateX(14px);}

/* form block */
.layer-form{display:flex;flex-direction:column;gap:var(--s-3);}
.layer-field-label{display:block;margin-bottom:var(--s-2);font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);}
.layer-field-help{margin-top:4px;font-size:var(--fs-xs);color:var(--text-muted);}
.layer-field-switch-row{display:flex;align-items:center;gap:var(--s-2);cursor:pointer;}
.layer-text{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.55;}

@media (max-width:768px){
 .layer-m,.layer-l{position:fixed;left:0;right:0;bottom:0;width:100%!important;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:85vh;padding-bottom:env(safe-area-inset-bottom);}
 .layer-l{max-height:100vh;height:100%;border-radius:0;}
 .layer-s{left:var(--s-3)!important;right:var(--s-3)!important;width:auto!important;max-width:none;}
}

@media (prefers-reduced-motion:reduce){
 .layer,.layer-backdrop{transition:none!important;}
}
@media (prefers-contrast:more){
 .layer{border-width:2px;}
 .layer-list-item:focus-visible{outline:2px solid currentColor;outline-offset:-2px;}
}