/* AI Hub: a quiet workspace, with the task editor as the main control. */
:root {
  color-scheme: light;
  --bg: #f3f5fa;
  --panel: #ffffff;
  --text: #202c40;
  --muted: #5c6a80;
  --line: #dce2ed;
  --accent: #345bd6;
  --accent-text: #ffffff;
  --claude: #bc603c;
  --codex: #14836d;
  --warn: #96620d;
  --err: #ba343d;
  --ok: #237749;
  --code: #edf1f7;
  --user: #e8eeff;
  --radius: 14px;
  --shadow: 0 16px 64px #19284426;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #141923;
    --panel: #1d2533;
    --text: #e8edf7;
    --muted: #a7b4c9;
    --line: #364256;
    --accent: #aac0ff;
    --accent-text: #172754;
    --claude: #f3aa8b;
    --codex: #72cfb9;
    --warn: #f1c16e;
    --err: #ff9fa6;
    --ok: #87d5a8;
    --code: #151c28;
    --user: #2a3a60;
    --shadow: 0 16px 64px #0006;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.hidden { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
button, select, input, textarea { font: inherit; color: inherit; }
button, a, summary, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 14px; cursor: pointer; }
button:hover { border-color: var(--accent); background: var(--user); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: wait; }
button.primary, a.btn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 650; }
button.primary:hover, a.btn:hover { filter: brightness(.94); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--code); }
button.danger { color: var(--err); }
button.wide { width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 46px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; line-height: 1.6; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; flex: 0 0 22px; accent-color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: var(--err); overflow-wrap: anywhere; }
.err:empty { display: none; }
.spacer { flex: 1; }
h1, h2, h3, h4 { line-height: 1.3; text-wrap: balance; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 30; padding: 12px; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.screen { position: fixed; inset-inline: 0; top: var(--viewport-top, 0px); height: var(--viewport-height, 100dvh); overflow: auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.login-card { width: 100%; max-width: 400px; margin: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.login-card h1 { margin: 8px 0 0; font-size: 30px; letter-spacing: -.8px; }
.login-card p { margin: 0 0 12px; }
.login-card label { font-size: 14px; font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: var(--accent-text); font-size: 24px; font-weight: 750; letter-spacing: -1px; }
#app { position: fixed; inset-inline: 0; top: var(--viewport-top, 0px); height: var(--viewport-height, 100dvh); display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 5px; align-items: center; font-size: 19px; font-weight: 750; white-space: nowrap; letter-spacing: -.5px; }
.brand-symbol { background: var(--accent); color: var(--accent-text); border-radius: 8px; padding: 2px 7px; font-size: 16px; letter-spacing: -.8px; }
.icon-btn { display: none; }
.limits { display: flex; flex: 1; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.badge { display: inline-flex; align-items: center; gap: 2px; width: fit-content; font-size: 12px; line-height: 1.35; border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; white-space: nowrap; }
button.badge { flex-shrink: 0; min-height: 44px; }
.badge.claude { border-color: var(--claude); }
.badge.codex { border-color: var(--codex); }
.badge.bad { color: var(--err); border-color: var(--err); }
.badge.warnb { color: var(--warn); border-color: var(--warn); }
.lim-s { display: none; }
.layout { display: flex; flex: 1; min-height: 0; }
.sidebar { flex: 0 0 312px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); border-right: 1px solid var(--line); overflow-y: auto; }
.sidebar-title h1 { margin: 0 0 2px; font-size: 23px; letter-spacing: -.6px; }
#projects { display: flex; flex-direction: column; gap: 12px; }
.project { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--panel); }
.project.boss { border-top: 3px solid var(--warn); }
.project-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.project-name { flex: 1; min-width: 70px; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-head button { min-width: 44px; padding: 7px 8px; font-size: 13px; }
.project > .muted { margin-top: 8px; overflow-wrap: anywhere; font-size: 12px; }
.project-empty { display: flex; flex-direction: column; gap: 8px; }
.dialogs { display: flex; flex-direction: column; margin-top: 10px; }
.dialogs:empty { display: none; }
.dialog-item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 10px 8px; text-align: left; border: 0; border-radius: 8px; background: transparent; font-size: 14px; }
.dialog-item.active { color: var(--accent); background: var(--user); font-weight: 600; }
.dialog-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-item::after { content: "›"; color: var(--muted); font-size: 20px; }
.side-extra { display: none; }
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.empty { max-width: 440px; margin: auto; padding: 28px; text-align: center; }
.empty .brand-mark { margin: 0 auto 24px; }
.empty h2 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.7px; }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; min-height: 76px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-titles { flex: 1; min-width: 0; }
.chat-title { font-size: 17px; font-weight: 700; }
.chat-title, .chat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-btn { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; font-size: 25px; border-color: transparent; background: transparent; }
#backBtn { display: none; }
.chat-limits { display: none; }
.feed { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px max(24px, calc((100% - 880px) / 2)); display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.feed > * { flex-shrink: 0; min-width: 0; overflow-wrap: anywhere; }
.msg-user { align-self: flex-end; max-width: 86%; background: var(--user); border-radius: 16px 16px 4px 16px; padding: 14px 18px; white-space: pre-wrap; }
.msg-user .mode { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.stage { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.dot, .agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.agent-dot { background: var(--muted); }
.agent-dot.claude { background: var(--claude); }
.agent-dot.codex { background: var(--codex); }
.dot { animation: pulse 1.6s 3; }
@keyframes pulse { 50% { opacity: .3; } }
.answer { max-width: 100%; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 4px 14px 14px 4px; padding: 16px 20px; background: var(--panel); }
.answer.claude { border-left-color: var(--claude); }
.answer.codex { border-left-color: var(--codex); }
.answer.boss, .msg-user.from-boss { border-left: 3px solid var(--warn); }
.answer .who { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.answer p { margin: 8px 0; }
.answer p:first-child { margin-top: 0; }
.answer p:last-child { margin-bottom: 0; }
.answer ul, .answer ol { margin: 8px 0; padding-left: 24px; }
.answer li + li { margin-top: 5px; }
.answer h1, .answer h2, .answer h3, .answer h4 { font-size: 17px; margin: 16px 0 8px; scroll-margin-top: 16px; }
.answer pre, .patch, .login-log { max-width: 100%; overflow: auto; background: var(--code); border-radius: 8px; padding: 12px; font: 13px/1.6 ui-monospace, Consolas, monospace; }
.answer code { font: .9em/1.5 ui-monospace, Consolas, monospace; background: var(--code); border-radius: 4px; padding: 2px 4px; }
.answer pre code { padding: 0; background: none; }
.answer table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 13px; }
.answer td, .answer th { border: 1px solid var(--line); padding: 6px 10px; }
details.work { padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; }
summary { cursor: pointer; padding-block: 10px; min-height: 44px; }
details.work .line { border-top: 1px solid var(--line); padding: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review .verdict { font-weight: 700; }
.review.ok { border-left-color: var(--ok); }
.review.bad { border-left-color: var(--warn); }
.issue { margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--line); }
.issue.high { border-color: var(--err); }
.issue.medium { border-color: var(--warn); }
.sev { font-size: 12px; font-weight: 700; margin-right: 8px; }
.sev.high { color: var(--err); }
.sev.medium { color: var(--warn); }
.sev.low { color: var(--muted); }
details.diff { padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
details.diff summary { font-weight: 600; }
details.diff > pre { overflow: auto; }
.patch { white-space: pre; max-height: 50dvh; font-size: 12px; }
.patch .a { color: var(--ok); }
.patch .d { color: var(--err); }
.patch .h { color: var(--accent); }
.warnline { font-size: 14px; color: var(--warn); }
.errline { font-size: 14px; color: var(--err); }
.done { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: var(--muted); }
.done button { padding: 8px 12px; text-align: left; font-size: 13px; }
.card-task { border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 10px; padding: 12px 16px; background: var(--panel); }
.card-task .who { font-size: 14px; font-weight: 700; }
.card-task .task-text, .card-task .line { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; font-size: 14px; }
.card-task button { margin-top: 10px; }
.card-task.report.ok { border-left-color: var(--ok); }
.card-task.report.bad { border-left-color: var(--err); }
/* The editor stays in the flex layout; only its expanded state is an overlay. */
.composer { flex: 0 1 auto; min-height: 0; max-height: 72%; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); background: var(--panel); padding: 14px max(24px, calc((100% - 880px) / 2)) calc(14px + env(safe-area-inset-bottom)); }
.modes { display: flex; gap: 6px; margin-bottom: 4px; }
.chip { flex: 0 1 auto; min-width: 0; padding: 8px 16px; background: transparent; border-color: transparent; font-size: 14px; }
.chip.on { color: var(--accent); background: var(--user); border-color: var(--accent); font-weight: 700; }
.composer-tools { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.composer-tools label { font-size: 13px; font-weight: 650; }
#charCount { margin-left: auto; font-size: 12px; white-space: nowrap; }
.expand-btn { min-height: 44px; padding: 8px; border-color: transparent; background: transparent; color: var(--accent); font-size: 13px; }
.composer-main { display: flex; align-items: flex-end; gap: 10px; }
.composer-main textarea { flex: 1; min-height: 136px; max-height: min(34dvh, calc(var(--viewport-height, 100dvh) * .34)); resize: vertical; font-size: 16px; background: var(--bg); }
.composer-main textarea:focus { background: var(--panel); }
.send { flex: 0 0 auto; height: 48px; }
.send-i { display: none; }
.composer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opt-btn { display: none; }
.composer-opts { display: flex; gap: 8px; min-width: 0; }
.composer-opts select { width: auto; max-width: 260px; min-height: 44px; font-size: 13px; }
#runState:empty { display: none; }
#modeHint { margin-top: 8px; }
.help { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.composer.expanded { position: fixed; z-index: 10; inset-inline: 0; top: var(--viewport-top, 0px); height: var(--viewport-height, 100dvh); max-height: none; display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top)) max(24px, calc((100% - 1040px) / 2)) calc(16px + env(safe-area-inset-bottom)); border: 0; }
.composer.expanded .composer-tools { order: -1; flex: 0 0 auto; margin-bottom: 8px; }
.composer.expanded .composer-tools label { font-size: 18px; }
.composer.expanded .composer-main { flex: 1; min-height: 100px; align-items: stretch; }
.composer.expanded textarea { height: 100%; max-height: none; min-height: 100px; resize: none; }
.composer.expanded .send { align-self: flex-end; }
.composer.expanded .modes, .composer.expanded .composer-row, .composer.expanded .help { flex-shrink: 0; }
/* Native dialog handles focus and background interaction; only the body scrolls. */
dialog { width: min(680px, calc(100% - 48px)); max-width: none; max-height: calc(var(--viewport-height, 100dvh) - 48px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); overflow: hidden; }
dialog::backdrop { background: #0c1527a6; }
.modal { display: flex; flex-direction: column; max-height: calc(var(--viewport-height, 100dvh) - 50px); margin: 0; }
.modal-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { min-width: 0; margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.modal-head h2:focus { outline: none; }
.modal-back { display: grid; place-items: center; flex-shrink: 0; width: 44px; padding: 0; font-size: 24px; border-color: transparent; background: var(--code); }
.modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; scroll-padding: 16px; }
.modal-body > * { flex-shrink: 0; min-width: 0; }
.modal label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--muted); }
.modal input, .modal select, .modal textarea { font-size: 16px; color: var(--text); }
.modal .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.modal .grid > * { min-width: 0; }
.modal h4 { margin: 4px 0 0; font-size: 16px; }
.modal p { margin-block: 0; }
.modal .row { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.modal-actions { flex: 0 0 auto; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.modal-actions button { max-width: 100%; }
fieldset.sect { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
fieldset.sect legend { max-width: 100%; font-size: 15px; font-weight: 700; padding: 0 6px; }
.row-left { flex-direction: row !important; align-items: center; gap: 12px !important; color: var(--text) !important; min-height: 44px; }
.table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.modal table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.modal td, .modal th { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; white-space: nowrap; }
.modal th { background: var(--code); }
.plan { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.plan-row { display: grid; grid-template-columns: 90px minmax(30px, 1fr) 44px; gap: 8px; align-items: center; font-size: 13px; }
.plan-row .muted { grid-column: 1 / -1; }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.fill { height: 100%; background: var(--ok); }
.fill.warnb { background: var(--warn); }
.fill.bad { background: var(--err); }
.plan-val { text-align: right; font-variant-numeric: tabular-nums; }
.acc-summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.acc-summary.ok, .login-result.ok { background: color-mix(in srgb, var(--ok) 12%, var(--panel)); color: var(--ok); }
.acc-summary.no, .login-result.no { background: color-mix(in srgb, var(--err) 10%, var(--panel)); color: var(--err); }
.acc-summary.wait { background: var(--code); color: var(--muted); }
.acc-host { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.acc-host-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.acc-host-head b { font-size: 16px; }
.acc-list { display: flex; flex-direction: column; gap: 10px; }
.acc { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 12px; }
.acc.ok { border-left-color: var(--ok); }
.acc.no { border-left-color: var(--err); }
.acc.active { background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.acc-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.acc-title { font-size: 15px; }
.acc-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
.pill.no { color: var(--err); background: color-mix(in srgb, var(--err) 10%, var(--panel)); }
.pill.wait, .pill.off { color: var(--muted); background: var(--code); }
.acc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-btns button { font-size: 14px; }
details.acc-more summary { color: var(--muted); font-size: 13px; }
.acc-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; width: 100%; }
.acc-add select { width: auto; }
.acc-add input { flex: 1; min-width: 120px; }
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.team-btn { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; padding: 12px; }
.team-btn span { color: var(--muted); font-size: 13px; }
.team-btn.on { border-color: var(--accent); background: var(--user); box-shadow: inset 0 0 0 1px var(--accent); }
.team-btn.on b::before { content: "✓ "; color: var(--accent); }
.acc.flash { outline: 2px solid var(--ok); outline-offset: 3px; }
.login-steps { display: flex; flex-direction: column; gap: 20px; }
.step { display: flex; align-items: flex-start; gap: 12px; }
.step-n { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; color: var(--accent); background: var(--user); font-size: 14px; font-weight: 700; }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.step-body .acc-add { margin: 0; }
a.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 14px; }
.code-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.big-code { font: 700 24px/1.5 ui-monospace, Consolas, monospace; letter-spacing: 2px; user-select: all; }
.login-result { border-radius: 12px; padding: 20px; font-size: 18px; font-weight: 700; text-align: center; }
.login-log { max-height: 180px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.login-box a { overflow-wrap: anywhere; }
.sheet { display: flex; flex-direction: column; gap: 8px; }
.sheet-btn { text-align: left; padding: 14px; font-size: 16px; }
@media (min-width: 801px) and (max-width: 1150px) {
  .topbar { gap: 6px; padding-inline: 12px; }
  .top-act { padding-inline: 8px; font-size: 13px; }
  .lim-n, .lim-u { display: none; }
  .lim-s { display: inline; }
  .sidebar { flex-basis: 280px; padding-inline: 12px; }
  .chat-head, .composer { padding-inline: 16px; }
  .desk { display: none; }
  .composer-opts { flex-wrap: wrap; }
}
@media (max-width: 800px) {
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  .top-act, .icon-btn { display: none; }
  .topbar { gap: 12px; min-height: 60px; padding-inline: max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .limits { gap: 6px; }
  button.badge { min-height: 44px; padding: 6px 8px; }
  .lim-n, .lim-u { display: none; }
  .lim-s { display: inline; }
  .sidebar { flex: 1 1 auto; width: 100%; border: 0; gap: 16px; padding: 20px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .sidebar-title h1 { font-size: 26px; }
  #newProjectBtn { min-height: 48px; }
  .project { padding: 14px; }
  .project-head { gap: 8px; }
  .project-name { font-size: 17px; }
  .project-head button { font-size: 14px; }
  .project > .muted { font-size: 13px; line-height: 1.5; }
  .dialogs { gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
  .dialog-item { min-height: 50px; font-size: 16px; padding-inline: 8px; }
  .side-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 8px; }
  .side-extra button { min-height: 48px; text-align: left; font-size: 14px; }
  .main { display: none; }
  body.in-dialog .topbar, body.in-dialog .sidebar { display: none; }
  body.in-dialog .main { display: flex; }
  .chat-head { gap: 6px; min-height: 64px; padding: calc(6px + env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); }
  #backBtn { display: grid; }
  .desk { display: none; }
  .chat-title { font-size: 16px; }
  .chat-sub { font-size: 12px; margin-top: 2px; }
  .chat-limits { display: flex; flex: 0 0 auto; padding: 0 14px 4px; gap: 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .chat-limits .badge { min-height: 44px; }
  .feed { padding: 16px 12px; gap: 12px; }
  .msg-user { max-width: 94%; padding: 12px 14px; }
  .answer { padding: 14px; font-size: 16px; line-height: 1.65; }
  .answer pre { margin-inline: -4px; font-size: 12px; }
  .done { gap: 8px; }
  .composer { padding: 8px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); max-height: 70%; }
  .modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-bottom: 0; }
  .chip { min-height: 44px; padding: 7px 2px; font-size: 13px; border-radius: 8px; }
  .composer-tools { gap: 6px; }
  .composer-tools label { font-size: 12px; }
  .expand-btn { font-size: 12px; padding-inline: 6px; }
  #charCount { font-size: 11px; }
  .composer-main { gap: 8px; }
  .composer-main textarea { min-height: 120px; padding: 12px; resize: none; }
  .send { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 14px; font-size: 23px; }
  .send-i { display: inline; }
  .send-t { display: none; }
  .composer-row { margin-top: 6px; gap: 6px; }
  .opt-btn { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px; background: var(--code); font-size: 12px; }
  .composer-opts { display: none; width: 100%; order: 5; }
  .opts-open .composer-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .composer-opts select { width: 100%; max-width: 100%; font-size: 16px; }
  #modeHint { display: none; margin-top: 8px; }
  .opts-open #modeHint { display: block; }
  #runState { font-size: 12px; flex: 1 1 100%; order: 4; }
  #stopBtn { margin-left: auto; }
  .composer.expanded { padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .composer.expanded .composer-tools { flex-wrap: wrap; }
  .composer.expanded .composer-tools label { font-size: 17px; }
  .composer.expanded .composer-main { position: relative; }
  .composer.expanded textarea { padding-bottom: 72px; }
  .composer.expanded .send { position: absolute; bottom: 12px; right: 12px; }
  .composer.expanded #modeHint { display: none; }
  .composer.expanded .composer-opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .keyboard-open .chat-limits { display: none; }
  .keyboard-open .composer:not(.expanded) { max-height: calc(100% - 60px); }
  .keyboard-open .composer-main textarea { min-height: 80px; }
  dialog { position: fixed; top: var(--viewport-top, 0px); bottom: auto; margin: 0; width: 100%; height: var(--viewport-height, 100dvh); max-height: none; border: 0; border-radius: 0; }
  .modal { height: 100%; max-height: 100%; }
  .modal-head { padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .modal-head h2 { font-size: 19px; }
  .modal-body { gap: 18px; padding: 20px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
  .modal-actions { padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 8px; flex-wrap: wrap; }
  .modal-actions .spacer { display: none; }
  .modal-actions button { flex: 1; min-height: 48px; padding: 10px 8px; font-size: 14px; }
  .modal .grid { grid-template-columns: minmax(0, 1fr); }
  fieldset.sect { padding: 12px 12px 16px; }
  .acc-host { padding: 12px; }
  .acc-btns { width: 100%; }
  .acc-btns button { flex: 1; }
  .acc-add { display: grid; grid-template-columns: minmax(0, 1fr); }
  .acc-add select, .acc-add input { width: 100%; }
  .team-btn { font-size: 14px; padding: 10px; }
  .team-btn span { font-size: 12px; }
  .step { gap: 10px; }
  .step-body .acc-add { display: flex; }
  .step-body .acc-add input, .step-body .acc-add button { width: 100%; }
  .plan-row { grid-template-columns: 72px minmax(24px, 1fr) 40px; }
}
@media (max-height: 500px) {
  .composer-main textarea { min-height: 80px; }
  .chat-limits, #modeHint { display: none; }
  .composer { max-height: calc(100% - 60px); padding-top: 4px; }
  .composer.expanded .composer-main { min-height: 72px; }
  .composer.expanded textarea { min-height: 72px; }
  .composer.expanded .composer-tools { margin-bottom: 0; }
  .login-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  button:active { transform: none; }
}

/* limits window v14 */
.lim-card{flex-direction:column;align-items:stretch}
.plan-row{grid-template-columns:96px 1fr 44px}
.plan-reset{grid-column:1/-1;color:var(--muted);margin-top:-2px}
.credit{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1px solid var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--panel));border-radius:10px;padding:10px 12px}
.lim-mark{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--warn)}

/* v16: personal chats share the workspace, project tools keep their own controls. */
body:not(.is-admin) .admin-only { display: none !important; }
.topbar #pwBtn, .topbar #logoutBtn { display: none; }
body:not(.is-admin) #limits { visibility: hidden; }
.profile-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 140px; flex-shrink: 0; background: var(--code); font-weight: 650; }
#currentUser { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.2px; }
.section-heading button { font-size: 13px; padding-inline: 10px; }
.search-field input { background: var(--panel); }
.chats-section { min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dialog-row { display: flex; align-items: center; gap: 2px; min-width: 0; border-radius: 8px; }
.dialog-row .dialog-item { flex: 1; width: 0; min-width: 0; }
.dialog-row .dialog-item::after { content: none; }
.dialog-row.current { background: var(--user); }
.dialog-more { flex: 0 0 44px; width: 44px; padding: 0; background: transparent; border-color: transparent; font-size: 24px; }
.pin-mark { color: var(--accent); font-size: 10px; }
.hidden-dialogs { min-width: 0; margin-top: 6px; border-top: 1px solid var(--line); }
.hidden-dialogs > summary { color: var(--muted); font-size: 13px; padding-inline: 8px; }
.hidden-dialogs .dialog-row { opacity: .85; }
#chatsList:empty { display: none; }
.users-list { display: flex; flex-direction: column; gap: 12px; }
.user-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.user-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.user-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.user-card .err { flex-basis: 100%; }
.plain-chat .chat-limits, .plain-chat #modeHint { display: none; }
.plain-chat .composer:not(.run-active) .composer-row { display: none; }
.plain-chat .composer-main textarea { background: var(--bg); border-radius: 18px; }
.plain-chat .composer-main { align-items: stretch; }
.chat-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.chat-settings label { min-width: 0; }
.chat-settings select { font-size: 14px; min-height: 44px; background: var(--code); }
.chat-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.chat-actions .send { display: grid; place-items: center; width: 48px; padding: 0; border-radius: 50%; font-size: 22px; }
.chat-actions .send-i { display: inline; }
.chat-actions .send-t { display: none; }
.attach-btn, .mic-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-color: transparent; background: var(--code); border-radius: 50%; }
.attach-btn { font-size: 26px; }
.mic-btn[aria-pressed="true"] { color: var(--err); border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--panel)); }
#composerError { font-size: 13px; margin: 8px 0 0; }
#attachmentHint { margin-top: 8px; }
#attachmentHint.warnline { color: var(--warn); }
.conversation-empty { margin: auto; padding: 24px 12px; text-align: center; }
.conversation-empty h2 { margin: 0 0 12px; font-size: 26px; letter-spacing: -.5px; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 164px; overflow-y: auto; padding: 4px; margin: 8px -4px 0; }
.attachment-card { display: flex; align-items: center; gap: 8px; width: min(100%, 300px); min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--code); padding: 6px; }
.attachment-card.failed { border-color: var(--err); }
.attachment-card img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.file-kind { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 12px; font-weight: 700; color: var(--muted); }
.attachment-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attachment-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.attachment-info .small { font-size: 12px; overflow-wrap: anywhere; }
.remove-file { flex: 0 0 44px; width: 44px; padding: 0; font-size: 22px; border-color: transparent; background: transparent; }
.message-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; white-space: normal; }
.message-file { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 160px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.message-file img { display: block; max-width: 100%; object-fit: cover; border-radius: 6px; }
.message-file:hover { border-color: var(--accent); }
.plain-chat .composer.expanded .send { position: static; align-self: center; }
.plain-chat .composer.expanded textarea { padding-bottom: 12px; }
.plain-chat .composer.expanded .chat-settings, .plain-chat .composer.expanded .chat-actions, .plain-chat .composer.expanded .attachment-list, .plain-chat .composer.expanded #attachmentHint, .plain-chat .composer.expanded #composerError { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .dialog-more { opacity: 0; }
  .dialog-row:hover .dialog-more, .dialog-row:focus-within .dialog-more, .dialog-row.current .dialog-more { opacity: 1; }
}
@media (max-width: 800px) {
  .topbar { gap: 8px; }
  .profile-btn { max-width: 144px; padding-inline: 10px; font-size: 14px; }
  .sidebar { gap: 14px; }
  .chats-section .dialogs { border-top: 0; padding-top: 0; }
  .section-heading button { font-size: 14px; }
  .dialog-more { opacity: 1; }
  .dialog-row .dialog-item { font-size: 15px; }
  .chat-settings select { font-size: 16px; padding-inline: 10px; }
  .user-actions { width: 100%; }
  .user-actions button { flex: 1; font-size: 14px; }
  .plain-chat .composer { max-height: 75%; }
  .plain-chat .composer-tools { min-height: 40px; }
  .plain-chat .composer.expanded { max-height: none; }
  .plain-chat .composer.expanded .composer-main { min-height: 80px; }
  .plain-chat .composer.expanded textarea { min-height: 80px; }
  .plain-chat .composer .chat-actions .send { position: static; }
  .plain-chat .composer-row { margin-top: 4px; }
  .plain-chat .composer.expanded .attachment-list { max-height: 110px; }
}
@media (max-width: 360px) {
  .chat-web-hint { display: none; }
  .profile-btn { max-width: 132px; }
  .chat-settings select { font-size: 16px; padding-inline: 6px; }
}
@media (max-height: 500px) {
  .plain-chat .composer:not(.expanded) { max-height: calc(100% - 60px); }
  .plain-chat .composer.expanded .attachment-list { max-height: 72px; }
}

/* v17: message tools and downloadable results in personal chats. */
.chat-tool-selection { flex-shrink: 0; margin-bottom: 10px; }
.tool-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding-left: 12px; border: 1px solid var(--accent); border-radius: 24px; background: var(--user); color: var(--accent); font-size: 14px; font-weight: 650; }
.tool-pill button { flex: 0 0 44px; width: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); font-size: 22px; }
.tool-pill button:hover { background: var(--panel); }
#chatToolHint { margin-top: 6px; }
.message-tool { display: inline-block; max-width: 100%; padding: 3px 9px; margin-bottom: 6px; background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 650; white-space: normal; }
.research-stage { flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--code); border-radius: 10px; }
.generated-images { display: grid; gap: 18px; margin-top: 16px; }
.generated-image { min-width: 0; margin: 0; }
.generated-image-open { display: block; width: 100%; padding: 0; min-height: 44px; overflow: hidden; border-radius: 12px; background: var(--code); cursor: zoom-in; }
.generated-image-open img { display: block; width: 100%; height: auto; }
.generated-image-open .err { display: block; padding: 20px; font-size: 14px; }
.generated-image figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.generated-image figcaption > span { min-width: 0; overflow-wrap: anywhere; }
.download-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); background: var(--panel); text-decoration: none; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.download-link:hover { background: var(--user); border-color: var(--accent); }
.generated-report { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; margin-top: 16px; background: var(--code); border: 1px solid var(--line); border-radius: 12px; }
.report-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
#imageViewer { position: fixed; top: var(--viewport-top, 0px); bottom: auto; inset-inline: 0; margin: 0; width: 100%; max-width: none; height: var(--viewport-height, 100dvh); max-height: none; border: 0; border-radius: 0; background: var(--panel); }
.image-viewer { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.viewer-head h2 { min-width: 0; margin: 0; font-size: 17px; overflow-wrap: anywhere; }
#closeImageBtn { flex: 0 0 44px; width: 44px; padding: 0; font-size: 26px; }
.viewer-body { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 16px; background: var(--code); overflow: auto; }
#viewerImage { display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-actions { display: flex; justify-content: center; padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); }
@media (max-width: 800px) {
  .generated-report .download-link { margin-left: auto; }
  .plain-chat .composer.expanded .chat-tool-selection { flex-shrink: 0; }
}

/* v18: one physical server, an explicit choice of owner permissions. */
.server-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.project-meta { display: flex; flex-direction: column; gap: 4px; }
.server-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rights-badge { display: inline-flex; align-items: center; flex-shrink: 0; width: fit-content; padding: 2px 7px; border: 1px solid var(--warn); border-radius: 6px; background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--warn); font-size: 11px; line-height: 1.4; white-space: nowrap; }
.chat-sub { display: flex; align-items: center; gap: 6px; }
.chat-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal label.rights-switch { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 14px; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; }
.rights-switch input[type="checkbox"] { appearance: none; position: relative; width: 46px; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--code); cursor: pointer; }
.rights-switch input::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); }
.rights-switch input:checked { background: var(--accent); border-color: var(--accent); }
.rights-switch input:checked::before { transform: translateX(18px); background: var(--accent-text); }
@media (forced-colors: active) {
  .rights-switch input[type="checkbox"] { appearance: auto; }
  .rights-switch input::before { display: none; }
}

