:root {
  color-scheme: light;
  --brand-blue: #036EEF; --brand-cyan: #0A9DFB; --brand-light-blue: #67C6F8;
  --logo-bg: #020106; --logo-radius: 20px;
  --ink: #071525; --muted: #4A6075; --line: #B9D9EF;
  --paper: #F4FAFF; --surface: #FFFFFF; --sidebar: #E8F4FC; --wash: #E8F4FC;
  --input: #F7FBFF; --primary: #0067C7; --highlight: #008FE8; --accent: #0067C7; --on-accent: #FFFFFF;
  --accent-soft: #E8F4FC; --border-subtle: rgb(0 103 199 / 12%);
  --error: #ad3949; --error-bg: #fff0f2;
  --warning: #745821; --warning-bg: #fff9ed; --warning-border: #e3d3ae;
  --success: #39846c; --focus: #0067C7; --overlay: #07152566;
  --shadow: 0 8px 30px rgb(20 80 120 / 8%);
  --glow-a: rgb(98 199 255 / 18%); --glow-b: rgb(232 244 252 / 30%);
  --action-shadow: 0 8px 24px rgb(0 103 199 / 18%);
  /* Shade the bright gradient endpoint enough for white button labels. */
  --action-bg: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--highlight), #000 24%));
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #EAF6FF; --muted: #9FCDEE; --line: #0B4E8D;
  --paper: #03070D; --surface: #062653; --sidebar: #001834; --wash: #041B38;
  --input: #041B38; --primary: #036EEF; --highlight: #0A9DFB; --accent: #0A9DFB; --on-accent: #FFFFFF;
  --accent-soft: #041B38; --border-subtle: rgb(103 198 248 / 16%);
  --error: #ffa4af; --error-bg: #38222c;
  --warning: #ead09a; --warning-bg: #2b281f; --warning-border: #5c5036;
  --success: #85cbb1; --focus: #67C6F8; --overlay: #03070Daa;
  --shadow: 0 10px 30px rgb(0 0 0 / 30%);
  --glow-a: rgb(0 157 255 / 12%); --glow-b: rgb(0 24 52 / 4%);
  --action-shadow: 0 0 20px rgb(10 157 251 / 20%), 0 0 45px rgb(0 157 255 / 8%);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }
