/* Holly Bot — dark, iOS-style UI modeled on Grok Bot. */

:root {
  --bg: #121212;
  --surface: #1b1b1b;
  --surface-2: #232323;
  --surface-3: #2c2c2e;
  --elevated: #1e1e1e;
  --border: #2a2a2a;
  --border-strong: #3a3a3c;
  --text: #f2f2f2;
  --text-2: #d6d6d6;
  --muted: #8e8e93;
  --dim: #5c5c60;
  --blue: #0a84ff;
  --green: #30d158;
  --green-dot: #34c759;
  --orange: #f5a623;
  --red: #ff6b6b;
  --red-strong: #ff453a;
  --bot-bubble: #262626;
  --user-bubble: #3a3a3c;
  --code-bg: #0f0f0f;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --radius-sheet: 34px;
  --radius-card: 22px;
  --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --bg: #1a1a1c;
  --surface: #242426;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --elevated: #262628;
  --border: #353538;
  --bot-bubble: #2e2e30;
  --user-bubble: #454548;
}

/* Light is Grok's light: a near-white page, a light gray bubble for bots and
   a near-black one (with white text) for you. */
:root[data-theme="light"] {
  --bg: #fcfcfc;
  --surface: #ffffff;
  --surface-2: #f0f0f3;
  --surface-3: #e5e5ea;
  --elevated: #ffffff;
  --border: #dcdce0;
  --border-strong: #c7c7cc;
  --text: #111113;
  --text-2: #2c2c2e;
  --muted: #6e6e73;
  --dim: #a1a1a6;
  --bot-bubble: #f2f2f2;
  --user-bubble: #0b0b0b;
  --code-bg: #f2f2f5;
  --scrim: rgba(0, 0, 0, 0.3);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* One background from top to bottom: iOS paints overscroll with the body
   color, and the status bar with the theme color (kept equal in src/ui/app.js). */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.35; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--blue); }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 10px; }

