/* Theme: neutral light ("bright") and dark. Settings → Appearance sets data-theme on <html>
   (light | dark); without it we follow the system. Pink stays as Raphael's accent. */
:root {
  --bg: #f8f8f7; --panel: #ffffff; --panel-2: #f0f0ee; --text: #1d1d1f; --muted: #6e6e73;
  --accent: #d6457f; --accent-2: #6b5cf6; --accent-text: #ffffff; --border: #e4e4e1;
  --user: #ececea; --user-text: #1d1d1f; --bot: #ffffff; --danger: #d33a4c; --ok: #23915f; --warn: #b9780b;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 0.25rem 1rem rgb(0 0 0 / .04); color-scheme: light;
  --radius: 1rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131315; --panel: #1b1b1e; --panel-2: #26262a; --text: #ececee; --muted: #9b9ba3;
    --accent: #ff78a8; --accent-2: #a093ff; --accent-text: #131315; --border: #2e2e33;
    --user: #2c2c31; --user-text: #f2f2f4; --bot: #1b1b1e; --danger: #ff6b7d; --ok: #4cc98f; --warn: #f0b44a;
    --shadow: 0 1px 2px rgb(0 0 0 / .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131315; --panel: #1b1b1e; --panel-2: #26262a; --text: #ececee; --muted: #9b9ba3;
    --accent: #ff78a8; --accent-2: #a093ff; --accent-text: #131315; --border: #2e2e33;
    --user: #2c2c31; --user-text: #f2f2f4; --bot: #1b1b1e; --danger: #ff6b7d; --ok: #4cc98f; --warn: #f0b44a;
    --shadow: 0 1px 2px rgb(0 0 0 / .35); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 1rem/1.45 ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.625rem 0.875rem; cursor: pointer; min-height: 2.75rem;
}
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 0; font-weight: 600; }
input, select, textarea { background: var(--panel); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.625rem 0.75rem; min-height: 2.75rem; width: 100%; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
code { background: var(--panel-2); padding: 1px 0.375rem; border-radius: 0.375rem; }
[hidden] { display: none !important; }

/* login */
.login { max-width: 22rem; margin: 0 auto; padding: 14vh 1rem 2rem; text-align: center; display: grid; justify-items: center; gap: 0.25rem; }
.login-avatar { width: 4.5rem; height: 4.5rem; margin-bottom: 0.5rem; }
.login h1 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; }
.login-sub { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9375rem; }
.login-google { display: grid; justify-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; }
.login-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.login-note code { font-size: 0.75rem; background: var(--panel-2); padding: 0.0625rem 0.3125rem; border-radius: 0.3125rem; }
.login .err { margin: 0.25rem 0 0; font-size: 0.875rem; min-height: 0; }
.login-or { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin: 0.75rem 0 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.login-or[hidden] { display: none; }
.login-token { width: 100%; }
.login-token summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; padding: 0.5rem; list-style: none; border-radius: 0.5rem; }
.login-token summary::-webkit-details-marker { display: none; }
.login-token summary:hover { color: var(--text); }
.login-token[open] summary { color: var(--text); }
.login form { display: grid; gap: 0.625rem; margin-top: 0.5rem; width: 100%; }
.login form input { min-height: 2.75rem; padding: 0.5rem 0.875rem; border-radius: 0.75rem; }
.login form button { min-height: 2.75rem; border-radius: 0.75rem; }
.set-ctl.wide { width: 100%; }
.device-list { list-style: none; margin: 0; padding: 0; }
.device-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.device-list .di { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.device-list .di svg { width: 1rem; height: 1rem; }
.device-list .dl { display: grid; gap: 0.125rem; min-width: 0; font-size: 0.9375rem; }
.device-list .dl small { color: var(--muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-list .here { font-size: 0.6875rem; font-weight: 600; color: var(--accent); margin-left: 0.375rem; }
.device-list button { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.device-list .empty { display: block; color: var(--muted); font-size: 0.875rem; }
.origin-list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.375rem; }
.origin-list li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.origin-list code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; background: var(--panel-2); padding: 0.375rem 0.625rem; border-radius: 0.5rem; }
.origin-list button { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.err { color: var(--danger); min-height: 1.4em; }

/* layout */
.app { display: flex; flex-direction: column; height: 100dvh; max-width: 56.25rem; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 0.625rem; padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; transition: transform .3s; }
.avatar.speaking { animation: bob .5s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px) rotate(-3deg); } }
.who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.status { font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: 0.375rem; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); display: inline-block; }
.status.online .dot { background: var(--ok); }
.status.busy .dot { background: var(--warn); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.icon-btn { min-width: 2.75rem; padding: 0.5rem; background: transparent; border: 1px solid var(--border); }
.icon-btn[aria-pressed="false"] { opacity: .45; }
.stop { background: var(--danger); color: #fff; border: 0; font-weight: 700; }

.tabs { display: flex; gap: 0.25rem; padding: 0.375rem 1rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.tabs button { flex: 1; background: transparent; border: 0; border-radius: 0.625rem; min-height: 2.375rem; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] { background: var(--panel-2); color: var(--text); }
.tab { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* chat */
.log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; overscroll-behavior: contain; }
.msg { max-width: 85%; padding: 0.625rem 0.875rem; border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; box-shadow: var(--shadow); }
.msg.user { align-self: flex-end; background: var(--user); color: var(--user-text); border-bottom-right-radius: 0.25rem; }
.msg.assistant { align-self: flex-start; background: var(--bot); border: 1px solid var(--border); border-bottom-left-radius: 0.25rem; }
.msg.error { align-self: center; background: transparent; color: var(--danger); box-shadow: none; font-size: 0.875rem; }
.msg.notify { align-self: center; background: var(--panel-2); font-size: 0.875rem; }
.tool { align-self: flex-start; font-size: 0.8125rem; color: var(--muted); background: var(--panel-2); border-radius: 0.625rem; padding: 0.375rem 0.625rem; max-width: 92%; }
.tool summary { cursor: pointer; list-style: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool summary::before { content: "⚙ "; }
.tool.fail summary::before { content: "✗ "; color: var(--danger); }
.tool.done summary::before { content: "✓ "; color: var(--ok); }
.tool pre { white-space: pre-wrap; margin: 0.375rem 0 0; max-height: 15rem; overflow: auto; font-size: 0.75rem; }
.tool img { max-width: 100%; border-radius: 0.5rem; margin-top: 0.375rem; display: block; }
.approval { align-self: stretch; border: 2px solid var(--warn); background: var(--panel); border-radius: var(--radius); padding: 0.75rem; }
.approval pre { white-space: pre-wrap; font-size: 0.75rem; max-height: 12.5rem; overflow: auto; background: var(--panel-2); padding: 0.5rem; border-radius: 0.5rem; }
.approval .row { display: flex; gap: 0.5rem; }
.approval .row button { flex: 1; }
.approval.resolved { opacity: .6; border-color: var(--border); }
/* Composer: a rounded card — text on top, then [model ▾] … [mic] [send/stop] */
.composer { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0.75rem 0.25rem; padding: 0.5rem 0.5rem 0.4375rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow); position: relative; z-index: 2;
  transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.composer textarea { resize: none; max-height: 8.75rem; border: 0; background: transparent; padding: 0.375rem 0.5rem; min-height: 2.5rem; }
.composer textarea:focus { outline: none; }
.composer-row { display: flex; align-items: center; gap: 0.375rem; }
.composer-spacer { flex: 1; }
.model-chip { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.125rem; max-width: 60%; padding: 0.25rem 0.625rem;
  border: 0; border-radius: 0.625rem; background: transparent; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.model-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-chip:hover { background: var(--panel-2); color: var(--text); }
.attach { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; min-height: 0; padding: 0; border-radius: 50%; flex: none;
  border: 1px solid var(--border); background: transparent; color: var(--muted); }
.attach:hover { background: var(--panel-2); color: var(--text); }
.attach-tray { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.375rem 0.375rem 0; }
.attach-tray[hidden] { display: none; }
.att { position: relative; width: 4rem; height: 4rem; border-radius: 0.625rem; overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); flex: none; }
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 60%, transparent), transparent); background-size: 250% 100%; animation: work-shimmer 1.2s linear infinite; }
.att button { position: absolute; top: 0.1875rem; right: 0.1875rem; width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgb(0 0 0 / .65); color: #fff; font-size: 0.875rem; line-height: 1; }
.composer.dragging { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.msg-imgs { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
.msg-imgs:not(:last-child) { margin-bottom: 0.5rem; }
.msg-imgs img { max-width: min(14rem, 100%); max-height: 14rem; border-radius: 0.625rem; display: block; cursor: zoom-in; }
.msg-att { font-size: 0.8125rem; color: var(--muted); }
.msg-att:not(:last-child) { margin-bottom: 0.25rem; }
.mic, .send { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; min-height: 0; padding: 0; border-radius: 50%; flex: none; }
.mic { border: 0; background: transparent; color: var(--muted); }
.mic:hover { background: var(--panel-2); color: var(--text); }
.mic.listening { background: var(--danger); color: #fff; animation: pulse 1s infinite; }
.send { border: 0; background: var(--accent); color: var(--accent-text); transition: background .15s, opacity .15s, transform .1s; }
.send:active { transform: scale(.94); }
.send:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.send .i-stop, .send.stop .i-send { display: none; }
.send.stop .i-stop { display: block; }
.send.stop { background: var(--text); color: var(--bg); }
/* the send button is the stop button on the Chat tab, so the header one is only for other tabs */
.app:has(#tab-chat:not([hidden])) #stopBtn { display: none !important; }

/* "working" line while a turn runs */
.working { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 1.25rem 0; font-size: 0.875rem; }
.working-glyph { display: inline-block; color: var(--accent); font-size: 1.125rem; line-height: 1; animation: work-spin 2.4s linear infinite, work-hue 3s ease-in-out infinite; }
.working-verb { font-weight: 600; background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--text) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: work-shimmer 2s linear infinite; }
.working-meta { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
@keyframes work-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes work-hue { 50% { color: var(--accent-2); } }
@keyframes work-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .working-glyph, .working-verb { animation: none; } .working-verb { color: var(--muted); } }

/* /model picker */
.model-panel .model-filter { margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); background: var(--panel); }
.model-panel .model-provs { display: flex; gap: 0.375rem; flex-wrap: wrap; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--border); }
.model-panel .model-provs button { min-height: 2rem; padding: 0.125rem 0.75rem; font-size: 0.8125rem; border-radius: 999px; }
.model-panel .model-provs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.model-list { max-height: 40vh; overflow-y: auto; }
.model-opt { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; min-height: 2.5rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; }
.model-opt:hover, .model-opt.kb { background: var(--panel-2); }
.model-opt .tick { width: 1rem; color: var(--accent); flex: none; }
.model-opt[aria-selected="true"] { font-weight: 700; }
.handsfree { font-size: 0.8125rem; color: var(--muted); padding: 0 1rem calc(0.5rem + env(safe-area-inset-bottom)); background: var(--panel); display: flex; gap: 0.375rem; align-items: center; }
.handsfree input { width: auto; min-height: 0; }

/* screen: full-bleed live view */
.screen-tab { background: #000; }
.viewport { position: relative; flex: 1; min-height: 0; background: #000; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#frame { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; transform-origin: 0 0; will-change: transform; }
/* zoom pill (top-right of the live screen) */
.zoom-ctl { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; gap: 2px; padding: 0.1875rem; border-radius: 999px;
  background: rgb(30 24 44 / .55); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem); z-index: 3; }
.zoom-ctl button { min-height: 2.25rem; min-width: 2.25rem; padding: 0 0.5rem; border: 0; border-radius: 999px; background: transparent; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.zoom-ctl button:hover { background: rgb(255 255 255 / .12); }
.zoom-ctl #zoomLevel { min-width: 3.5rem; font-size: 0.875rem; }
.zoom-ctl.zoomed #zoomLevel { color: var(--accent); }

.hint { position: absolute; color: #bbb; text-align: center; padding: 1rem; font-size: 0.875rem; margin: 0; }
.cursor-dot { position: absolute; width: 1.625rem; height: 1.625rem; margin: -13px 0 0 -13px; border-radius: 50%; border: 0.1875rem solid var(--accent); pointer-events: none; animation: ping .45s ease-out forwards; }
.cursor-dot.right { border-color: var(--accent-2); }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.kbd-sink { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; min-height: 0; resize: none; pointer-events: none; font-size: 1rem; /* >=1rem stops iOS zooming */ }
.kbd-toggle { position: absolute; right: 0.875rem; bottom: calc(0.875rem + env(safe-area-inset-bottom)); width: 3rem; height: 3rem; min-height: 0; padding: 0; border-radius: 50%;
  background: rgb(30 24 44 / .55); color: #fff; border: 1px solid rgb(255 255 255 / .18); font-size: 1.375rem; backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem); }
.kbd-toggle[aria-pressed="true"] { background: var(--accent); border-color: transparent; }

/* settings */
.settings { overflow-y: auto; padding: 0; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem; display: grid; gap: 0.625rem; }
.card h2 { margin: 0; font-size: 1.0625rem; }
.card label { display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--muted); }
.card label input[type="range"] { padding: 0; }
.muted { color: var(--muted); font-size: 0.875rem; margin: 0; }
.pre { white-space: pre-wrap; font: 0.75rem/1.4 ui-monospace, monospace; }
.memory { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; }

.toast { position: fixed; left: 50%; bottom: calc(5.625rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 0.625rem 1rem; border-radius: 0.75rem; max-width: calc(100% - 2rem); z-index: 10; font-size: 0.875rem; }

/* setup */
.badge { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--danger); vertical-align: middle; margin-left: 2px; }
.hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), color-mix(in srgb, var(--accent-2) 14%, var(--panel))); }
button.big { font-size: 1.125rem; min-height: 3.375rem; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent-2); text-decoration: underline; }
.issue { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.25rem 0.625rem; align-items: start; }
.issue .icon { font-size: 1.25rem; line-height: 1.3; }
.issue p { margin: 0; }
.setup-log { max-height: 11.25rem; overflow: auto; background: var(--panel-2); padding: 0.5rem; border-radius: 0.5rem; margin: 0; }
.qr { background: #fff; padding: 0.75rem; border-radius: 0.75rem; width: min(16.25rem, 100%); justify-self: center; }
.qr svg { display: block; width: 100%; height: auto; }
a { color: var(--accent-2); }
#setupIssues { display: grid; gap: 0.75rem; }
#setupIssues:empty { display: none; }

/* ---------- chat with history sidebar ---------- */
.chat-tab { flex-direction: row; position: relative; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--panel); }
.chat-title { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.small, button.small { min-height: 2.25rem; min-width: 2.25rem; padding: 0.25rem 0.625rem; font-size: 0.9375rem; }
.sidebar { width: 17.5rem; flex: none; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); }
.session-list { list-style: none; margin: 0; padding: 0.375rem; overflow-y: auto; flex: 1; }
.session-list li { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.625rem; }
.session-list li.current { background: var(--panel-2); }
.session-list .open { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; padding: 0.5rem 0.625rem; min-height: 3rem; display: grid; gap: 1px; }
.session-list .open b { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-list .open small { color: var(--muted); font-size: 0.75rem; }
.session-list .open b { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.session-list .pin-mark { flex: none; display: inline-grid; color: var(--muted); }
.session-list .pin-mark svg { width: 13px; height: 13px; }
.session-list .more { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; margin-right: 0.25rem;
  background: transparent; border: 0; border-radius: 0.5rem; color: var(--muted); opacity: 0; }
.session-list li:hover .more, .session-list li.current .more, .session-list li.menu-open .more, .session-list .more:focus-visible { opacity: 1; }
.session-list .more:hover, .session-list li.menu-open .more { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.session-list li.menu-open { background: var(--panel-2); }
@media (pointer: coarse) { .session-list .more { opacity: .75; width: 2.5rem; height: 2.5rem; } }
.session-list .rename { flex: 1; padding: 0.25rem; }
.session-list .rename input { min-height: 2.25rem; padding: 0.375rem 0.625rem; font-size: 0.875rem; border-color: var(--accent); }
.session-list .sess-head { border-radius: 0; margin-top: 0.375rem; }
.session-list .sess-head:first-child { margin-top: 0; }
.session-list .sess-head button { flex: 1; display: flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0.25rem 0.75rem; background: transparent; border: 0;
  color: var(--muted); font-size: 0.75rem; font-weight: 600; text-align: left; }
.session-list .sess-head button:hover { color: var(--text); background: transparent; }
.session-list .sess-head svg { width: 14px; height: 14px; flex: none; }
.session-list .sess-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-list .sess-head .chev { display: inline-grid; transition: transform .15s; }
.session-list .sess-head [aria-expanded="false"] .chev { transform: rotate(-90deg); }
.session-list .sess-head small { margin-left: auto; font-weight: 500; }
.session-list li.sess-head:hover { background: transparent; }

/* ---------- context menu (sidebar chat ⋯) ---------- */
.ctx-menu { position: fixed; z-index: 60; min-width: 13.5rem; max-width: min(18rem, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 0.375rem; background: var(--panel); border: 1px solid var(--border); border-radius: 0.875rem;
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08); animation: ctxIn .12s ease-out; }
@keyframes ctxIn { from { opacity: 0; transform: scale(.97) translateY(-2px); } }
.ctx-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.5rem; padding: 0.375rem 0.625rem; background: transparent; border: 0;
  border-radius: 0.5rem; color: var(--text); font-size: 0.9375rem; text-align: left; cursor: pointer; }
.ctx-item:hover, .ctx-item:focus-visible, .ctx-item[aria-expanded="true"] { background: var(--panel-2); outline: none; }
.ctx-item .ci { display: grid; place-items: center; width: 1.25rem; flex: none; color: var(--muted); }
.ctx-item .cl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item kbd { font: 500 0.8125rem/1 inherit; color: var(--muted); background: none; border: 0; padding: 0; }
.ctx-item .cv, .ctx-item .ck { display: grid; color: var(--muted); }
.ctx-item .ck { color: var(--accent); }
.ctx-item.danger, .ctx-item.danger .ci, .ctx-item.danger kbd { color: var(--danger); }
.ctx-item.danger:hover, .ctx-item.danger:focus-visible { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ctx-item.armed { background: var(--danger); }
.ctx-item.armed, .ctx-item.armed .ci, .ctx-item.armed kbd { color: #fff; }
.ctx-item.ctx-back { font-weight: 600; }
.ctx-sep { border: 0; border-top: 1px solid var(--border); margin: 0.375rem 0.25rem; }
.ctx-note { padding: 0.5rem 0.625rem; color: var(--muted); font-size: 0.875rem; }
.ctx-input { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.625rem; }
.ctx-input .ci { display: grid; place-items: center; width: 1.25rem; flex: none; color: var(--muted); }
.ctx-input input { min-height: 2.25rem; padding: 0.375rem 0.5rem; font-size: 0.875rem; border-radius: 0.5rem; }
.scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .35); z-index: 4; }
/* (phone drawer / desktop sidebar placement lives in the "app shell" section at the end) */

/* ---------- personas ---------- */
.persona-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.persona-btn { display: grid; justify-items: center; gap: 0.375rem; padding: 0.625rem 0.75rem; min-width: 6rem; background: var(--panel-2); border: 2px solid transparent; border-radius: 1rem; }
.persona-btn img { width: 4rem; height: 4rem; border-radius: 1rem; }
.persona-btn span { font-weight: 600; font-size: 0.875rem; }
.persona-btn[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.pname { color: var(--text); font-weight: 600; }

/* ---------- memory ---------- */
.memory-tab { position: relative; }
.mem-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 1rem 0; }
.seg { display: inline-flex; background: var(--panel-2); border-radius: 0.75rem; padding: 0.1875rem; }
.seg button { background: transparent; border: 0; min-height: 2.125rem; padding: 0.25rem 0.875rem; border-radius: 0.5625rem; color: var(--muted); font-weight: 600; }
.seg button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.seg button[aria-checked="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.theme-seg { justify-self: start; }
.mem-add { display: flex; gap: 0.5rem; padding: 0.625rem 1rem; flex-wrap: wrap; }
.mem-add #memText { flex: 3 1 12.5rem; }
.mem-add .mem-cat { flex: 1 1 6.875rem; }
.mindmap { flex: 1; min-height: 0; overflow: hidden; touch-action: none; position: relative; }
.mindmap svg { display: block; width: 100%; height: 100%; cursor: grab; }
.mindmap svg:active { cursor: grabbing; }
.mm-link { stroke: var(--border); stroke-width: 2; fill: none; }
.mm-center circle { fill: url(#mmCenter); }
.mm-center text { fill: #fff; font-weight: 700; font-size: 15px; }
.mm-cat circle { stroke-width: 2.5; }
.mm-cat text { font-weight: 700; font-size: 13px; fill: var(--text); }
.mm-fact { cursor: pointer; }
.mm-fact rect { fill: var(--panel); stroke: var(--border); stroke-width: 1.5; }
.mm-fact text { font-size: 12px; fill: var(--text); }
.mm-fact:hover rect, .mm-fact:focus rect { stroke: var(--accent-2); stroke-width: 2.5; }
.mm-fact:focus { outline: none; }
.mem-list { list-style: none; margin: 0; padding: 0 1rem 1rem; overflow-y: auto; flex: 1; display: grid; gap: 0.5rem; align-content: start; }
.mem-list li { background: var(--panel); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: flex; gap: 0.625rem; align-items: center; }
.mem-list .txt { flex: 1; min-width: 0; }
.mem-list .chip { font-size: 0.75rem; padding: 2px 0.5rem; border-radius: 62.4375rem; color: #fff; white-space: nowrap; }
.mem-list button { min-height: 2.25rem; padding: 0.25rem 0.625rem; font-size: 0.875rem; }
.mem-empty { padding: 1.5rem 1rem; text-align: center; }
.sheet { position: absolute; inset: 0; background: rgb(0 0 0 / .4); display: flex; align-items: flex-end; justify-content: center; z-index: 6; padding: 1rem; }
.sheet .card { width: min(32.5rem, 100%); }
.row { display: flex; gap: 0.5rem; align-items: center; }
.spacer { flex: 1; }
button.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
button.danger.armed { background: var(--danger); color: #fff; border-color: transparent; }
.setup-section { display: grid; gap: 0.75rem; }

.mm-hint { position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 12px; color: var(--muted); pointer-events: none; }

.fish-key { display: grid; gap: 0.5rem; padding: 0.625rem; border: 1px dashed var(--border); border-radius: 0.75rem; }
.card label.check { display: flex; align-items: center; gap: 0.5rem; color: var(--text); }
.card label.check input { width: auto; min-height: 0; }

/* ---------- slash commands + MCP ---------- */
.slash-hint {
  position: absolute; left: 1rem; right: 1rem; bottom: calc(100% - 0.25rem);
  background: var(--panel); border: 1px solid var(--border); border-radius: 0.75rem;
  box-shadow: var(--shadow); overflow: hidden; z-index: 3; display: grid;
}
.slash-item {
  display: flex; gap: 0.625rem; align-items: baseline; text-align: left;
  background: transparent; border: 0; border-radius: 0; padding: 0.5rem 0.75rem; min-height: 2.5rem;
  color: var(--text); cursor: pointer;
}
.slash-item[aria-selected="true"] { background: var(--panel-2); }
.slash-item code { font-weight: 600; background: transparent; padding: 0; color: var(--accent); }
.slash-item span { color: var(--muted); font-size: 0.8125rem; }

.mcp-panel {
  background: var(--panel); border-top: 1px solid var(--border);
  max-height: 55vh; overflow-y: auto; font-size: 0.875rem; flex: none;
}
.mcp-head {
  display: flex; align-items: center; gap: 0.625rem; justify-content: space-between;
  padding: 0.625rem 0.875rem; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.mcp-sub { color: var(--muted); font-size: 0.75rem; }
.mcp-list { display: grid; }
.mcp-row {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
}
.mcp-row:last-child { border-bottom: 0; }
.mcp-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; flex: none; background: var(--muted); }
.status-connected .mcp-dot { background: var(--ok); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--ok) 22%, transparent); }
.status-needs-auth .mcp-dot { background: var(--warn); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--warn) 22%, transparent); }
.status-error .mcp-dot { background: var(--danger); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--danger) 22%, transparent); }
.status-disabled .mcp-dot { background: var(--border); }
.mcp-meta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.mcp-name { font-weight: 600; color: var(--text); }
.mcp-transport { font-size: 0.6875rem; color: var(--muted); border: 1px solid var(--border); border-radius: 62.4375rem; padding: 1px 0.4375rem; }
.mcp-state { font-size: 0.75rem; color: var(--muted); }
.status-connected .mcp-state { color: var(--ok); }
.status-needs-auth .mcp-state { color: var(--warn); }
.status-error .mcp-state { color: var(--danger); }
.mcp-err { flex-basis: 100%; font-size: 0.75rem; color: var(--danger); word-break: break-word; }
.mcp-actions { display: flex; gap: 0.5rem; flex: none; }
.mcp-actions button.small, .mcp-auth button.small { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }

.mcp-auth { padding: 0.875rem; border-bottom: 1px solid var(--border); background: var(--panel-2); display: grid; gap: 0.625rem; }
.mcp-auth p { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.mcp-auth a { color: var(--accent); word-break: break-all; }
.mcp-code {
  font: 700 1.625rem/1.2 ui-monospace, "JetBrains Mono", monospace; letter-spacing: 0.1875rem;
  color: var(--text); text-align: center; padding: 0.625rem; background: var(--panel);
  border: 1px dashed var(--accent); border-radius: 0.75rem; user-select: all;
}
.mcp-wait { display: flex; align-items: center; gap: 0.5rem; }
.spinner {
  width: 0.8125rem; height: 0.8125rem; border-radius: 50%; flex: none;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: mcp-spin .8s linear infinite;
}
@keyframes mcp-spin { to { transform: rotate(360deg); } }

.mcp-tools { display: grid; gap: 0.375rem; padding: 0.75rem 0.875rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.mcp-tools code { font-size: 0.75rem; background: var(--panel-2); color: var(--accent); }
.mcp-tools span { font-size: 0.75rem; color: var(--muted); }

/* ---------- responsive: any screen size ---------- */
/* Everything is sized in rem. 1rem = 16px up to ~1800px wide, then grows with the screen so
   large monitors and TVs aren't tiny (20px at 2560, 28px at 3840). */
html { font-size: clamp(16px, calc(16px + (100vw - 1800px) * 0.0059), 28px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Desktop with a mouse: denser (14px base), still growing on big monitors. Touch keeps 16px targets. */
@media (min-width: 900px) and (pointer: fine) {
  html { font-size: clamp(14px, calc(14px + (100vw - 1800px) * 0.0059), 26px); }
}

/* Wide screens: use the room instead of a narrow column. */
@media (min-width: 900px) {
  .app { max-width: min(100%, 90rem); }
  .msg { max-width: min(85%, 46rem); }
  .tool, .approval { max-width: min(92%, 52rem); }
  /* The live screen goes edge to edge. */
  .app:has(#tab-screen:not([hidden])) { max-width: none; }
}
@media (min-width: 1100px) {
  .mem-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
}

/* Very narrow phones (≤360px): tighter tabs and padding so nothing is cut off. */
@media (max-width: 360px) {
  .tabs { padding: 0.375rem 0.5rem; gap: 2px; }
  .tabs button { padding: 0.5rem 0.25rem; min-width: 0; font-size: 0.9375rem; }
  .top { padding-left: 0.75rem; padding-right: 0.75rem; }
  .log, .settings { padding: 0.75rem; }
  .composer { margin-left: 0.5rem; margin-right: 0.5rem; }
}
.tabs button { padding: 0.5rem 0.375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Short landscape screens (phones on their side): header and tabs share one row,
   so the chat and the live screen get the height. */
@media (max-height: 520px) and (orientation: landscape) {
  .app { max-width: none; }
  .chat-bar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .log { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .composer { margin: 0.25rem max(0.75rem, env(safe-area-inset-right)) 0.25rem max(0.75rem, env(safe-area-inset-left)); padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .composer textarea { max-height: 4.5rem; min-height: 2rem; }
  .handsfree { padding-top: 0; padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)); }
}

/* ---------- app shell: sidebar on desktop, header + bottom bar + drawer on phones ---------- */
.app { position: relative; }               /* containing block for the phone drawer + scrim */
.tabs button { position: relative; }
.tabs .ti, .side-new .ti { font-size: 1.25rem; line-height: 1; width: 1.5rem; text-align: center; flex: none; }
.tabs .badge { position: absolute; top: 0.375rem; left: calc(50% + 0.5rem); margin: 0; }
.hello { display: none; }

/* ===== Desktop: one full-height sidebar + a centered content column ===== */
@media (min-width: 900px) and (min-height: 521px) {
  .app { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-width: none; }
  .side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--border); }
  .tab { grid-column: 2; grid-row: 1; }
  #historyBtn, #newChat2 { display: none; }
  .scrim { display: none !important; }

  .top { background: transparent; border: 0; padding: 0.875rem 0.75rem 0.5rem 1rem; }
  .top .icon-btn { min-height: 2.25rem; min-width: 2.25rem; padding: 0.25rem; border-color: transparent; }

  /* "New chat" + sections read as one menu */
  .side-new, .tabs button { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start; width: 100%;
    min-height: 2.5rem; padding: 0.375rem 0.75rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--muted); font-weight: 600; text-align: left; }
  .side-new { width: auto; margin: 0.25rem 0.5rem 0; color: var(--text); background: var(--panel-2); }
  .side-new:hover, .tabs button:hover { background: var(--panel-2); color: var(--text); }
  .tabs { flex-direction: column; flex: none; gap: 0.125rem; padding: 0.375rem 0.5rem; background: transparent; border: 0; }
  .tabs button { flex: none; }
  .tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
  .tabs .badge { position: static; margin-left: auto; }

  /* history fills the rest of the sidebar */
  .sidebar { width: auto; flex: 1; border: 0; background: transparent; margin-top: 0.5rem; }
  .sidebar-head { border: 0; padding: 0.5rem 1.25rem 0.25rem; }
  .sidebar-head strong { font-size: 0.8125rem; color: var(--muted); }
  .session-list { padding: 0 0.5rem 0.75rem; }
  .session-list .open { min-height: 2.5rem; padding: 0.375rem 0.75rem; }
  .session-list li:hover { background: var(--panel-2); }

  /* chat: centered reading column, composer as a floating card */
  .chat-bar { background: transparent; border-bottom: 0; padding: 0.75rem 1.25rem 0.25rem; }
  .log { padding-inline: max(1.25rem, calc((100% - 50rem) / 2)); }
  .composer { width: min(100% - 2.5rem, 50rem); margin: 0 auto; }
  .working { width: min(100% - 2.5rem, 50rem); margin: 0 auto; padding-inline: 0.5rem; }
  /* /mcp + /model panels line up with the composer card */
  .mcp-panel { width: min(100% - 2.5rem, 50rem); margin: 0 auto 0.5rem; overflow: hidden auto; border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
  .handsfree { background: transparent; justify-content: center; padding: 0.5rem 1rem 0.75rem; }

  /* empty chat: greeting + composer centered on screen */
  .chat-main:has(#log:empty) { justify-content: center; padding-bottom: 12vh; }
  .chat-main:has(#log:empty) .log { display: none; }
  .chat-main:has(#log:empty) .chat-bar { position: absolute; top: 0; left: 0; right: 0; }
  .chat-main:has(#log:empty) .hello { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin-bottom: 1.75rem;
    font-size: 2.25rem; font-weight: 600; letter-spacing: -0.01em; text-align: center; padding: 0 1rem; }
  .hello img { width: 3rem; height: 3rem; border-radius: 0.875rem; }
}
@media (min-width: 900px) and (max-width: 1199px) and (min-height: 521px) {
  .app { grid-template-columns: 14rem minmax(0, 1fr); }
}


}

/* ---------- command UI: slash hint + /model + /mcp panels, terminal-flavoured ---------- */
:root { --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; }
.slash-hint { position: static; margin: 0 0.75rem 0.375rem; padding: 0.375rem 0; font-family: var(--mono); font-size: 0.8125rem;
  border-radius: 0.875rem; flex: none; }
.slash-item { display: grid; grid-template-columns: 1.25rem minmax(7rem, 14rem) 1fr; gap: 0.5rem; align-items: baseline;
  min-height: 0; padding: 0.25rem 0.875rem 0.25rem 0.5rem; font: inherit; }
.slash-item .caret { color: var(--accent); font-weight: 700; }
.slash-item code { font: inherit; font-weight: 600; color: var(--text); }
.slash-item span:last-child { font-size: inherit; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash-item[aria-selected="true"] { background: transparent; }
.slash-item[aria-selected="true"] code, .slash-item[aria-selected="true"] span:last-child { color: var(--accent-2); }

.cmd-panel { font-family: var(--mono); font-size: 0.8125rem; background: var(--panel); margin: 0 0.75rem 0.375rem; border: 1px solid var(--border);
  border-top: 2px solid var(--accent-2); border-radius: 0.875rem; max-height: 55vh; display: flex; flex-direction: column; overflow: hidden; }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem 0.25rem; }
.cp-title { color: var(--accent-2); font-weight: 700; }
.cp-sub { color: var(--muted); }
.cp-x { min-height: 1.75rem; min-width: 1.75rem; padding: 0; border: 0; background: transparent; color: var(--muted); font-family: inherit; }
.cp-x:hover { color: var(--text); background: var(--panel-2); }
.cp-body { overflow-y: auto; padding: 0.25rem 0 0.5rem; min-height: 0; flex: 1; }
.cp-group { padding: 0.625rem 1rem 0.125rem 2.25rem; font-weight: 700; color: var(--text); }
.cp-provs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.375rem 1rem 0.375rem 2.25rem; }
.cp-label { color: var(--muted); margin-right: 0.25rem; }
.cp-provs button { min-height: 0; padding: 0 0.375rem; border: 0; border-radius: 0.25rem; background: transparent; color: var(--muted); font: inherit; }
.cp-provs button:hover { color: var(--text); }
.cp-provs button[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-2); font-weight: 700; }
.cp-filter { margin: 0.25rem 1rem 0.375rem 2.25rem; width: calc(100% - 3.25rem); min-height: 0; padding: 0.25rem 0; border: 0; border-bottom: 1px dashed var(--border); border-radius: 0;
  background: transparent; font: inherit; }
.cp-filter:focus { outline: none; border-bottom-color: var(--accent-2); }
.cp-list { padding-bottom: 0.25rem; }
.prow { display: grid; grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr) auto auto; gap: 0 0.25rem; align-items: center;
  padding: 0.1875rem 1rem 0.1875rem 0.5rem; cursor: pointer; min-height: 1.875rem; }
.prow .caret { visibility: hidden; color: var(--accent-2); font-weight: 700; }
.prow.sel .caret { visibility: visible; }
.prow.sel .plabel { color: var(--accent-2); }
.prow .glyph { color: var(--muted); }
.prow.ok .glyph, .prow.status-connected .glyph { color: var(--ok); }
.prow.status-needs-auth .glyph { color: var(--warn); }
.prow.status-error .glyph { color: var(--danger); }
.prow .plabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; white-space: pre; }
.prow .pright { color: var(--muted); padding-left: 1.5rem; white-space: nowrap; }
.prow.status-needs-auth .pright { color: var(--warn); }
.prow.status-error .pright { color: var(--danger); }
.prow .mcp-actions { margin-left: 0.75rem; opacity: 0; transition: opacity .12s; }
.prow.sel .mcp-actions, .prow:hover .mcp-actions { opacity: 1; }
.prow .mcp-actions button.small { min-height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; font-family: var(--sans, inherit); }
.cmd-panel .mcp-err { padding: 0 1rem 0.25rem 3rem; }
.cmd-panel .mcp-tools, .cmd-panel .mcp-auth { margin: 0.25rem 1rem 0.375rem 3rem; border-radius: 0.5rem; }
.cp-foot { padding: 0.5rem 1rem 0.625rem; color: var(--muted); font-style: italic; border-top: 1px solid var(--border); }
@media (pointer: coarse) { .prow { min-height: 2.5rem; } .prow .mcp-actions { opacity: 1; } .cp-foot { display: none; } }
@media (min-width: 900px) and (min-height: 521px) {
  .slash-hint, .cmd-panel { width: min(100% - 2.5rem, 50rem); margin: 0 auto 0.5rem; }
}

/* ---------- profile (desktop sidebar footer) ---------- */
.profile { position: relative; flex: none; border-top: 1px solid var(--border); padding: 0.5rem; }
.profile-btn { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.375rem 0.5rem; min-height: 3rem;
  border: 0; border-radius: 0.75rem; background: transparent; text-align: left; color: var(--muted); }
.profile-btn:hover, .profile-btn[aria-expanded="true"] { background: var(--panel-2); color: var(--text); }
.profile-av { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 0.9375rem; }
.profile-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.profile-text b { color: var(--text); font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-text small { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu { position: absolute; left: 0.5rem; right: 0.5rem; bottom: calc(100% + 0.25rem); display: grid; padding: 0.375rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 0.875rem; box-shadow: 0 0.5rem 2rem rgb(0 0 0 / .25); z-index: 10; }
.profile-menu button { justify-content: flex-start; text-align: left; border: 0; background: transparent; min-height: 2.375rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-size: 0.875rem; }
.profile-menu button:hover { background: var(--panel-2); }
.profile-menu .danger-text { color: var(--danger); }
.tabs .tab-hidden { display: none !important; }
.profile-btn { position: relative; }
.profile-dot { position: absolute; left: 2.6rem; top: 0.45rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--panel); }
.profile-menu .setup-dot { margin-left: auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--danger); }

/* ---------- send button → hands-free voice button when the box is empty ---------- */
.send .i-voice { display: none; }
.send.voice .i-send { display: none; }
.send.voice .i-voice { display: block; }
.send.voice { background: var(--panel-2); color: var(--text); }
.send.voice:hover { background: color-mix(in srgb, var(--accent) 20%, var(--panel-2)); }
.send.voice.on { background: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 25%, transparent); }
.send.voice.on line { animation: vbar 0.9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.send.voice.on .b2 { animation-delay: -.2s; } .send.voice.on .b3 { animation-delay: -.45s; } .send.voice.on .b4 { animation-delay: -.65s; }
@keyframes vbar { 50% { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) { .send.voice.on line { animation: none; } }
/* status under the composer, only while hands-free is on */
.handsfree { justify-content: center; color: var(--accent); font-weight: 600; margin: 0; padding: 0.25rem 1rem 0.375rem; background: transparent; }

/* ---------- settings: section nav + rows ---------- */
.set-wrap { display: grid; grid-template-columns: 12.5rem minmax(0, 44rem); grid-template-rows: auto 1fr; column-gap: 2.5rem;
  justify-content: center; align-items: start; width: 100%; padding: 2rem 1.5rem 3rem; }
.set-title { grid-column: 1 / -1; padding: 0 0 1.25rem 0.25rem; }
.set-title h1 { margin: 0; font-size: 1.625rem; font-weight: 650; letter-spacing: -0.01em; }
.set-nav { display: flex; flex-direction: column; gap: 0.125rem; position: sticky; top: 0; }
.set-nav button { display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left; background: transparent; border: 0;
  min-height: 2.5rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; color: var(--muted); font-weight: 550; }
.set-nav button:hover { background: var(--panel-2); color: var(--text); }
.set-nav button[aria-current="true"] { background: var(--panel-2); color: var(--text); }
.set-nav .si { width: 1.25rem; text-align: center; font-size: 1rem; }
.set-nav .badge { margin-left: auto; }
.set-pane { display: grid; gap: 1rem; min-width: 0; }
.set-sec { display: grid; gap: 0.75rem; }
.set-sec[hidden] { display: none; }
.set-h { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 650; }
.set-sub { margin: 1rem 0 0; font-size: 0.9375rem; font-weight: 650; display: flex; align-items: baseline; gap: 0.5rem; }
.set-sub small { font-weight: 400; }
.danger-text { color: var(--danger); }
.set-group { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.set-group.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.5rem; padding: 0.875rem 1rem; color: var(--text); }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-row[hidden] { display: none; }
.set-row.stack { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.set-label { display: grid; gap: 0.125rem; min-width: 0; font-size: 0.9375rem; }
.set-label b { font-weight: 600; }
.set-label small { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.set-label small:empty { display: none; }
.set-label code { font-size: 0.75rem; background: var(--panel-2); padding: 0.0625rem 0.3125rem; border-radius: 0.3125rem; }
.set-ctl { width: 17rem; max-width: 100%; }
select.set-ctl, input.set-ctl { min-height: 2.375rem; padding: 0.4375rem 0.75rem; border-radius: 0.625rem; background: var(--panel-2); border-color: transparent; }
select.set-ctl:focus, input.set-ctl:focus, .set-key input:focus, .set-row textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; }
.set-row textarea { background: var(--panel-2); border-color: transparent; border-radius: 0.625rem; resize: vertical; min-height: 5.5rem; }
.set-range { display: flex; align-items: center; gap: 0.75rem; }
.set-range input { flex: 1; padding: 0; min-height: 1.5rem; border: 0; background: transparent; accent-color: var(--accent); }
.set-range output { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.875rem; }
.set-key { display: grid; gap: 0.5rem; }
.set-key input { min-height: 2.375rem; padding: 0.4375rem 0.75rem; border-radius: 0.625rem; background: var(--panel-2); border-color: transparent; }
.set-key .row { justify-content: flex-end; }
.set-key .row button { min-height: 2.125rem; padding: 0.25rem 0.875rem; white-space: nowrap; }
.set-link { font-size: 0.8125rem; justify-self: start; margin-top: 0.125rem; }
.set-label label { color: inherit; font-size: inherit; display: inline; }
.set-row > button { min-height: 2.25rem; padding: 0.375rem 1rem; white-space: nowrap; }
.set-row .persona-grid { margin-top: 0.375rem; }
.set-row .qr { justify-self: start; width: 11rem; padding: 0.5rem; margin-top: 0.375rem; }
.set-row #copyPhoneUrl { justify-self: start; }
.caps { margin: 0.25rem 0 0; background: var(--panel-2); padding: 0.625rem 0.75rem; border-radius: 0.625rem; color: var(--muted); }
.caps:empty { display: none; }
.set-saved { min-height: 1.25rem; padding-left: 0.25rem; }
.setup-section { display: grid; gap: 0.75rem; }
.setup-section[hidden] { display: none; }

/* phones / narrow: nav becomes a sticky, sideways-scrolling chip row; rows stack */
@media (max-width: 899px), (max-height: 520px) {
  .set-wrap { grid-template-columns: minmax(0, 1fr); padding: 0 1rem 2rem; }
  .set-title { padding: 1rem 0.25rem 0.5rem; }
  .set-title h1 { font-size: 1.375rem; }
  .set-nav { flex-direction: row; overflow-x: auto; gap: 0.375rem; margin: 0 -1rem 0.75rem; padding: 0.5rem 1rem; background: var(--bg); z-index: 2; scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav button { width: auto; flex: none; min-height: 2.25rem; padding: 0.375rem 0.875rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); }
  .set-nav button[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .set-nav .si { display: none; }
  .set-h { display: none; }
  .set-nav .badge { margin-left: 0.25rem; }
}
@media (max-width: 599px) {
  .set-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .set-ctl { width: 100%; }
  .set-row > button, .set-row .seg { justify-self: start; }
}

/* ---------- settings menu in the sidebar (desktop) ---------- */
.side-set { display: none; }
@media (min-width: 900px) and (min-height: 521px) {
  .app:has(#tab-settings:not([hidden])) :is(#newChat, .side > .tabs, .side > .sidebar) { display: none; }
  .app:has(#tab-settings:not([hidden])) .side-set { display: flex; }
  .side-set { flex-direction: column; gap: 0.125rem; padding: 0.25rem 0.5rem; flex: 1; min-height: 0; overflow-y: auto; }
  .side-set button { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.5rem; padding: 0.375rem 0.75rem; border: 0;
    border-radius: 0.625rem; background: transparent; color: var(--muted); font-weight: 600; text-align: left; }
  .side-set button:hover { background: var(--panel-2); color: var(--text); }
  .side-set button[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
  .side-set .si { font-size: 1.125rem; width: 1.5rem; text-align: center; flex: none; }
  .side-set .badge { margin-left: auto; }
  .side-set .set-back { color: var(--text); gap: 0.5rem; }
  .side-set .set-back svg { width: 1.5rem; flex: none; }
  .side-set-title { padding: 0.875rem 0.75rem 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
  /* the content side: no duplicate menu or page title, just the section */
  .set-wrap { grid-template-columns: minmax(0, 44rem); }
  .set-wrap > .set-nav, .set-title { display: none; }
}

/* voice-replies toggle sits with the composer's mic / hands-free buttons */
.composer .voice-toggle { font-size: 1.0625rem; line-height: 1; }
.composer .voice-toggle[aria-pressed="false"] { opacity: .6; }

/* ---------- projects ---------- */
.projects-tab { overflow-y: auto; }
.proj-wrap { width: min(100%, 64rem); margin: 0 auto; padding: 2rem 1.5rem 3rem; display: grid; gap: 1rem; align-content: start; }
.proj-wrap[hidden] { display: none; }
.proj-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.proj-head h1 { margin: 0; font-size: 1.625rem; font-weight: 650; letter-spacing: -0.01em; }
.proj-head .primary { min-height: 2.375rem; padding: 0.375rem 1rem; }
.proj-new { display: grid; gap: 0.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.proj-new[hidden] { display: none; }
.proj-new .row button { min-height: 2.25rem; padding: 0.25rem 1rem; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; }
.proj-card-btn { display: grid; gap: 0.375rem; align-content: start; text-align: left; min-height: 7.5rem; padding: 1rem 1.125rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.proj-card-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); }
.proj-card-btn b { font-size: 1rem; font-weight: 650; }
.proj-card-btn .pd { color: var(--muted); font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-card-btn small { color: var(--muted); font-size: 0.75rem; margin-top: auto; }
.proj-empty { text-align: center; padding: 3rem 1rem; max-width: 32rem; justify-self: center; }

.proj-back { justify-self: start; display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: 0; color: var(--muted); padding: 0.25rem 0.5rem 0.25rem 0.125rem; min-height: 2rem; font-weight: 550; }
.proj-back:hover { color: var(--text); }
.proj-title { display: grid; gap: 0.125rem; }
.proj-title input { background: transparent; border: 1px solid transparent; border-radius: 0.5rem; padding: 0.125rem 0.375rem; margin-left: -0.375rem; min-height: 0; }
.proj-title input:hover { border-color: var(--border); }
.proj-title input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--panel); }
.proj-name { font-size: 1.625rem; font-weight: 650; letter-spacing: -0.01em; }
.proj-desc { color: var(--muted); font-size: 0.9375rem; }
.proj-cols { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.proj-main { display: grid; gap: 0.75rem; min-width: 0; }
.proj-start { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: 0.9375rem; box-shadow: var(--shadow); }
.proj-start:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.proj-start span { font-size: 1.125rem; color: var(--accent); }
.proj-h { margin: 0.5rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.proj-chats { list-style: none; margin: 0; padding: 0; display: grid; }
.proj-chats li + li { border-top: 1px solid var(--border); }
.proj-chats button { display: grid; gap: 0.125rem; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0.625rem; padding: 0.75rem 0.75rem; min-height: 0; }
.proj-chats button:hover, .proj-chats li.current button { background: var(--panel-2); }
.proj-chats b { font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-chats small { color: var(--muted); font-size: 0.75rem; }
.proj-none { padding: 0.75rem; font-size: 0.875rem; }
.proj-side { display: grid; gap: 0.75rem; }
.proj-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem; display: grid; gap: 0.5rem; }
.proj-card.dragging { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.proj-card-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.proj-card h3 { margin: 0; font-size: 0.9375rem; font-weight: 650; }
.proj-card button.small { min-height: 2rem; padding: 0.125rem 0.75rem; font-size: 0.8125rem; }
.proj-card textarea { background: var(--panel-2); border-color: transparent; border-radius: 0.625rem; resize: vertical; min-height: 5rem; font-size: 0.875rem; }
.proj-card textarea:focus, .proj-card input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.proj-card input { background: var(--panel-2); border-color: transparent; border-radius: 0.625rem; min-height: 2.25rem; padding: 0.375rem 0.625rem; font-size: 0.875rem; }
.proj-files, .proj-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.proj-files li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.proj-files .fname { background: transparent; border: 0; padding: 0; min-height: 0; text-align: left; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.proj-files .fname:hover { text-decoration: underline; }
.proj-files small { color: var(--muted); font-size: 0.75rem; }
.proj-files .del, .proj-facts .del { background: transparent; border: 0; min-height: 1.75rem; min-width: 1.75rem; padding: 0 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.proj-files .del.confirm { color: var(--danger); font-weight: 600; }
.proj-drop { font-size: 0.75rem; }
.proj-files:empty + .proj-drop { padding: 0.875rem; border: 1px dashed var(--border); border-radius: 0.625rem; text-align: center; }
.proj-folder, .proj-fact-add { display: flex; gap: 0.5rem; }
.proj-folder input, .proj-fact-add input { flex: 1; min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 0.8125rem; }
.proj-fact-add input { font-family: inherit; }
.proj-facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.5rem; font-size: 0.875rem; padding: 0.375rem 0; }
.proj-facts li + li { border-top: 1px solid var(--border); }
.proj-delete { justify-self: start; min-height: 2.25rem; padding: 0.25rem 1rem; font-size: 0.875rem; }
/* chat bar: which project this chat belongs to */
.proj-chip { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; max-width: 40%; min-height: 1.875rem; padding: 0.125rem 0.625rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.proj-chip[hidden] { display: none; }
.proj-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
@media (max-width: 899px), (max-height: 520px) {
  .proj-wrap { padding: 1rem 1rem 2rem; }
  .proj-cols { grid-template-columns: minmax(0, 1fr); }
  .proj-head h1, .proj-name { font-size: 1.375rem; }
}

/* ===== Phones (and short landscape): the same full sidebar, sliding in from the left; slim top bar with ☰ ===== */
.m-top { display: none; }
@media (max-width: 899px), (max-height: 520px) {
  .app { max-width: none; }
  .m-top { display: flex; align-items: center; gap: 0.25rem; flex: none; min-height: 3.25rem;
    padding: calc(0.25rem + env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) 0.25rem max(0.5rem, env(safe-area-inset-left));
    background: var(--bg); border-bottom: 1px solid var(--border); }
  .m-top .icon-btn { min-height: 2.5rem; min-width: 2.5rem; padding: 0; border: 0; background: transparent; font-size: 1.25rem; display: grid; place-items: center; color: var(--text); border-radius: 0.75rem; }
  .m-top .icon-btn:active { background: var(--panel-2); }
  .m-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.375rem; border: 0; background: transparent; min-height: 2.5rem; padding: 0 0.375rem;
    font-weight: 600; font-size: 1rem; color: var(--text); text-align: left; }
  .m-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-title .m-proj { color: var(--muted); font-weight: 500; flex: none; max-width: 45%; }
  .chat-bar { display: none; }               /* its title + project chip live in the top bar on phones */

  .side { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(19rem, 86vw); display: flex; flex-direction: column; min-height: 0;
    background: var(--panel); border-right: 1px solid var(--border); box-shadow: 0 0 2rem rgb(0 0 0 / .28);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
    transform: translateX(-104%); visibility: hidden; transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility .24s; }
  .app.drawer-open .side { transform: none; visibility: visible; }
  .scrim { position: fixed; z-index: 29; }
  /* sidebar contents: same look as the desktop sidebar */
  .side .top { background: transparent; border: 0; padding: 0.875rem 0.75rem 0.5rem 1rem; }
  .side .top .icon-btn { min-height: 2.25rem; min-width: 2.25rem; padding: 0.25rem; border-color: transparent; }
  .side .side-new, .side .tabs button { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; justify-content: flex-start; width: 100%;
    min-height: 2.75rem; padding: 0.375rem 0.75rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--muted); font-weight: 600; font-size: 1rem; text-align: left; }
  .side .side-new { width: auto; margin: 0.25rem 0.5rem 0; color: var(--text); background: var(--panel-2); }
  .side .tabs { order: 0; flex-direction: column; flex: none; gap: 0.125rem; padding: 0.375rem 0.5rem; background: transparent; border: 0; }
  .side .tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
  .side .tabs button .ti { width: 1.5rem; padding: 0; background: none !important; }
  .side .tabs .badge { position: static; margin-left: auto; }
  .side .sidebar { position: static; transform: none; visibility: visible; box-shadow: none; width: auto; flex: 1; min-height: 0; border: 0; background: transparent; margin-top: 0.5rem; }
  .side .sidebar-head { border: 0; padding: 0.5rem 1.25rem 0.25rem; }
  .side .sidebar-head strong { font-size: 0.8125rem; color: var(--muted); }
  .side .session-list { padding: 0 0.5rem 0.75rem; }
  .side .session-list .open { min-height: 2.75rem; padding: 0.375rem 0.75rem; }
  /* no bottom bar any more: the composer owns the bottom safe area */
  .composer { margin-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* ---------- actions under a reply: copy · 👍 · 👎 · read aloud · try again ---------- */
.msg-actions { align-self: flex-start; display: flex; gap: 0.125rem; margin: -0.375rem 0 0.25rem 0.25rem; transition: opacity .15s; }
.msg-actions .ma { display: grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; border: 0; border-radius: 0.5rem;
  background: transparent; color: var(--muted); }
.msg-actions .ma:hover { background: var(--panel-2); color: var(--text); }
.msg-actions .ma[aria-pressed="true"] { color: var(--accent); }
.msg-actions .ma[aria-pressed="true"] svg path { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.msg-actions .ma.done { color: var(--ok, #22a06b); }
.msg-actions .ma.say.on { color: var(--accent); animation: pulse 1.2s infinite; }
.msg-actions .retry { display: none; }
.msg-actions.latest .retry { display: grid; }
#log.busy .msg-actions .retry { display: none; }
/* mouse: older replies show their actions on hover; the latest always shows them. Touch: always visible. */
@media (pointer: fine) {
  .msg-actions:not(.latest) { opacity: 0; }
  .msg.assistant:hover + .msg-actions, .msg-actions:hover, .msg-actions:focus-within { opacity: 1; }
}

/* ---------- friendly error card ---------- */
.err-card { align-self: stretch; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; max-width: min(92%, 40rem); align-self: flex-start;
  padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 6%, var(--panel)); }
.err-icon { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.err-body { display: grid; gap: 0.375rem; min-width: 0; }
.err-body b { font-size: 0.9375rem; }
.err-body p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.err-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.err-actions button { min-height: 2.125rem; padding: 0.25rem 0.875rem; font-size: 0.875rem; }
.err-actions button:disabled { opacity: .6; cursor: default; }
.err-detail summary { cursor: pointer; color: var(--muted); font-size: 0.8125rem; width: max-content; }
.err-detail pre { margin: 0.375rem 0; max-height: 10rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 0.75rem/1.4 var(--mono, ui-monospace, monospace);
  background: var(--panel-2); padding: 0.5rem 0.625rem; border-radius: 0.5rem; color: var(--muted); }
.err-copy { min-height: 1.875rem; padding: 0.125rem 0.625rem; font-size: 0.75rem; }

/* ---------- sidebar: Projects (above Chats) — each project expands to its chats ---------- */
#sidebar { overflow-y: auto; }
#sidebar .session-list { flex: none; overflow: visible; }
.proj-head { padding-right: 0.75rem !important; }
.proj-head .head-link { background: transparent; border: 0; padding: 0; min-height: 0; color: inherit; }
.proj-head .head-link:hover strong { color: var(--text); }
.proj-head .head-add { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 0; border-radius: 0.5rem;
  background: transparent; color: var(--muted); font-size: 1rem; }
.proj-head .head-add:hover { background: var(--panel-2); color: var(--text); }
.proj-side { padding-bottom: 0.25rem !important; }
.proj-side > li { flex-wrap: wrap; }
.proj-side .tog { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; margin-left: 0.25rem;
  background: transparent; border: 0; border-radius: 0.5rem; color: var(--muted); }
.proj-side .tog:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.proj-side .tog[aria-expanded="true"] { color: var(--accent); }
.proj-side > li > .open { padding-left: 0.25rem !important; }
.proj-side > li > .rename { flex: 1; min-width: 0; }
.proj-side .side-chats { flex-basis: 100%; list-style: none; margin: 0 0 0.25rem 1.25rem; padding: 0 0 0 0.5rem; border-left: 1px solid var(--border); }
.proj-side .side-chats li { display: flex; align-items: center; border-radius: 0.625rem; }
.proj-side .side-chats li.current { background: var(--panel-2); }
.proj-side .side-chats li:hover { background: var(--panel-2); }
.proj-side .side-chats .open { min-height: 2.25rem !important; }
.proj-side .side-chats .open b { font-weight: 500; }
.proj-side .side-chats li:hover .more, .proj-side .side-chats li.current .more { opacity: 1; }
.proj-side .proj-add .open, .proj-side .proj-empty .open { display: flex !important; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; }
.proj-side .proj-add .open:hover, .proj-side .proj-empty .open:hover { color: var(--text); }
.proj-side .proj-add svg { width: 15px; height: 15px; }
.proj-side .proj-empty .pi { display: grid; place-items: center; width: 1.5rem; }
.proj-side .proj-empty b { font-weight: 500 !important; }
.proj-side .proj-new { padding: 0.125rem 0.25rem; }
.proj-side .proj-new .rename { flex: 1; }
.proj-side > li.proj-row:hover > .more, .proj-side > li.proj-row.menu-open > .more { opacity: 1; }
.proj-side > li.proj-row:has(.side-chats):hover { background: transparent; }
.proj-side > li.proj-row:has(.side-chats) > .open:hover { background: var(--panel-2); border-radius: 0.625rem; }
.proj-side > li.proj-row:hover .proj-chats li:not(:hover):not(.current):not(.menu-open) .more { opacity: 0; }
/* mouse: the ⋯ button takes no room until the row is hovered, so titles get the full width */
@media (pointer: fine) {
  .session-list li:not(:hover):not(.current):not(.menu-open) > .more:not(:focus-visible) { width: 0; margin: 0; overflow: hidden; }
  .proj-side > li.proj-row:hover .side-chats li:not(:hover):not(.current):not(.menu-open) > .more { width: 0; margin: 0; overflow: hidden; }
}

/* Sidebar section headings: "Projects ›" / "Recents ›" — fold on click, ⋯ and + on hover */
#sidebar .side-sec { display: flex; align-items: center; gap: 0.25rem; margin: 0.5rem 0.5rem 0; padding: 0 0.25rem 0 0; min-height: 2.25rem; border-radius: 0.5rem; }
#sidebar .side-sec + ul { margin-bottom: 0.25rem; }
#sidebar .sec-toggle { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2rem; padding: 0.25rem 0.75rem; background: transparent; border: 0;
  color: var(--muted); font-size: 0.875rem; font-weight: 500; }
#sidebar .sec-toggle:hover { color: var(--text); background: transparent; }
#sidebar .sec-toggle svg { transition: transform .15s; opacity: .8; }
#sidebar .sec-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
#sidebar .sec-acts { margin-left: auto; display: flex; gap: 0.125rem; opacity: 0; transition: opacity .12s; }
#sidebar .side-sec:hover .sec-acts, #sidebar .side-sec:focus-within .sec-acts, #sidebar .sec-btn[aria-expanded="true"] { opacity: 1; }
@media (pointer: coarse) { #sidebar .sec-acts { opacity: 1; } }
#sidebar .sec-btn { display: grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0.5rem; color: var(--muted); }
#sidebar .sec-btn:hover { background: var(--panel-2); color: var(--text); }
#sidebar .proj-side > li.proj-row > .tog { color: var(--muted); }

/* sidebar chats: title only, one line */
#sidebar li[data-id] > .open { min-height: 2.25rem !important; padding-block: 0.375rem !important; align-content: center; }

/* line icons in the sidebar tabs (match the composer's mic / hands-free icons) */
.tabs .ti { display: inline-grid; place-items: center; color: var(--muted); }
.tabs .ti svg { display: block; }
.tabs button[aria-selected="true"] .ti, .tabs button:hover .ti { color: var(--text); }

/* ---------- confirmation box ---------- */
.confirm-box { width: min(25rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--border); border-radius: 1rem; background: var(--panel); color: var(--text);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .25); animation: cbIn .14s ease-out; }
.confirm-box::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); animation: cbFade .14s ease-out; }
@keyframes cbIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes cbFade { from { opacity: 0; } }
.confirm-box form { padding: 1.25rem 1.25rem 1rem; }
.confirm-box h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.confirm-box p { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.confirm-box .cb-acts { display: flex; justify-content: flex-end; gap: 0.5rem; }
.confirm-box .cb-acts button { min-height: 2.5rem; padding: 0.5rem 1rem; border-radius: 0.625rem; font-weight: 600; font-size: 0.9375rem; }
.confirm-box .cb-cancel { background: transparent; border: 1px solid var(--border); }
.confirm-box .cb-cancel:hover { background: var(--panel-2); }
.confirm-box .cb-ok { background: var(--accent); color: var(--accent-text); border: 0; }
.confirm-box .cb-ok.danger { background: var(--danger); color: #fff; }
.confirm-box .cb-ok:hover { filter: brightness(1.08); }

/* The website (Cloudflare) vs the local app: each hides what doesn't apply to it. */
html[data-mode="cloud"] .local-only { display: none !important; }
html:not([data-mode="cloud"]) .cloud-only { display: none !important; }
/* On the website, the Screen tab appears while the user's PC is connected. */
html[data-mode="cloud"]:not([data-pc="on"]) .pc-only { display: none !important; }
.pair-code { font: 600 1.9rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-align: center; padding: 0.5rem 0; user-select: all; }
.link-pair { display: flex; gap: 0.5rem; }
.link-pair input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.link-site summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }
.link-site input { width: 100%; margin-top: 0.4rem; }
.pc-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); margin-right: 0.35rem; vertical-align: middle; }
.pc-dot.on { background: #2fbf71; }