button, input, select { min-height: 44px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { outline-color: var(--focus); color: var(--ink); accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:autofill { box-shadow: 0 0 0 100px var(--input) inset; -webkit-text-fill-color: var(--ink); }
a { color: var(--accent); overflow-wrap: anywhere; }
.eyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 700; color: var(--muted); }
.primary { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 10px; background: var(--action-bg); color: var(--on-accent); margin-top: 22px; font-weight: 600; line-height: 1.5; box-shadow: var(--action-shadow); }
.primary, .send, .new-chat, .approval .accept { transition: transform 160ms ease, box-shadow 160ms ease; }
.primary:hover, .send:hover, .new-chat:hover, .approval .accept:hover { transform: translateY(-1px); box-shadow: var(--action-shadow); }
.subtle { font-size: 12px; padding: 8px 10px; border-radius: 8px; }
.icon-button { font-size: 22px; min-width: 44px; border-radius: 9px; }
.icon-button:hover, .subtle:hover { background: var(--wash); }
.error-text { color: var(--error) !important; min-height: 22px; }
.field-help { font-size: 12px; line-height: 1.6; color: var(--muted); }
.check-label { display: flex !important; align-items: center; gap: 10px; line-height: 1.5; }
.check-label input { width: 20px !important; min-height: 24px; flex-shrink: 0; }
.settings-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.settings-icon:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.settings-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.product-logo { display: grid; place-items: center; flex-shrink: 0; aspect-ratio: 1; background: var(--logo-bg); border-radius: var(--logo-radius); overflow: hidden; }
.product-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-logo--header { width: 50px; height: 50px; }
.splash-screen { display: none; position: fixed; inset: 0; z-index: 9999; place-items: center; background: radial-gradient(circle at center, var(--glow-a), transparent 65%), var(--paper); }
:root[data-starting] .splash-screen { display: grid; }
:root[data-starting] body { overflow: hidden; }
:root[data-starting] body > :not(#splash) { visibility: hidden; }
.splash-logo { width: min(461px, calc(100vw - 48px), calc(100dvh - 48px)); }
.splash-error { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 32px)); padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: center; }
.splash-error p { margin: 0; line-height: 1.5; }
.splash-error .primary { margin-top: 12px; }
@media(max-width: 600px) { .splash-logo { width: min(60vw, 300px, calc(100dvh - 48px)); } }
/* A neutral entrance, with the same palette as the signed-in workspace. */
.login-shell { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 100px 24px 64px; background: radial-gradient(ellipse at 12% 15%, var(--glow-a), transparent 50%), radial-gradient(ellipse at 90% 90%, var(--glow-b), transparent 50%), var(--paper); }
.login-appearance { position: absolute; right: max(24px, env(safe-area-inset-right)); top: max(24px, env(safe-area-inset-top)); }
.login-card { max-width: 440px; width: 100%; padding: 38px; border: 1px solid var(--border-subtle); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.login-mark { width: 50px; height: 50px; margin-bottom: 30px; }
.login-mark img { display: block; width: 100%; height: 100%; }
.login-card .eyebrow { font-size: 10px; letter-spacing: 2px; }
.login-card h1 { font-size: 38px; line-height: 1.15; letter-spacing: -1.4px; font-weight: 600; margin: 10px 0 14px; }
.login-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; font-size: 14px; }
.login-card label { display: block; font-size: 13px; margin: 25px 0 9px; font-weight: 600; }
.login-card input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--input); }
.login-card .check-label { font-size: 12px; margin-top: 12px; color: var(--muted); font-weight: 400; }
.login-card small { display: block; color: var(--muted); line-height: 1.5; margin-top: 26px; font-size: 11px; text-align: center; letter-spacing: .4px; }
#login-error:empty { display: none; }
/* Workspace */
.workspace { height: 100dvh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { padding: 25px 18px 12px; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 18px; letter-spacing: -.5px; }
.project-picker { position: relative; margin: 10px 0 14px; flex-shrink: 0; min-width: 0; }
.project-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 5px 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.project-selected { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.project-selected > span, .project-selected > small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-selected > span { font-size: 13px; font-weight: 600; }
.project-selected > small { font-size: 10px; color: var(--muted); }
.project-toggle-hand { flex: 0 0 25px; width: 25px; height: 25px; color: #000; fill: currentColor; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.project-toggle[aria-expanded="true"] .project-toggle-hand, .project-toggle:active .project-toggle-hand { color: #929292; }
.project-folder-icon { display: inline-block; position: relative; flex: 0 0 17px; width: 17px; height: 12px; border: 1.5px solid #b08a31; border-radius: 2px; background: #fff0b5; }
.project-folder-icon::before { content: ''; position: absolute; width: 8px; height: 4px; left: -1.5px; top: -4px; border: 1.5px solid #b08a31; border-bottom: 0; border-radius: 2px 2px 0 0; background: #fff0b5; }
:root[data-theme="dark"] .project-folder-icon, :root[data-theme="dark"] .project-folder-icon::before { background: #594923; border-color: #d1af60; }
.project-popup { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 30; max-height: min(440px, calc(100dvh - 200px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 35px #0003; overflow: hidden; }
.project-tree-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 12px; flex-shrink: 0; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
.project-tree, .project-tree-group { list-style: none; padding: 0; margin: 0; min-width: 0; }
.project-tree { overflow: auto; padding: 5px; overscroll-behavior: contain; }
.project-tree-group { margin-left: 13px; border-left: 1px solid var(--line); }
.project-tree-item { outline: none; min-width: 0; }
.project-tree-row { display: flex; align-items: center; min-width: 0; border-radius: 6px; }
.project-tree-row:hover { background: var(--wash); }
.project-tree-item[aria-selected="true"] > .project-tree-row { background: var(--accent-soft); color: var(--accent); }
.project-tree-item:focus-visible > .project-tree-row { box-shadow: inset 0 0 0 2px var(--focus); }
.project-branch-toggle { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 44px; padding: 0; color: var(--muted); }
.project-branch-symbol { position: relative; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; }
.project-branch-symbol::before, .project-branch-symbol::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.project-branch-symbol::after { width: 1.5px; height: 8px; }
.project-tree-item[aria-expanded="true"] > .project-tree-row .project-branch-symbol::after { display: none; }
.project-branch-toggle.project-leaf { visibility: hidden; }
.project-folder-select { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 5px 6px 0; text-align: left; font-size: 12px; }
.project-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-folder-check { flex-shrink: 0; margin-left: auto; }
.project-tree-note, .project-tree-error { padding: 8px; font-size: 11px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.project-tree-error { color: var(--error); margin: 0; flex-shrink: 0; }
.project-tree-error:empty { display: none; }
.conversation-actions { display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; }
.new-chat, .new-project { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; background: var(--action-bg); color: var(--on-accent); border-radius: 10px; }
.new-chat svg, .new-project svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.new-project { background: #fff4cb; color: #80600e; border: 1px solid #dfc56d; }
:root[data-theme="dark"] .new-project { background: #39321e; color: #efd27c; border-color: #796732; }
.new-project:hover { filter: brightness(.95); }
.agents-open { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 7px; border: 1px solid var(--error); border-radius: 9px; background: var(--error-bg); color: var(--error); }
.agents-open svg { width: 28px; height: 28px; }
.agents-pencil { fill: #edc75a; stroke: var(--error-bg); stroke-width: 2; stroke-linejoin: round; }
.agents-pencil-detail { fill: none; stroke: #80600e; stroke-width: 1.2; stroke-linecap: round; }
.agents-open:hover { filter: brightness(.95); }
.history-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 17px 2px 4px; }
.sidebar nav { overflow: auto; flex: 1; min-height: 0; }
.thread-row { position: relative; margin-bottom: 4px; }
.thread { display: block; width: 100%; text-align: left; padding: 12px 48px 12px 12px; border-radius: 9px; line-height: 1.4; }
.thread-settings { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.thread strong { font-size: 13px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
.thread:hover { background: var(--wash); }
.thread.active { background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.history-empty { font-size: 12px; color: var(--muted); padding: 10px; line-height: 1.6; }
.sidebar-footer { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }
.dot { width: 6px; height: 6px; display: inline-block; background: var(--success); border-radius: 100%; margin-right: 7px; }
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { padding: 20px 32px 14px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.topbar-heading { display: flex; gap: 12px; align-items: center; min-width: 0; }
.topbar-heading > div { min-width: 0; }
.topbar .eyebrow { margin: 0 0 5px; }
.topbar h2 { margin: 0; font-size: 15px; letter-spacing: -.3px; font-weight: 550; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connection { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.usage-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.usage-window { min-width: 0; --quota-color: var(--accent); }
.usage-window[data-level="warning"] { --quota-color: var(--warning); }
.usage-window[data-level="low"] { --quota-color: var(--error); }
.usage-window[data-level="unknown"] { --quota-color: var(--muted); }
.usage-heading { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); }
.usage-heading strong { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--quota-color); }
.usage-window:last-child { text-align: right; }
.usage-window:last-child .usage-heading { justify-content: flex-end; }
.usage-window progress { appearance: none; width: 54px; height: 4px; border: 0; border-radius: 5px; overflow: hidden; background: var(--line); color: var(--quota-color); }
.usage-window progress::-webkit-progress-bar { background: var(--line); border-radius: 5px; }
.usage-window progress::-webkit-progress-value { background: var(--quota-color); border-radius: 5px; }
.usage-window progress::-moz-progress-bar { background: var(--quota-color); border-radius: 5px; }
.usage-reset { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.usage-status { color: var(--muted); font-size: 10px; margin: -10px 0 0; text-align: center; }
.conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px max(24px, calc((100% - 760px)/2)); scrollbar-gutter: stable; }
.conversation-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 180px; margin: 4vh auto 0; color: var(--muted); font-size: 13px; }
.loading-spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
#composer[inert] { opacity: .6; }
.welcome { max-width: 580px; margin: 7vh auto 0; padding-bottom: 30px; }
.welcome-mark { width: 48px; height: 48px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 15px; font-size: 26px; margin-bottom: 27px; }
.welcome h1 { font-size: clamp(35px, 4vw, 55px); letter-spacing: -2px; font-weight: 500; line-height: 1.1; margin: 17px 0; }
.welcome > p:not(.eyebrow) { font-size: 15px; color: var(--muted); line-height: 1.65; }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.suggestions button { border: 1px solid var(--line); border-radius: 11px; padding: 15px; text-align: left; display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 12px; background: var(--surface); }
.suggestions button:hover { background: var(--wash); }
.message { margin: 0 0 25px; line-height: 1.65; overflow-wrap: anywhere; }
.message-label { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px; font-weight: 650; }
.message-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 7px; }
.message-heading .message-label { margin-bottom: 0; }
.message-time { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.message.user { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 16px; padding: 14px 19px; margin-left: 35px; }
.message.answer { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px 18px; }
.message .text { white-space: pre-wrap; }
.message.commentary { font-size: 13px; color: var(--muted); }
.message pre { white-space: pre-wrap; font-size: 12px; line-height: 1.6; background: var(--wash); padding: 13px; border-radius: 10px; overflow-wrap: anywhere; max-height: 400px; overflow: auto; }
.message details { font-size: 12px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; }
.message summary { cursor: pointer; padding: 6px 0; }
.approval { border: 1px solid var(--warning-border); background: var(--warning-bg); border-radius: 14px; padding: 18px; margin: 20px 0; }
.approval h3 { font-size: 15px; margin: 0 0 10px; color: var(--warning); }
.approval p { font-size: 13px; line-height: 1.6; }
.approval pre { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--wash); padding: 12px; border-radius: 8px; max-height: 300px; overflow: auto; }
.approval .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.approval .accept { background: var(--action-bg); color: var(--on-accent); border-radius: 10px; padding: 10px 15px; }
.approval .decline { border: 1px solid var(--warning-border); border-radius: 8px; padding: 10px 15px; }
.approval label { display: block; font-size: 13px; line-height: 1.5; margin-top: 15px; }
.approval input, .approval select { width: 100%; margin-top: 8px; border-radius: 8px; border: 1px solid var(--warning-border); padding: 9px; background: var(--input); }
.working { font-size: 12px; color: var(--muted); padding: 0 0 12px; }
.working .dot { animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.composer-area { padding: 12px max(24px, calc((100% - 760px)/2)) max(12px, env(safe-area-inset-bottom)); background: var(--paper); }
#composer { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 13px 15px 9px; }
#message { resize: none; max-height: 180px; min-height: 36px; width: 100%; border: 0; background: transparent; padding: 4px; line-height: 1.5; color: var(--ink); }
#message:focus { outline: none; }
#composer:focus-within { border-color: var(--focus); }
.composer-actions { display: flex; align-items: center; gap: 8px; }
.composer-actions > span { font-size: 10px; color: var(--muted); margin-right: auto; }
#stop { flex-shrink: 0; white-space: nowrap; color: var(--error); background: var(--error-bg); border: 1px solid var(--error); border-radius: 8px; padding: 6px 10px; }
#stop:hover { filter: brightness(.95); }
.send { background: var(--action-bg); color: var(--on-accent); min-width: 44px; min-height: 44px; font-size: 24px; border-radius: 10px; }
.footnote { font-size: 10px; text-align: center; color: var(--muted); margin: 10px 0 0; }
.banner { display: flex; align-items: center; justify-content: space-between; background: var(--error-bg); color: var(--error); font-size: 13px; line-height: 1.5; padding: 6px 20px; }
.mobile { display: none; }
.shade { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 19; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* Security, shared by password and authenticator settings. */
#project-dialog { width: min(420px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; padding: 24px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
#project-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
#project-form label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 600; }
#project-folder-name { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--input); }
#project-folder-path { overflow-wrap: anywhere; }
#project-error:empty { display: none; }
#security-dialog, #notifications-dialog { width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; padding: 26px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
#security-dialog::backdrop, #notifications-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.security-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.security-heading h2 { font-size: 24px; margin: 0; letter-spacing: -.5px; }
#security-dialog p { line-height: 1.6; font-size: 14px; }
.security-intro { color: var(--muted); margin: 6px 0 20px; }
.security-tabs { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 22px; }
.security-tabs button { flex: 1; border-radius: 8px; font-size: 13px; color: var(--muted); }
.security-tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
#security-dialog .field-help { font-size: 12px; }
#security-dialog label { display: block; font-size: 13px; font-weight: 600; margin: 20px 0 8px; }
#security-dialog input:not([type=checkbox]), #security-dialog textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--ink); }
#security-dialog h3 { font-size: 17px; margin: 20px 0 8px; }
#security-error:not(:empty) { padding: 12px; border-radius: 10px; background: var(--error-bg); }
#security-dialog .error-text:empty, #security-notice:empty { display: none; }
#security-notice:not(:empty) { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
#totp-qr { display: block; width: min(280px, 100%); height: auto; margin: 20px auto; border-radius: 8px; image-rendering: pixelated; }
#totp-secret, #totp-recovery-codes { font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: .5px; }
#totp-open-app { display: block; font-size: 13px; margin: 12px 0; line-height: 1.5; }
#totp-cancel { margin-top: 12px; }
.danger { display: block; border: 1px solid var(--error); color: var(--error); border-radius: 10px; padding: 12px; width: 100%; margin: 20px 0 8px; }
.danger:hover { background: var(--error-bg); }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#totp-recovery-codes { resize: none; line-height: 1.8; }
@media(max-width: 760px) {
  .shade { display: block; }
  .workspace { display: block; }
  main { height: 100dvh; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 87vw); z-index: 20; transform: translateX(-100%); transition: transform .2s; padding-top: max(22px, env(safe-area-inset-top)); }
  .sidebar.open { transform: translateX(0); }
  .mobile { display: block; }
  #close-menu { margin-left: auto; }
  .topbar { padding: 12px 14px; gap: 13px; padding-top: max(12px, env(safe-area-inset-top)); }
  .usage-heading { gap: 6px; }
  .usage-window progress { width: 30px; }
  .topbar h2 { font-size: 14px; }
  .connection { font-size: 10px; }
  .conversation { padding: 24px 20px; }
  .welcome { margin-top: 5vh; }
  .welcome h1 { font-size: 41px; }
  .welcome .eyebrow { font-size: 9px; }
  .welcome-mark { margin-bottom: 25px; }
  .suggestions { grid-template-columns: 1fr; margin-top: 25px; gap: 8px; }
  .composer-area { padding-left: 12px; padding-right: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .footnote { font-size: 9px; }
  .message.user { margin-left: 14px; }
  input, select, textarea { font-size: 16px; }
  .login-shell { padding: 96px 18px 38px; }
  .login-appearance { top: max(20px, env(safe-area-inset-top)); right: 18px; }
  .login-card { padding: 30px 25px; border-radius: 22px; }
  #security-dialog { padding: 20px; }
  #security-dialog input:not([type=checkbox]) { font-size: 16px; }
  #security-dialog #totp-secret { font-size: 13px; }
}
@media(max-height: 640px) and (max-width: 760px) {
  .sidebar { overflow-y: auto; }
  .sidebar nav { min-height: 90px; }
  .brand { margin-bottom: 14px; }
}
@media(prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* Sessions and security events */
.security-tabs button{min-width:0;padding:6px 8px}
.security-section-heading,.session-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#security-dialog .security-section-heading h3{margin:8px 0}
.session-list{display:grid;gap:12px;margin:18px 0}
.session-card{border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--paper)}
.session-heading{flex-wrap:wrap;font-size:13px}.session-current{font-size:10px;font-weight:600;border-radius:6px;padding:5px 7px;background:var(--accent-soft);color:var(--accent)}
.session-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 12px;font-size:12px;line-height:1.5;margin:16px 0 8px}
.session-details dt{color:var(--muted)}.session-details dd{margin:0;overflow-wrap:anywhere}
.session-revoke{color:var(--error);margin-top:4px}.session-card .field-help{margin-bottom:4px}
#security-dialog select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--input);color:var(--ink)}
#session-policy-form{margin-top:28px;padding-top:8px;border-top:1px solid var(--line)}
.security-log{list-style:none;padding:0;margin:20px 0}
.security-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 8px}
.security-pagination span{font-size:12px;color:var(--muted);text-align:center}
.security-pagination button{min-height:44px}
.audit-event{padding:15px 0;border-bottom:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}
.audit-event:first-child{border-top:1px solid var(--line)}.audit-event strong{display:block;line-height:1.5}.audit-event time{display:block;font-size:11px;color:var(--muted);margin-top:5px}
#security-dialog .audit-event p{font-size:12px;margin:7px 0 0}
@media(max-width:460px){.security-tabs{display:grid;grid-template-columns:1fr 1fr}.session-details{grid-template-columns:1fr}.session-details dd{margin-top:-5px;margin-bottom:5px}.security-section-heading{gap:6px}#security-dialog .security-section-heading h3{font-size:16px}}
#notifications-dialog p { font-size: 14px; line-height: 1.6; }
#notifications-dialog .field-help { font-size: 12px; }
#notifications-dialog h3 { font-size: 16px; }
#notifications-dialog .security-heading h2 { font-size: clamp(19px, 5vw, 24px); overflow-wrap: anywhere; }
#notifications-error:empty, #notifications-status:empty { display: none; }
#notifications-error:not(:empty) { padding: 12px; border-radius: 10px; background: var(--error-bg); }
.notification-setting { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.notification-setting h3 { margin-top: 0; }
#notifications-state { color: var(--accent); font-weight: 600; }
@media(max-width:460px) { #notifications-dialog { padding: 18px; } #notifications-dialog .security-section-heading { flex-wrap: wrap; } }
#agents-dialog { width: min(880px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; padding: 26px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
#agents-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
#agents-project { margin: 0 0 6px; overflow-wrap: anywhere; }
.agents-path { overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, monospace; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--muted); }
#agents-error:empty, #agents-notice:empty { display: none; }
#agents-error:not(:empty) { font-size: 13px; line-height: 1.6; padding: 12px; border-radius: 10px; background: var(--error-bg); }
#agents-content { display: block; width: 100%; height: clamp(200px, 48dvh, 600px); min-height: 160px; max-height: 65dvh; resize: vertical; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); color: var(--ink); font: 14px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.agents-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#agents-state { margin-right: auto; }
.agents-actions .primary { width: auto; margin: 0; padding: 10px 18px; }
@media(max-width:460px) { #agents-dialog { padding: 18px; } #agents-content { font-size: 16px; padding: 12px; } #agents-state { flex-basis: 100%; } .agents-actions button { flex: 1; } }
/* Local slash-command controls; no command output is added to the model history. */
.command-suggestions { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; max-height: min(240px, 35dvh); overflow-y: auto; z-index: 5; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.command-suggestions button, .command-help button { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 9px 12px; text-align: left; border-radius: 8px; }
.command-suggestions code { font-size: 13px; color: var(--accent); }
.command-suggestions span, .command-help span, .command-help small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.command-suggestions button:hover, .command-suggestions [aria-selected="true"], .command-help button:hover, .command-help [aria-pressed="true"] { background: var(--accent-soft); }
#command-dialog { width: min(560px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; padding: 26px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
#command-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
#command-dialog label { display: block; font-size: 13px; font-weight: 600; margin: 20px 0 8px; }
#command-dialog input, #command-dialog select, #command-dialog textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--ink); }
#command-error:empty { display: none; }
.command-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 20px; font-size: 13px; line-height: 1.5; }
.command-details dt { color: var(--muted); }.command-details dd { margin: 0; overflow-wrap: anywhere; }
.command-entry { border: 1px solid var(--line); padding: 12px; border-radius: 10px; margin-top: 12px; overflow-wrap: anywhere; }
.command-entry pre { white-space: pre-wrap; font-size: 12px; }
.command-help { display: grid; gap: 5px; margin-top: 18px; }
.command-notice { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 12px; line-height: 1.5; color: var(--muted); padding: 0 8px 6px; }
.selected-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.selected-skills button { padding: 6px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
@media(max-width:460px) { #command-dialog { padding: 18px; } #command-dialog input, #command-dialog select, #command-dialog textarea { font-size: 16px; } .command-details { grid-template-columns: 1fr; gap: 6px; }.command-details dd { margin-bottom: 8px; } }

.sso-login{display:block;text-align:center;text-decoration:none;margin:24px 0 18px}
#sso-setup,#sso-unlock{margin-top:24px}#sso-setup button,#sso-unlock button{margin-top:24px;width:100%}
#account-menu{flex-shrink:0;width:240px;max-width:45%;margin-left:auto}
@media(max-width:700px){.topbar-heading .connection{display:none}#account-menu{max-width:42%}.topbar-heading>div:not(#account-menu){min-width:0}}
/* Project notes share the light/dark palette and keep the sidebar compact. */
.notes-open { color: var(--accent); background: var(--accent-soft); }
#notes-dialog { width: min(660px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
#notes-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
#notes-project { overflow-wrap: anywhere; }
.notes-toolbar, .notes-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.notes-add-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--action-bg); color: var(--on-accent); font-weight: 600; }
.notes-add-button:hover { box-shadow: var(--action-shadow); }
.notes-reload { padding: 1px; border-color: var(--line); background: var(--wash); }
.notes-reload img { display: block; width: 40px; height: 40px; }
.notes-actions { margin-top: 12px; }
.notes-send-actions { justify-content: flex-end; }
.notes-actions .primary { width: auto; margin: 0; padding: 10px 18px; }
#notes-form { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
#notes-form label, #notes-delivery > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
#notes-text, #notes-thread { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--input); color: var(--ink); }
#notes-text { resize: vertical; min-height: 110px; max-height: 45dvh; }
#notes-list { display: grid; gap: 10px; margin: 12px 0 20px; max-height: 35dvh; overflow: auto; }
.note-card { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); min-width: 0; }
.note-select { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.note-select > span { flex: 1; min-width: 0; }
.note-controls { display: flex; flex-direction: column; gap: 6px; flex: 0 0 44px; }
.note-action { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.note-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note-edit { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.note-delete { color: var(--error); background: var(--error-bg); border-color: var(--error); }
.note-action:hover { filter: brightness(.95); }
.note-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.note-card input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 2px 0; }
.note-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; max-height: 160px; overflow: auto; }
.note-card time { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
#notes-error:empty, #notes-notice:empty { display: none; }
#notes-error { overflow-wrap: anywhere; }
@media(max-width:460px) { #notes-dialog { padding: 18px; } }
/* Conversation actions and global folder visibility. */
.manage-icon { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); }
.manage-icon svg, .folder-state svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.manage-icon:hover, .manage-icon[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.thread-settings { border-color: transparent; background: transparent; }
.thread-settings svg { width: 19px; height: 19px; }
.history-tools { display: flex; align-items: center; gap: 3px; }
.history-tools .manage-icon { background: transparent; border-color: transparent; }
.manage-dialog { width: min(650px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.manage-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.manage-dialog .security-heading h2 { font-size: clamp(18px, 5vw, 24px); overflow-wrap: anywhere; }
.manage-dialog .error-text:empty, .manage-dialog [role=status]:empty { display: none; }
.manage-subtitle, .manage-path { overflow-wrap: anywhere; }
.manage-subtitle { color: var(--muted); font-size: 14px; }
.manage-panel { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); padding: 16px; margin: 14px 0; }
.manage-panel h3 { margin: 0 0 12px; font-size: 15px; }
.manage-input-row, .manage-storage-actions, .manage-toolbar { display: flex; align-items: center; gap: 10px; }
.manage-toolbar { justify-content: space-between; margin-bottom: 10px; }
.manage-input-row input { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--input); color: var(--ink); }
.manage-path { font-size: 12px; line-height: 1.5; color: var(--muted); flex: 1; min-width: 0; }
.manage-primary { color: var(--on-accent); background: var(--action-bg); border-color: var(--accent); }
.manage-danger, .manage-danger:hover { color: var(--error); border-color: var(--error); background: var(--error-bg); }
.manage-confirmation { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 8px; font-size: 13px; line-height: 1.6; }
.manage-folders { border: 1px solid var(--line); border-radius: 10px; background: var(--input); padding: 4px; max-height: 45dvh; overflow: auto; }
#thread-folders { max-height: 27dvh; }
.folder-list, .folder-group { list-style: none; padding: 0; margin: 0; }
.folder-row { display: flex; align-items: center; min-height: 48px; gap: 3px; padding-left: calc(var(--depth) * 10px); border-radius: 8px; }
.folder-row:hover { background: var(--wash); }
.folder-expand { flex: 0 0 36px; width: 36px; min-height: 44px; font: 22px/1 ui-monospace, monospace; position: relative; }
.folder-expand::after { content: ''; position: absolute; width: 19px; height: 19px; border: 1px solid var(--muted); border-radius: 3px; top: 12px; left: 8px; }
.folder-leaf { visibility: hidden; }
.folder-name { flex: 1; min-width: 0; padding: 8px 3px; text-align: left; font-size: 13px; overflow-wrap: anywhere; line-height: 1.5; }
button.folder-name { min-height: 44px; border-radius: 6px; }
.folder-name[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.folder-state { display: grid; place-items: center; flex: 0 0 20px; color: var(--accent); }
.folder-state svg { width: 18px; height: 18px; }
.folder-hidden > .folder-row .folder-name, .folder-hidden > .folder-row .folder-state { color: var(--muted); }
.folder-toggle { margin-left: 3px; }
.folder-more { min-height: 44px; font-size: 12px; padding: 8px 12px; color: var(--accent); }
@media(max-width:460px) { .manage-dialog { padding: 16px; } .manage-panel { padding: 12px; } .manage-input-row input { font-size: 16px; } .folder-row { padding-left: calc(var(--depth) * 5px); } }