#app { height: 100%; }
.app { height: 100%; display: flex; background: var(--bg); position: relative; overflow: hidden; }
.pane-list { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.pane-chat { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.app.mobile.in-chat .pane-list { display: none; }
.app.mobile:not(.in-chat) .pane-chat { display: none; }
.app.wide .pane-list { width: 380px; flex: none; border-right: 1px solid var(--border); }
.app.wide .pane-chat.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ---------- avatars ---------- */
.avatar { position: relative; display: inline-flex; flex: none; }
.avatar svg { overflow: visible; }
.avatar-eye { transition: transform 420ms cubic-bezier(.3, 1.4, .5, 1); }
/* A blink shuts and opens quickly; the eyes glide again after it. */
.avatar.blinking .avatar-eye { transition: transform 90ms ease-in-out; }
/* Thinking animations — one style per bot (see THINKING in src/ui/avatar.js) */
.avatar .av-body { transform-box: view-box; transform-origin: 50px 50px; }
.avatar.is-thinking.think-ponder .av-body { animation: av-ponder 2.4s ease-in-out infinite; transform-origin: 50px 92px; }
.avatar.is-thinking.think-hop .av-body { animation: av-hop .9s cubic-bezier(.3, .7, .4, 1) infinite; transform-origin: 50px 96px; }
.avatar.is-thinking.think-jelly .av-body { animation: av-jelly 1.2s ease-in-out infinite; transform-origin: 50px 92px; }
.avatar.is-thinking.think-orbit .av-body,
.avatar.is-thinking.think-scan .av-body { animation: av-breathe 2.4s ease-in-out infinite; }
.avatar.is-thinking.think-sparkle .av-body { animation: av-breathe 1.5s ease-in-out infinite; }
.avatar.is-thinking.think-float .av-body { animation: av-float 2s ease-in-out infinite; }
.avatar.is-thinking.think-nod .av-body { animation: av-nod .8s ease-in-out infinite; transform-origin: 50px 95px; }
.avatar.is-thinking.think-twirl .av-body { animation: av-twirl 2.2s cubic-bezier(.55, 0, .3, 1) infinite; }
/* Doing a task (every bot the same): a busy rock. */
.avatar.is-working .av-body { animation: av-work .9s ease-in-out infinite; transform-origin: 50px 95px; }
@keyframes av-work {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-3px); }
  50% { transform: rotate(4deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-3px); }
}
/* Idle (a `live` avatar that isn't busy): a slow, gentle bob. */
.avatar.is-live .av-body { animation: av-idle 3.6s ease-in-out infinite; transform-origin: 50px 92px; }
@keyframes av-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3.5px) scale(1.015, 1.03); } }
.av-thought { transform-box: fill-box; transform-origin: center; opacity: 0; animation: av-thought 2.1s ease-in-out infinite; }
.av-thought.t2 { animation-delay: .35s; }
.av-thought.t3 { animation-delay: .7s; }
.av-orbit { transform-box: view-box; transform-origin: 50px 50px; animation: av-spin 2.4s linear infinite; }
.av-shine { animation: av-shine 1.6s ease-in-out infinite; }
.av-star { transform-box: fill-box; transform-origin: center; opacity: 0; animation: av-twinkle 1.5s ease-in-out infinite; }
.av-star.s2 { animation-delay: .5s; }
.av-star.s3 { animation-delay: 1s; }
.av-shadow { fill: var(--text); transform-box: fill-box; transform-origin: center; animation: av-shadow 2s ease-in-out infinite; }
@keyframes av-ponder { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes av-hop {
  0% { transform: translateY(0) scale(1.08, .92); }
  30% { transform: translateY(-14px) scale(.94, 1.07); }
  50% { transform: translateY(-16px) scale(1, 1); }
  75% { transform: translateY(0) scale(1.1, .9); }
  88% { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: translateY(0) scale(1.08, .92); }
}
@keyframes av-jelly {
  0%, 100% { transform: scale(1, 1); }
  15% { transform: scale(1.12, .88); }
  30% { transform: scale(.9, 1.1); }
  45% { transform: scale(1.06, .94) rotate(-2deg); }
  60% { transform: scale(.97, 1.03) rotate(2deg); }
  75% { transform: scale(1.02, .98); }
}
@keyframes av-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes av-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes av-nod { 0%, 100% { transform: translateY(0) scale(1, 1) rotate(0); } 45% { transform: translateY(3px) scale(1.03, .95) rotate(3deg); } }
@keyframes av-twirl { 0% { transform: rotate(0); } 36%, 100% { transform: rotate(360deg); } }
@keyframes av-thought { 0% { opacity: 0; transform: scale(.3); } 20%, 70% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes av-spin { to { transform: rotate(360deg); } }
@keyframes av-shine { 0% { transform: translateX(-60px) skewX(-18deg); } 100% { transform: translateX(150px) skewX(-18deg); } }
@keyframes av-twinkle { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 80%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); } }
@keyframes av-shadow { 0%, 100% { transform: scale(1); opacity: .28; } 50% { transform: scale(.7); opacity: .12; } }
@media (prefers-reduced-motion: reduce) {
  .avatar .av-body, .av-thought, .av-orbit, .av-shine, .av-star, .av-shadow { animation: none !important; }
  .av-thought, .av-star { opacity: 1; }
  /* Still plainly busy without moving about: a thinking or working bot fades gently. */
  .avatar.is-thinking .av-body, .avatar.is-working .av-body { animation: av-fade 1.6s ease-in-out infinite !important; }
}
@keyframes av-fade { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
.avatar-dot { position: absolute; right: -4%; bottom: -4%; border-radius: 50%; background: var(--green-dot); box-shadow: 0 0 0 2.5px var(--bg); }
.avatar-dot.dot-working { background: var(--green-dot); animation: pulse 1.4s ease-in-out infinite; }
.avatar-dot.dot-waiting { background: var(--orange); }
.avatar-dot.dot-error { background: var(--red-strong); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.avatar-stack { position: relative; display: inline-block; flex: none; }
.avatar-stack-item { position: absolute; }
.initials { width: var(--tap); height: var(--tap); border-radius: 50%; background: #2a2a2a; color: #b8b8bc; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; letter-spacing: .5px; border: 1px solid #333; flex: none; }
:root[data-theme="light"] .initials { background: #e2e2e7; color: #555; border-color: #d5d5da; }

/* ---------- top bars ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-top)) 16px 10px; min-height: calc(64px + var(--safe-top)); flex: none; background: var(--bg); }
.topbar .spacer { flex: 1; }
.circle-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text); transition: background .15s, transform .1s; }
.circle-btn:active { transform: scale(.94); background: var(--surface-2); }
.circle-btn.ghost { background: transparent; }
.circle-btn svg { width: 22px; height: 22px; }
/* The computer button at the top right of a chat (src/ui/chat.js): grayed out
   while there's no computer, the computer pulsing blue while it connects,
   solid green while connected. */
.computer-btn { transition: background .15s, transform .1s, color .3s, opacity .3s; }
.computer-btn.is-off { color: var(--muted); opacity: .45; }
.computer-btn.is-connecting { color: var(--blue); }
.computer-btn.is-connecting svg { animation: computer-pulse 1.2s ease-in-out infinite; }
.computer-btn.is-connected { color: var(--green-dot); }
@keyframes computer-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .computer-btn.is-connecting svg { animation: none; } }
.chat-topbar { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; gap: 10px; padding: calc(10px + var(--safe-top)) 16px 10px; background: var(--bg); flex: none; position: relative; z-index: 3; }
.name-pill { justify-self: center; display: inline-flex; align-items: center; gap: 10px; height: var(--tap); padding: 0 8px; border: 0; background: none; max-width: 100%; min-width: 0; }
.name-pill:active { opacity: .6; }
.name-pill .name { font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name-pill .sub { color: var(--muted); font-size: 12px; font-weight: 400; }

/* ---------- home list ---------- */
.home-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + var(--safe-bottom)); }
/* A word about the account's computer, at the top of the bot list (src/ui/home.js). */
.list-notice { display: flex; align-items: center; gap: 10px; margin: 4px 16px 10px; padding: 8px 4px 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13.5px; line-height: 18px; animation: fade .2s ease-out; }
.list-notice > svg { flex: none; color: var(--muted); }
.list-notice > span { flex: 1; min-width: 0; }
.list-notice-action { flex: none; padding: 6px 4px; color: var(--blue); font-weight: 600; }
.list-notice-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.search-bar { margin: 4px 16px 8px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 12px; height: 42px; }
.search-bar input { flex: 1; background: none; border: 0; outline: none; font-size: 17px; }
.search-bar svg { width: 18px; height: 18px; color: var(--muted); }
.row-bot { display: flex; align-items: center; gap: 14px; padding: 14px 20px; width: 100%; text-align: left; position: relative;
  background: var(--bg); touch-action: pan-y; transition: transform .25s cubic-bezier(.3, .9, .4, 1); }
.row-bot.dragging { transition: none; }
/* Swipe a row left to show Delete behind it (src/ui/home.js). */
.swipe-row { position: relative; overflow: hidden; }
.swipe-delete { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--red-strong); color: #fff; font-size: 13px; font-weight: 600; visibility: hidden; }
.swipe-row.shifted .swipe-delete { visibility: visible; }
.row-bot:active, .row-bot.active { background: var(--surface); }
.row-bot .meta { flex: 1; min-width: 0; }
.row-bot .line1 { display: flex; align-items: baseline; gap: 10px; }
/* A name or preview too long for its line fades out at its end, rather than ending in "…". */
.row-bot .title, .row-bot .preview { white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.row-bot .title { flex: 1; font-size: 16px; font-weight: 600; }
/* When the chat was last active, on every row, in the preview's size, weight and color. */
.row-bot .time { color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap; flex: none; }
/* The Chief Coordinator's chat, pinned at the top of the list: a tag after its name. */
.row-bot .chief-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 7px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 15px; font-weight: 600; }
.row-bot .line2 { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.row-bot .preview { flex: 1; color: var(--muted); font-size: 14px; }
.row-bot .preview.waiting { color: var(--orange); }
.row-bot .preview.error { color: var(--red); }
/* Unread or waiting. Every row keeps room for it, so every preview fades out at the same place. */
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.unread { background: var(--blue); }
.dot.waiting { background: #c9861c; }
.row-bot .kind-badge { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; margin-left: 6px; }
.empty-home { padding: 60px 28px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty-home h2 { color: var(--text); margin: 8px 0 0; font-size: 24px; }
.empty-home p { margin: 0; max-width: 320px; line-height: 1.45; }
.section-label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; padding: 18px 20px 6px; }

/* ---------- popover menus ---------- */
.popover-scrim { position: fixed; inset: 0; z-index: 40; }
.popover { position: fixed; z-index: 41; background: #1c1c1e; border: 1px solid #2c2c2e; border-radius: 26px; box-shadow: var(--shadow); padding: 12px 0; min-width: 240px; animation: pop .16s ease-out; transform-origin: top right; }
:root[data-theme="light"] .popover { background: #fff; border-color: var(--border); }
.popover.from-bottom { transform-origin: bottom left; }
.popover button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 15px 28px; font-size: 18px; text-align: left; }
.popover button:active { background: var(--surface-2); }
.popover button svg { width: 24px; height: 24px; color: var(--text-2); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ---------- sheets ---------- */
.sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; animation: fade .2s ease-out; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--safe-top) + 12px); z-index: 51; background: #161616; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; display: flex; flex-direction: column; animation: rise .28s cubic-bezier(.2, .9, .3, 1); box-shadow: var(--shadow); overflow: hidden; margin: 0 auto; max-width: 720px; }
:root[data-theme="light"] .sheet { background: #f5f5f7; }
.sheet.inset { margin: 0 8px; }
.sheet-head { display: flex; align-items: center; gap: 16px; padding: 18px 18px 8px; flex: none; min-height: 72px; }
.sheet-head h2 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; }
.sheet-head .circle-btn { background: #1f1f1f; }
:root[data-theme="light"] .sheet-head .circle-btn { background: var(--surface); }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px calc(28px + var(--safe-bottom)); }
.sheet-foot { flex: none; padding: 12px 20px calc(16px + var(--safe-bottom)); }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) {
  .sheet { top: 5vh; bottom: 5vh; left: 50%; right: auto; width: 560px; transform: translateX(-50%); border-radius: 30px; animation: popc .22s ease-out; }
  @keyframes popc { from { opacity: 0; transform: translateX(-50%) scale(.96); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
}

/* ---------- grouped settings rows (iOS style) ---------- */
.group { background: var(--elevated); border-radius: var(--radius-card); margin: 14px 0; overflow: hidden; }
.group-label { color: var(--muted); font-size: 15px; margin: 22px 20px -6px; }
.group-note { color: var(--muted); font-size: 13px; margin: -6px 20px 14px; line-height: 1.4; }
.row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 18px 12px 20px; width: 100%; text-align: left; position: relative; }
.row + .row::before, .row + .row-wrap::before, .row-wrap + .row::before { content: ""; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--border); }
.row-wrap { position: relative; }
button.row:active { background: var(--surface-2); }
.row .label { flex: 1; min-width: 0; }
.row .label .t { font-size: 18px; }
.row .label .s { color: var(--muted); font-size: 15px; margin-top: 3px; line-height: 1.35; }
.row .value { color: var(--muted); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.row .chev { width: 18px; height: 18px; color: var(--dim); flex: none; }
.row.danger .t { color: var(--red); }
.row.center { justify-content: center; }
.row.center .t { text-align: center; }
.row input[type="text"], .row input[type="password"], .row input[type="url"], .row input[type="email"], .row select { flex: 1; min-width: 0; background: none; border: 0; outline: none; text-align: right; color: var(--text-2); font-size: 17px; }
.row select { direction: rtl; }
.row select option { direction: ltr; }

/* toggles */
/* Every switch is 44 × 26 (Toggle's `small` is the same size). */
.toggle { width: 44px; height: 26px; border-radius: 13px; background: #6b6b70; position: relative; flex: none; transition: background .2s; }
.toggle.on { background: var(--green); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #f4f4f4; transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.toggle.on::after { transform: translateX(18px); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.field label { color: var(--muted); font-size: 14px; padding-left: 4px; }
.input, .textarea, .select { width: 100%; background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; padding: 13px 14px; font-size: 17px; outline: none; color: var(--text); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--border-strong); }
.textarea { resize: vertical; min-height: 110px; line-height: 1.4; }
.textarea.mono, .input.mono { font-family: var(--mono); font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.4; padding: 0 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 23px; background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 16px; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.primary { background: #fff; color: #000; }
:root[data-theme="light"] .btn.primary { background: #111; color: #fff; }
.btn.danger { background: rgba(255, 69, 58, .14); color: var(--red); }
.btn.block { width: 100%; }
.btn.big { height: 52px; border-radius: 26px; font-size: 18px; }
.btn:disabled, .btn.disabled { background: #7a7a7a; color: #3b3b3b; pointer-events: none; }
:root[data-theme="light"] .btn:disabled { background: #c7c7cc; color: #8e8e93; }
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 17px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.segmented { display: flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 2px; }
.segmented button { flex: 1; padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--muted); font-weight: 500; }
.segmented button.on { background: var(--surface-3); color: var(--text); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 16px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.chip.on { background: var(--text); color: var(--bg); }

/* ---------- create bot ---------- */
.create-preview { display: flex; justify-content: center; padding: 34px 0 30px; }
.name-input { width: 100%; height: 64px; border-radius: 20px; background: #232323; border: 0; outline: none; text-align: center; font-size: 26px; font-weight: 500; color: var(--text); }
.name-input::placeholder { color: #8b8b8f; }
:root[data-theme="light"] .name-input { background: var(--surface-2); }
.picker { display: grid; justify-content: center; gap: 14px 30px; margin: 34px auto 0; }
.picker.shapes { grid-template-columns: repeat(4, 52px); }
.picker.colors { grid-template-columns: repeat(6, 38px); gap: 16px 24px; margin-top: 30px; }
.picker.colors .row2 { grid-column: 1 / -1; display: flex; justify-content: center; gap: 24px; }
.picker-label { text-align: center; margin: 34px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.picker.thinking { grid-template-columns: repeat(3, 84px); gap: 10px 14px; margin-top: 14px; }
.think-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 9px; border-radius: 16px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.think-pick.on { background: var(--surface-2, rgba(127,127,127,.14)); color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.think-pick .avatar { margin-top: 4px; }
.pick { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; }
.pick.on { border-color: #5e5e62; }
.swatch { width: 38px; height: 38px; border-radius: 50%; padding: 3px; border: 2px solid transparent; }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.swatch.on { border-color: #6e6e72; }

/* ---------- chat ---------- */
.chat-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 8px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.chat-inner { margin-top: auto; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; align-self: center; }
.day-sep { text-align: center; color: var(--muted); font-size: 14px; margin: 18px 0 8px; }
.msg { display: flex; flex-direction: column; max-width: 100%; }
.msg.user { align-items: flex-end; }
.msg.bot { align-items: flex-start; }
.msg .author { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 4px 0 4px 4px; }
.bubble { border-radius: 22px; padding: 11px 16px; max-width: min(88%, 620px); font-size: 17px; line-height: 1.42; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.bot .bubble { background: var(--bot-bubble); }
.msg.user .bubble { background: var(--user-bubble); }
.bubble.plain-bot { background: var(--bot-bubble); }
:root[data-theme="light"] .msg.user .bubble { color: #fff; }
/* Help, the legal pages and the file viewer stay white boxes on their gray sheet. */
:root[data-theme="light"] .bubble.plain-bot { background: #fff; }
.bubble p { margin: 0 0 .6em; }
.bubble p:last-child, .bubble ul:last-child, .bubble ol:last-child, .bubble pre:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: .2em 0 .6em; padding-left: 1.3em; }
.bubble li { margin: .15em 0; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 { font-size: 1.05em; margin: .8em 0 .4em; }
.bubble h1:first-child, .bubble h2:first-child, .bubble h3:first-child { margin-top: 0; }
.bubble a { color: #6cb4ff; text-decoration: none; }
:root[data-theme="light"] .bubble a { color: var(--blue); }
.bubble code { font-family: var(--mono); font-size: .86em; background: rgba(255, 255, 255, .08); padding: .1em .35em; border-radius: 6px; }
:root[data-theme="light"] .bubble :not(pre) > code { background: rgba(0, 0, 0, .06); }
.bubble pre { background: var(--code-bg); border-radius: 12px; padding: 12px; overflow-x: auto; margin: .5em 0; font-size: 13.5px; line-height: 1.45; }
.bubble pre code { background: none; padding: 0; font-size: inherit; }
.bubble table { border-collapse: collapse; margin: .5em 0; font-size: .92em; display: block; overflow-x: auto; }
.bubble th, .bubble td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
.bubble blockquote { margin: .4em 0; padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.bubble img { max-width: 100%; border-radius: 12px; }
.bubble hr { border: 0; border-top: 1px solid var(--border); margin: .8em 0; }
/* Chat bubbles, yours and the bots', nearly as wide as the screen, with close
   lines. Bots may use light structure (src/core/prompts.js), drawn quietly:
   headings at the text's size, bold as semibold, muted bullets and numbers, a
   faint quote bar and rule. Help and the legal pages use bubbles outside .msg
   and keep their own look. */
.msg .bubble { max-width: min(94%, 680px); padding: 10px 15px; line-height: 1.3; }
.msg .bubble p { margin: 0 0 .55em; }
.msg .bubble :is(strong, b), .agent-card .a :is(strong, b) { font-weight: 600; }
.msg .bubble :is(h1, h2, h3, h4, h5, h6), .agent-card .a :is(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 600; margin: .8em 0 .3em; }
.msg .bubble :is(ul, ol), .agent-card .a :is(ul, ol) { padding-left: 1.2em; margin: .15em 0 .55em; }
.msg .bubble li, .agent-card .a li { margin: 0 0 .25em; }
.msg .bubble li > p { margin: 0; }
.msg.bot .bubble li::marker, .agent-card .a li::marker { color: var(--muted); }
.msg .bubble blockquote, .agent-card .a blockquote { border-left: 2px solid var(--border-strong); padding-left: 10px; margin: 0 0 .55em; opacity: .85; }
.msg .bubble hr, .agent-card .a hr { border: 0; border-top: 1px solid var(--border); margin: .7em 0; }
.msg .bubble :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.msg .bubble :is(p, ul, ol, li, blockquote, h1, h2, h3, h4, h5, h6):last-child { margin-bottom: 0; }
/* Code blocks (src/ui/markdown.js): a header row with the language and Copy,
   then the code, which scrolls sideways under it. White in light mode so the
   block stands out from the gray bot bubble. */
.code-box { margin: .5em 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.code-box:last-child { margin-bottom: 0; }
:root[data-theme="light"] .code-box { background: #fff; }
.code-head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px 0 12px; border-bottom: 1px solid var(--border); font-family: var(--font); font-size: 12.5px; line-height: 1; color: var(--muted); }
.code-lang { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-code { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; margin-left: auto; border-radius: 8px; flex: none; font-size: 13px; font-weight: 500; color: var(--text-2); }
.copy-code:active { background: var(--surface-3); }
.code-box pre { margin: 0; padding: 10px 12px 12px; background: none; border-radius: 0; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.45; }
.cursor::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text); margin-left: 4px; vertical-align: middle; animation: pulse 1s infinite; }
.msg-meta { color: var(--dim); font-size: 12px; margin: 4px 8px 0; display: flex; gap: 10px; align-items: center; }
.msg-actions { display: flex; gap: 4px; margin: 2px 4px 0; opacity: .75; }
.msg-actions button { padding: 6px; border-radius: 8px; color: var(--muted); }
.msg-actions button svg { width: 16px; height: 16px; }
.msg-actions button:active { background: var(--surface); }
.notice { align-self: center; color: var(--muted); font-size: 13px; text-align: center; max-width: 86%; margin: 6px 0; line-height: 1.4; }
.notice.routine { color: var(--text-2); background: var(--surface); padding: 8px 14px; border-radius: 14px; }
.att-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 6px; max-width: 88%; }
.att-img { width: 150px; height: 150px; object-fit: cover; border-radius: 16px; background: var(--surface); }

/* tool activity inside bot messages */
.steps { display: flex; flex-direction: column; gap: 6px; max-width: min(92%, 640px); width: 100%; }
.activity { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; padding: 4px 6px; border-radius: 10px; max-width: 100%; text-align: left; }
.activity .ic { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.activity .ic svg { width: 16px; height: 16px; }
.activity .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity.running .lbl { background: linear-gradient(90deg, var(--muted) 0%, var(--text) 45%, var(--muted) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
.activity.error { color: var(--red); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.activity-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--text-2); margin: 0 0 4px 26px; max-height: 320px; overflow: auto; }
.activity-detail pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12.5px; }
.activity-detail .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 4px; }
.activity-detail .k:first-child { margin-top: 0; }
.thinking { color: var(--muted); font-size: 14.5px; }
.sources { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 0 2px; }
.source { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 10px 4px 6px; font-size: 13px; color: var(--text-2); text-decoration: none; max-width: 220px; }
.source img { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cards (question, approval, agent chat, files) */
.card { background: var(--elevated); border-radius: 26px; padding: 18px 18px 16px; width: min(92%, 640px); position: relative; border: 1px solid transparent; }
:root[data-theme="light"] .card { border-color: var(--border); }
.card-title { font-size: 19px; font-weight: 600; margin: 2px 40px 6px 2px; line-height: 1.3; }
.card-sub { color: var(--muted); font-size: 16px; margin: 0 2px 14px; line-height: 1.35; }
.card-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.card-x svg { width: 20px; height: 20px; }
.options { background: #121212; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
:root[data-theme="light"] .options { background: #f5f5f7; }
.option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; text-align: left; font-size: 17px; position: relative; }
.option + .option::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border); }
.option:active { background: var(--surface-2); }
.option .letter { width: 30px; height: 30px; border-radius: 9px; background: #1d1d1d; color: #6e6e72; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
:root[data-theme="light"] .option .letter { background: var(--surface-2); }
.option .ok { margin-left: auto; color: var(--green); width: 22px; height: 22px; }
.option.picked { font-weight: 500; }
.option.multi-on .letter { background: var(--text); color: var(--bg); }
.card-foot { color: var(--muted); font-size: 15px; margin: 14px 2px 0; }
.approval { border: 1px solid rgba(245, 166, 35, .35); }
.approval .cmd { font-family: var(--mono); font-size: 13.5px; background: var(--code-bg); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; margin-bottom: 14px; max-height: 200px; overflow: auto; }
.approval .head { display: flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.approval .head svg { width: 18px; height: 18px; }
.approval.done { border-color: transparent; opacity: .85; }
.agent-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 10px 12px; margin: 2px 0; max-width: min(92%, 620px); }
.agent-card .who { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.agent-card .who .arrow { color: var(--muted); font-weight: 400; }
.agent-card .q { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.agent-card .a { font-size: 15px; }
.agent-card .a .md p { margin: 0 0 .4em; }
.file-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; width: min(88%, 420px); text-align: left; }
.file-card .fi { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex: none; }
.file-card .fi svg { width: 22px; height: 22px; }
.file-card .fn { font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card .fs { color: var(--muted); font-size: 13px; }
.gen-image { max-width: min(88%, 420px); border-radius: 18px; display: block; }
.error-card { background: rgba(255, 69, 58, .1); border: 1px solid rgba(255, 69, 58, .3); color: var(--text); border-radius: 18px; padding: 12px 14px; font-size: 15px; max-width: min(92%, 620px); }
.error-card .btn-row { margin-top: 10px; }
.memory-note { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px; }
.memory-note svg { width: 14px; height: 14px; }
/* A stopped reply's Continue (src/ui/message.js Stopped). */
.stopped-row { align-self: flex-start; display: flex; align-items: center; gap: 10px; margin: 4px 4px 0; color: var(--muted); font-size: 13px; }
.continue-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; }
.continue-btn svg { width: 12px; height: 12px; }
.continue-btn:active { background: var(--surface-3); }
.terminal { background: #0a0a0a; color: #d8d8d8; font-family: var(--mono); font-size: 12.5px; border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.terminal .cmd { color: #7ee787; }
.terminal .err { color: #ff8b8b; }
.chart-img { max-width: 100%; border-radius: 12px; background: #fff; margin-top: 6px; }
.typing { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 6px 0 2px 2px; }

/* ---------- composer: the prompt bar, after Perplexity's ---------- */
/* The message on top; below it + (attach), web search and the bot's computer
   in one pill, the chat's Workspace, then dictation and the round button
   (voice mode, send, or stop). src/ui/composer.js */
.composer { flex: none; padding: 6px 10px calc(10px + var(--safe-bottom)); background: var(--bg); position: relative; z-index: 3; }
.pbar {
  --pb-btn: var(--surface); --pb-on: var(--surface-2); --pb-icon: #8e8e93;
  --pb-accent: #5f9ea8; --pb-accent-ring: rgba(150, 205, 213, .4); --pb-accent-ink: #0b2226;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 10px 10px;
  border: 1px solid var(--border); border-radius: 26px; background: var(--bg);
}
:root[data-theme="light"] .pbar {
  --pb-btn: #f3f3f1; --pb-on: #ffffff; --pb-icon: #6e6e73;
  --pb-accent: #20808d; --pb-accent-ring: rgba(32, 128, 141, .22); --pb-accent-ink: #ffffff;
  background: #fff; border-color: #e3e3df; box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.pbar-input { width: 100%; min-height: 30px; max-height: 160px; padding: 4px 6px 2px; resize: none; border: 0; outline: none; background: none; color: var(--text); font-size: 18px; line-height: 1.35; }
.pbar-input::placeholder { color: var(--pb-icon); }
/* Gone while typing, so the keyboard's gray predictions never sit on top of it. */
.pbar-input:focus::placeholder { color: transparent; }
.pbar-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pbar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--pb-btn); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pbar-btn svg { width: 20px; height: 20px; }
.pbar-btn.recording { color: var(--red-strong); animation: pulse 1.2s infinite; }
.pbar-seg { display: inline-flex; align-items: center; height: 36px; border-radius: 18px; background: var(--pb-btn); flex: none; }
.pbar-seg-btn { width: 44px; height: 36px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--pb-icon); transition: background .15s, color .15s; }
.pbar-seg-btn svg { width: 21px; height: 21px; }
/* Web search on: its half of the pill lights up. */
.pbar-seg-btn.on { background: var(--pb-on); color: var(--text); }
:root[data-theme="light"] .pbar-seg-btn.on { box-shadow: 0 0 0 1px #e3e3df, 0 1px 2px rgba(0, 0, 0, .06); }
/* The computer: grayed out. The button at the top right of a chat shows it. */
.pbar-seg-btn:disabled { opacity: .45; cursor: default; }
.pbar-pill { height: 36px; min-width: 0; max-width: 150px; padding: 0 13px; border-radius: 18px; background: var(--pb-btn); color: var(--text-2); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.pbar-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar-pill svg { flex: none; }
.pbar-pill.set { color: var(--text); }
.pbar-gap { flex: 1; min-width: 0; }
.pbar-go { width: 38px; height: 38px; border-radius: 50%; background: var(--pb-accent); color: var(--pb-accent-ink); box-shadow: 0 0 0 2px var(--pb-accent-ring); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pbar-go svg { width: 20px; height: 20px; }
.pbar-go.stop span { width: 13px; height: 13px; border-radius: 3px; background: var(--pb-accent-ink); }
.icon-btn { width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.icon-btn svg { width: 22px; height: 22px; }
.pending-atts { display: flex; gap: 8px; padding: 0 16px 6px; overflow-x: auto; flex: none; }
.pending-att { position: relative; flex: none; }
.pending-att img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.pending-att .file { height: 64px; min-width: 120px; max-width: 180px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 13px; }
.pending-att .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-att .rm { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; }
.pending-att .rm svg { width: 12px; height: 12px; }
.mention-list { position: absolute; bottom: calc(100% + 4px); left: 16px; right: 16px; background: var(--elevated); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.mention-list button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: 100%; text-align: left; }
.mention-list button:active { background: var(--surface-2); }

/* ---------- panels: memory, files, computer ---------- */
.tabs { display: flex; gap: 6px; padding: 0 18px 8px; overflow-x: auto; flex: none; }
.tab { padding: 8px 14px; border-radius: 18px; background: var(--surface); color: var(--muted); font-size: 15px; white-space: nowrap; }
.tab.on { background: var(--text); color: var(--bg); }
.mem { background: var(--elevated); border-radius: 18px; padding: 12px 14px; margin: 10px 0; }
.mem .txt { font-size: 16px; line-height: 1.4; }
.mem .meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; margin-top: 8px; flex-wrap: wrap; }
.mem .badge { border: 1px solid var(--border-strong); border-radius: 8px; padding: 1px 7px; }
.mem .imp { letter-spacing: 1px; color: var(--orange); }
.mem .acts { margin-left: auto; display: flex; gap: 2px; }
.mem .acts button { padding: 4px 6px; border-radius: 8px; color: var(--muted); }
.mem .acts button svg { width: 16px; height: 16px; }
.mem .acts button.on { color: var(--orange); }
.mem textarea { width: 100%; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); width: 100%; text-align: left; }
.file-row .fi { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--text-2); }
.file-row .fi svg { width: 20px; height: 20px; }
.file-row .n { flex: 1; min-width: 0; }
.file-row .n div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15.5px; }
.file-row .n div:last-child { color: var(--muted); font-size: 12.5px; }
.preview-frame { width: 100%; height: 60vh; border: 0; border-radius: 14px; background: #fff; }
.preview-text { background: var(--code-bg); border-radius: 14px; padding: 12px; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto; }
.act-item { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 14px; }
.act-item .when { color: var(--dim); font-size: 12px; flex: none; width: 54px; }
.act-item .what { flex: 1; min-width: 0; }
.act-item .what .d { color: var(--muted); font-size: 12.5px; margin-top: 3px; white-space: pre-wrap; word-break: break-word; max-height: 90px; overflow: hidden; }
/* The computer's screen (src/ui/computer.js Screen). A pinch zooms the picture inside this frame, not the page;
   one finger scrolls the sheet until it's zoomed in, then moves the picture. The picture is laid out at its
   zoomed size (width, height, left, top), so it's drawn from the full image and stays sharp. */
.screen-view { position: relative; overflow: hidden; border-radius: 12px; background: #000; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.screen-view.zoomed { touch-action: none; }
.screen-view.empty { background: none; border-radius: 0; cursor: auto; touch-action: auto; }
.screen-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; -webkit-user-drag: none; -webkit-touch-callout: none; }
.screen-zoom { position: absolute; top: 8px; left: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
/* The computer's RAM in use, pinned at the bottom of the computer sheet under the Screen tab (src/ui/computer.js) */
.ram-meter { padding: 12px 14px 13px; border-radius: 16px; background: var(--elevated); }
.ram-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.ram-meter-head b { font-weight: 600; }
.ram-meter-head span { color: var(--muted); font-variant-numeric: tabular-nums; }
.ram-meter-bar { height: 8px; margin-top: 9px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.ram-meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .4s ease, background-color .4s ease; }
.ram-meter-bar span.mid { background: var(--orange); }
.ram-meter-bar span.high { background: var(--red-strong); }
.ram-meter-note { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ram-meter-bar span { transition: none; } }
/* This month's AI credits, Settings → Usage (src/ui/settings.js): a bar of what's left */
.credits-card { margin: 6px 0 14px; padding: 16px 16px 15px; border-radius: var(--radius-card); background: var(--elevated); }
.credits-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; }
.credits-head b { font-weight: 600; }
.credits-head span { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.credits-bar { height: 12px; margin-top: 12px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.credits-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .5s ease, background-color .5s ease; }
.credits-bar span.mid { background: var(--orange); }
.credits-bar span.low { background: var(--red-strong); }
.credits-sub { margin-top: 10px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Settings: the usage bar under the account, a row that opens Usage. */
.usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.usage-left { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.credits-bar.usage-bar { height: 8px; margin-top: 10px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .credits-bar span { transition: none; } }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.status-pill.ok { color: var(--green); }
.status-pill.bad { color: var(--red); }
.status-pill .d { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kbd { font-family: var(--mono); font-size: 13px; background: var(--code-bg); border-radius: 8px; padding: 2px 6px; }
.code-block { font-family: var(--mono); font-size: 12.5px; background: var(--code-bg); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; }
.code-block.copyable { display: block; width: 100%; text-align: left; border: 0; color: var(--text); cursor: copy; position: relative; padding-right: 34px; }
.code-block.copyable::after { content: '⧉'; position: absolute; right: 12px; top: 9px; color: var(--muted); font-family: var(--font); }
.code-block.copyable:active { opacity: .7; }

/* ---------- voice mode ---------- */
.voice { position: fixed; inset: 0; z-index: 80; background: radial-gradient(circle at 50% 38%, #1d1d1f 0%, #050505 70%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(24px + var(--safe-top)) 24px calc(34px + var(--safe-bottom)); animation: fade .25s; }
:root[data-theme="light"] .voice { background: radial-gradient(circle at 50% 38%, #fff 0%, #e8e8ed 70%); }
.voice .top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.voice .center { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.voice .status { color: var(--muted); font-size: 17px; }
.voice .said { font-size: 22px; line-height: 1.35; max-width: 560px; min-height: 60px; }
.voice .reply { font-size: 17px; color: var(--text-2); max-width: 560px; max-height: 30vh; overflow: auto; line-height: 1.45; }
.voice .controls { display: flex; gap: 28px; align-items: center; }
.voice .big { width: 76px; height: 76px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; }
.voice .big.listening { box-shadow: 0 0 0 10px rgba(255, 255, 255, .12), 0 0 0 22px rgba(255, 255, 255, .05); animation: breathe 1.6s ease-in-out infinite; }
.voice .big svg { width: 32px; height: 32px; }
.voice .end { width: 60px; height: 60px; border-radius: 50%; background: var(--red-strong); color: #fff; display: flex; align-items: center; justify-content: center; }
.voice .end svg { width: 26px; height: 26px; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 0 0 18px rgba(255, 255, 255, .05); } 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, .16), 0 0 0 30px rgba(255, 255, 255, .06); } }
.voice .level { display: flex; gap: 5px; align-items: center; height: 40px; }
.voice .level span { width: 6px; border-radius: 3px; background: var(--text); transition: height .08s; }

/* ---------- toasts / dialogs ---------- */
.toasts { position: fixed; left: 50%; top: calc(14px + var(--safe-top)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
.toast { background: #2c2c2e; color: #fff; border-radius: 16px; padding: 12px 16px; font-size: 15px; box-shadow: var(--shadow); pointer-events: auto; display: flex; align-items: center; gap: 12px; animation: drop .25s ease-out; }
.toast.err { background: #4a1f1d; }
.toast button { margin-left: auto; color: #8ec5ff; font-weight: 600; font-size: 14px; }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.dialog-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .15s; }
.dialog { background: #1e1e1e; border-radius: 22px; width: min(100%, 360px); padding: 22px 20px 16px; text-align: center; box-shadow: var(--shadow); animation: pop .18s ease-out; }
:root[data-theme="light"] .dialog { background: #fff; }
.dialog h3 { margin: 0 0 8px; font-size: 18px; }
.dialog p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.dialog .btn-row { justify-content: center; }
.dialog .btn { flex: 1; }

.spinner { width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--text); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 0 20px; }
.footer-brand .n { font-size: 22px; font-weight: 500; }
.footer-brand .v { color: var(--muted); font-size: 15px; }
.welcome { padding: 8px 4px 20px; }
.welcome h1 { font-size: 30px; margin: 10px 0 8px; }
.welcome p { color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.provider-card { display: flex; align-items: center; gap: 12px; }
.provider-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.ok-check { color: var(--green); display: inline-flex; }
.ok-check svg { width: 20px; height: 20px; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.usage-table td, .usage-table th { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: right; }
.usage-table td:first-child, .usage-table th:first-child { text-align: left; }
.usage-table th { color: var(--muted); font-weight: 500; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- remote mode ---------- */
.computer-cta { display: flex; align-items: center; gap: 12px; margin: 26px auto 0; max-width: 420px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px;
  background: var(--surface-2); color: var(--muted); text-align: left; font: inherit; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.computer-cta b { color: var(--text); font-size: 15px; }
.computer-cta svg:first-child { flex: none; color: var(--text); }
.computer-cta svg:last-child { flex: none; opacity: .5; }

/* ---------- signed out: welcome, sign in, create account ---------- */
/* Macronaut's welcome and sign-in layout on one plain white page, whatever the
   app's appearance setting. Redefining the palette here draws shared pieces
   (spinner, icons, focus rings) in light colors too. */
html.signed-out, html.signed-out body { background: #fff; color-scheme: light; }
html.signed-out #boot { background: #fff !important; }
.hello {
  --bg: #fff; --surface: #fff; --surface-2: #f2f3f5; --border: #e3e5e9; --border-strong: #c9cdd4;
  --text: #111113; --text-2: #2c2c2e; --muted: #5f6570; --dim: #a1a1a6; --red: #d64545;
  position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--bg); color: var(--text); color-scheme: light;
}
.hello-canvas { width: 100%; max-width: 600px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding-top: var(--safe-top); }
.hello-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 24px; }
.hello-wordmark { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* Negative right margins cancel the tracking after the last letter, so each line is truly centered. */
.hello-wordmark .w-holly { font-size: 46px; line-height: 50px; font-weight: 700; letter-spacing: 6px; margin-right: -6px; }
.hello-wordmark .w-bot { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: 1.5px; margin: 2px -1.5px 0 0; }
.hello-dock { flex: none; display: flex; flex-direction: column; gap: 16px; padding: 0 24px calc(max(var(--safe-bottom), 12px) + 8px); }
.hello-ctas { display: flex; flex-direction: column; gap: 12px; }
.hello-cta, .auth-btn { width: 100%; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; line-height: 22px; font-weight: 600; transition: opacity .15s; }
.hello-cta { background: var(--text); color: #fff; }
.hello-cta:active, .auth-btn:active { opacity: .85; }
.hello-cta:disabled { opacity: .5; }
.hello-cta .spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.hello-cta.secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); }
.hello-cta.secondary .spinner { border-color: var(--border); border-top-color: var(--text); }
.hello-cta.secondary.danger { color: var(--red); border-color: var(--red); }
.hello-more { align-self: center; min-height: 44px; padding: 0 12px; font-size: 15px; line-height: 20px; }
.hello-more:disabled { opacity: .5; }
.hello-note { max-width: 320px; margin: 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 21px; }
.hello-hero.device { gap: 14px; text-align: center; }
.device-title { margin: 6px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; }
.device-text { max-width: 400px; margin: 0; color: var(--text-2); font-size: 16px; line-height: 23px; }
.hello-warning { max-width: 400px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2);
  font-size: 14px; line-height: 20px; text-align: left; }
.hello-warning b { color: var(--text); }
.hello-warning code { font-size: 13px; }

.hello-canvas.auth { animation: hello-push .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes hello-push { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.auth-head { display: flex; align-items: center; min-height: 48px; padding: 4px 16px 0; }
.auth-head h1 { flex: 1; margin: 0; text-align: center; font-size: 24px; line-height: 30px; font-weight: 600; }
.auth-back { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: flex-start; }
.auth-form { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 32px; }
.auth-lead { margin: 0; color: var(--muted); font-size: 15px; line-height: 21px; }
.auth-providers { display: flex; flex-direction: column; gap: 12px; }
.auth-btn.apple { background: #000; color: #fff; }
.auth-btn.google { background: #fff; border: 1px solid var(--border-strong); }
.auth-btn:disabled { opacity: .4; }
.auth-btn.apple .spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.auth-note { margin: -8px 0 0; color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; }
.auth-error { margin: 0; color: var(--red); font-size: 14px; line-height: 20px; font-weight: 600; }
.auth-unavailable { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px 4px; border-radius: 12px; background: var(--surface-2); }
.auth-unavailable p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 21px; }
.auth-skip { min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: underline; }
.auth-switch { min-height: 44px; padding: 12px 0; text-align: center; font-size: 15px; line-height: 20px; color: var(--muted); }
.auth-switch u { color: var(--text); font-weight: 600; }
.auth-legal { margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; }
.auth-legal a { color: var(--text); text-decoration: underline; }

.hello-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(17, 17, 19, .35); animation: fade .2s ease-out; }
.hello-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding: 10px 24px calc(max(var(--safe-bottom), 12px) + 8px); background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .14);
  animation: rise .28s cubic-bezier(.2, .9, .3, 1); }
.hello-grabber { align-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--border-strong); }
.hello-sheet h2 { margin: 2px 0 4px; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; }
.hello-sheet-cancel { align-self: center; min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; }

/* ---------- the subscription page (src/ui/subscribe.js) ---------- */
/* On the white page, right after Create Account: the plans as cards to pick
   from, Monthly or Yearly, and Subscribe docked at the bottom. */
.sub-canvas { max-width: 560px; }
.sub-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 0; text-align: center;
  animation: sub-rise .5s cubic-bezier(.2, .9, .3, 1) backwards; }
.sub-title { margin: 8px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; }
.sub-lead { max-width: 340px; margin: 0; color: var(--muted); font-size: 16px; line-height: 22px; }
.sub-notice { margin: 18px 24px 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 14px; line-height: 20px; text-align: center; }

/* Monthly | Yearly, with a thumb that slides between them. */
.sub-cycle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100% - 48px, 400px); margin: 22px auto 0; padding: 4px;
  border-radius: 14px; background: var(--surface-2); }
.sub-cycle::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 19, .08), 0 3px 10px rgba(17, 17, 19, .08); transition: transform .32s cubic-bezier(.3, .9, .3, 1); }
.sub-cycle.year::before { transform: translateX(100%); }
.sub-cycle label { position: relative; z-index: 1; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px;
  padding: 2px 4px; border-radius: 10px; color: var(--muted); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; transition: color .2s; }
.sub-cycle label.on { color: var(--text); }
.sub-cycle input, .sub-plan input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.sub-cycle label:has(input:focus-visible), .sub-plan:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.sub-free, .sub-save { padding: 2px 7px; border-radius: 999px; background: #e6f4ea; color: #1b7a3d; font-size: 11.5px; line-height: 16px; font-weight: 700;
  letter-spacing: .2px; white-space: nowrap; }

/* A plan: the radio, its name and price on top, its server underneath. */
.sub-plans { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 0; }
.sub-plan { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "radio name price" "radio note price" ". specs specs";
  column-gap: 12px; align-items: start; padding: 16px 16px 16px 14px; border-radius: 18px; background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow .25s, transform .15s; animation: sub-rise .5s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.sub-plan.on { box-shadow: inset 0 0 0 2px var(--text), 0 12px 32px -14px rgba(17, 17, 19, .35); }
.sub-plan:active { transform: scale(.985); }
.sub-radio { grid-area: radio; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 0 0 2px var(--border-strong); transition: background .2s, box-shadow .2s; }
.sub-radio svg { opacity: 0; transform: scale(.4); transition: opacity .15s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sub-plan.on .sub-radio { background: var(--text); box-shadow: none; }
.sub-plan.on .sub-radio svg { opacity: 1; transform: none; }
.sub-name { grid-area: name; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -.2px; }
.sub-note { grid-area: note; color: var(--muted); font-size: 14px; line-height: 20px; }
.sub-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; animation: fade .25s ease-out; }
.sub-price b { font-size: 28px; line-height: 30px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.sub-price span { color: var(--muted); font-size: 13px; line-height: 18px; font-weight: 500; }
.sub-specs { grid-area: specs; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sub-specs > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 9px; background: var(--surface-2); color: var(--text-2);
  font-size: 13.5px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-specs svg { color: var(--muted); }

.sub-includes { margin: 22px 24px 0; padding: 18px 18px 4px; border-radius: 18px; background: var(--surface-2); }
.sub-includes h2 { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 16px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.sub-includes ul { margin: 0; padding: 0; list-style: none; }
.sub-includes li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; color: var(--text-2); font-size: 15px; line-height: 21px; }
.sub-includes li svg { flex: none; margin-top: 1px; color: var(--text); }

.sub-account { display: flex; flex-direction: column; align-items: center; margin: 22px 24px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 20px; }
.sub-account p { margin: 0; overflow-wrap: anywhere; }
.sub-account b { color: var(--text-2); font-weight: 600; }
.sub-account-actions { display: flex; align-items: center; gap: 2px; }
.sub-account-actions button { min-height: 44px; padding: 0 10px; color: var(--text); font-size: 15px; font-weight: 600; }
.sub-account-actions button:disabled { opacity: .5; }
.hello-dock .sub-account { margin: -6px 0 0; }
.sub-legal { margin: 0 24px; }

/* Subscribe stays in reach while the plans scroll under it. */
.sub-dock { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; margin-top: auto;
  padding: 28px 24px calc(max(var(--safe-bottom), 12px) + 8px); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 28px); }
.sub-dock .auth-error { text-align: center; }
.sub-fine { margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; }
@keyframes sub-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The Chief Coordinator's page (src/ui/chief.js): what it does, its name and look. */
.chief-points { max-width: 400px; margin: 2px 0 6px; padding: 16px 18px; list-style: none; display: flex; flex-direction: column; gap: 12px;
  border-radius: 18px; background: var(--surface-2); text-align: left; }
.chief-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 15px; line-height: 21px; }
.chief-points svg { flex: none; margin-top: 2px; color: var(--text); }
.chief-page .name-input { max-width: 400px; height: 56px; background: var(--surface-2); color: var(--text); font-size: 22px; }
.chief-page .name-input::placeholder { color: var(--dim); }
.chief-page .picker { margin-top: 10px; }
@media (min-width: 700px) {
  .sub-head { padding-top: 56px; }
  .sub-title { font-size: 34px; line-height: 40px; }
}

/* Settings → Privacy Policy and Terms of Service: the body of privacy.html and terms.html. */
.legal-body h1 { display: none; }
.legal-body h2 { margin: 18px 0 4px; font-size: 16px; line-height: 22px; }
.legal-body p { margin: 0 0 10px; }
.legal-body .updated { color: var(--muted); font-size: 13px; }
.legal-body a { color: inherit; text-decoration: underline; }

/* Notices at the top of the app (src/main.js): another device changed the
   account (it reloads when it's safe), or a payment didn't go through. They
   sit under the top bar, so they never cover its buttons (Back, Settings…). */
.banners { position: fixed; top: calc(var(--safe-top) + 74px); left: 50%; transform: translateX(-50%); z-index: 90; width: max-content; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stale-banner { max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 18px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 14px; line-height: 20px; font-weight: 600; animation: fade .2s ease-out; }
.stale-banner.warn { background: #b3261e; color: #fff; border-color: transparent; }
.stale-banner:disabled { opacity: .7; }

/* ---------- workspace: what a chat's bot works on (src/ui/workspace.js) ---------- */
.ws-sheet { --ws-accent: #4f959f; }
:root[data-theme="light"] .ws-sheet { --ws-accent: #20808d; }
.ws-lead { color: var(--muted); font-size: 14.5px; line-height: 1.4; margin: 2px 4px 14px; }
.ws-lead.small { font-size: 13.5px; margin: 10px 4px 8px; }
.ws-note { color: var(--muted); font-size: 14px; line-height: 1.4; margin: 12px 4px; }
.ws-link { color: var(--blue); font-weight: 600; }
.ws-head { display: flex; align-items: center; gap: 7px; margin: 16px 4px 8px; color: var(--muted); font-size: 14px; }
.ws-count { margin-left: auto; color: var(--text-2); font-weight: 600; }
.ws-search { margin: 0 0 10px; }
.ws-list { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; margin-top: 8px; }
:root[data-theme="light"] .ws-list { background: #fff; border: 1px solid var(--border); }
.ws-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px; text-align: left; position: relative; }
.ws-row + .ws-row::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; border-top: 1px solid var(--border); }
.ws-row:active { background: var(--surface-2); }
.ws-row:disabled { opacity: .6; }
.ws-check, .ws-radio { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; }
.ws-check { border-radius: 7px; }
.ws-radio { border-radius: 50%; }
.ws-row.on .ws-check { background: var(--ws-accent); border-color: transparent; color: #fff; }
.ws-row.on .ws-radio { border-color: var(--ws-accent); }
.ws-radio span { width: 11px; height: 11px; border-radius: 50%; background: var(--ws-accent); }
.ws-icon { flex: none; color: var(--muted); display: inline-flex; }
.ws-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ws-lock { color: var(--muted); flex: none; }
.ws-kind { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; line-height: 16px; }
.ws-sub { color: var(--muted); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ws-when { flex: none; color: var(--dim); font-size: 12.5px; }
.ws-apps-label { margin: 22px 4px 0; }
.ws-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 16px; color: var(--muted); font-size: 14.5px; }
.ws-empty b { color: var(--text); font-size: 17px; }
.ws-empty p { margin: 0 0 8px; max-width: 300px; line-height: 1.4; }
.ws-empty-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }