:root {
  --bg: #121016; --panel: #1b1622; --panel-2: #241e2d; --line: #2f2839; --text: #ece8f2; --muted: #9a93a6;
  --accent: #f5b301; --ok: #4cc38a; --bad: #ff6b6b; color-scheme: dark;
}
/* Light theme (Settings → Appearance; index.html sets data-theme before anything draws). The same variables, so every
   page follows. The accent is a deeper amber than the dark theme's, so orange text stays readable on white. Code
   blocks stay dark in both (like most editors). */
:root[data-theme=light] {
  --bg: #f4f2f7; --panel: #ffffff; --panel-2: #ece8f1; --line: #d9d2e1; --text: #1d1724; --muted: #645d70;
  --accent: #c98a00; --ok: #1f8a57; --bad: #c93636; color-scheme: light;
}
:root[data-theme=light] .nav-backdrop { background: rgba(20, 16, 28, .35); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--accent); color: #1b1300; border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
button.ghost:hover { color: var(--text); border-color: var(--muted); }
button.danger { background: transparent; color: var(--bad); border: 1px solid #5a2a31; font-weight: 500; }
button.small, .small { font-size: 13px; }
button.small { padding: 5px 10px; }
input, select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--muted); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.status { min-height: 20px; font-size: 13px; margin-top: 6px; }
.status.ok { color: var(--ok); } .status.bad { color: var(--bad); } .status.warn { color: var(--accent); }
label.check.remember { align-items: flex-start; line-height: 1.3; cursor: pointer; }
label.check.remember input { margin-top: 2px; }
.banner { background: #3a2c00; color: #ffe08a; padding: 8px 20px; font-size: 14px; text-align: center; }

.center-screen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.card.auth { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.card h2, .card h3 { margin: 0; }
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 26px; font-weight: 700; }
.brand img { width: 38px; height: 38px; }
.brand em { color: var(--accent); font-style: normal; }
.small-brand { font-size: 26px; justify-content: flex-start; letter-spacing: -.01em; }
/* Sign-in (animated logo, index.html) and the two-factor steps (static logo): the logo above the name. */
.brand.brand-stack { flex-direction: column; gap: 4px; font-size: 24px; }
.brand.brand-stack img { width: 88px; height: 88px; display: block; }
.brand.brand-stack picture { display: block; line-height: 0; }
.brand.mfa-logo img, .brand.setup-logo img { width: 64px; height: 64px; }
.brand.setup-logo { margin-bottom: 4px; }
@media (max-width: 640px) { .brand.brand-stack img { width: 72px; height: 72px; } .brand.mfa-logo img, .brand.setup-logo img { width: 56px; height: 56px; } }
/* The sign-in hero (0.1.29 build 2): a big animated logo on a warm glow, the name and the tagline above the card. */
.signin-hero { position: relative; width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 10px; text-align: center; isolation: isolate; }
.signin-hero::before { content: ''; position: absolute; inset: -16px 0 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 42%, rgba(245, 179, 1, .24), rgba(245, 179, 1, .08) 55%, transparent); }
.signin-hero .signin-logo { display: block; line-height: 0; filter: drop-shadow(0 10px 28px rgba(245, 120, 1, .28)); }
.signin-hero .signin-logo img { width: 168px; height: 168px; display: block; }
.hero-name { margin: 6px 0 0; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; }
.hero-name em { color: var(--accent); font-style: normal; }
.hero-tag { margin: 0; color: var(--muted); font-size: 17px; }
:root[data-theme=light] .signin-hero::before { background: radial-gradient(closest-side at 50% 42%, rgba(201, 138, 0, .22), rgba(201, 138, 0, .07) 55%, transparent); }
@media (max-width: 640px) {
  .signin-hero { padding: 12px 8px 4px; gap: 4px; }
  .signin-hero .signin-logo img { width: 116px; height: 116px; }
  .hero-name { font-size: 34px; }
  .hero-tag { font-size: 15px; }
}
@media (max-height: 700px) and (min-width: 641px) { .signin-hero .signin-logo img { width: 128px; height: 128px; } .signin-hero { padding-top: 8px; } }
.small-brand img { width: 40px; height: 40px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.idp { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.idp:hover { border-color: var(--muted); }

.topbar { display: flex; align-items: center; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.tabs button { background: transparent; color: var(--muted); font-weight: 500; padding: 7px 12px; }
.tabs button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.who { display: flex; align-items: center; gap: 10px; }
.who .app-version { display: none; } /* only in the phone/tablet menu (media query below) */
.view { padding: 24px max(20px, calc((100% - 1000px) / 2)) 60px; display: flex; flex-direction: column; gap: 18px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; }
.scroll { overflow-x: auto; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; margin: 1px 2px; }
.chip.admin { border-color: var(--accent); color: var(--accent); }
.chip.off { color: var(--bad); border-color: #5a2a31; }
.chip button { background: none; border: 0; color: var(--muted); padding: 0 0 0 4px; cursor: pointer; }
.qr { background: #fff; padding: 10px; border-radius: 10px; width: 200px; height: 200px; }
code.secret { background: var(--bg); padding: 4px 8px; border-radius: 6px; word-break: break-all; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
label.check input { width: auto; }
.empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
@media (max-width: 640px) {
  .view { padding: 16px 12px 40px; }
}

/* privacy / terms pages */
.legal { max-width: 760px; margin: 0 auto; gap: 6px; line-height: 1.65; }
.legal h1 { margin: 18px 0 0; }
.legal h2 { font-size: 17px; margin: 18px 0 0; }
.legal ul { margin: 0; padding-left: 20px; }
.legal .brand { justify-content: flex-start; color: var(--text); }
.legal-links { text-align: center; margin-top: 4px; }

/* devices */
.device { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.device > .row { flex-wrap: wrap; justify-content: flex-end; }
.device .dot { width: 10px; height: 10px; border-radius: 50%; }
.device .dot.on { background: var(--ok); box-shadow: 0 0 0 3px #4cc38a33; }
.device .dot.off { background: var(--bad); box-shadow: 0 0 0 3px #ff6b6b33; }
.device-net { font-variant-numeric: tabular-nums; }
.device-result .wake-hint { margin-left: 8px; }
.device-result { grid-column: 2 / -1; white-space: pre-line; }
pre.cmd { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; font-size: 13px; margin: 0; }
@media (max-width: 640px) { .device { grid-template-columns: auto 1fr; } .device .row { grid-column: 1 / -1; } }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; width: fit-content; max-width: 100%; }
.seg-btn { background: transparent; color: var(--muted); font-weight: 500; border-radius: 0; padding: 8px 14px; font-size: 14px; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
/* Sub-menus (subnav.js): a page's sections in one row at its top; a second, smaller row for a section's own
   (Settings → Devices). Never wraps: it scrolls sideways when it doesn't fit (phones), the open tab kept in sight. */
.subnav { flex-wrap: nowrap; flex-shrink: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--panel); -webkit-overflow-scrolling: touch; }
.subnav::-webkit-scrollbar { display: none; }
.subnav .seg-btn { flex: 0 0 auto; white-space: nowrap; }
.subnav-2 { background: transparent; }
.subnav-2 .seg-btn { padding: 6px 12px; font-size: 13px; }
.subpane, .subhost { display: flex; flex-direction: column; gap: 18px; }
.sub-off { display: none !important; }
.subnav-empty { padding: 4px 2px; }
.downloads { display: flex; flex-wrap: wrap; gap: 8px; }
a.download { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 14px; }
a.download:hover { border-color: var(--accent); text-decoration: none; }
.cmd-box { position: relative; }
.cmd-box pre.cmd { padding-right: 78px; }
.copy-btn { position: absolute; top: 6px; right: 6px; }

/* settings */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: end; }
.fields .field.check, .fields .form-heading { grid-column: 1 / -1; }
.fields .field.short { max-width: 100%; }
.fields .service-help { grid-column: 1 / -1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.service-help p { margin: 4px 0 0; }
.agent-form > .agent-note { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); margin-bottom: 8px; }
.gemini-banner { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); margin-bottom: 8px; }
.gemini-banner .row { margin-top: 6px; }
.field-label { font-size: 13px; color: var(--muted); }
.field textarea { min-height: 70px; resize: vertical; }
.field input[type=color] { height: 40px; padding: 4px; }
.form-heading { font-weight: 600; margin-top: 8px; }
.agent-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.agent-card > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.agent-card > summary::-webkit-details-marker { display: none; }
.agent-card[open] > summary { border-bottom: 1px solid var(--line); }
.agent-form { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px; }
.agent-form hr { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.agent-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-size: 15px; flex: none; }
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.service { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--bg); color: var(--text); border: 1px solid var(--line); font-weight: 500; padding: 10px; }
.service:hover { border-color: var(--accent); }
.service-text { display: flex; flex-direction: column; line-height: 1.3; }
.account-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.signin-row { display: flex; flex-direction: column; gap: 6px; }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); }
.custom-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 12px; color: var(--accent); font-size: 14px; }
.prompt-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.prompt-slash { color: var(--accent); font-weight: 700; }
select.test-on { width: auto; }
label.field.check { flex-direction: row; align-items: center; gap: 8px; }
label.field.check input { width: auto; }
.signin-row .status:empty, .agent-form > .status:empty { display: none; }
.account-box > .status:empty { display: none; }
.signin-summary { font-weight: 600; }
.signin-where { margin-top: -6px; }
.account-box .signin-details-btn { align-self: flex-start; }
.signin-details { padding-left: 10px; border-left: 2px solid var(--line); gap: 10px; }
.inline { align-self: flex-start; }
.chip.update { border-color: #ff8a1f; color: #ff8a1f; margin-left: 6px; }
.chip.uptodate { border-color: #2e5a45; color: var(--ok); margin-left: 6px; }
.latest-build { color: #ff8a1f; font-weight: 600; white-space: nowrap; }
.service-group { margin-top: 6px; }
/* What is free, on the service button: a sign-in with a free tier, or a free API key. */
.service-badge { align-self: flex-start; margin: 4px 0 0; font-size: 11px; font-weight: 600; }
.service-badge.free { border-color: #2e5a45; color: var(--ok); }
.service-badge.freekey { border-color: #2d4f73; color: #6cb4ff; }
.advanced { padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
audio { width: 100%; max-width: 420px; }
.steps summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.steps ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.device-backup { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.restore-box { margin-top: 6px; }

/* chat */
.view.chat-view { padding: 0; height: calc(100vh - 62px); height: calc(100dvh - 62px); gap: 0; }
.chat { display: grid; grid-template-columns: 260px 1fr; height: 100%; min-height: 0; }
.chat-side { border-right: 1px solid var(--line); background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.chat-agents { display: flex; flex-direction: column; gap: 4px; }
.chat-agent, .chat-conv { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; color: var(--text); font-weight: 500; padding: 7px 8px; border-radius: 9px; }
.chat-agent:hover, .chat-conv:hover { background: var(--panel-2); }
.chat-agent.on, .chat-conv.on { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.chat-agent .agent-icon { width: 24px; height: 24px; font-size: 13px; }
.chat-list { display: flex; flex-direction: column; gap: 2px; }
.chat-list-head { padding: 8px 8px 2px; }
.chat-list-toggle { display: flex; justify-content: space-between; width: 100%; background: transparent; text-align: left; font-weight: 600; border-radius: 6px; }
.chat-list-toggle:hover { color: var(--text); }
.chat-list-count { font-weight: 400; opacity: .7; }
.chat-list-sep { border: 0; border-top: 1px solid var(--line, rgba(255,255,255,.12)); margin: 8px 6px 2px; }
.chat-conv-title .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.chat-conv { justify-content: space-between; font-size: 14px; font-weight: 400; }
.chat-conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv-time { font-size: 12px; flex: none; }
.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat-who { display: flex; align-items: center; gap: 10px; }
.chat-device { width: auto; padding: 5px 8px; font-size: 13px; }
.chat-title { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.messages { flex: 1; overflow-y: auto; padding: 24px max(20px, calc((100% - 820px) / 2)); }
.chat-empty { margin-top: 16vh; text-align: center; color: var(--muted); padding: 0 20px; }
.chat-empty-title { font-size: 26px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
.msg { margin: 0 0 22px; line-height: 1.6; }
.msg.user .body { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; white-space: pre-wrap; margin-left: auto; width: fit-content; max-width: 85%; }
.msg.assistant .body > :first-child { margin-top: 0; }
.msg.streaming .body::after { content: '▍'; color: var(--accent); animation: blink 1s steps(1) infinite; }
/* The cursor at the end of the last line of text (not on a line of its own), with the timer just under it. */
.msg.streaming .body:has(> :is(p, h1, h2, h3, h4, h5, h6, ul, ol):last-child)::after { content: none; }
.msg.streaming .body > :is(p, h1, h2, h3, h4, h5, h6):last-child::after,
.msg.streaming .body > :is(ul, ol):last-child > li:last-child::after { content: '▍'; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 1px; }
.msg.streaming .body > :last-child { margin-bottom: 0; }
@keyframes blink { 50% { opacity: 0; } }
.body pre { background: #0d0b11; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.body code { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 0.9em; }
.body :not(pre) > code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }
.body blockquote { border-left: 3px solid var(--line); margin: 0; padding-left: 12px; color: var(--muted); }
.body table { width: auto; }
.codeblock { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0d0b11; }
.codebar { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.codeblock pre { margin: 0; border: 0; border-radius: 0; }
.copy-code { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 500; }
.copy-code.done { color: var(--ok); border-color: var(--ok); }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tool { font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool b { color: var(--text); font-weight: 600; }
.working { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.working-label:empty { display: none; }
.live-stats { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.live-stats:empty { display: none; }
.reply-stats { font-size: 12px; color: var(--muted); opacity: .8; margin-top: 6px; font-variant-numeric: tabular-nums; cursor: default; width: fit-content; }
.reply-stats:hover { opacity: 1; }
.composer-wrap { border-top: 1px solid var(--line); padding: 12px max(20px, calc((100% - 820px) / 2)) 16px; }
.composer { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; border-radius: 14px; padding: 11px 14px; line-height: 1.45; max-height: 240px; }
.composer-status:empty { display: none; }
@media (max-width: 760px) {
  .chat-title { max-width: 50vw; }
}
/* chat extras */
.send-group { position: relative; display: flex; }
.send-group > button[type=submit] { border-radius: 9px 0 0 9px; }
.send-more { border-radius: 0 9px 9px 0; padding: 9px 10px; border-left: 1px solid rgba(0,0,0,0.25); }
.send-group > button[type=submit]:only-child { border-radius: 9px; }
.menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.chat-menu-wrap { position: relative; }
.chat-menu-wrap .menu { top: calc(100% + 6px); bottom: auto; }
.menu-item { background: transparent; color: var(--text); text-align: left; font-weight: 400; padding: 8px 10px; border-radius: 8px; }
.menu-item:hover { background: var(--panel-2); }
.menu-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px 2px; }
.context-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 0; flex-wrap: wrap; }
.context-bar:empty { display: none; }
.meter { width: 120px; height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--ok); }
.meter.yellow .meter-fill { background: #e8c547; } .meter.orange .meter-fill { background: #f08c2e; } .meter.red .meter-fill { background: var(--bad); }
.ctx-ok { color: var(--muted); } .ctx-yellow { color: #e8c547; } .ctx-orange { color: #f08c2e; } .ctx-red { color: var(--bad); font-weight: 600; }
.restart-btn { background: var(--bad); color: #fff; }
.msg.notice { text-align: center; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 8px 0; color: var(--accent); font-size: 14px; }
.msg.notice.context-restart { border-top: 2px solid #2f81f7; border-bottom: none; color: #2f81f7; }
.msg.notice details { text-align: left; color: var(--text); margin-top: 6px; }
.prompt-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.round-dots { display: flex; gap: 3px; flex: none; }
.round-dots .dot { width: 7px; height: 7px; border-radius: 50%; }
.askall-cols { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 10px; padding: 12px; overflow-x: auto; min-height: 0; }
.askall-col { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-height: 0; }
.askall-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.askall-top input { width: auto; }
.askall-top button { margin-left: auto; }
.messages.compact { padding: 12px; font-size: 14px; }
.usage-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.usage-table th, .usage-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.usage-table th:first-child, .usage-table td:first-child { text-align: left; }
.usage-table tr.total td { font-weight: 600; border-bottom: none; }
.usage-ai { display: inline-flex; gap: 8px; align-items: center; }
.usage-ai .dot { width: 9px; height: 9px; border-radius: 50%; }
.usage-chart { display: flex; align-items: flex-end; gap: 2px; height: 110px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.usage-day { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; min-width: 2px; }
.usage-day:hover { background: var(--panel-2); }
.usage-day .bar { width: 100%; flex-shrink: 0; }
.usage-axis { display: flex; justify-content: space-between; margin: 4px 0 10px; }
.usage-period { width: auto; padding: 5px 8px; }
.usage-scroll { overflow-x: auto; }
.dir-browser { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.dir-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; }
.schedule { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.days { display: flex; flex-wrap: wrap; gap: 4px; }
.day { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; font-weight: 500; font-size: 13px; }
.day.on { color: var(--text); border-color: var(--accent); background: var(--panel-2); }
.icon-btn { padding: 8px 10px; font-size: 16px; }
.icon-btn.recording { color: var(--bad); border-color: var(--bad); }
/* 🎤 in the message box: the live level (a ring and a bar that follow the voice), the time, and the state. */
.mic-wrap { position: relative; display: inline-flex; --level: 0; }
.mic-wrap .mic-btn { min-width: 40px; transition: box-shadow 60ms linear; }
.mic-wrap[data-state=listening] .mic-btn { box-shadow: 0 0 0 calc(1px + var(--level) * 7px) rgba(255, 107, 107, 0.35); }
.mic-wrap[data-state=error] .mic-btn { color: var(--bad); border-color: var(--bad); }
.mic-meter { position: absolute; right: -7px; bottom: 2px; width: 4px; height: calc(100% - 4px); border-radius: 2px; background: var(--line); overflow: hidden; display: none; }
.mic-meter-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--level) * 100%); background: var(--bad); transition: height 60ms linear; }
.mic-wrap[data-state=listening] .mic-meter { display: block; }
.mic-time { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--bad); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.status .voice-settings-btn { margin-left: 6px; }
.level-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; flex: 1; min-width: 120px; --level: 0; }
.level-meter > span { display: block; height: 100%; width: calc(var(--level) * 100%); background: var(--ok); transition: width 60ms linear; }
.install-card .install-steps { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .mic-wrap .mic-btn, .mic-meter-bar, .level-meter > span { transition: none; }
  .mic-wrap[data-state=listening] .mic-btn { box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.5); }
  .mic-wrap[data-state=listening] .mic-meter, .level-meter { display: none; }
  .spinner { animation: none; border-top-color: var(--muted); border-style: dotted; }
}
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.attach-chips:empty { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x { background: none; color: var(--muted); padding: 0; font-size: 12px; }
.composer-wrap.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.msg.user .msg-files { justify-content: flex-end; }
.msg-thumb { max-width: 220px; max-height: 180px; border-radius: 10px; border: 1px solid var(--line); display: block; }
/* Files an agent produced (0.1.22): pictures under the reply, other files as chips */
.msg-files.agent-files { margin: 8px 0 4px; flex-direction: column; align-items: flex-start; }
.file-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.file-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.file-pic { margin: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.agent-thumb { cursor: zoom-in; background: #fff1; min-width: 48px; min-height: 48px; object-fit: contain; }
.file-chip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; max-width: 100%; font-size: 13px; }
.file-chip .file-name { font-weight: 600; overflow-wrap: anywhere; }
.file-chip .file-note { flex-basis: 100%; overflow-wrap: anywhere; }
.file-chip.kept { border-style: dashed; }
.file-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.file-actions .small, .file-chip .small { padding: 2px 8px; font-size: 12px; }
.file-actions.compact { opacity: 0.75; }
.file-pic:hover .file-actions.compact { opacity: 1; }
.file-save-pop { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; min-width: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 8px 24px #0008; }
.file-save-pop .row { display: flex; gap: 6px; }
.image-view { position: fixed; inset: 0; z-index: 1000; background: #000d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: zoom-out; }
.image-view img { max-width: 94vw; max-height: 88vh; object-fit: contain; background: #fff1; }
.image-view-cap { color: #ddd; font-size: 13px; }
.files-omitted { flex-basis: 100%; }
.askall-card-files { margin-left: 6px; }
.msg-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.msg-actions .speak { opacity: 0.55; padding: 2px 8px; }
.msg.assistant:hover .speak, .speak.playing { opacity: 1; }
.speak.playing { color: var(--accent); border-color: var(--accent); }
/* Primary device (Devices tab), device switches in chats, "Run this on … instead?" */
.device-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip.primary-badge { border-color: #f5b301; color: #f5b301; margin-left: 4px; }
.msg-device { font-size: 12px; color: var(--muted); margin-top: 4px; }
.device-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; border: 1px solid #f5b301; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.device-suggest .grow { flex: 1 1 200px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--bad); color: var(--text); font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); cursor: pointer; }
.speak-status { margin-left: 6px; }

/* ===== Per-agent "Import chats" dialog (import.js) — added as one block; nothing above was changed ===== */
dialog.import-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.import-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.import-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.import-head h3 { margin: 0; }
.import-body { padding: 16px 20px 20px; }
.chat-new-row { flex-wrap: nowrap; gap: 6px; }

/* ===== Settings → Backups → Restore from a backup (settings.js restoreCard) ===== */
.warn-text { color: #f5b301; }
.restore-list { max-height: 520px; overflow: auto; }
.restore-item .chip { margin-left: 6px; }
.restore-explain { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.restore-progress { min-height: 60px; }

/* ===== Devices: full-width note under a device row ===== */
.device .device-note { grid-column: 1 / -1; }

/* ===== Chat UI 2 (chat.js + split.js): agent drag order, Ask-N picker, ⋯ by the name, chat row actions, Select, Split Chat, workspaces ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* agents: drag to reorder (mouse; touch = hold, then drag), Alt+↑/↓ */
.chat-agent[data-agent] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chat-agent:focus-visible, .chat-conv:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chat-agents.reordering .chat-agent { transition: transform .12s; }
.chat-agent.dragging { background: var(--panel-2); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(0,0,0,.45); opacity: .95; cursor: grabbing; position: relative; z-index: 2; }
/* ▾ next to Send: "Ask several AIs the same question" */
.menu.ask-picker { min-width: 280px; gap: 2px; }
.askall-top input { accent-color: var(--accent); }
.ask-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ask-row:hover { background: var(--panel-2); }
.ask-row input { width: 16px; height: 16px; margin: 0; flex: none; }
.ask-row .agent-icon { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.ask-row .ask-name { flex: 1; }
.ask-go { margin: 8px 4px 2px; }
.askall-col.off { opacity: .5; }
.askall-col.off .messages { filter: grayscale(.6); }
/* chat header: the ⋯ right after the agent's name, its menu opens under it */
.chat-who { flex-wrap: wrap; min-width: 0; }
.chat-menu-slot { display: inline-flex; }
.chat-menu-slot:empty { display: none; }
.chat-menu-btn { padding: 2px 9px; font-size: 16px; line-height: 1.2; border-color: transparent; }
.chat-menu-btn:hover { border-color: var(--line); background: var(--panel-2); }
.chat-who .chat-menu-wrap .menu { left: 0; right: auto; top: calc(100% + 6px); bottom: auto; min-width: 290px; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; }
.chat-who .chat-menu-wrap .menu-item { white-space: nowrap; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.menu-delete { color: var(--bad); }
.chat-head .chat-title { margin-left: auto; }
.pane-busy { font-size: 12px; color: var(--accent); animation: blink 1.4s steps(1) infinite; }
.toast.toast-ok { border-color: var(--ok); }
/* chat rows: 📌 ✎ 🗑 on hover (always, compact, on touch screens) */
.chat-conv { cursor: pointer; position: relative; min-height: 36px; }
.chat-conv-title { flex: 1; min-width: 0; }
.chat-conv-actions { display: none; gap: 2px; flex: none; }
.chat-conv:hover .chat-conv-actions, .chat-conv:focus-within .chat-conv-actions { display: inline-flex; }
.chat-conv:hover .chat-conv-time, .chat-conv:focus-within .chat-conv-time { display: none; }
.conv-act { background: transparent; border: 0; color: var(--muted); padding: 2px 5px; font-size: 13px; line-height: 1.2; border-radius: 6px; filter: grayscale(1); opacity: .75; }
.conv-act:hover { background: var(--line); opacity: 1; filter: none; }
.conv-act.conv-delete:hover { background: #5a2a31; }
.conv-pin.on { filter: none; opacity: 1; }
.chat-conv.pinned .chat-conv-actions { display: inline-flex; }
.chat-conv.pinned:not(:hover):not(:focus-within) .conv-act:not(.conv-pin) { display: none; }
.chat-conv-rename { flex: 1; min-width: 0; padding: 3px 8px; font-size: 14px; border-color: var(--accent); border-radius: 6px; }
.chat-conv.renaming .chat-conv-time, .chat-conv.renaming .chat-conv-actions { display: none !important; }
.chat-conv.in-split { box-shadow: inset 2px 0 0 #7c6cff; }
.chat-conv.busy .chat-conv-title { color: var(--text); }
.chat-conv.workspace .chat-conv-title { color: var(--text); }
@media (hover: none) {
  .chat-conv-actions { display: inline-flex; }
  .chat-conv .chat-conv-time { display: none; }
  .conv-act { padding: 2px 4px; font-size: 12px; opacity: .6; }
}
/* "Pinned Chats" and the other section heads: a hairline after the label */
.chat-list-toggle > span:first-child { display: flex; align-items: center; gap: 8px; flex: 1; }
.chat-list-toggle > span:first-child::after { content: ''; flex: 1; height: 1px; background: var(--line); margin-right: 8px; }
/* Select mode → Split chat, or Delete */
.chat-select-bar { display: flex; align-items: center; gap: 6px; min-height: 28px; flex-wrap: wrap; }
.chat-select-actions { flex-basis: 100%; display: flex; gap: 6px; justify-content: flex-end; }
.chat-select-all { padding: 3px 8px; white-space: nowrap; }
.chat-delete-go { white-space: nowrap; }
button.danger:disabled { opacity: .45; }
.chat-select-bar .grow { flex: 1; }
.chat-select-bar .chat-select { margin-left: auto; padding: 3px 10px; }
.chat-select-bar.on { padding: 6px 6px 6px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel-2); }
.chat-select-cancel { padding: 3px 8px; }
.chat-split-go { white-space: nowrap; }
.chat-conv-check { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.chat-conv.picked { background: var(--panel-2); }
/* Split Chat */
.split { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.split.drop-chat .split-panes { outline: 2px dashed var(--accent); outline-offset: -6px; }
.split-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--panel); }
.split-bar .grow { flex: 1; }
.split-name { font-weight: 600; }
.split-busy.on { color: var(--accent); }
.split-all-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--muted); }
.split-all-toggle input { width: auto; margin: 0; accent-color: var(--accent); }
.split.all .split-all-toggle { color: var(--accent); border-color: var(--accent); }
.split-pop-wrap { position: relative; }
.split-pop-wrap .menu { top: calc(100% + 6px); bottom: auto; right: 0; max-height: 60vh; overflow-y: auto; }
.split-save-menu { gap: 8px; padding: 10px; min-width: 280px; }
.split-save-menu .menu-head { padding: 0 2px; }
.split-add-item { display: flex; align-items: center; gap: 8px; }
.split-add-item .dot, .split-add-list .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.split-add-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-new-agents { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 6px; }
.split-new-agent { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; }
.split-new-agent .agent-icon { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
.split-tabs { display: none; }
.split-panes { flex: 1; display: flex; min-height: 0; gap: 0; padding: 10px; overflow: hidden; }
.split-pane { flex: 1 1 0; min-width: 240px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.split-pane.busy { border-color: #6b5410; box-shadow: 0 0 0 1px #f5b30133; }
.split-pane.flash { box-shadow: 0 0 0 2px var(--accent); }
.split-pane .chat-head { padding: 8px 10px; gap: 6px; }
.split-pane .chat-who { gap: 6px; }
.split-pane .chat-who .agent-icon { width: 24px; height: 24px; font-size: 13px; }
.split-pane .chat-device { padding: 3px 6px; font-size: 12px; max-width: 140px; }
.split-pane .chat-title { max-width: 100%; flex: 1 1 100%; order: 3; font-size: 13px; margin-left: 0; }
.split-pane .pane-close { order: 2; margin-left: auto; padding: 2px 8px; border-color: transparent; }
.split-pane .composer-wrap { padding: 8px 10px 10px; }
.split-pane .composer { gap: 6px; }
.split-pane .composer .icon-btn { padding: 7px 8px; font-size: 15px; }
.split-pane .composer textarea { padding: 9px 12px; }
.split-pane .msg.user .body { max-width: 92%; }
.split.all .split-pane .composer, .split.all .split-pane .prompt-hints, .split.all .split-pane .attach-chips { display: none; }
.split-shared { background: var(--panel); }
.split-handle { flex: 0 0 10px; cursor: col-resize; position: relative; touch-action: none; }
.split-handle::after { content: ''; position: absolute; top: 30%; bottom: 30%; left: 4px; width: 2px; border-radius: 2px; background: var(--line); transition: background .15s; }
.split-handle:hover::after, .split-handle.dragging::after, .split-handle:focus-visible::after { background: var(--accent); top: 10%; bottom: 10%; }
.split-handle:focus-visible { outline: none; }
.split-add-col { justify-content: center; align-items: center; gap: 6px; padding: 20px; border-style: dashed; background: transparent; text-align: center; }
.split-add-list { display: flex; flex-direction: column; gap: 2px; width: min(320px, 100%); margin-top: 8px; text-align: left; }
.split-add-list .split-new-agents { justify-content: center; }
/* tablet: two panes at a time, sideways to the others */
@media (max-width: 1199px) {
  .split-panes { overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; }
  .split-pane { flex: 0 0 calc(50% - 5px) !important; scroll-snap-align: start; min-width: 0; }
  .split-handle { display: none; }
}
/* phone: one pane, swipe (or tap a tab) for the others */
@media (max-width: 760px) {
  .split-bar { padding: 6px 10px; gap: 6px; }
  .split-bar .grow { display: none; }
  .split-busy { flex: 1 1 100%; order: 9; }
  .split-busy:not(.on) { display: none; }
  .split-bar .lbl { display: none; }
  .split-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .split-tabs { display: flex; gap: 4px; padding: 6px 8px 0; overflow-x: auto; scrollbar-width: none; flex: none; }
  .split-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 46vw; background: transparent; color: var(--muted); font-weight: 500; font-size: 13px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 999px; }
  .split-tab.on { color: var(--text); border-color: var(--accent); background: var(--panel-2); }
  .split-tab .agent-icon { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
  .split-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .split-tab-dot { color: var(--accent); }
  .split-panes { padding: 8px; }
  .split-pane { flex: 0 0 100% !important; }
}

/* ===== Device groups, Wake on LAN, missed scheduled runs (fleet.js, usage.js, settings.js schedules) ===== */
.device-group { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px dashed transparent; border-radius: 14px; }
.device-group.drop { border-color: var(--accent); background: #f5b30108; }
.device-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px; }
.device-group-head .group-name { cursor: text; border-bottom: 1px dashed transparent; }
.device-group-head .group-name:hover, .device-group-head .group-name:focus { border-bottom-color: var(--muted); outline: none; }
.group-rename { font: inherit; font-weight: 700; padding: 2px 6px; max-width: 260px; }
.group-empty { padding: 6px 12px; }
.device[draggable="true"] { cursor: grab; }
.group-select { max-width: 170px; padding: 4px 6px; }
.device-result { white-space: pre-line; }
.chip.wol-chip { cursor: pointer; margin-left: 4px; }
.chip.wol-ready { border-color: #2e5a45; color: var(--ok); }
.chip.wol-action { border-color: #ff8a1f; color: #ff8a1f; }
.chip.wol-none { color: var(--muted); }
.wol-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.wol-row .chip { align-self: flex-start; margin: 2px 0; }
.missed-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid #ff8a1f; border-radius: 10px; color: #ffb36b; background: #ff8a1f10; }
.sched-alerts { display: flex; flex-direction: column; gap: 6px; margin: 0 auto 10px; max-width: 1100px; }
.sched-alerts:empty { display: none; }
.sched-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid #ff8a1f; border-radius: 10px; background: var(--panel); font-size: 14px; }
/* The account key (akeyui.js): the new browser's ways in, and the approval pop-up on a browser that holds the key. */
.join-step { border-top: 1px solid var(--line); padding-top: 10px; }
.join-step > summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.join-step h4, .card h4 { margin: 4px 0; font-size: 15px; }
.card.nested { border: 0; padding: 8px 0 0; background: none; box-shadow: none; }
.approval-code { font-size: 30px; font-weight: 700; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.approval-prompt { position: fixed; right: 16px; bottom: 16px; z-index: 1000; width: min(360px, calc(100vw - 32px)); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }

/* A new device asks to be linked (akeyui.js): the orange bar on every page, and its card on Devices. */
.ak-banner { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #ff8a1f; color: #1b1300; font-weight: 600; font-size: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ak-banner .ak-banner-text { flex: 1; min-width: 0; }
.ak-banner button { background: #1b1300; color: #ffd9b3; padding: 6px 14px; }
.ak-banner button.ak-banner-fold { background: transparent; color: #1b1300; padding: 2px 8px; font-size: 16px; }
.ak-banner.folded { padding: 2px 20px; font-size: 12px; font-weight: 600; }
.ak-banner.folded button.ak-banner-review { padding: 1px 10px; font-size: 12px; }
.ak-request { border: 2px solid #ff8a1f; }
.ak-request.ok { border-color: var(--ok); }
.ak-request-facts { display: grid; gap: 2px; color: var(--muted); }
.ak-ask { border: 1px solid #ff8a1f; }
.join-other > summary { cursor: pointer; color: var(--muted); }
.bad-text { color: var(--bad); }

/* ===== 0.1.19: search all chats (search.js) and Ask All in one window (askall.js) ===== */
/* the search box at the top of the chat list */
.chat-search { position: relative; display: flex; align-items: center; }
.chat-search-glass { position: absolute; left: 10px; color: var(--muted); pointer-events: none; font-size: 18px; line-height: 1; }
.chat-search-input { padding: 7px 64px 7px 30px; font-size: 14px; border-radius: 9px; background: var(--bg); cursor: pointer; }
.chat-search-input::placeholder { color: var(--muted); }
.chat-search-kbd { position: absolute; right: 8px; font: 11px ui-monospace, Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; pointer-events: none; background: var(--panel); }
/* the search panel */
.search-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(8, 6, 12, .62); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; }
.search-overlay.hidden { display: none; }
.search-panel { width: min(760px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); overflow: hidden; }
.search-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.search-glass { color: var(--accent); font-size: 20px; line-height: 1; }
.search-input { flex: 1; border: 0; background: transparent; font-size: 17px; padding: 6px 2px; }
.search-input:focus { border: 0; }
.search-input::-webkit-search-cancel-button, .chat-search-input::-webkit-search-cancel-button { display: none; }
.search-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.search-filters select, .search-filters input[type=date] { width: auto; padding: 4px 8px; font-size: 13px; border-radius: 7px; background: var(--panel); color-scheme: dark; }
.search-custom { display: inline-flex; align-items: center; gap: 6px; }
.search-custom.hidden { display: none; }
.search-hint { white-space: nowrap; }
.search-status { padding: 8px 16px 2px; min-height: 18px; }
.search-overlay.busy .search-status::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
.search-old { color: #ffb36b; }
.search-results { overflow-y: auto; padding: 4px 8px 12px; }
.search-group { margin-top: 8px; }
.search-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--agent); position: sticky; top: -4px; background: var(--panel); z-index: 1; }
.search-group-head .agent-icon { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
.search-group-count { margin-left: auto; text-transform: none; letter-spacing: 0; }
.search-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 8px 12px; border-radius: 10px; cursor: pointer; border-left: 2px solid transparent; }
.search-item.on { background: var(--panel-2); border-left-color: var(--agent); }
.search-item-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.search-item-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item-date { flex: none; }
.search-item-snippet { font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.search-who { color: var(--text); font-weight: 500; }
.search-results mark { background: #f5b30133; color: #ffd66b; border-radius: 3px; padding: 0 1px; }
.search-item-title mark { color: var(--accent); background: #f5b30126; }
.search-more { margin: 10px auto 0; display: block; }
.search-pin { font-size: 11px; }
/* the message a search result opened: highlighted for a moment */
@keyframes search-hit { 0%, 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px #f5b30155; background-color: #f5b30114; } 100% { box-shadow: 0 0 0 2px transparent; background-color: transparent; } }
.search-hit { animation: search-hit 2.6s ease-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .search-hit { animation: none; box-shadow: 0 0 0 2px var(--accent); } }
@media (max-width: 760px) {
  .search-overlay { padding: 0; }
  .search-panel { max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .search-hint { display: none; }
}

/* Ask All: one window — the question, status rows while the agents work, the combined answer, a card per agent */
.chat-main > .askall { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.askall-summarizer-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.askall-summarizer { width: auto; padding: 4px 8px; font-size: 13px; }
.askall-thread { padding-top: 18px; }
.askall-hello { margin-top: 12vh; max-width: 560px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 8px; }
.askall-round { margin-bottom: 30px; padding-bottom: 6px; }
.askall-round + .askall-round { border-top: 1px solid var(--line); padding-top: 22px; }
.askall-round > .msg.user { margin-bottom: 14px; }
.askall-status { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.askall-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 3px 2px; }
.askall-row .agent-icon { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
.askall-row-name { font-weight: 600; min-width: 90px; }
.askall-row-state { color: var(--muted); min-width: 84px; }
.askall-row.st-working .askall-row-state { color: var(--agent); }
.askall-row.st-working .askall-row-state::first-letter { animation: blink 1.2s steps(1) infinite; }
.askall-row.st-done .askall-row-state { color: var(--ok); }
.askall-row.st-error .askall-row-state { color: var(--bad); }
.askall-row-stats { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.askall-summary { position: relative; border: 1px solid #f5b30155; border-radius: 14px; background: linear-gradient(180deg, #f5b3010d, transparent 120px), var(--panel); padding: 12px 16px 12px; margin: 0 0 14px; }
.askall-summary.pending { border-style: dashed; border-color: var(--line); background: transparent; }
.askall-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.askall-spark { color: var(--accent); }
.askall-by { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.askall-by .agent-icon { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
.askall-summary > .body > :last-child { margin-bottom: 4px; }
.askall-summary-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.askall-summary-foot .reply-stats { margin-top: 0; }
.askall-summary-wait { display: flex; align-items: center; gap: 4px; font-size: 14px; margin-bottom: 6px; }
.askall-summary .working { margin-top: 4px; }
.attrib { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1; padding: 2px 7px 2px 6px; margin: 0 2px; border-radius: 999px; color: var(--agent); background: color-mix(in srgb, var(--agent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--agent) 45%, transparent); vertical-align: 1px; white-space: nowrap; }
.attrib::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--agent); }
.askall-cards { display: flex; flex-direction: column; gap: 6px; }
.askall-card { border: 1px solid var(--line); border-left: 3px solid var(--agent); border-radius: 10px; background: var(--panel); }
.askall-card[open] { background: var(--bg); }
.askall-card-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 14px; }
.askall-card-head::-webkit-details-marker { display: none; }
.askall-card-head::after { content: '▸'; margin-left: 8px; color: var(--muted); transition: transform .15s; }
.askall-card[open] > .askall-card-head::after { transform: rotate(90deg); }
.askall-card-head .agent-icon { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.askall-card-state { font-size: 12.5px; color: var(--muted); }
.askall-card-state.st-done { color: var(--ok); }
.askall-card-state.st-error { color: var(--bad); }
.askall-card-state.st-working { color: var(--agent); }
.askall-card-stats { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.askall-late { color: #ffb36b; border: 1px solid #ff8a1f55; border-radius: 999px; padding: 0 7px; }
.askall-card-body { padding: 2px 16px 12px; border-top: 1px solid var(--line); }
.askall-card-body > .body { margin-top: 10px; line-height: 1.6; }
.askall-card-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.askall-continue { background: transparent; color: var(--agent); border: 1px solid color-mix(in srgb, var(--agent) 55%, transparent); font-weight: 600; }
.askall-continue:hover:not(:disabled) { background: color-mix(in srgb, var(--agent) 14%, transparent); }
.askall-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.askall-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--muted); user-select: none; }
.askall-chip input { width: auto; margin: 0; accent-color: var(--agent); }
.askall-chip .agent-icon { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
.askall-chip.on { color: var(--text); border-color: color-mix(in srgb, var(--agent) 60%, transparent); background: color-mix(in srgb, var(--agent) 10%, transparent); }
.askall-chip:not(.on) .agent-icon { filter: grayscale(.8); opacity: .6; }
.askall-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.askall-legacy-tag { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.askall-legacy-note { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 18px; }
.chat-conv .round-dots { margin-left: 6px; }
.from-askall { color: var(--accent); font-size: 12px; }
.msg.notice.from-askall { display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .askall-summarizer-wrap > span { display: none; }
  .askall-head .chat-title { display: none; }
  .askall-row-name { min-width: 0; }
  .askall-row-state { min-width: 0; }
  .askall-card-stats { display: none; }
  /* 0.1.29 build 5: the agent cards stay compact on a phone, so the combined answer above them stays in view */
  .askall-card-head { gap: 8px; padding: 6px 10px; font-size: 13px; flex-wrap: wrap; }
  .askall-card-head::after { display: none; }
  .askall-card-state { font-size: 12px; }
  .askall-card-head .askall-continue-head { padding: 4px 10px; font-size: 12.5px; min-width: 0; }
  .askall-continue-head .ac-long { display: none; }
}
.askall-continue-head .ac-short { display: none; }
@media (max-width: 760px) { .askall-continue-head .ac-short { display: inline; } }

/* ---------- the KumbayAI connector (connector.js): approval cards, consent screen, Connectors card ---------- */
.mcp-asks { position: sticky; top: 0; z-index: 901; display: grid; gap: 8px; padding: 8px 20px; background: #ff8a1f; color: #1b1300; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.mcp-ask { display: grid; gap: 6px; }
.mcp-ask + .mcp-ask { border-top: 1px solid rgba(27, 19, 0, .3); padding-top: 8px; }
.mcp-ask-title { font-weight: 700; font-size: 15px; }
.mcp-ask-what { margin: 0; padding: 8px 10px; background: rgba(27, 19, 0, .12); border-radius: 6px; white-space: pre-wrap; word-break: break-word; font-size: 13px; max-height: 140px; overflow: auto; }
.mcp-ask button { background: #1b1300; color: #ffd9b3; padding: 6px 14px; }
.mcp-ask button.mcp-deny { background: transparent; color: #1b1300; border: 1px solid #1b1300; }
.mcp-ask-status { opacity: .85; }
.connect-consent { max-width: 720px; }
.connect-consent h4, .connectors-card h4 { margin: 10px 0 2px; }
.connect-device, .connect-perm label { cursor: pointer; flex-wrap: nowrap; gap: 8px; }
.connect-consent input[type=checkbox], .connect-consent input[type=radio] { width: auto; margin: 0; }
.connect-perm .row { gap: 18px; }
.connect-perm { padding: 6px 0; border-top: 1px solid var(--line); }
.connect-folders { width: 100%; font-family: ui-monospace, monospace; }
.connector-privacy { border-left: 3px solid var(--accent); padding: 6px 10px; background: var(--panel-2); border-radius: 0 8px 8px 0; }
.connector-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.connector-url { padding: 6px 10px; background: var(--panel-2); border-radius: 6px; user-select: all; word-break: break-all; }
.connector-row { padding: 8px 0; border-top: 1px solid var(--line); }
.connector-activity { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.connector-entry { padding: 4px 0; border-top: 1px solid var(--line); }
.connector-entry.bad { color: var(--muted); }
.connector-summary { font-family: ui-monospace, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* ---------- no-hub mode (engine/nohub.js): welcome, free-key guide, "Needs a hub", Runs on, moving to a hub ---------- */
.nohub-welcome { max-width: 760px; margin: 24px auto; }
.nohub-choice { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.nohub-choice button.big { font-size: 16px; padding: 12px 18px; justify-self: start; }
.nohub-guide { max-width: 860px; margin: 24px auto; }
.services .service.on { border-color: var(--accent); }
.nohub-steps { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.nohub-step a { color: var(--accent); }
.nohub-key { max-width: 520px; }
.needs-hub { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.chip.needs-hub-chip { color: var(--muted); }
.service:disabled { opacity: .55; cursor: not-allowed; }
.chip.route-chip { color: var(--muted); }
.runs-on-line { padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 8px 8px 0; }
.nohub-move { border-color: var(--accent); }
.nohub-banner { position: sticky; top: 0; z-index: 902; padding: 8px 20px; background: #5a2a31; color: #ffd9d9; font-size: 14px; }

/* ---------- Health monitor (health.js) ----------
   Status colors are fixed (good / warning / critical) and always come with an icon and a word; text stays in the
   text inks. Sparklines: one series in the chart blue, a dashed reference line at the warning threshold. */
:root { --h-good: #0ca30c; --h-warn: #fab219; --h-crit: #d03b3b; --h-series: #3987e5; }
.chip.health-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.chip.health-chip .h-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.chip.health-chip.h-ok { border-color: #1f5a1f; } .chip.health-chip.h-ok .h-dot { background: var(--h-good); }
.chip.health-chip.h-warn { border-color: #6b5112; } .chip.health-chip.h-warn .h-dot { background: var(--h-warn); }
.chip.health-chip.h-crit { border-color: #7a2a2a; } .chip.health-chip.h-crit .h-dot { background: var(--h-crit); }
.chip.health-chip.h-off { color: var(--muted); }
.chip.health-row-chip { cursor: pointer; margin-left: 4px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-summary { margin: 6px 0; }
.h-device { border-top: 1px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.h-device:first-of-type { border-top: 0; }
.h-alert { border-left: 3px solid var(--muted); padding: 2px 8px; }
.h-alert.h-warn { border-left-color: var(--h-warn); } .h-alert.h-crit { border-left-color: var(--h-crit); } .h-alert.h-ok { border-left-color: var(--h-good); }
.h-alert button { margin-left: 8px; }
.h-note { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; color: var(--muted); }
.h-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.h-tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.h-tile.h-warn { border-color: #6b5112; } .h-tile.h-crit { border-color: #7a2a2a; }
.h-value { font-size: 24px; font-weight: 600; }
.h-meter { height: 6px; border-radius: 3px; background: #24314a; margin: 4px 0; overflow: hidden; }
.h-meter-fill { height: 100%; border-radius: 3px; background: var(--h-series); }
.h-meter-fill.h-warn { background: var(--h-warn); } .h-meter-fill.h-crit { background: var(--h-crit); }
.h-meter-fill.h-health-fill:not(.h-warn):not(.h-crit):not(.h-watch) { background: var(--h-good); }
.h-meter-fill.h-watch { background: #d9a441; }
.h-tile.h-watch { border-color: #5a4720; }
.h-watch-note { color: #e0b055; margin-top: 4px; }
/* The nightly checks (0.1.29 build 2). */
.h-nightly { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); }
.h-finding { border-left: 3px solid var(--muted); padding: 2px 8px; }
.h-finding.h-warn { border-left-color: var(--h-warn); } .h-finding.h-crit { border-left-color: var(--h-crit); }
.h-finding.muted b { font-weight: 500; }
.h-needs { border: 1px dashed var(--h-warn); border-radius: 9px; padding: 6px 10px; }
.spark { position: relative; margin-top: 4px; }
.spark svg { display: block; width: 100%; max-width: 260px; height: 40px; overflow: visible; outline: none; }
.spark-line { fill: none; stroke: var(--h-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--h-series); stroke: var(--panel-2); stroke-width: 2; }
.spark-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.spark-hair { stroke: var(--muted); stroke-width: 1; }
.spark-hover { fill: var(--h-series); stroke: var(--panel-2); stroke-width: 2; }
.spark-tip { position: absolute; top: -26px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 12px; white-space: nowrap; pointer-events: none; }
.spark-empty { padding: 10px 0; }
.h-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.h-table caption { text-align: left; font-weight: 600; padding: 6px 0; }
.h-table th { text-align: left; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; }
.h-table td { border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; vertical-align: top; }
td.h-warn, .bell-sev.h-warn { color: var(--h-warn); } td.h-crit, .bell-sev.h-crit { color: #ff7a7a; } td.h-ok, .bell-sev.h-ok { color: var(--h-good); }
.h-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.h-grid .field { display: flex; flex-direction: column; gap: 2px; }
.h-custom-form.h-inherit { opacity: 0.55; } .h-custom .h-hint { font-size: 12px; } .h-effective { margin: 2px 0; }
.h-plan { border: 1px solid var(--accent); color: var(--text); border-radius: 9px; padding: 6px 10px; }
.h-components { border-top: 1px solid var(--line); padding-top: 10px; }
.h-range { margin-left: auto; }
.bell-wrap { position: relative; display: inline-block; margin-right: 6px; }
.bell { position: relative; }
.bell .bell-count:not(:empty) { margin-left: 4px; background: var(--h-crit); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.bell-panel { position: absolute; right: 0; top: 110%; z-index: 50; width: min(380px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.bell-item { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: start; text-align: left; background: transparent; color: var(--text); font-weight: 400; padding: 6px; border-radius: 8px; }
.bell-item:hover { background: var(--panel-2); }
.bell-item.unread .bell-text { font-weight: 600; }
.health-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, 92vw); }
.health-toast { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 10px; padding: 8px 10px; box-shadow: 0 6px 24px rgba(0,0,0,.4); font-size: 14px; }
.health-toast > span { flex: 1; }
.health-toast.h-warn { border-left-color: var(--h-warn); } .health-toast.h-crit { border-left-color: var(--h-crit); } .health-toast.h-ok { border-left-color: var(--h-good); }
@media (max-width: 700px) { .h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Health alert banners (0.1.23): a banner at the top for 15 s (amber = warning, red = critical; icon + word too), then
   a notification at the bottom of the page until ✕. --hb-bottom: its height, so the page can scroll above it. */
body { padding-bottom: var(--hb-bottom, 0px); }
.hb-host { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.hb-host > * { pointer-events: auto; }
.hb-host.hb-top { top: 0; left: 0; right: 0; align-items: center; padding: 8px 12px 0; }
.hb-host.hb-bottom { left: 16px; bottom: 16px; z-index: 59; width: min(600px, calc(100vw - 32px)); }
.hb { width: min(940px, 100%); border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(0,0,0,.55); position: relative; overflow: visible; }
.hb-banner { padding: 10px 14px 12px; animation: hb-in .25s ease-out; }
.hb-banner.h-warn { background: #2e2408; border-color: var(--h-warn); color: #ffe7a6; }
.hb-banner.h-crit { background: #34121a; border-color: var(--h-crit); color: #ffd9d9; }
.hb-banner .hb-body { color: inherit; opacity: .85; }
.hb-note { background: var(--panel); border-left: 4px solid var(--muted); padding: 8px 10px; }
.hb-note.h-warn { border-left-color: var(--h-warn); } .hb-note.h-crit { border-left-color: var(--h-crit); }
.hb-note .hb-body { color: var(--muted); }
.hb-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hb-item + .hb-item { border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; padding-top: 8px; }
.hb-text { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hb-icon { font-weight: 700; }
.hb-banner .hb-title { font-size: 15px; }
.hb-note .hb-title { font-size: 14px; }
.hb-body { font-size: 13px; flex-basis: 100%; padding-left: 20px; }
.hb-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hb-banner.h-warn .hb-open { background: var(--h-warn); color: #1b1300; }
.hb-banner.h-crit .hb-open { background: var(--h-crit); color: #fff; }
.hb-banner button.ghost { color: inherit; border-color: rgba(255,255,255,.25); }
.hb-banner button.ghost:hover { border-color: rgba(255,255,255,.6); }
.hb-note .hb-open { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.hb-close { min-width: 32px; }
.hb-list { margin-top: 8px; padding-left: 20px; }
.hb-sub .hb-title { font-size: 14px; }
.hb-countdown { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.hb-count-text { min-width: 44px; }
.hb-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.hb-bar-fill { height: 100%; background: currentColor; transition: width .2s linear; }
.hb-remind { position: relative; display: inline-block; }
.hb-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 90; width: 300px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.hb-bottom .hb-menu { top: auto; bottom: calc(100% + 6px); }
.hb-menu .hb-snooze { text-align: left; color: var(--text); }
.hb-custom { display: grid; grid-template-columns: 58px minmax(92px, 1fr) auto; gap: 6px; align-items: center; }
.hb-custom input, .hb-custom select { padding: 5px 8px; font-size: 13px; }
.hb-custom-set { white-space: nowrap; }
.hb-err { color: var(--bad); }
.hb-err:empty { display: none; }
@keyframes hb-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hb-banner { animation: none; } .hb-bar-fill { transition: none; } }
@media (max-width: 700px) {
  .hb-host.hb-top { padding: 6px 6px 0; }
  .hb-host.hb-bottom { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .health-toasts { bottom: calc(16px + var(--hb-bottom, 0px)); }
  .hb-menu { right: auto; left: 0; }
}
/* Pause alerts for this device (Custom settings → Health monitoring) and "alerts paused" in the Health panel */
.h-pause .hp-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; padding-left: 24px; }
.h-pause .hp-types.h-inherit { opacity: .5; }
.h-pause .hp-dur { display: flex; flex-direction: row; align-items: center; gap: 10px; max-width: 360px; }
.h-pause .hp-dur select { width: auto; flex: 1; }
.hp-now, .h-paused { position: relative; background: #1d2333; border: 1px solid #34405c; border-radius: 10px; padding: 8px 12px 8px 34px; }
.h-paused { color: #aac4ff; border-radius: 9px; padding: 4px 10px 4px 30px; }
/* a pause sign (two bars), drawn: the ⏸ glyph is missing from many fonts */
.hp-now::before, .h-paused::before { content: ''; position: absolute; left: 13px; top: 50%; width: 3px; height: 11px; margin-top: -5.5px; background: #aac4ff; box-shadow: 5px 0 0 #aac4ff; border-radius: 1px; }
.h-paused::before { left: 11px; }
.h-paused-mark { color: #aac4ff; }
@media (max-width: 700px) { .h-pause .hp-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Snooze ▾ (0.1.29): one menu on banners, bell items and the Health panel; "What to do" with each alert */
.snz { position: relative; display: inline-block; }
.snz-control { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
.h-alert .snz-control button, .h-alert .snz button { margin-left: 0; }
.snz-menu { width: 316px; }
.snz-inline .snz-menu { position: static; width: auto; margin-top: 6px; box-shadow: none; }
.snz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.snz-label { width: 52px; }
.snz-row .snz-opt { min-width: 34px; padding: 3px 8px; text-align: center; }
.snz-forever { text-align: left; }
.snz-state { color: #aac4ff; }
.h-advice { margin: 4px 0 2px; }
.h-advice summary { cursor: pointer; color: var(--accent); width: fit-content; }
.h-steps { margin: 4px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.h-cmd { font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; user-select: all; overflow-wrap: anywhere; }
.h-admin { font-size: 11px; border: 1px solid #6b5112; color: var(--h-warn); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.h-big { margin-top: 6px; }
.h-big-list { margin: 4px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.h-big-list code { word-break: break-all; }
.h-alert.h-focus { background: var(--panel-2); border-radius: 0 8px 8px 0; }
.hb-tip { font-style: italic; }
.bell-panel { max-height: min(76vh, 640px); overflow-y: auto; }
.bell-row { border-radius: 8px; }
.bell-row + .bell-row { border-top: 1px solid var(--line); }
.bell-tools { padding: 0 6px 6px 32px; display: flex; flex-direction: column; gap: 2px; }
.bell-tools .snz-control { margin-left: 0; }

/* ===== Ask All: "Continue chat with this agent" in each card header (always visible) ===== */
.askall-card-head .askall-continue-head { margin-left: auto; white-space: nowrap; }

/* ---------- the plan (billing.js) ---------- */
.plan-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 20px; font-size: 14px; background: #1f2a3a; color: #cfe3ff; }
.plan-banner .plan-banner-text { min-width: 0; }
.plan-banner button { padding: 4px 12px; }
.plan-banner.phase-trial-nohub { background: #3a2c00; color: #ffe08a; }
.plan-banner.phase-trial-ended, .plan-banner.phase-none { background: #4a1414; color: #ffd0d0; font-weight: 600; }
.plan-card .plan-now { display: flex; flex-direction: column; gap: 4px; }
.plan-card .plan-title { font-size: 17px; }
.plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan-option { border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.plan-option.current { border-color: #f5b301; }
.plan-option .plan-price { font-size: 16px; font-weight: 600; }
.plan-soon { color: #ffe08a; }
.subscribe-screen { border: 1px solid #a33; }
.plan-paused { color: #ffe08a; }
.chip.plan-chip.state-full { background: #1d3b26; color: #a8f0bd; }
.chip.plan-chip.state-nohub { background: #3a2c00; color: #ffe08a; }
.chip.plan-chip.state-disabled { background: #4a1414; color: #ffd0d0; }
.access-cell { min-width: 220px; width: 270px; }
.access-cell .access-more { margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.access-cell .access-more .row, .access-cell > .row { gap: 4px 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.access-cell input.access-note, .access-cell input.comp-note { flex: 1 1 100%; max-width: 100%; }
.access-cell input.access-date { flex: 1 1 130px; min-width: 0; }
.access-cell .access-log { margin-top: 4px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip.plan-chip { white-space: nowrap; }
.access-cell select.access-select { width: 100%; max-width: 100%; padding: 4px 8px; font-size: 13px; text-overflow: ellipsis; }
.access-cell input { padding: 4px 8px; font-size: 13px; }
.access-cell button.small { padding: 4px 10px; }
.access-cell label.check { font-size: 13px; gap: 5px; }
/* 0.1.29: the assigned plan (radios) + "Free" (billing.js accessCells) */
.access-cell .plan-radios { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.access-cell .plan-radios label.check { white-space: nowrap; }
.access-cell > input.comp-note { width: 100%; margin-top: 4px; }
.access-cell > select.access-select { margin-top: 6px; }
.plan-option.preselected { border-color: #f5b301; box-shadow: 0 0 0 1px #f5b301 inset; }
.plan-option .plan-chosen { color: #f5b301; font-weight: 600; }
/* Admin → Users (users.js): the whole window width on desktop, with columns that wrap instead of a sideways
   scrollbar; ≤ 900 px every row is a card with labelled fields. */
.view.wide-view { padding-left: 20px; padding-right: 20px; }
.view.wide-view > .card { padding: 18px 16px; }
.users-table { font-size: 13px; }
.users-table th, .users-table td { padding: 7px 6px; vertical-align: top; }
.users-table th { white-space: nowrap; }
.users-table td { overflow-wrap: anywhere; }
.users-table .user-email { min-width: 150px; max-width: 260px; }
.users-table .user-groups { min-width: 90px; }
.users-table .user-groups .chip { overflow-wrap: normal; }
.users-table .chip.plan-chip { white-space: normal; }
.users-table .let-in { display: block; margin-top: 4px; white-space: nowrap; }
.users-table .user-actions { width: 1%; }
.users-table .user-actions button { display: block; width: 100%; margin-bottom: 4px; white-space: nowrap; }
.users-table .family-cell { min-width: 70px; max-width: 160px; }
.users-table .user-last { min-width: 74px; }
.users-table td.user-signin, .users-table td.trial-end { overflow-wrap: normal; }
.nowrap { white-space: nowrap; }
/* 0.1.29: search + filters, "N of M users", the batch bar and its results (users.js) */
.users-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.users-filters input.users-search { flex: 1 1 260px; min-width: 200px; padding: 6px 10px; }
.users-filters select { padding: 5px 8px; font-size: 13px; width: auto; }
.users-filters .users-days { display: inline-flex; align-items: center; gap: 4px; }
.users-filters input.f-days { width: 64px; padding: 5px 6px; font-size: 13px; }
.users-filters label.check { font-size: 13px; gap: 5px; white-space: nowrap; }
.users-count-row { align-items: center; gap: 10px; }
.users-count { font-weight: 600; }
.users-batch { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.users-batch label.check { font-size: 13px; gap: 5px; white-space: nowrap; }
.users-batch select, .users-batch input { padding: 5px 8px; font-size: 13px; width: auto; }
.users-batch .batch-params { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.users-batch input.batch-note { min-width: 160px; }
.batch-results { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.batch-results:empty { display: none; }
.batch-result.bad { color: #ff9a9a; }
.users-table input.user-pick { width: auto; display: inline-block; margin: 0 6px 0 0; vertical-align: -2px; }
@media (max-width: 900px) {
  .users-filters input.users-search { flex-basis: 100%; }
  .view.wide-view { padding-left: 12px; padding-right: 12px; }
  .subnav { max-width: 100%; border-radius: 12px; }
  .subnav .seg-btn { padding: 10px 14px; }
  .subnav-2 .seg-btn { padding: 8px 12px; }
  .view.wide-view > .card { padding: 14px 12px; }
  .users-table, .users-table tbody { display: block; }
  .users-table tr.users-head { display: none; }
  .users-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
  .users-table td { display: block; padding: 3px 0; border: 0; min-width: 0; max-width: none; width: auto; }
  .users-table td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  .users-table td.user-email, .users-table td.user-groups, .users-table td.access-cell, .users-table td.user-actions { grid-column: 1 / -1; }
  .users-table td.user-email { font-weight: 600; font-size: 14px; }
  .users-table td.user-email::before, .users-table td.user-actions::before { content: none; }
  .users-table td.access-cell::before, .users-table td.user-groups:has(.let-in)::before { display: block; }
  .users-table td.user-actions { display: flex; gap: 8px; padding-top: 6px; }
  .users-table td.user-actions button { width: auto; margin: 0; min-height: 36px; }
  .users-table .let-in { display: inline-block; margin: 4px 0 0 4px; min-height: 36px; }
}
/* Admin → Relays (relays.js) */
.relay-table .dot, .relay-endpoint .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.relay-table .dot.on, .relay-endpoint .dot.on { background: var(--ok); box-shadow: 0 0 0 3px #4cc38a33; }
.relay-table .dot.off, .relay-endpoint .dot.off { background: var(--bad); box-shadow: 0 0 0 3px #ff6b6b33; }
.relay-row.off td { color: var(--muted); opacity: .7; }
.relay-table td.h-warn { overflow-wrap: anywhere; }
.relay-table td.relay-version, .relay-table td.relay-uptime, .relay-table td.relay-beat { white-space: nowrap; }
/* Admin page header and Admin → Versions (web/public/versions.js) */
.admin-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.admin-head h2 { margin: 0; font-size: 20px; }
.ver-rows { display: flex; flex-direction: column; gap: 4px; }
.ver-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 8px; border-left: 3px solid #2e5a45; border-radius: 4px; }
.ver-row .ver-name { min-width: 210px; color: var(--muted); }
.ver-row .small { overflow-wrap: anywhere; }
.ver-row.ver-bad { border-left-color: var(--bad); background: #ff6b6b14; }
.ver-row.ver-bad .ver-num { color: var(--bad); }
/* Notch / Dynamic Island / home indicator (iPhone, iPad, Android cut-outs): viewport-fit=cover in index.html lets the
   page draw under them; these insets keep content and fixed elements clear. All are 0 on desktop browsers. */
body { box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) calc(var(--hb-bottom, 0px) + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px); }
.toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.approval-prompt, .health-toasts { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.hb-host.hb-bottom { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); }
.hb-host.hb-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.image-view { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.search-overlay { padding: calc(9vh + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
@media (max-width: 760px) { .search-overlay { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } } /* phones: Search fills the screen (only the insets) */
.ak-banner, .mcp-asks, .nohub-banner { top: env(safe-area-inset-top, 0px); }
/* The chat view fills the screen below the top bar: take the body's safe-area padding off its height too. */
.view.chat-view { height: calc(100dvh - 62px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
/* Better (all browsers with :has): on Chat, #app is a full-height column and the chat takes what is left under the
   top bar and any banners (trial, "a new device asks to be linked", …), so the message box is never pushed off. */
#app:has(> .view.chat-view) { display: flex; flex-direction: column; height: 100%; }
#app:has(> .view.chat-view) > .view.chat-view { height: auto; flex: 1; min-height: 0; }

/* ---------- Phones and tablets (≤ 900 px): an app-style shell ----------
   Top bar = ☰ + every agent (Chat) or the page name (other pages). On Chat ☰ slides in the chat sidebar (.chat-side:
   search, agents, Ask All, chats) with "⚙ Settings" at its top; that, or ☰ on other pages, slides in #nav-panel (the
   tabs, the account, Sign out). One backdrop; app.js opens and closes them (body.side-open / body.nav-open) and Back
   closes them. Desktop: none of this applies. */
.nav-toggle, .nav-title, .topbar-agents, .side-menu-btn, .nav-backdrop, .page-back, .nav-panel-back { display: none; }
.nav-panel { display: contents; }
/* Family plan (family.js): the owner's card, the member's view (no bell: the owner's devices' alerts aren't theirs). */
body.family-member .bell-wrap { display: none; }
.family-card .family-count { font-weight: 600; }
.family-invite-row input.family-email { flex: 2 1 200px; width: auto; }
.family-invite-row input.family-name { flex: 1 1 140px; width: auto; }
.family-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
/* (div.: the body of a member's app carries the class family-member too) */
div.family-member { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
div.family-member > .family-remove { align-self: flex-start; }
.family-perm-summary { gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.family-perm-summary .family-perm-btn { align-self: flex-start; }
/* The Permissions window (family.js permissionsWindow, docs/FAMILY-PLAN.md §14.2) */
dialog.family-perm-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.family-perm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog.family-perm-dialog form { gap: 8px; }
dialog.family-perm-dialog .row { justify-content: flex-end; gap: 10px; }
.family-perm-indent { margin-left: 26px; }
.family-perm-indent2 { margin-left: 52px; }
.family-perm-devices { gap: 4px; }
.chip.prelaunch-chip { border-color: var(--warn, #f5b301); color: var(--warn, #f5b301); }
.locked-conv .chat-conv-title { opacity: 0.75; }
.family-agents { gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.family-agent { display: flex; flex-direction: column; gap: 2px; }
.family-agent label.check { flex-wrap: wrap; }
.family-agent .family-tools { margin-left: 26px; }
.family-agent .family-tools + .warn-text, .family-agent .family-terms { margin-left: 26px; }
.family-agents .family-save { align-self: flex-start; }
.chip.family-state.ok { border-color: var(--ok); color: var(--ok); }
.family-shared .family-agent { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.family-upsell { padding: 14px 24px; }
.family-join { max-width: 560px; }

@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap; gap: 8px; height: 56px; box-sizing: border-box; padding: 0 8px 0 4px; }
  .topbar .small-brand { display: none; }
  .nav-toggle { display: block; flex: none; width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; background: transparent; color: var(--text); border-radius: 10px; }
  .nav-toggle:active { background: var(--panel-2); }
  .nav-title { display: block; flex: 1; min-width: 0; font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Ways back: "‹ Chat" in the top bar on every other page; "‹ Back to chats" at the top of the pages menu when it
     was opened from the chat sidebar (on Chat). */
  body:not(.on-chat) .page-back { display: block; flex: none; height: 38px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--line); border-radius: 10px; }
  body.on-chat:has(.chat-side .chat-agent) .nav-panel-back { display: block; order: -1; width: 100%; min-height: 44px; margin-bottom: 8px; text-align: left; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--line); border-radius: 10px; }
  /* On Chat: the agents instead of the page name — one row, scrolls sideways when there are many. */
  .topbar:has(.topbar-agents:not(:empty)) .nav-title { display: none; } /* no agents yet (welcome): the page name */
  body.on-chat .topbar-agents:not(:empty) { display: flex; flex: 1; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
  .topbar-agents::-webkit-scrollbar { display: none; }
  .topbar-agent { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; font-size: 14px; }
  .topbar-agent .agent-icon { width: 26px; height: 26px; font-size: 13px; }
  .topbar-agent.on { color: var(--text); background: var(--panel-2); border-color: var(--accent); }
  /* "⚙ Settings ›" at the top of the chat sidebar drawer: opens the pages menu. Bold orange text and a thick orange
     edge so it stands out from the agents under it; the background stays the panel's. */
  .chat-side button.side-menu-btn { display: block; width: 100%; min-height: 48px; text-align: left; padding: 0 14px; font-size: 16px; font-weight: 700; color: var(--accent); background: var(--panel-2); border: 2px solid var(--accent); border-radius: 10px; flex: none; }
  .chat-side button.side-menu-btn:active { background: var(--panel); }

  /* The chat's own header row, slimmed: the agent is already highlighted in the top bar, so its icon and name go;
     the chat title on the left, then the device as a small pill button and the ⋯ menu on the right. */
  .chat-main > .chat-head { padding: 4px 10px; min-height: 42px; gap: 8px; flex-wrap: nowrap; }
  .chat-main > .chat-head .chat-who { order: 2; flex: none; gap: 6px; }
  .chat-main > .chat-head .chat-title { order: 1; flex: 1; min-width: 0; max-width: none; font-size: 14px; }
  .chat-main > .chat-head .chat-who > .agent-icon, .chat-main > .chat-head .chat-agent-name { display: none; }
  .chat-main > .chat-head .chat-device { height: 32px; padding: 0 8px; font-size: 13px; max-width: 42vw; border-radius: 999px; }

  .nav-panel { display: flex; flex-direction: column; position: fixed; z-index: 990; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); box-sizing: border-box;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 10px calc(14px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
    background: var(--panel); border-right: 1px solid var(--line); box-shadow: 8px 0 30px rgba(0,0,0,.45); overflow-y: auto;
    transform: translateX(-105%); transition: transform .2s ease-out; visibility: hidden; }
  body.nav-open .nav-panel { transform: none; visibility: visible; }
  .nav-panel::before { content: 'KumbayAI'; display: block; padding: 4px 12px 14px; font-weight: 700; font-size: 18px; color: var(--accent); }
  .nav-panel .tabs { flex-direction: column; flex-wrap: nowrap; flex: none; gap: 2px; }
  .nav-panel .tabs button { width: 100%; text-align: left; min-height: 48px; padding: 0 14px; font-size: 16px; border-radius: 10px; }
  .nav-panel .tabs button.active { box-shadow: inset 3px 0 0 var(--accent); }
  .nav-panel .who { margin-top: auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 12px 0; border-top: 1px solid var(--line); }
  .nav-panel .who #who-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-panel .who .sign-out { min-height: 44px; }
  /* The alert list opens inside the drawer (it used to hang off the bell to the left, half off the screen). */
  .nav-panel .bell-wrap { display: block; margin: 0; }
  .nav-panel .bell-panel { position: static; width: 100%; max-height: 46vh; margin-top: 8px; box-sizing: border-box; }
  .nav-panel .bell-panel .bell-item, .nav-panel .bell-panel button { min-width: 0; }
  .nav-panel .who .app-version { display: block; text-align: center; padding-top: 2px; }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 980; background: rgba(8, 6, 12, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .nav-backdrop, body.side-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Chat: the conversation gets the whole screen; the agents & chats list is a drawer. */
  .view.chat-view { height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  #app:has(> .view.chat-view) > .view.chat-view { height: auto; }
  .chat { grid-template-columns: 1fr; }
  .chat .chat-side { position: fixed; z-index: 990; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); box-sizing: border-box; max-height: none; border-right: 1px solid var(--line);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(12px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
    box-shadow: 8px 0 30px rgba(0,0,0,.45); transform: translateX(-105%); transition: transform .2s ease-out; visibility: hidden; }
  body.side-open .chat .chat-side { transform: none; visibility: visible; }
  .chat-agent { min-height: 44px; }
  .chat-conv { min-height: 44px; }
  .chat-conv-check { width: 20px; height: 20px; }
  .chat-select-bar.on button { min-height: 36px; }
  .chat-head { padding: 8px 12px; }
  .messages { padding: 16px 12px; }
  .composer-wrap { padding: 10px 10px 12px; }

  /* Voice, made for thumbs: a big round 🎤 (red ring + level while listening), 48 px attach / send, and 🔊 "read
     aloud" under every answer always visible at full strength (there is no hover on a touch screen). */
  .composer { gap: 8px; align-items: center; }
  .composer textarea { min-height: 48px; font-size: 16px; } /* 16 px: iOS doesn't zoom into the box */
  .composer .icon-btn { min-width: 48px; height: 48px; padding: 0; font-size: 20px; border-radius: 12px; }
  .mic-wrap .mic-btn { width: 56px; height: 56px; min-width: 56px; border-radius: 50%; font-size: 26px; padding: 0;
    background: var(--panel-2); border: 2px solid var(--accent); }
  .mic-wrap .mic-btn.recording { background: #3a1c22; border-color: var(--bad); }
  .mic-wrap[data-state=listening] .mic-btn { box-shadow: 0 0 0 calc(3px + var(--level) * 12px) rgba(255, 107, 107, 0.35); }
  .mic-wrap .mic-meter { display: none !important; } /* the ring shows the level */
  .mic-time { font-size: 13px; }
  .send-group > button { height: 48px; }
  /* One big action button, like messaging apps: empty box → 🎤; any text (typed or dictated) or a file → Send.
     Stop (while an agent works) is its own button and always shows. Only when dictation is on. */
  .composer-wrap:not(:has(.attach-chip)) .composer:has(> textarea:placeholder-shown):has(> .mic-wrap:not(.hidden)) > .send-group { display: none; }
  .composer:has(> textarea:not(:placeholder-shown)) > .mic-wrap,
  .composer-wrap:has(.attach-chip) .composer > .mic-wrap { display: none; }
  .msg-actions .speak { opacity: 1; min-width: 48px; min-height: 40px; padding: 4px 14px; font-size: 20px; border-radius: 10px; }
  .msg-actions { gap: 8px; margin-top: 8px; }
}
/* Touch screens: no keyboard-shortcut hints. */
@media (pointer: coarse) { .chat-search-kbd { display: none; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .nav-panel, .chat .chat-side, .nav-backdrop { transition: none; } }

/* Loading (index.html #loading, Chat "Connecting to your devices…"): the logo with its four dots circling the fire
   (loading.svg, generated by ~/scripts/kumbayai/make-loading-svg.py; GIFs of it in brand/). */
.loading-logo { display: block; margin: 0 auto 10px; }

/* Account → Danger zone (app.js dangerCard): Delete all chats, and room for Delete account */
.danger-zone { border-color: #5a2a31; }
.danger-zone h3 { color: var(--bad); }
.danger-zone .danger-row { display: flex; flex-direction: column; gap: 8px; }
.danger-zone .danger-row + .danger-row { border-top: 1px solid var(--line); padding-top: 12px; }
.danger-zone .danger-row:empty { display: none; }
.danger-confirm { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.danger-confirm input { width: 9em; }
/* Account → Danger zone: Delete account's dialog, and the "deletion canceled" note */
.plan-banner.account-note { background: #173a2a; color: #c9f2dc; }
dialog.delete-dialog { background: var(--panel); color: var(--text); border: 1px solid #5a2a31; border-radius: 16px; padding: 20px 22px; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.delete-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog.delete-dialog p { margin: 0; }
dialog.delete-dialog .row { justify-content: flex-end; gap: 10px; }
/* ---------- 🎧 Hands-free conversation (chat.js handsFree): full screen, readable from arm's length ---------- */
.hf { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; cursor: default;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--bg); color: var(--text); --level: 0; }
.hf-who { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.hf-ring { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--line); background: var(--panel); transition: border-color .2s, box-shadow 80ms linear; }
.hf-ring-icon { font-size: 64px; line-height: 1; }
.hf[data-phase=listening] .hf-ring { border-color: var(--bad); box-shadow: 0 0 0 calc(6px + var(--level) * 26px) rgba(255, 107, 107, .28); }
.hf[data-phase=transcribing] .hf-ring, .hf[data-phase=thinking] .hf-ring { border-color: var(--accent); animation: hf-pulse 1.2s ease-in-out infinite; }
.hf[data-phase=speaking] { cursor: pointer; }
.hf[data-phase=speaking] .hf-ring { border-color: var(--ok); animation: hf-pulse .9s ease-in-out infinite; }
@keyframes hf-pulse { 50% { box-shadow: 0 0 0 16px rgba(245, 179, 1, .14); } }
.hf-status { font-size: 30px; font-weight: 700; min-height: 1.3em; }
.hf-line { font-size: 19px; color: var(--muted); max-width: 680px; min-height: 1.5em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hf-tips { font-size: 14px; }
button.hf-stop { min-height: 60px; width: min(320px, 80vw); font-size: 20px; font-weight: 700; border-width: 2px; margin-top: 8px; }
/* The Android widget's Car Mode: only the big microphone, the reply as large text (it scrolls), a small Stop. */
.hf-car .hf-who, .hf-car .hf-tips { display: none; }
.hf-car .hf-ring { width: min(46vmin, 260px); height: min(46vmin, 260px); }
.hf-car .hf-ring-icon { font-size: min(20vmin, 110px); }
.hf-car .hf-status { font-size: 22px; }
/* The microphone shakes when Car Mode starts (the Android app also vibrates the phone). */
.hf-car .hf-ring-icon { animation: hf-shake .5s ease-in-out 1; }
@keyframes hf-shake { 0%, 100% { transform: none; } 15% { transform: translateX(-9px) rotate(-8deg); } 30% { transform: translateX(9px) rotate(8deg); } 45% { transform: translateX(-7px) rotate(-6deg); } 60% { transform: translateX(7px) rotate(6deg); } 75% { transform: translateX(-3px); } }
.hf-car .hf-line { font-size: 24px; color: var(--text); -webkit-line-clamp: unset; display: block; max-height: 36vh; overflow-y: auto; }
.hf-car button.hf-stop { min-height: 48px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .hf-ring { animation: none !important; transition: none; } }

/* Instructions window (guide.js): floats above every page, draggable by its title bar, resizable, can be folded. */
.guide-win { position: fixed; z-index: 999; width: 380px; max-width: calc(100vw - 16px); min-width: 260px; max-height: calc(100vh - 16px); min-height: 90px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 36px rgba(0, 0, 0, .5); resize: both; overflow: hidden; }
.guide-win.folded { resize: none; height: auto !important; min-height: 0; }
.guide-win.folded .guide-body { display: none; }
.guide-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); cursor: move; touch-action: none; user-select: none; }
.guide-win.folded .guide-head { border-bottom: 0; }
.guide-title { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; min-width: 28px; font-weight: 500; }
.guide-btn:hover { color: var(--text); border-color: var(--muted); }
.guide-body { padding: 10px 14px 14px; overflow: auto; flex: 1; font-size: 14px; }
.guide-hint { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.guide-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.guide-step { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.guide-step input { width: auto; margin: 4px 0 0; padding: 0; flex: none; }
.guide-step span { flex: 1; min-width: 0; }
.guide-steps li.done .guide-step span { color: var(--muted); text-decoration: line-through; }
.guide-open { display: inline-block; margin: 3px 0 0 24px; font-size: 13px; }
.guide-tip { margin-top: 12px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 6px; font-size: 13px; color: var(--muted); }
.guide-reset { margin-top: 10px; background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 3px 10px; font-size: 12px; font-weight: 500; }
@media (max-width: 600px) { .guide-win { width: calc(100vw - 16px); } }
.guide-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 0.1.30: Investigate with AI / Fix this for me */
.h-ai { margin: 8px 0 2px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.h-ai-cause { line-height: 1.45; }
.h-ai-fix { background: var(--accent); color: #1a1300; font-weight: 600; }
.h-ai-pre { margin: 2px 0 6px; max-height: 160px; overflow: auto; font-size: 11px; white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; }
.h-ai-ok { color: var(--ok, #5ac88a); }
/* Health → Investigate with AI: the short summary first, Full Report and Continue-in-a-chat behind buttons */
.h-ai-summary { font-size: 15px; line-height: 1.5; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 6px; max-width: 70ch; }
.h-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.h-ai-full { gap: 6px; padding: 8px 0 0; }
.h-ai-chat { background: transparent; color: var(--text); border: 1px solid var(--accent); }
/* 0.1.30 build 11: an investigation running on the device (time so far), and the note in the corner when it ends */
.h-ai-elapsed { font-variant-numeric: tabular-nums; }
.health-toast.h-ai-toast { align-items: flex-start; }
.h-ai-toast-text { line-height: 1.4; overflow-wrap: anywhere; }
.h-ai-toast-open { flex: none; }
@media (max-width: 600px) { .health-toast.h-ai-toast { flex-wrap: wrap; } .h-ai-toast-text { flex-basis: 100%; } }

/* Split Chat: "◫ Split" next to "+ New chat", and the Pop up window (chat.js SPLIT_WINDOW) that shows only the split */
.chat-new-row { display: flex; gap: 8px; }
.chat-new-row .chat-new { flex: 1; }
.split-pop .lbl { font-weight: 500; }
@media (max-width: 899px) { .split-pop { display: none; } }
body.split-window .topbar, body.split-window .chat-side, body.split-window #plan-banner, body.split-window #ak-banner, body.split-window #account-note { display: none !important; }
body.split-window .chat { grid-template-columns: 1fr; }

/* Split Chats entry (under the search, above the agents) and the agents' indicators */
.chat-split-menu { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 600; padding: 8px 12px; }
.chat-split-menu:hover { border-color: var(--accent); }
.chat-split-menu.on { border-color: var(--accent); }
.chat-split-menu .split-menu-icon { font-size: 18px; color: var(--accent); }
.chat-split-menu .split-menu-hint { margin-left: auto; font-weight: 400; }
.chat-agent .chat-agent-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.agent-ind { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-left: 6px; display: inline-block; }
.agent-ind.hidden { display: none; }
.agent-ind.working { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, .7); animation: agent-blink-orange 1s ease-in-out infinite; }
.agent-ind.fresh { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: agent-blink-green 1s ease-in-out infinite; }
@keyframes agent-blink-orange { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, .7); } 50% { opacity: .25; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); } }
@keyframes agent-blink-green { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); } 50% { opacity: .25; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .agent-ind { animation: none !important; } .agent-ind.working { background: transparent; border: 2px solid #f59e0b; } }
.chat-split-menu span { white-space: nowrap; }
/* Ask All Agents: right under Split Chats, the same kind of button (chat.js) */
.chat-ask-menu { margin-top: 6px; }
.chat-ask-menu .ask-menu-icon { display: inline-flex; color: #f5b301; font-size: 19px; }
.agent-icon svg { width: 70%; height: 70%; color: #1b1622; }

/* Split Chats picker: "Add a Chat", "+ New Chat" (asks the agent), then the chats */
.split-start { align-items: stretch; }
.split-start-box { width: min(1180px, 100%); margin: 28px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.split-add-col { justify-content: flex-start; align-items: center; overflow: auto; }
.split-add-col .split-add-list { width: min(520px, 100%); margin-top: 0; }
.split-pick-title { font-size: 26px; font-weight: 700; text-align: center; margin: 6px 0 2px; }
.split-pick-new { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.split-pick-new .split-new-chat { width: 100%; padding: 10px 14px; font-size: 15px; }
.split-pick-new .split-new-agents { justify-content: center; padding: 2px 0 4px; }
.split-pick-new .menu-head { text-align: center; }
.split-pick-list { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.split-pick-list .split-add-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.split-add-item .split-add-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-add-item .split-add-agent { flex: none; }
.split-pick-search { width: 100%; }
.split-add-menu { max-height: 70vh; overflow: auto; min-width: 320px; }

/* Start free (freestart.js): the one-click OpenRouter card and its plain notice */
.start-free { border: 1px solid rgba(245, 179, 1, .5); }
.free-notice { background: var(--panel-2); border-radius: 10px; padding: 10px 14px; }
.free-notice-title { font-weight: 600; font-size: 14px; }
.free-notice-list { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.start-free-go { align-self: flex-start; padding: 10px 22px; font-size: 16px; }
.get-more-free { margin-top: 6px; display: inline-block; }
.chat-empty-start { max-width: 760px; margin: 28px auto; padding: 0 16px; }
/* 0.1.29 build 5: the stop sign while a reply is read aloud */
.speak-stop { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2000; width: 56px; height: 56px; padding: 0; border: 0; cursor: pointer;
  background: #d32f2f; color: #fff; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); animation: stop-pop .18s ease-out, stop-blink 1s steps(2, jump-none) .2s infinite; }
.speak-stop::before { content: ''; position: absolute; inset: 3px; background: transparent; border: 2px solid #fff; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.speak-stop-word { font: 800 13px/1 system-ui, sans-serif; letter-spacing: .04em; }
.speak-stop:hover { background: #e53935; }
.speak-stop:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
@keyframes stop-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes stop-blink { 50% { opacity: .35; } }
.speak-stop-mini { margin-left: 6px; padding: 2px 9px; font-size: 12px; font-weight: 700; color: #ff8a80; border-color: rgba(229, 57, 53, .7); background: rgba(229, 57, 53, .12); animation: stop-blink 1s steps(2, jump-none) infinite; }
.speak-stop-mini:hover { background: rgba(229, 57, 53, .3); }
@media (max-width: 900px) { .speak-stop-mini { min-height: 40px; padding: 4px 12px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .speak-stop, .speak-stop-mini { animation: none; } }
body:has(.hf) .speak-stop { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

/* Split Chats start page: one column per AI agent */
.split-start-box .split-pick-search { max-width: 640px; align-self: center; }
.split-pick-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(210px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.split-pick-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.split-pick-col-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.split-pick-col-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split-pick-cols .split-pick-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
@media (max-width: 760px) { .split-pick-cols { grid-template-columns: repeat(var(--n, 1), 78vw); scroll-snap-type: x mandatory; } .split-pick-col { scroll-snap-align: center; } }

.root-chip { background: rgba(229, 72, 77, .15); color: #ff9a9d; border: 1px solid rgba(229, 72, 77, .45); }
.root-btn.on { border-color: rgba(229, 72, 77, .6); color: #ff9a9d; }

/* The jump-to-latest arrow in a chat window's bottom-left corner (jumpdown.js) */
.jump-down { position: fixed; z-index: 60; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; }
.jump-down:hover { border-color: var(--accent); color: var(--accent); }
.jump-down[hidden] { display: none; }

/* ⚙ Thresholds under each Health tile */
.h-th { margin-top: 8px; }
.h-th-btn { opacity: .8; }
.h-th-form { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.h-th-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h-th-field input { width: 84px; }

/* Buttons that are not filled stand out in orange (a deeper orange on the light theme, to stay readable on white) */
:root { --btn-ink: #ffb02e; }
:root[data-theme=light] { --btn-ink: #a8480a; }
button.ghost, .seg-btn:not(.on) { color: var(--btn-ink); }
button.ghost { border-color: color-mix(in srgb, var(--btn-ink) 38%, var(--line)); }
button.ghost:hover, .seg-btn:not(.on):hover { color: var(--btn-ink); border-color: var(--btn-ink); filter: brightness(1.12); }
button.ghost:disabled { color: var(--muted); }

/* Health: jump between devices from a device's page */
.h-switch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 2px; }
.h-sw { display: inline-flex; align-items: center; gap: 6px; }
.h-sw.on { background: var(--panel-2); border-color: var(--btn-ink); box-shadow: inset 0 -2px 0 var(--accent); color: var(--text); cursor: default; }
.h-sw .h-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.h-sw .h-dot.h-ok { background: var(--h-good); } .h-sw .h-dot.h-warn { background: var(--h-warn); } .h-sw .h-dot.h-crit { background: var(--h-crit); }
.h-th-btn { padding: 3px 9px; font-size: 12px; font-weight: 500; }

/* Admin → Users → Invite people */
.invite-card .invite-emails { width: 100%; }
.invite-card .invite-message { width: 100%; margin: 8px 0; }
.invite-results > div { padding: 1px 0; }
.invite-row { align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
.invite-row > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.invite-pending { margin-top: 10px; display: flex; flex-direction: column; }

.chip-btn { cursor: pointer; }
.chip-btn:hover, .chip-btn:focus-visible { filter: brightness(1.15); outline: 2px solid var(--accent); outline-offset: 1px; }
.h-alerts-page .h-alert { padding: 6px 8px; }
.ack-btn { white-space: nowrap; }

.cleanup-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow: auto; }
.cleanup-box { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 16px; width: min(900px, 100%); }
.cleanup-head { justify-content: space-between; }
.cleanup-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px; cursor: pointer; }
.cleanup-path { word-break: break-all; flex: 1 1 280px; font-size: 12px; }
.cleanup-size { font-weight: 600; white-space: nowrap; }
.cleanup-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.cleanup-foot { position: sticky; bottom: 0; background: var(--panel); padding: 8px 0; gap: 12px; align-items: center; }
.chip-warn { background: rgba(255,170,0,.18); }

.h-mark-ack { color: var(--h-good, #3fb950); font-weight: 700; }
.h-mark-zzz { opacity: .9; }
.h-snoozed-line { opacity: .8; }
.h-acked { margin-top: 6px; border: 1px dashed var(--line); border-radius: 8px; padding: 4px 8px; }
.h-ack-sum { color: var(--h-good, #3fb950); cursor: pointer; }
.h-acked .h-alert { border-left-color: var(--h-good, #3fb950); }
.hub-detail.hidden{display:none}
/* Chat stand-ins (0.1.30 build 11, chat.js / standin.js): the card under a reply that failed because the AI service has a
   problem, the notes of the temporary chat, the messages copied back (plain text, never sent to an AI), the hidden turn. */
.standin-card { margin: -10px 0 22px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--panel); }
.standin-text { margin-bottom: 10px; line-height: 1.45; }
.standin-card > .standin-text:last-child { margin-bottom: 0; }
.standin-card > button { margin-top: 2px; }
.standin-agents { display: flex; flex-wrap: wrap; gap: 8px; }
.standin-agent { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 500; padding: 7px 12px 7px 8px; min-height: 40px; }
.standin-agent:hover:not(:disabled) { border-color: var(--accent); }
.standin-agent .agent-icon { width: 24px; height: 24px; font-size: 13px; flex: none; }
.standin-agent.busy { border-color: var(--accent); }
.msg.notice.standin-note { color: var(--text); }
.msg.notice.standin-note .notice-line { color: var(--accent); }
.msg.notice.standin-back { border-top: 2px solid var(--ok); border-bottom: 2px solid var(--ok); }
.msg.notice.standin-back .notice-line { color: var(--ok); font-weight: 600; }
.standin-sub { margin-top: 4px; }
.standin-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.standin-handoff-text { white-space: pre-wrap; max-height: 320px; overflow-y: auto; font-size: 13px; color: var(--muted); }
.msg.copied { border-left: 3px solid var(--line); padding-left: 12px; opacity: .92; }
.msg.copied .copied-who { color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.msg.copied.copied-user .body { background: var(--panel-2); border: 1px dashed var(--line); border-radius: 14px; padding: 8px 12px; white-space: pre-wrap; width: fit-content; max-width: 85%; }
.msg.copied.copied-assistant .body > :first-child { margin-top: 0; }
.msg.notice.temp-context { border: none; padding: 0; color: var(--muted); }
.msg.notice.temp-context summary { cursor: pointer; text-align: center; color: var(--muted); }
.msg.notice.temp-context.bad .notice-line { color: var(--bad); }
.msg.hidden-turn { display: none; }
.messages.compact .standin-card { padding: 10px; }
@media (max-width: 600px) { .standin-agents { flex-direction: column; } .standin-agent { width: 100%; } .health-toast.standin-toast > .h-ai-toast-text { flex: 1 1 100%; } }
/* The desktop app's sign-in with the browser (desktop.js): the waiting note in the window, the code on both sides. */
#desktop-wait:empty { display: none; }
.desktop-wait { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.desktop-code { text-align: center; margin: 4px 0; }