/* v19: a compact personal tree, with shared pins and pointer reordering. */
.sidebar { gap: 10px; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); scrollbar-gutter: stable; overscroll-behavior: contain; }
.sidebar-title h1 { font-size: 19px; margin: 0; }
.sidebar-create { display: flex; gap: 6px; }
.sidebar-create #newChatBtn { flex: 1; text-align: left; }
.sidebar-create #sidebarAddBtn { flex: 0 0 38px; padding: 0; font-size: 23px; }
.sidebar-create button, .search-field input { min-height: 38px; padding-block: 7px; font-size: 14px; }
.sidebar .section-heading { min-height: 32px; margin-top: 6px; padding-left: 8px; }
.sidebar .section-heading h2 { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sidebar #newProjectBtn { width: 32px; min-height: 32px; padding: 0; border-color: transparent; background: transparent; font-size: 22px; }
.sidebar #newProjectBtn:hover { background: var(--user); }
.pinned-section, .chats-section, #projects { min-width: 0; }
.chats-section { padding: 0; border: 0; }
#projects, .folder-list, #chatsList { display: flex; flex-direction: column; gap: 2px; }
.tree-heading { display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.section-toggle { display: flex; align-items: center; gap: 6px; flex: 1; width: 0; min-width: 0; min-height: 38px; padding: 6px; text-align: left; background: transparent; border-color: transparent; font-size: 13px; font-weight: 650; }
.section-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.section-chevron { flex: 0 0 14px; color: var(--muted); font-size: 17px; font-weight: 400; }
.project-indicators { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.server-icon { color: var(--muted); font-size: 14px; font-weight: 400; }
.project-indicators .rights-badge { font-size: 10px; padding: 1px 4px; }
.tree-more, .dialog-more { min-height: 38px; flex: 0 0 32px; width: 32px; padding: 0; background: transparent; border-color: transparent; font-size: 22px; }
.sidebar .project { padding: 0; border: 0; border-radius: 0; background: transparent; }
.project-head { gap: 0; flex-wrap: nowrap; }
.project-head .section-toggle { min-width: 0; font-size: 13px; }
.project-head .tree-more { min-width: 32px; padding: 0; font-size: 22px; }
.sidebar .dialogs { margin: 0; padding: 0 0 0 14px; gap: 0; border: 0; min-height: 12px; }
.pinned-section > .dialogs { padding-left: 0; }
.sidebar .dialog-row { min-height: 38px; content-visibility: auto; contain-intrinsic-size: auto 38px; }
.sidebar .dialog-item { min-height: 38px; height: 38px; padding: 6px 8px; font-size: 14px; font-weight: 400; }
.sidebar .dialog-item.active { font-weight: 600; }
.sidebar .hidden-dialogs { margin: 0; border: 0; }
.sidebar .hidden-dialogs > summary { min-height: 32px; padding: 6px 8px; font-size: 12px; }
.sidebar .hidden-dialogs .dialog-row { opacity: .75; }
.list-empty { margin: 0; padding: 5px 8px 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.sidebar-status { font-size: 12px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.sidebar-status:empty { display: none; }
.sidebar .side-extra { display: none; }
.sidebar [data-kind] { touch-action: pan-y; }
.sidebar .dialog-item, .section-toggle { -webkit-touch-callout: none; }
.sidebar-dragging, .sidebar-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
.drag-source { opacity: .35; }
.sidebar-drag-ghost { position: fixed; z-index: 100; top: 0; left: 0; min-height: 38px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); font-size: 14px; opacity: .96; pointer-events: none; will-change: transform; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-drop-marker { position: fixed; top: 0; left: 0; z-index: 101; height: 3px; border-radius: 3px; background: var(--accent); pointer-events: none; }
.sidebar-drop-marker::before { content: ""; position: absolute; left: 0; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.drop-target { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 8px; }
.sidebar [aria-busy="true"] { cursor: progress; }
@media (max-width: 800px) { body.is-admin.plain-chat .chat-limits { display: flex; } }  /* phone only: on a desktop the limits are in the top bar */
@media (hover: hover) and (pointer: fine) {
  .tree-more { opacity: 0; }
  .tree-heading:hover .tree-more, .tree-heading:focus-within .tree-more { opacity: 1; }
}
@media (max-width: 800px) {
  .sidebar { gap: 8px; padding: 12px max(12px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .sidebar-title h1 { font-size: 21px; }
  .sidebar-create button, .search-field input, .section-toggle, .tree-more, .dialog-more, .sidebar .dialog-item, .sidebar #newProjectBtn, .sidebar .hidden-dialogs > summary { min-height: 44px; }
  .sidebar .dialog-item { height: 44px; font-size: 15px; }
  .sidebar .dialog-row { min-height: 44px; contain-intrinsic-size: auto 44px; }
  .tree-more, .dialog-more { flex-basis: 44px; width: 44px; opacity: 1; }
  .project-head .tree-more { min-width: 44px; }
  .sidebar-create #sidebarAddBtn { flex-basis: 44px; }
  .sidebar #newProjectBtn { width: 44px; }
  .section-toggle, .project-head .section-toggle { font-size: 14px; }
  .sidebar .hidden-dialogs > summary { padding-block: 12px; }
  .sidebar-drag-ghost { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar *, .sidebar-drag-ghost { transition: none !important; }
}
/* Feedback floats above the list so a drag never shifts its own drop targets. */
.sidebar-status:not(:empty) { position: fixed; z-index: 20; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(272px, calc(100vw - 40px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); pointer-events: none; }
body.in-dialog .sidebar-status { display: none; }

/* v20: one low composer, following the owner's Claude reference on both screens. */
#composer.composer { flex: 0 0 auto; width: 100%; max-height: 65%; overflow-y: auto; border: 0; background: transparent; padding: 8px max(20px, calc((100% - 800px) / 2)) calc(8px + env(safe-area-inset-bottom)); }
#composer .composer-tools, #composer .composer-native { display: none; }
.composer-surface { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 4px 18px #1928440a; }
.composer-surface:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
#composer .composer-main { display: flex; gap: 2px; align-items: flex-end; min-width: 0; padding: 3px; }
.editor-input { position: relative; flex: 1; min-width: 0; }
#composer .composer-main textarea { display: block; width: 100%; min-height: 44px; max-height: 164px; padding: 10px 6px; border: 0; border-radius: 0; background: transparent; resize: none; box-shadow: none; font-size: 16px; line-height: 24px; outline-offset: -3px; }
#composer .send-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0; margin: 0; }
#composer .attach-btn, #composer .mic-btn, #composer .send, #composer .stop-btn, #composer .queue-btn { display: grid; place-items: center; flex: 0 0 44px; min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 0; border: 0; border-radius: 15px; background: transparent; font-size: 23px; }
#composer .attach-btn { color: var(--muted); font-size: 25px; }
#composer .send { background: var(--accent); color: var(--accent-text); font-size: 25px; }
#composer .stop-btn { color: var(--text); background: var(--code); font-size: 17px; }
#composer .queue-btn { color: var(--accent); font-size: 24px; }
#composer .mic-btn { color: var(--muted); }
#composer .mic-btn[aria-pressed="true"] { color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--panel)); }
#composer .attach-btn:hover, #composer .mic-btn:hover, #composer .stop-btn:hover, #composer .queue-btn:hover { background: var(--user); }
#composer .send-i { display: inline; }
#composer .send-t { display: none; }
body:not(.plain-chat) #micBtn { display: none !important; }
#composer .expand-btn { display: none; position: absolute; top: 3px; right: 0; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: var(--panel); font-size: 18px; }
#composer.has-long-text .expand-btn, #composer.expanded .expand-btn { display: grid; place-items: center; }
#composer.has-long-text textarea { padding-right: 34px; }
#composer .composer-meta { display: flex; justify-content: flex-end; align-items: center; gap: 0; min-height: 28px; max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.composer-meta::-webkit-scrollbar { display: none; }
#composer .meta-btn { flex: 0 0 auto; min-height: 28px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; line-height: 22px; }
#composer .meta-btn:hover { background: var(--code); color: var(--text); }
.run-indicator { display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; margin-inline: 5px; border: 2px solid var(--line); border-right-color: var(--accent); border-radius: 50%; animation: composer-spin 1s linear infinite; }
@keyframes composer-spin { to { transform: rotate(360deg); } }
#composer .chat-tool-selection { margin: 3px 0 0; }
#composer .tool-pill { gap: 2px; min-height: 25px; padding: 0 0 0 8px; max-width: 100%; border-radius: 8px; font-size: 11px; }
#composer .tool-pill button { flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; font-size: 18px; padding: 0; }
#composer .attachment-list { flex-wrap: nowrap; max-height: 80px; padding: 6px 6px 0; margin: 0; overflow: auto; }
#composer .attachment-card { flex: 0 0 200px; width: 200px; padding: 3px; border-radius: 12px; }
#composer .attachment-card img, #composer .attachment-card .file-kind { width: 36px; height: 36px; flex-basis: 36px; }
#composer .attachment-card b { font-size: 12px; }
#composer .attachment-card .small { font-size: 10px; }
#composer .remove-file { flex-basis: 36px; width: 36px; min-height: 36px; }
#attachmentHint:not(.warnline) { display: none; }
#composer #attachmentHint, #composer #composerError { margin: 5px 4px 0; font-size: 12px; }
#composer #composerError:empty { display: none; }
#composer.composer.expanded { position: fixed; z-index: 10; top: var(--viewport-top, 0px); inset-inline: 0; height: var(--viewport-height, 100dvh); max-height: none; background: var(--panel); padding: calc(10px + env(safe-area-inset-top)) max(12px, calc((100% - 900px) / 2)) calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
#composer.expanded .composer-surface { display: flex; flex-direction: column; flex: 1; min-height: 0; box-shadow: none; }
#composer.expanded .composer-main { flex: 1; align-items: flex-end; min-height: 0; }
#composer.expanded .editor-input { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
#composer.expanded .composer-main textarea { flex: 1; height: 100%; max-height: none; min-height: 44px; padding-top: 40px; padding-right: 6px; }
#composer.expanded .send { position: static; align-self: center; }
#composer.expanded .attachment-list { flex-shrink: 0; }
#composer.expanded .composer-meta { flex-shrink: 0; }
#composerSheet.composer-sheet { position: fixed; top: auto; bottom: max(0px, calc(100dvh - var(--viewport-height, 100dvh) - var(--viewport-top, 0px))); margin: 0 auto; width: min(100% - 24px, 460px); max-width: 460px; height: auto; max-height: min(640px, calc(var(--viewport-height, 100dvh) - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 24px 24px 16px 16px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); overflow: hidden; }
#composerSheet::backdrop { background: #080d1680; }
.sheet-panel { display: flex; flex-direction: column; max-height: min(640px, calc(var(--viewport-height, 100dvh) - 28px)); }
.sheet-header { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 4px; touch-action: none; user-select: none; }
.sheet-grip { position: absolute; top: 8px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 4px; background: var(--line); }
.sheet-header h2 { min-width: 0; margin: 0; font-size: 17px; }
#closeSheetBtn { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 25px; }
#closeSheetBtn:hover { background: var(--code); }
.composer-sheet-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.file-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 8px; }
.file-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 84px; padding: 10px 4px; border: 0; border-radius: 14px; background: var(--code); font-size: 13px; }
.file-tile > span:first-child { font-size: 26px; line-height: 1; }
.composer-sheet-option { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 4px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.sheet-option-icon { flex: 0 0 32px; width: 32px; text-align: center; color: var(--accent); font-size: 26px; }
.composer-sheet-option b { display: block; font-size: 14px; font-weight: 600; }
.composer-sheet-option small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.setting-group { margin: 0 0 12px; }
.setting-group h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.setting-segments { display: flex; flex-wrap: wrap; gap: 6px; }
.setting-segments button { min-height: 44px; padding: 8px 12px; font-size: 13px; background: var(--code); border-color: transparent; }
.setting-segments button[aria-pressed="true"] { border-color: var(--accent); background: var(--user); color: var(--accent); }
@media (max-width: 800px) {
  #composer.composer { padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); max-height: 60%; }
  #composer .composer-meta { justify-content: safe flex-end; }
  #composer .meta-btn { min-height: 32px; padding: 3px 5px; }
  #composer .attachment-card { flex-basis: 180px; width: 180px; }
  #composer .remove-file { flex-basis: 44px; width: 44px; min-height: 44px; }
  #composer .expand-btn { width: 44px; height: 44px; min-height: 44px; }
  #composer.has-long-text textarea { padding-right: 44px; }
  #composer .tool-pill { padding-left: 5px; }
  #composer .tool-pill button { min-height: 32px; height: 32px; flex-basis: 32px; width: 32px; }
  #composerSheet.composer-sheet { width: 100%; max-width: 540px; border-bottom: 0; border-radius: 24px 24px 0 0; }
  .keyboard-open #composer.composer { padding-bottom: 4px; max-height: 65%; }
}
@media (prefers-reduced-motion: reduce) { .run-indicator { animation: none; } }
#chatToolLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the pill shows focus (.composer-surface:focus-within); no second ring inside it */
#composer .composer-surface textarea:focus-visible { outline: none; }