/* 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:#0f172a; --ink-900:#131d33; --ink-850:#18233c; --ink-800:#1e2a47;
 --ink-750:#243352; --ink-700:#2c3d61; --ink-600:#36496f;

 --acc-100:#dde8ff; --acc-300:#8fb2ff; --acc-400:#6b96ff; --acc-500:#3b6cf0;
 --acc-600:#2a55cc; --acc-800:#1e40af;
 --color-primary:59, 108, 240;
 --color-teal:52, 211, 178; --color-amber:245, 178, 61; --color-red:255, 107, 107;

 --color-openai:14, 165, 233; --color-claude:139, 124, 246;
 --color-gemini:79, 140, 255; --color-grok:56, 189, 248;

 --bg-base:var(--ink-950); --bg-main:var(--ink-900); --bg-surface:var(--ink-850);
 --bg-elevated:var(--ink-800); --bg-tertiary:var(--ink-750); --bg-hover:rgba(148,178,255,0.08);
 --bg-sunken:rgba(8,14,28,0.45);

 --text-default:#eef2fb; --text-secondary:#c3cde1; --text-subtle:#9aa7c0; --text-muted:#7b89a6;
 --text-inverse:#0f172a;

 --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(148,178,255,0.12); --border-soft:rgba(148,178,255,0.18);
 --border-strong:rgba(148,178,255,0.3); --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);

 --elev-1:0 1px 2px rgba(3,8,20,0.35);
 --elev-2:0 2px 8px -2px rgba(3,8,20,0.45);
 --elev-3:0 8px 24px -8px rgba(3,8,20,0.55);
 --elev-4:0 18px 48px -16px rgba(3,8,20,0.65);

 --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --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);
 --elev-1:0 1px 2px rgba(15,23,42,0.06);
 --elev-2:0 2px 8px -2px rgba(15,23,42,0.1);
 --elev-3:0 8px 24px -8px rgba(15,23,42,0.16);
 --elev-4:0 18px 48px -16px rgba(15,23,42,0.22);
}

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

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);}
.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));}
.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-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);}
.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);}
.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;}
#model-info-box{padding:var(--s-2) 10px;font-family:var(--font-mono);font-size:10px;line-height:1.5;color:var(--text-muted);border-bottom:1px solid var(--border);margin-bottom:var(--s-1);}
#model-info-box:empty{display:none;}
.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;}
#conversations-list li{position:relative;display:flex;align-items:center;gap:var(--s-2);padding:9px 10px;border-radius:var(--r-md);color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:background-color var(--t-xs) var(--ease-out),color var(--t-xs) var(--ease-out);animation:rise 260ms var(--ease-out) both;}
#conversations-list li::before{content:"";position:absolute;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{background:var(--bg-hover);color:var(--text-default);}
#conversations-list li.active{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:dotPulse 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;}
.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;}
.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-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);}
.instructions-counter{position:absolute;right:10px;bottom:8px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);pointer-events:none;}
.instructions-counter.limit-warning{color:var(--warning);}
.instructions-counter.limit-exceeded{color:var(--danger);}
.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;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);}
.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:box-shadow var(--t-s) var(--ease-out),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);}
.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-2);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);}
.message.system-message .message-role-label{display:none;}
.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;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;}
.message-controls,.message-actions{display:flex;gap:2px;margin-top:var(--s-1);opacity:0;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 */
.turn-timeline{display:flex;flex-direction:column;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{font-size:10px;line-height:1;}
.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;}
.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);}

.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:dotPulse 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);}
@keyframes dotPulse{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.15em 0.4em;border-radius:var(--r-xs);background:var(--bg-sunken);border:1px solid var(--border);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;}
.copy-button,.download-button{position:absolute;top:8px;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;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);}
.copy-button{right:8px;}
.download-button{right:42px;}
.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-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),box-shadow 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-3) var(--s-4) 0;}
#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;}
#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:var(--s-2) var(--s-3);}
.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;}

.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;}
.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;}

/* ---------- 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);}

/* ---------- 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);}
.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-help{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;}
.temperature-visualization{position:relative;height:3px;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)));opacity:0.5;}
.temperature-indicator{position:absolute;top:50%;width:7px;height:7px;border-radius:var(--r-pill);background:var(--text-default);transform:translate(-50%,-50%);transition:left var(--t-s) var(--ease-out);}
#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);}
 #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);}
}

@media (pointer:coarse){
 .btn-icon,.message-action-btn,.user-btn{min-width:40px;min-height:40px;}
 .btn-icon-small,.btn-expand,.mic-button{min-width:38px;min-height:38px;}
 .message-controls,.message-token-count{opacity:1;}
 .copy-button,.download-button{opacity:1;}
 .conversation-delete-btn{opacity:1;}
}

@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 ---------- */

.scroll-bottom-btn{position:absolute;left:50%;bottom:100%;z-index:130;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:translate(-50%,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:translate(-50%,-10px) scale(1);}
.scroll-bottom-btn:hover{color:var(--text-default);border-color:var(--border-accent);}
.scroll-bottom-btn.visible:active{transform:translate(-50%,-10px) scale(0.94);}
.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:8px;padding:10px 14px;border-bottom:1px solid var(--border);}
.ws-head h3{margin:0;flex:1;font-size:var(--fs-sm);font-weight:600;color:var(--text-default);}
.ws-btn{height:30px;min-width:30px;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);cursor:pointer;}
.ws-btn:hover{background:var(--bg-hover);color:var(--text-default);}
.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-caret{width:10px;flex:none;color:var(--text-secondary);}
.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-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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:var(--fs-xs);color:var(--text-default);}
.ws-preview-body{flex:1;overflow:auto;}
.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-image{display:block;max-width:100%;margin:16px auto;background:repeating-conic-gradient(#8882 0 25%,transparent 0 50%) 0 0/16px 16px;}
.ws-empty,.ws-note{padding:16px;color:var(--text-secondary);font-size:var(--fs-xs);}
#workspace-btn:disabled{opacity:0.4;cursor:not-allowed;}
@media (max-width:700px){.ws-body{grid-template-columns:1fr;grid-template-rows:40% 1fr;}.ws-tree{border-right:0;border-bottom:1px solid var(--border);}}

.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);}