/* WISPR app: minimal. Five sections, little copy, one balance. */
:root {
  --bg: #fff; --side: #f7f7f8; --line: #e8e8ec; --ink: #18181b; --ink-2: #4b4b53; --mute: #8e8e98; --soft: #f1f1f4; --soft-2: #e6e6ea;
  --blue: #3a65eb; --blue-50: #eef2fc; --green: #01a74d; --green-200: #a2ffc1; --gold: #aa8544; --gold-50: #fbf3e3; --red: #e5484d;
  --card: #fff; --on-ink: #fff;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
svg { width: 16px; height: 16px; flex: none; }
.hide { display: none !important; }
.sp { flex: 1; }
.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--ink-2); white-space: nowrap; }
.pill.g { background: var(--green-200); color: #102c22; } .pill.b { background: var(--blue-50); color: var(--blue); } .pill.y { background: var(--gold-50); color: var(--gold); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--ink-2); }
.btn.ghost { background: var(--soft); color: var(--ink); } .btn.ghost:hover { background: var(--soft-2); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.empty { color: var(--mute); text-align: center; padding: 24px 12px; font-size: 13px; }

/* login */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--side); z-index: 50; }
.login-card { width: 360px; max-width: calc(100vw - 32px); display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.login-card .mark { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 6px; }
.login-card h1 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.login-card p { margin: 0 0 6px; color: var(--mute); font-size: 13px; }
.login-card input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--soft-2); outline: 0; font-family: var(--mono); font-size: 12.5px; }
.login-card input:focus { border-color: var(--ink); }
.login-card .btn { height: 40px; }
.login-card small { color: var(--mute); font-size: 11.5px; text-align: center; margin-top: 4px; }

/* shell + sidebar (folds to an icon rail) */
.shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 100vh; transition: grid-template-columns .2s ease; }
.shell.fold { grid-template-columns: 60px 1fr; }
.side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px; min-height: 0; min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 12px; font-weight: 600; min-width: 0; }
.brand a { display: flex; } .brand img { width: 26px; height: 26px; border-radius: 7px; }
.brand .fold { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--mute); flex: none; } .brand .fold:hover { background: var(--soft-2); color: var(--ink); }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; color: var(--ink-2); font-weight: 500; }
.nav a svg { color: var(--mute); }
.nav a:hover { background: var(--soft-2); }
.nav a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(24,24,27,.06), 0 0 0 1px var(--line); } .nav a.on svg { color: var(--ink); }
.chats { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 14px; }
.chats-h { display: flex; align-items: center; padding: 0 10px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.chats-h button { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--mute); } .chats-h button:hover { background: var(--soft-2); color: var(--ink); }
.chats .list { overflow: auto; display: grid; gap: 1px; align-content: start; }
.chats .list div { padding: 8px 10px; border-radius: 8px; color: var(--ink-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.chats .list div:hover { background: var(--soft-2); } .chats .list div.on { background: var(--card); color: var(--ink); }
.chats .list .empty { padding: 10px; text-align: left; white-space: normal; }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 4px; min-width: 0; } .side-foot > * { min-width: 0; }
.bal { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13px; color: var(--ink-2); } .bal:hover { background: var(--soft-2); } .bal svg { color: var(--mute); } .bal span { flex: 1; } .bal b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.sess { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 12px; color: var(--mute); text-align: left; width: 100%; min-width: 0; } .sess:hover { background: var(--soft-2); } .sess svg { color: var(--mute); }
.sess code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.fold .side { padding: 10px 7px; } .fold .brand { padding: 6px 0 12px; justify-content: center; gap: 0; }
.fold .brand b, .fold .brand a, .fold .nav a span, .fold .chats, .fold .bal span, .fold .bal b, .fold .sess code { display: none; }
.fold .nav a, .fold .bal, .fold .sess { justify-content: center; padding: 0; } .fold .brand .fold { margin: 0; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.top { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.top h2 { margin: 0; font-size: 15px; font-weight: 600; }
.need { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.need i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.need.warn { color: var(--gold); } .need.warn i { background: var(--gold); }
.need b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.view { flex: 1; min-height: 0; }
.view:not(.on) { display: none !important; }
.view.on { display: flex; }
.gate { position: absolute; inset: 52px 0 0 0; z-index: 20; display: grid; place-items: center; background: rgba(255,255,255,.7); backdrop-filter: blur(6px); }
.gate-card { width: 360px; max-width: calc(100% - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 24px 60px -30px rgba(24,24,27,.3); text-align: center; }
.gate-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.02em; }
.gate-card p { margin: 0 0 16px; color: var(--mute); font-size: 13.5px; line-height: 1.5; }
.gate-card .acts { display: flex; gap: 8px; justify-content: center; }

/* chat (shared bubbles) */
.view.chat { flex-direction: column; }
.msgs { flex: 1; overflow: auto; padding: 24px max(20px, calc((100% - 720px) / 2)); display: grid; gap: 14px; align-content: start; }
.msg { max-width: 82%; padding: 11px 14px; border-radius: 16px; line-height: 1.55; font-size: 14px; overflow-wrap: anywhere; }
.msg.me { background: var(--soft); justify-self: end; border-bottom-right-radius: 5px; }
.msg.ai { justify-self: start; padding-left: 0; max-width: 92%; }
.msg.sys { max-width: 100%; padding: 3px 0; color: var(--mute); font-family: var(--mono); font-size: 11.5px; } .msg.sys b { color: var(--ink); font-weight: 500; } .msg.sys .pill { margin-left: 6px; }
.msg .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.msg .meta span { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--soft); color: var(--ink-2); }
.msg pre { margin-top: 8px; background: #0f0f12; color: #d7d7de; padding: 10px; border-radius: 8px; font-size: 11.5px; overflow: auto; white-space: pre; }
.msg .shards { display: grid; gap: 3px; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.msg .shards div { display: flex; gap: 8px; align-items: center; } .msg .shards i { width: 8px; height: 8px; border-radius: 3px; }
.img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; max-width: 420px; }
.img-grid div { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #e8ecfa, #c8d4fa); position: relative; overflow: hidden; }
.img-grid div::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 60%, #18181b 0 32%, transparent 33%); }
.welcome { margin: auto; text-align: center; }
.welcome h3 { margin: 0 0 14px; font-size: 24px; letter-spacing: -0.02em; font-weight: 600; }
.welcome .sugg { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.welcome .sugg button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; } .welcome .sugg button:hover { background: var(--soft); color: var(--ink); }
.composer { padding: 8px max(20px, calc((100% - 720px) / 2)) 14px; display: grid; gap: 6px; }
.composer .box { border: 1px solid var(--soft-2); border-radius: 18px; background: var(--card); padding: 10px 10px 8px; box-shadow: 0 8px 30px -20px rgba(24,24,27,.25); }
.composer .box:focus-within { border-color: var(--ink); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; padding: 2px 6px 6px; min-height: 28px; max-height: 180px; font-size: 15px; line-height: 1.5; background: none; }
.composer .bar { display: flex; align-items: center; gap: 6px; }
.composer .ib { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); } .composer .ib:hover { background: var(--soft); }
.composer .sel { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--soft); font-size: 12.5px; color: var(--ink-2); } .composer .sel svg { width: 12px; height: 12px; }
.composer .sel.on { background: var(--green-200); color: #102c22; }
.composer .send { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; }
.composer > small { text-align: center; color: var(--mute); font-size: 11.5px; }
.composer.slim { padding: 6px 14px 12px; } .composer.slim .box { border-radius: 14px; padding: 8px; box-shadow: none; } .composer.slim textarea { font-size: 13.5px; } .composer.slim .sel { height: 28px; font-size: 12px; }
.composer .chips { display: flex; gap: 4px; flex-wrap: wrap; } .composer .chips:empty { display: none; }
.composer .chips .att { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px 0 8px; border-radius: 999px; background: var(--soft); font-size: 11.5px; font-family: var(--mono); color: var(--ink-2); } .composer .chips .att.key { background: var(--green-200); color: #102c22; } .composer .chips .att i { font-style: normal; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; } .composer .chips .att i:hover { background: rgba(0,0,0,.1); }
.menu-wrap { position: relative; } .menu { position: absolute; bottom: 36px; left: 0; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px -16px rgba(24,24,27,.3); z-index: 5; display: grid; gap: 2px; }
.composer .box { position: relative; } .menu-wrap.mw-model { position: static; }
.model-menu { bottom: calc(100% + 8px); left: 0; width: 360px; max-width: calc(100vw - 40px); padding: 0; overflow: hidden; }
.mm-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); } .mm-search svg { width: 14px; height: 14px; color: var(--mute); flex: none; }
.mm-search input { flex: 1; background: none; border: 0; outline: 0; font: inherit; font-size: 13px; color: var(--ink); }
.mm-list { max-height: 360px; overflow: auto; padding: 6px; display: grid; gap: 1px; }
.mm-list h5 { margin: 8px 10px 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.mm-list button.mi { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; height: 34px; padding: 0 8px; border-radius: 8px; font-family: var(--font); font-size: 13px; color: var(--ink); text-align: left; }
.mm-list button.mi:hover, .mm-list button.mi.on { background: var(--soft); }
.mm-list button.mi .lg { width: 22px; height: 22px; border-radius: 6px; background: var(--soft); display: grid; place-items: center; font-size: 9px; font-weight: 600; color: var(--ink-2); } .mm-list button.mi .lg img { width: 14px; height: 14px; }
.mm-list button.mi .lg img.only-dark { display: none; } html[data-theme="dark"] .mm-list button.mi .lg img.only-light { display: none; } html[data-theme="dark"] .mm-list button.mi .lg img.only-dark { display: inline-block; } html[data-theme="dark"] .mm-list button.mi .lg img.inv { filter: invert(1); }
.mm-list button.mi .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-list button.mi .n small { display: block; color: var(--mute); font-size: 11px; font-family: var(--mono); }
.mm-list button.mi .p { font-family: var(--mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
.mm-list button.mi.on .p { color: var(--ink); }
.mm-list .pv { color: #01a74d; } html[data-theme="dark"] .mm-list .pv { color: #6ff5ac; }
.model-menu > a { display: block; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); } .model-menu > a:hover { color: var(--ink); background: var(--soft); }
.menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; padding: 0 10px; border-radius: 8px; font-family: var(--mono); font-size: 12px; text-align: left; } .menu button:hover { background: var(--soft); } .menu .empty { padding: 8px 10px; text-align: left; font-size: 12px; } .menu a { font-size: 12px; color: var(--mute); padding: 6px 10px; }
.typing { display: inline-flex; gap: 4px; padding: 6px 2px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: tp 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* workspace: split (agent | files) over a full width terminal, every box collapsible and draggable */
.ws { --aw: 1fr; --fw: 1.35fr; --tw: 210px; --th: 240px; flex-direction: column; }
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 0 var(--fw) 10px var(--aw) 0; position: relative; }
.ws.no-agent .split { grid-template-columns: 0 1fr 0 0 32px; } .ws.no-files .split { grid-template-columns: 32px 0 0 1fr 0; } .ws.no-agent.no-files .split { grid-template-columns: 32px 1fr 0 0 32px; }
.ws.no-agent .agent, .ws.no-agent .handle[data-h="agent"], .ws.no-files .files, .ws.no-files .handle[data-h="agent"], .ws.no-term .handle[data-h="term"], .ws.no-tree .tree-wrap { display: none; }
/* collapsed terminal keeps its header as a bar at the bottom */
.ws.no-term .term { height: 30px; } .ws.no-term .term .tb, .ws.no-term .term .ti { display: none; } .ws.no-term .term .term-x svg { transform: rotate(180deg); }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pane.files { background: var(--card); }
.handle { position: relative; z-index: 2; background: var(--side); display: grid; place-items: center; }
.handle::before { content: ""; border-radius: 3px; background: #c9c9d1; transition: background .15s, transform .15s; }
.handle.v { cursor: col-resize; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .handle.v::before { width: 3px; height: 34px; }
.handle.h { cursor: row-resize; height: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .handle.h::before { height: 3px; width: 34px; }
.handle:hover::before, .handle.drag::before { background: var(--ink); transform: scale(1.15); }
.handle:hover, .handle.drag { background: var(--soft-2); }
.pane-x, .pane-o { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--mute); flex: none; } .pane-x:hover, .pane-o:hover { background: var(--soft-2); color: var(--ink); }
/* strips left behind by a hidden pane: full height, icon on top, label along the strip */
.pane-o.edge { width: auto; height: auto; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; background: var(--side); color: var(--mute); }
.pane-o.edge:hover { background: var(--soft); color: var(--ink); }
.pane-o.edge svg { width: 16px; height: 16px; flex: none; }
.pane-o.edge span { writing-mode: vertical-rl; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pane-o.edge-l { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); } .pane-o.edge-r { grid-column: 5; grid-row: 1; border-left: 1px solid var(--line); }
.pane-o.edge.hide { display: none; }
.tabs { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 6px 0 0; border-bottom: 1px solid var(--line); background: var(--side); flex: none; }
.tablist { display: flex; overflow: hidden; height: 100%; min-width: 0; flex: 0 1 auto; }
.tab { display: flex; align-items: center; gap: 7px; height: 35px; padding: 0 10px 0 12px; font-family: var(--mono); font-size: 12px; color: var(--mute); border-right: 1px solid var(--line); white-space: nowrap; cursor: pointer; max-width: 220px; min-width: 0; flex: 0 1 auto; }
.tab span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tab svg { width: 13px; height: 13px; } .tab.chat { font-family: var(--font); font-size: 12.5px; }
.tab.on { color: var(--ink); background: var(--card); box-shadow: inset 0 -2px 0 var(--ink); }
.tab i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.tab .x { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: var(--mute); font-size: 14px; opacity: 0; margin-right: -4px; flex: none; } .tab:hover .x, .tab.on .x { opacity: 1; } .tab .x:hover { background: var(--soft); color: var(--ink); }
.newtab { width: 26px; height: 26px; margin-left: 4px; border-radius: 7px; display: grid; place-items: center; color: var(--mute); } .newtab:hover { background: var(--soft-2); color: var(--ink); }
.tabs .pane-o { margin-left: 6px; }
.agent .msgs { padding: 16px 18px; gap: 10px; align-content: end; } .agent .msg { font-size: 13.5px; }
.agent .welcome h3 { font-size: 16px; }
.fbody { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--tw) 1fr; }
.tree-wrap { display: flex; flex-direction: column; background: var(--side); border-right: 1px solid var(--line); min-height: 0; }
.ph { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px 0 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; flex: none; }
.ph button { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--mute); } .ph button:hover { background: var(--soft-2); color: var(--ink); }
.tree { flex: 1; overflow: auto; padding: 0 6px; font-family: var(--mono); font-size: 12px; }
.tree div { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.tree div:hover { background: var(--soft-2); } .tree div.on { background: var(--card); color: var(--ink); }
.tree div.dir { color: var(--ink); } .tree div.d1 { padding-left: 22px; }
.tree svg { width: 13px; height: 13px; color: var(--mute); }
.tree .st { margin-left: auto; font-size: 10px; } .tree .st.m { color: var(--gold); } .tree .st.a { color: var(--green); }
.ws.no-tree .fbody { grid-template-columns: 0 1fr; }
.boxline { border-top: 1px solid var(--line); padding: 10px 12px; font-size: 12px; color: var(--ink-2); display: grid; gap: 6px; }
.boxline .row { display: flex; align-items: center; gap: 7px; } .boxline .row i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.boxline.off .row i { background: var(--mute); } .boxline.waking .row i { background: var(--blue); animation: pulse 1s infinite; }
.boxline b { font-weight: 500; color: var(--ink); } .boxline small { color: var(--mute); }
.boxline .acts { display: flex; gap: 6px; } .boxline .acts button { font-size: 12px; color: var(--ink-2); padding: 3px 8px; border-radius: 6px; background: var(--soft-2); } .boxline .acts button:hover { background: var(--card); }
.boxline label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; } .boxline input { margin: 0; accent-color: var(--ink); }
@keyframes pulse { 50% { opacity: .3; } }
.code { overflow-y: auto; overflow-x: hidden; position: relative; min-width: 0; padding: 10px 0 14px; }
.code .lines { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.code .ln { display: grid; grid-template-columns: 44px 1fr; }
.code .ln i { font-style: normal; text-align: right; padding-right: 12px; color: #c6c6cc; user-select: none; }
.code .ln > span { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 16px; }
html[data-theme="dark"] .code .ln i { color: #55565f; }
.gutter { padding: 14px 10px 14px 0; text-align: right; color: #c6c6cc; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; user-select: none; }
.code pre { padding: 14px 16px; line-height: 1.6; font-size: 12.5px; background: none; }
.code pre code { font-size: 12.5px; }
.code .empty { position: absolute; inset: 0; display: grid; place-content: center; background: var(--card); }
.status { height: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 14px; font-size: 11.5px; color: var(--mute); font-family: var(--mono); background: var(--side); flex: none; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.term { height: var(--th); background: #0f0f12; color: #d7d7de; font-family: var(--mono); font-size: 12px; display: flex; flex-direction: column; flex: none; }
.term .th { display: flex; align-items: center; height: 30px; padding: 0 8px 0 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8e8e98; border-bottom: 1px solid #222228; } .term .th .pane-x { color: #8e8e98; } .term .th .pane-x:hover { background: #222228; color: #fff; }
.term .tb { flex: 1; overflow: auto; padding: 10px 14px; line-height: 1.6; overflow-wrap: anywhere; }
.term .tb .p { color: #a2ffc1; } .term .tb .d { color: #8e8e98; } .term .tb .ok { color: #a2ffc1; } .term .tb .er { color: #ff8f8f; }
.term .ti { display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px; }
.term .ti span { color: #a2ffc1; } .term .ti input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font-family: var(--mono); font-size: 12px; }

/* models */
.models { flex-direction: column; }
.mbar { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--soft); }
.search input { flex: 1; border: 0; outline: 0; background: none; font-size: 13.5px; } .search svg { color: var(--mute); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); } .chips button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.mlist { flex: 1; overflow: auto; padding: 8px 20px 20px; }
.mrow { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 11px 10px; border-radius: 12px; cursor: pointer; }
.mrow:hover { background: var(--soft); }
.mrow .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--soft); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink-2); } .mrow .logo img { width: 18px; height: 18px; }
.mrow .t { min-width: 0; } .mrow .t b { font-weight: 500; } .mrow .t code { display: block; color: var(--mute); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .t .tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .mrow .t .tags span { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--ink-2); } .mrow .t .tags span.pv { background: var(--green-200); color: #102c22; }
.mrow .price { text-align: right; font-family: var(--mono); font-size: 12px; white-space: nowrap; } .mrow .price small { display: block; color: var(--mute); font-size: 10.5px; font-family: var(--font); }
.mdet { display: none; margin: -4px 10px 8px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.mrow.open + .mdet { display: grid; gap: 8px; }
.mdet pre { background: #0f0f12; color: #d7d7de; padding: 10px 12px; border-radius: 8px; font-size: 11.5px; }
.mdet .acts { display: flex; gap: 6px; } .mdet small { color: var(--mute); }

/* pages */
.page { overflow: auto; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 20px 40px; display: grid; gap: 22px; align-content: start; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hero .big { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; font-family: var(--mono); line-height: 1; } .hero small { display: block; color: var(--mute); margin-bottom: 6px; font-size: 12.5px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; text-align: left; display: grid; gap: 2px; background: var(--card); }
.tile:hover { border-color: var(--ink); } .tile b { font-weight: 500; } .tile span { color: var(--mute); font-size: 12px; } .tile em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.tile.best { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .tile.best span { color: var(--on-ink); opacity: .6; } .tile.best em { color: var(--green-200); }
.rows { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rows > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.rows > div:first-child { border-top: 0; }
.rows b { font-weight: 500; } .rows small { color: var(--mute); font-size: 12px; grid-column: 1; overflow-wrap: anywhere; } .rows .r { font-family: var(--mono); font-size: 12.5px; text-align: right; grid-row: span 2; display: flex; align-items: center; gap: 8px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-h h3 { margin: 0; font-size: 14px; font-weight: 600; } .sec-h span { color: var(--mute); font-size: 12.5px; }
details.more { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
details.more summary { cursor: pointer; padding: 11px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; } details.more summary::-webkit-details-marker { display: none; } details.more summary::after { content: "+"; color: var(--mute); } details.more[open] summary::after { content: "\2013"; }
details.more p { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: 10px; font-size: 12.5px; opacity: 0; transition: all .25s; pointer-events: none; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) { .split { grid-template-columns: 0 0 1fr !important; } .pane.files, .handle[data-h="agent"] { display: none !important; } }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .side { display: none; } .grid4 { grid-template-columns: 1fr 1fr; } }

.split > .files { grid-column: 2; grid-row: 1; } .split > .handle { grid-column: 3; grid-row: 1; } .split > .agent { grid-column: 4; grid-row: 1; }
.split { grid-template-rows: 1fr; }
.fbody > .tree-wrap { grid-column: 1; } .fbody > .code { grid-column: 2; }

.tabs, .tablist, .tab { scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; }
.tabs .sp { min-width: 0; }

/* dark theme: same key as the site (wispr.theme), set before paint by the boot script */
html[data-theme="dark"] { --bg: #16171b; --side: #121317; --line: #2c2d35; --ink: #f3f3f6; --ink-2: #c3c4cc; --mute: #8b8c98; --soft: #24252c; --soft-2: #30313a; --blue-50: #1c2238; --gold-50: #2b2416; --gold: #ffe7bd; --card: #1f2026; --on-ink: #16171b; color-scheme: dark; }
html[data-theme="dark"] .gutter { color: #55565f; }
html[data-theme="dark"] .handle::before { background: var(--soft-2); }
html[data-theme="dark"] .img-grid div { background: linear-gradient(135deg, #2a3150, #1c2238); }
.theme svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun { display: none; }
html[data-theme="dark"] .theme .sun { display: block; }
html[data-theme="dark"] .theme .moon { display: none; }

/* ===== 2026-10-29: editor code in dark theme (Prism ships black text with a white text-shadow) ===== */
html[data-theme="dark"] .code pre code[class*="language-"], html[data-theme="dark"] pre[class*="language-"] { color: #f3f3f6; text-shadow: none; }
html[data-theme="dark"] .token { text-shadow: none; }
html[data-theme="dark"] .token.comment, html[data-theme="dark"] .token.prolog, html[data-theme="dark"] .token.doctype, html[data-theme="dark"] .token.cdata { color: #7c8193; }
html[data-theme="dark"] .token.punctuation { color: #a0a1ad; }
html[data-theme="dark"] .token.operator, html[data-theme="dark"] .token.entity, html[data-theme="dark"] .token.url { color: #d4d5dc; background: none; }
html[data-theme="dark"] .token.string, html[data-theme="dark"] .token.char, html[data-theme="dark"] .token.attr-value, html[data-theme="dark"] .token.triple-quoted-string { color: #c8d4fa; }
html[data-theme="dark"] .token.property, html[data-theme="dark"] .token.tag, html[data-theme="dark"] .token.boolean, html[data-theme="dark"] .token.number, html[data-theme="dark"] .token.constant, html[data-theme="dark"] .token.symbol { color: #ffe7bd; }
html[data-theme="dark"] .token.selector, html[data-theme="dark"] .token.builtin, html[data-theme="dark"] .token.keyword, html[data-theme="dark"] .token.atrule, html[data-theme="dark"] .token.attr-name { color: #b495ff; }
html[data-theme="dark"] .token.function, html[data-theme="dark"] .token.class-name, html[data-theme="dark"] .token.decorator { color: #a2ffc1; }
html[data-theme="dark"] .token.parameter, html[data-theme="dark"] .token.variable { color: #ffd27a; }
/* provider logos in the model list: monochrome marks invert in dark, mixed marks swap files */
.mrow .logo img.only-dark { display: none; }
html[data-theme="dark"] .mrow .logo img.only-light { display: none; }
html[data-theme="dark"] .mrow .logo img.only-dark { display: inline-block; }
html[data-theme="dark"] .mrow .logo img.inv { filter: invert(1); }
/* a trailing comment moves to the next row as one piece instead of leaving its hash behind */
.code .ln .token.comment { display: inline-block; white-space: pre-wrap; }

/* ===== routing animation in chat ===== */
.msg.rvb { max-width: 100%; width: 100%; }
.rv { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr) 118px; grid-template-rows: 1fr 1fr; align-items: center; gap: 14px 34px; padding: 14px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); font-size: 12px; overflow: hidden; }
.rv-node { position: relative; z-index: 1; display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--mute); transition: border-color .3s, color .3s, box-shadow .3s; min-width: 0; }
.rv-node b { font-weight: 600; color: var(--ink); font-size: 12.5px; } .rv-node small { font-family: var(--mono); font-size: 10.5px; line-height: 1.4; }
.rv-node.req { grid-column: 1; grid-row: 1; align-self: end; } .rv-node.enc { grid-column: 1; grid-row: 2; align-self: start; grid-template-columns: 26px 1fr; align-items: center; } .rv-lanes { grid-column: 2; grid-row: 1 / -1; } .rv-node.out { grid-column: 3; grid-row: 1 / -1; } .rv-node.enc b { grid-column: 2; } .rv-node.enc small { grid-column: 2; }
.rv-ico { grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; } .rv-ico svg { width: 14px; height: 14px; }
.rv-lanes { display: grid; gap: 8px; min-width: 0; }
.rv-node.prov { grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 10px; opacity: .55; transition: opacity .3s, border-color .3s; }
.rv-node.prov.on { opacity: 1; border-color: var(--ink-2); } .rv-node.prov.done { border-color: #01a74d; } html[data-theme="dark"] .rv-node.prov.done { border-color: #2fd47a; }
.rv-node.prov .lg { width: 26px; height: 26px; border-radius: 7px; background: var(--soft); display: grid; place-items: center; grid-row: span 2; } .rv-node.prov .lg img { width: 15px; height: 15px; }
.rv .lg img.only-dark { display: none; } html[data-theme="dark"] .rv .lg img.only-light { display: none; } html[data-theme="dark"] .rv .lg img.only-dark { display: inline-block; } html[data-theme="dark"] .rv .lg img.inv { filter: invert(1); }
.rv-t { min-width: 0; } .rv-t b, .rv-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tok { grid-column: 3; grid-row: span 2; font-family: var(--mono); font-size: 10.5px; color: var(--mute); white-space: nowrap; } .rv-tok i { font-style: normal; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .rv-tok span { color: var(--ink-2); }
.rv-node.prov .bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .rv-node.prov .bar::after { content: ""; display: block; height: 100%; width: 0; background: #01a74d; } html[data-theme="dark"] .rv-node.prov .bar::after { background: #2fd47a; }
.rv-node.prov.on .bar::after { animation: rvbar 1.4s ease-out forwards; } @keyframes rvbar { to { width: 100%; } }
.rv-sum { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }
.rv[data-phase="0"] .req, .rv[data-phase="1"] .req { border-color: var(--ink-2); }
.rv[data-phase="2"] .enc, .rv[data-phase="3"] .enc { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(58,101,235,.15); }
.rv[data-phase="4"] .out { border-color: #01a74d; } html[data-theme="dark"] .rv[data-phase="4"] .out { border-color: #2fd47a; }
.rv-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.rv-wires .w { fill: none; stroke: var(--line); stroke-width: 1.5; } .rv-wires .pk { fill: #3a65eb; opacity: 0; } .rv-wires .pk.on { opacity: 1; }
html[data-theme="dark"] .rv-wires .pk { fill: #8fb0ff; }
@media (max-width: 700px) { .rv { grid-template-columns: 1fr; gap: 10px; } .rv-wires { display: none; } }

.login-card #urlIn { font-family: var(--mono); font-size: 12px; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.rows small input, .rows small select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }

/* ===== phone: bottom tab bar replaces the sidebar, stacked rows, stacked routing panel ===== */
.tabbar { display: none; }
@media (max-width: 820px) {
  .shell { grid-template-rows: 100dvh; }
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--side); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 10.5px; color: var(--mute); }
  .tabbar a svg { width: 20px; height: 20px; }
  .tabbar a.on { color: var(--ink); }
  .top { padding: 0 16px; } .top .need { font-size: 12px; }
  .top .ttheme { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); color: var(--ink); margin-left: auto; }
  .top .ttheme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .top .need { margin-left: 0; }
  .msgs { padding: 16px; } .composer { padding: 6px 12px 10px; }
  .msg.ai { max-width: 100%; }
  .welcome h3 { font-size: 20px; } .welcome .sugg button { font-size: 12.5px; }
  .page .wrap { display: block; } .page .wrap > * + * { margin-top: 22px; }
  .rows { display: block; height: auto; }
  .rows > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .rows > div small { order: 2; } .rows > div .r { order: 3; text-align: left; flex-wrap: wrap; justify-content: flex-start; max-width: 100%; }
  .rows div .mono { word-break: break-all; white-space: normal; font-size: 12px; }
  .hero .big { font-size: 34px; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .rv { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; padding: 12px; }
  .rv-node.req, .rv-node.enc, .rv-lanes, .rv-node.out { grid-column: 1 !important; grid-row: auto !important; align-self: stretch; }
  .rv-node.enc { grid-template-columns: 26px 1fr; }
  .rv-node.out { display: grid; grid-template-columns: 1fr auto; align-items: center; } .rv-node.out .rv-sum { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .rv-wires { display: none; }
  .rv-node.prov { grid-template-columns: 26px 1fr; } .rv-node.prov .rv-tok { grid-column: 2; grid-row: auto; white-space: normal; }
  .mlist { padding: 8px 12px 20px; } .mrow { grid-template-columns: 28px 1fr; } .mrow .price { grid-column: 2; text-align: left; } .mrow .price small { display: inline; margin-left: 6px; }
  .mdet pre { white-space: pre-wrap; word-break: break-word; }
  .model-menu { width: calc(100vw - 32px); }
}
@media (max-width: 820px) { .top .ttheme { display: grid; } } @media (min-width: 821px) { .top .ttheme { display: none; } }