:root {
  /* Brand tokens live in tokens.css (Neutral Premium); these names map them onto the app's semantics. */
  --bg: var(--kb-bg); --panel: color-mix(in srgb, var(--kb-surface) 55%, var(--kb-bg)); --surface: var(--kb-surface); --line: var(--kb-surface-2); --line-strong: var(--kb-border);
  --text: var(--kb-text); --muted: var(--kb-muted); --faint: var(--kb-muted);
  --accent: var(--kb-accent); --accent-soft: var(--kb-accent-soft); --accent-text: var(--kb-on-accent); --accent-ink: var(--kb-accent);
  --ok: var(--kb-success); --warn: var(--kb-warning); --bad: var(--kb-danger); --bad-soft: var(--kb-danger-soft);
  --code: var(--kb-surface-2); --shadow: 0 1px 2px rgba(27, 26, 23, .05), 0 8px 28px rgba(27, 26, 23, .08);
  --radius: 14px; --sidebar: 280px;
  --font: var(--kb-font-ui); --mono: var(--kb-font-mono); --display: var(--kb-font-display);
  color-scheme: light;
}
/* Dark follows the OS unless Settings → Advanced → Appearance picks Light or Dark ([data-theme], set by theme.js). */
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5); color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5); color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- layout ---------- */
.shell { position: relative; display: grid; grid-template-columns: var(--sidebar) 1fr; height: var(--app-h, 100dvh); }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
.brand-mark { width: 22px; height: 24px; display: block; }
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.brand .spacer { flex: 1; }
.icon-btn { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
@media (hover: hover) { .icon-btn:hover { background: var(--line); color: var(--text); } }
.icon-btn svg { width: 17px; height: 17px; }

.side-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.side-scroll { overflow-y: auto; flex: 1; padding: 0 8px 16px; }

.project { margin-bottom: 4px; }
.project-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; border-radius: 9px; cursor: pointer; user-select: none; }
@media (hover: hover) { .project-head:hover { background: var(--line); } }
.project-head .chev { width: 14px; height: 14px; color: var(--faint); transition: transform .15s ease; flex: none; transform: rotate(90deg); }
.project.closed .chev { transform: none; }
.project-name { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-head .icon-btn { width: 24px; height: 24px; opacity: 0; }
.project-head .icon-btn:focus-visible { opacity: 1; }
@media (hover: hover) { .project-head:hover .icon-btn { opacity: 1; } }
.project.closed .threads { display: none; }
.threads { padding: 2px 0 6px 14px; }
.thread-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 13.5px; cursor: pointer; }
@media (hover: hover) { .thread-row:hover { background: var(--line); color: var(--text); } }
.thread-row.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.thread-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-time { font-size: 12px; color: var(--faint); flex: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; }
.dot.running { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.dot.error { background: var(--bad); }
@keyframes pulse { 50% { opacity: .35; } }
.empty-side { padding: 10px 12px; color: var(--faint); font-size: 13px; }
.side-foot { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; gap: 8px; }
.side-foot a { color: var(--faint); font-size: 12.5px; text-decoration: none; }
@media (hover: hover) { .side-foot a:hover { color: var(--text); } }

/* ---------- header ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); min-height: 56px; }
.topbar .menu { display: none; }
.title-wrap { min-width: 0; flex: 1; }
.thread-heading { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.thread-sub { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }

/* ---------- feed ---------- */
.feed { flex: 1; overflow-y: auto; scroll-behavior: auto; overflow-anchor: none; overscroll-behavior-y: contain; }
.feed-more { text-align: center; color: var(--faint); font-size: 12.5px; padding: 16px 0 0; }
.feed-more[hidden] { display: none; }
.feed-inner { max-width: 780px; margin: 0 auto; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.msg-user { align-self: flex-end; max-width: 82%; background: var(--kb-surface-2); border: 1px solid var(--kb-surface-2); border-radius: 18px 18px 6px 18px; padding: 10px 15px; white-space: pre-wrap; word-wrap: break-word; }
.msg-user .tag { display: block; font-size: 11.5px; color: var(--faint); margin-top: 4px; text-align: right; }
.msg-user.queued { opacity: .7; border-style: dashed; }
.msg-user .steer-now { display: block; margin: 4px 0 0 auto; color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.msg-user.cancelled { opacity: .45; text-decoration: line-through; }
.msg-agent { max-width: 100%; }
.msg-images { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.gen-img { display: block; width: 220px; max-width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
/* The box keeps its size while the picture loads, so the chat never jumps. */
.gen-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.msg-note { align-self: center; color: var(--faint); font-size: 12.5px; text-align: center; max-width: 90%; }
.chat-mark { align-self: center; color: var(--faint); font-size: 12px; font-weight: 600; margin: 6px 0 -4px; }
.chat-mark.time { font-weight: 400; margin-top: 0; }
.show-time::after { content: attr(title); display: block; margin-top: 4px; font-size: 11.5px; color: var(--faint); white-space: normal; }
.msg-user.show-time::after { text-align: right; }
.msg-error { background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 10px 14px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.steps { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.steps > summary { list-style: none; padding: 8px 12px; color: var(--muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.steps > summary::-webkit-details-marker { display: none; }
.steps > summary .chev { width: 13px; height: 13px; transition: transform .15s; }
.steps[open] > summary .chev { transform: rotate(90deg); }
.step { border-top: 1px solid var(--line); font-size: 13px; }
.step > summary { list-style: none; display: flex; align-items: baseline; gap: 9px; padding: 5px 12px; cursor: pointer; min-width: 0; }
.step > summary::-webkit-details-marker { display: none; }
.step-raw { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 6px 28px; min-width: 0; }
.step-tool { flex: none; color: var(--faint); font-family: var(--mono); font-size: 12px; }
.step-raw .step-arg { white-space: pre-wrap; overflow-wrap: anywhere; }
.step .dot { transform: translateY(-1px); }
.step .dot.done { background: var(--ok); }
.step .dot.failed { background: var(--bad); }
.step .dot.stopped { background: var(--warn); }
.step-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-arg { color: var(--muted); font-family: var(--mono); font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thinking { display: flex; gap: 5px; padding: 4px 2px; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: bounce 1.2s infinite ease-in-out; }
.thinking span:nth-child(2) { animation-delay: .15s; } .thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* markdown */
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .75em; }
.md pre { background: var(--code); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font: 13px/1.5 var(--mono); }
.md code { font: .9em var(--mono); background: var(--code); padding: .1em .35em; border-radius: 5px; }
.md pre code { background: none; padding: 0; }
.md a { color: var(--accent-ink); }
.md .local-out { margin-left: .2em; font-size: .85em; text-decoration: none; color: var(--muted); }
.md .local-out:hover { color: var(--accent-ink); }
/* A Library file named in a reply: opens in the viewer; the folder icon beside it is Show in Explorer. */
.md .lib-link code { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.md .lib-reveal { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; vertical-align: -5px; color: var(--muted); }
.md .lib-reveal svg { width: 14px; height: 14px; }
.md .lib-reveal:hover { color: var(--accent-ink); }
.md ul, .md ol { padding-left: 1.4em; margin: 0 0 .75em; }
.md blockquote { margin: 0 0 .75em; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.md .md-table { overflow-x: auto; margin-bottom: .75em; }
.md table { border-collapse: collapse; font-size: 14px; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.md-heading { margin: 1em 0 .4em; line-height: 1.3; }
.md hr { border: 0; border-top: 1px solid var(--line); }

/* ---------- composer ---------- */
.composer-wrap { padding: 0 24px 20px; position: relative; }
.jump { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 13px; box-shadow: var(--shadow); cursor: pointer; }
.jump svg { width: 14px; height: 14px; }
.jump[hidden] { display: none; }
.composer { max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 10px 8px 14px; transition: border-color .15s; }
.composer:focus-within { border-color: var(--accent); }
.composer textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; min-height: 26px; max-height: 260px; padding: 4px 0; line-height: 1.5; }
.composer-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.composer-bar .grow { flex: 1; }
.pick { appearance: none; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 4px 26px 4px 11px; font-size: 13px; color: var(--muted);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%; background-size: 4px 4px; background-repeat: no-repeat; max-width: 200px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-family: inherit; line-height: 1.35; }
.pick.locked { border-style: dashed; background-image: none; padding-right: 11px; }
.delivery-pick { color: var(--text); font-weight: 600; }
.delivery-pick.steer { background-color: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.settings-actions select.field { width: auto; }
.effort-pick .short { display: none; }
@media (hover: hover) { .pick:hover { color: var(--text); border-color: var(--line-strong); } }
.modes { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 2px; }
.modes button { border: 0; background: transparent; border-radius: 99px; padding: 2px 10px; font-size: 12.5px; color: var(--muted); }
.modes button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.modes button.on.full { color: var(--bad); }
.send { border: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; }
.send:disabled { opacity: .35; cursor: default; }
.send svg { width: 17px; height: 17px; }
.stop { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); height: 34px; border-radius: 99px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.stop i { width: 10px; height: 10px; background: currentColor; border-radius: 2px; }
.mode-pick { display: none; }
.mode-pick.full { color: var(--bad); }
.hint { max-width: 780px; margin: 6px auto 0; color: var(--faint); font-size: 12px; line-height: 16px; text-align: center; min-height: 16px; }

/* ---------- empty / welcome ---------- */
.welcome { flex: 1; display: grid; place-items: center; padding: 24px; }
.welcome-inner { width: 100%; max-width: 680px; text-align: center; }
.welcome h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.welcome p { color: var(--muted); margin: 0 0 22px; }
.welcome .composer { text-align: left; }
.primary { border: 0; background: var(--accent); color: var(--accent-text); border-radius: 10px; padding: 9px 16px; font-weight: 600; }
.ghost { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 10px; padding: 8px 14px; }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 13px; font-size: 13px; color: var(--muted); }
@media (hover: hover) { .chip:hover { color: var(--text); border-color: var(--line-strong); } }

/* ---------- dialog ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20, 18, 16, .38); display: grid; place-items: center; padding: 16px; z-index: 20; backdrop-filter: blur(2px); }
.dialog { width: min(560px, 100%); max-height: min(640px, 92dvh); display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.dialog header { padding: 16px 18px 8px; font-weight: 650; font-size: 16px; }
.dialog > header { font: 500 24px/1.2 var(--display); letter-spacing: -.01em; }
.dialog .path { display: flex; gap: 8px; padding: 0 18px 10px; }
.dialog .path input { flex: 1; border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 10px; background: var(--bg); font: 13px var(--mono); }
.dialog .list { overflow-y: auto; flex: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dialog .row { display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer; font-size: 14px; }
@media (hover: hover) { .dialog .row:hover { background: var(--panel); } }
.dialog .row svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; }
.dialog .err { color: var(--bad); font-size: 13px; padding: 0 18px 8px; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: flex; flex-direction: column; }
/* The remote sign-in screens share the Cloud shell: header bar, the form, a Beta footer with muted links. */
.cloud-top { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.cloud-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cloud-brand b { font-weight: 700; }
.cloud-main { flex: 1; display: grid; place-items: center; padding: 16px; }
.cloud-foot { width: 100%; max-width: 760px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: 14px; }
.cloud-foot p { margin: 0; }
.cloud-foot .beta { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 4px; }
.cloud-foot a, .cloud-foot a:visited { color: inherit; }
/* Headings that receive programmatic focus: no ring for plain focus, a visible ring for keyboard focus. */
/* Headings focused by the page (tabindex=-1) are reading positions, not controls: Tab never reaches them, so no ring. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; }
.login form { width: min(360px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0; font-size: 22px; }
.login input { border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.login .err { color: var(--bad); font-size: 14px; min-height: 1em; }
.login p { margin: 0; }
.login .muted { color: var(--muted); font-size: 14px; }
.login code { font-family: var(--mono); font-size: .95em; background: var(--code); padding: .1em .35em; border-radius: 5px; white-space: nowrap; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.login button { min-height: 44px; }
.fingerprint-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; }
.fingerprint-card span { font-size: 14px; color: var(--muted); }
/* One style for every fingerprint: monospace, wraps only at the dashes (or, if a group alone is too wide, inside it). */
.device-fingerprint { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .04em; overflow-wrap: break-word; word-break: normal; min-width: 0; margin-right: -.04em; }
/* Five groups (24 characters) fit on one line down to a 320px phone. */
.fingerprint-card .device-fingerprint, .device-facts .device-fingerprint { font-size: clamp(14px, 4.2vw, 18px); }
/* The approval dialog keeps the whole fingerprint on one line. */
.device-approval .device-facts .device-fingerprint { font-size: 14px; white-space: nowrap; }
.live-status { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.login details.passphrase { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.login details.passphrase summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.login details.passphrase[open] > * + * { margin-top: 8px; }
.device-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.device-facts dt { color: var(--muted); }
.device-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.device-facts dt { font-size: 14px; }

/* KrewBots Cloud: this PC is asleep or off */
.pc-asleep { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
.pc-asleep-card { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pc-asleep-card h2 { font-size: 20px; margin: 10px 0 0; }
.pc-asleep-card p { margin: 0; color: var(--muted); }
.pc-asleep-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 8px var(--line); }
.pc-asleep-seen { color: var(--text); font-size: 14px; margin-top: 6px; }
.pc-asleep-actions { margin-top: 14px; }
.pc-asleep-actions button { min-height: 44px; padding: 0 22px; }
.pc-asleep-note { color: var(--faint); font-size: 12.5px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 10px; font-size: 13.5px; z-index: 30; max-width: calc(100% - 32px); box-shadow: var(--shadow); }
.update-banner { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); padding: 6px 6px 6px 14px; border-radius: 12px; font-size: 13.5px; z-index: 29; width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; box-shadow: var(--shadow); }
.update-banner .primary.small { padding: 5px 12px; font-size: 13px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .resizer { display: none; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 15; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open { cursor: pointer; }
  .shell.nav-open .sidebar { cursor: auto; }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 14; }
  .topbar { padding: 10px 16px; }
  .topbar .menu { display: grid; }
  .feed-inner { padding: 18px 16px; }
  .composer-wrap { padding: 0 12px 12px; }
  .msg-user { max-width: 92%; }
  .badge.hide-sm { display: none; }
}

/* ---------- attachments ---------- */
.composer.drop { border-color: var(--accent); background: var(--accent-soft); }
.pending, .atts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pending[hidden] { display: none; }
.att { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 12.5px; }
.att.busy { opacity: .6; }
.chip-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; flex: none; background: var(--line); }
.chip-icon { width: 34px; height: 34px; border-radius: 7px; background: var(--surface); display: grid; place-items: center; color: var(--muted); flex: none; }
.chip-icon svg { width: 16px; height: 16px; }
.chip-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.chip-size { color: var(--faint); flex: none; }
.chip-x { border: 0; background: transparent; color: var(--faint); width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; padding: 0; }
@media (hover: hover) { .chip-x:hover { background: var(--line); color: var(--text); } }
.chip-x svg { width: 13px; height: 13px; }
.msg-user .atts { margin: 0 0 6px; }
.msg-user .att { background: var(--bg); }

/* ---------- routines ---------- */
.routines { margin-bottom: 2px; }
.routine-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 13.5px; cursor: pointer; }
@media (hover: hover) { .routine-row:hover { background: var(--line); color: var(--text); } }
.routine-row .thread-title { display: flex; flex-direction: column; line-height: 1.3; }
.routine-when { font-size: 11.5px; color: var(--faint); }
.row-icon { width: 14px; height: 14px; color: var(--faint); flex: none; display: grid; place-items: center; }
.row-icon svg { width: 14px; height: 14px; }
.row-icon.running { color: var(--accent-ink); animation: pulse 1.2s ease-in-out infinite; }
.switch { border: 0; width: 30px; height: 18px; border-radius: 99px; background: var(--line-strong); position: relative; flex: none; padding: 0; transition: background .15s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch.on { background: var(--accent); }
.switch.on i { transform: translateX(12px); }
.routine-dialog { width: min(600px, 100%); }
.form { padding: 4px 18px 8px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); flex: 1; min-width: 140px; }
.form label[hidden] { display: none; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.model-defaults { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.model-default-title { font-size: 13px; color: var(--text); }
.model-defaults > label { min-width: 0; }
.model-defaults .field-hint { margin: -1px 0 0; }
.thread-custom[hidden] { display: none; }
.field { border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 10px; background: var(--bg); color: var(--text); font-weight: 400; font-size: 14px; width: 100%; }
textarea.field { resize: vertical; min-height: 96px; line-height: 1.5; }
.form .modes { align-self: flex-start; }
.next-run { font-size: 13px; color: var(--accent-ink); font-weight: 600; min-height: 1.2em; }
.trigger-box { display: flex; flex-direction: column; gap: 8px; }
.trigger-panel { display: flex; flex-direction: column; gap: 8px; }
.trigger-panel[hidden] { display: none; }
.webhook-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.webhook-row .field { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.trigger-events { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.form .trigger-events .check-row { flex: none; min-width: 0; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--text); }
.trigger-events .check-row input { margin-top: 0; }
.field-hint.warn { color: var(--bad); }
.trigger-status { font-size: 12.5px; color: var(--muted); }
.trigger-status.bad { color: var(--bad); }
.dialog footer .grow { flex: 1; }
.ghost { display: inline-flex; align-items: center; gap: 4px; }
.ghost svg { width: 13px; height: 13px; }
.ghost.danger { color: var(--bad); }

/* ---------- project page: main chat + threads ---------- */
.project-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.columns { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w, 380px); }
.columns.wide { grid-template-columns: minmax(0, 1fr) var(--thread-w, minmax(420px, 46%)); }
/* Drag handles: a 6px hit area over the pane border, laid on the grid cell edge so nothing reflows. */
.resizer { position: absolute; grid-row: 1; top: 0; bottom: 0; width: 6px; z-index: 6; cursor: col-resize; touch-action: none; }
.shell > .resizer { grid-column: 1 / 2; right: -3px; z-index: 16; }
.columns > .resizer { grid-column: 2; left: -3px; }
.resizer.dragging, .resizer:hover { background: linear-gradient(var(--line-strong), var(--line-strong)) center / 2px 100% no-repeat; }
body.resizing { cursor: col-resize; user-select: none; }
.columns.browser-big > .resizer { display: none; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.side { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.side.pane { background: var(--bg); }
.side .feed-inner { padding: 20px 18px; }
.side .composer-wrap { padding: 0 14px 14px; }
.pane-head, .side-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); min-height: 52px; }
.side-title { font-weight: 650; }
.side-head .grow { flex: 1; }
.thread-sub.plain { font-family: var(--font); }
.ghost.small { padding: 5px 10px; font-size: 13px; border-radius: 9px; }
.tcards { overflow-y: auto; flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tcard { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
@media (hover: hover) { .tcard:hover { border-color: var(--line-strong); } }
.tcard.running { border-color: var(--accent); }
.tcard-top { display: flex; align-items: center; gap: 8px; }
.tcard-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-preview { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-meta { color: var(--faint); font-size: 12px; }
.tcard-catchup { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 99px; padding: 1px 8px; margin-top: 2px; }
.dot.done { background: var(--ok); }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.empty-threads { padding: 24px 12px; color: var(--muted); font-size: 13.5px; text-align: center; }
.empty-threads p { margin: 6px 0 0; }
.archived-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 12px; border: 0; background: none; color: var(--faint); font-size: 13px; text-align: left; border-radius: 10px; }
@media (hover: hover) { .archived-row:hover { color: var(--muted); background: var(--panel); } }
.archived-row span { flex: 1; }
.archived-row svg { width: 14px; height: 14px; flex: none; }
.archived-row.back { margin: 0; color: var(--muted); font-weight: 600; }
.tcard.archived .tcard-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-empty { margin: 12vh auto 0; text-align: center; max-width: 460px; }
.main-empty h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.01em; }
.main-empty p { margin: 0; color: var(--muted); }
.thread-card { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 9px 12px; color: var(--text); }
@media (hover: hover) { .thread-card:not(:disabled):hover { border-color: var(--line-strong); } }
.thread-card .chev { width: 15px; height: 15px; color: var(--faint); flex: none; }
.tc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-label { font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.tc-title { font-weight: 600; font-size: 14px; }
.tc-text { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.msg-user .from { display: block; font-size: 11.5px; font-weight: 600; color: var(--faint); margin-bottom: 3px; }
.agent-pill, .pill-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pill-head { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 12px 5px 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
@media (hover: hover) { .pill-head:hover { border-color: var(--line-strong); } }
.pill-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-head > .dot { margin: 0 4px 0 6px; }
.pill-avatar { width: 20px; height: 20px; font-size: 9px; }
.pill-faces { display: flex; flex: none; }
.pill-faces .pill-avatar + .pill-avatar { margin-left: -7px; }
.pill-who { color: var(--text); font-weight: 600; white-space: nowrap; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.pill-kind { flex: none; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.pill-preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-stack.open > .agent-pill { margin-left: 14px; }
.agent-pill > .msg-user { max-width: 100%; }
.tabs { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 2px; }
.tabs button { border: 0; background: transparent; border-radius: 99px; padding: 4px 12px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.count { font-size: 11.5px; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; text-align: center; border-radius: 99px; background: var(--line); color: var(--muted); flex: none; }
.count.running { background: var(--accent); color: var(--accent-text); }
.project.active > .project-head { background: var(--surface); box-shadow: var(--shadow); }
.project-head .row-icon { color: var(--muted); }
.routine-row.add { color: var(--faint); }
@media (max-width: 760px) {
  .columns, .columns.wide { grid-template-columns: 1fr; }
  .tabs { display: inline-flex; }
  .project-page.view-chat .side { display: none; }
  .project-page.view-threads .main-pane { display: none; }
  .side { border-left: 0; }
  .topbar .thread-sub { display: none; }
}

/* ---------- agents ---------- */
.avatar { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); object-fit: cover; flex: none; display: grid; place-items: center; background: var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.avatar.initials { background: var(--accent-soft); color: var(--accent-ink); }
.avatar.big { width: 64px; height: 64px; font-size: 22px; }
.head-avatar { width: 34px; height: 34px; }
.face { position: relative; display: grid; flex: none; border-radius: 50%; padding: 2px; }
.face.working { box-shadow: 0 0 0 2px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.project-head { gap: 9px; }
.main-empty .avatar.big { margin: 0 auto 12px; }
.agent-face { display: flex; gap: 14px; align-items: center; }
.avatar-preview { flex: none; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 6px; flex: 1; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.role-card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); min-height: 64px; cursor: pointer; }
.role-card:hover, .role-card:focus-visible { border-color: var(--accent); }
.role-card > .avatar, .role-card > .role-plus { grid-row: 1 / 3; width: 36px; height: 36px; }
.role-card strong { font-size: 14px; align-self: end; }
.role-card span:last-child { font-size: 12px; color: var(--muted); line-height: 1.3; align-self: start; }
.role-card.custom { border-style: dashed; }
.role-plus { display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--muted); }
.role-plus svg { width: 18px; height: 18px; }
.role-intro { display: flex; gap: 12px; align-items: center; }
.role-intro p { margin: 0; font-size: 13px; color: var(--muted); }
.avatar-grid-label { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.pick-face { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; padding: 0; background: var(--panel); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.pick-face img { width: 100%; height: 100%; object-fit: cover; }
.pick-face.on { border-color: var(--accent); }
.pick-face svg { width: 15px; height: 15px; }
.path-row { display: flex; gap: 8px; }
.path-row .field { flex: 1; }
.field:disabled { opacity: .7; }
.side-head .modes button { padding: 3px 12px; font-size: 13px; }
.main-empty p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.msg-user.peer { align-self: flex-start; border-radius: 18px 18px 18px 6px; background: var(--panel); }
.memory-text { flex: 1; min-height: 0; border: 0; outline: 0; resize: none; padding: 16px 18px; background: var(--bg); color: var(--text); font: 13.5px/1.6 var(--mono); }
.memory-status { font-size: 12px; color: var(--faint); }
.memory-section .memory-text { display: block; width: 100%; box-sizing: border-box; min-height: 240px; border: 1px solid var(--line-strong); border-radius: 10px; resize: vertical; padding: 12px 14px; }
.memory-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
a.tcard { text-decoration: none; color: inherit; }
/* Library: folders and files with thumbnails, and the breadcrumb of the open folder */
.lib-crumbs { display: flex; align-items: center; gap: 2px; padding: 4px 10px 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 13.5px; }
.lib-crumbs[hidden] { display: none; }
.lib-crumbs::-webkit-scrollbar { display: none; }
.lib-back { flex: none; width: 36px; height: 36px; }
.lib-crumb { border: 0; background: transparent; color: var(--muted); padding: 8px 6px; border-radius: 8px; font: inherit; cursor: pointer; flex: none; }
.lib-crumb.here { color: var(--text); font-weight: 600; cursor: default; }
@media (hover: hover) { button.lib-crumb:hover { color: var(--text); background: var(--panel); } }
.lib-sep { color: var(--faint); flex: none; }
.tcard.lib-row { flex-direction: row; align-items: center; gap: 12px; padding: 8px 10px; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.lib-row > .chev { width: 16px; height: 16px; color: var(--faint); flex: none; }
.lib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.lib-thumb > svg { width: 22px; height: 22px; }
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-thumb.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; place-items: stretch; }
.lib-thumb.mosaic > img:only-child { grid-area: 1 / 1 / 3 / 3; }
.lib-thumb.mosaic > img:first-child:nth-last-child(-n + 3), .lib-thumb.mosaic > img:nth-child(2):last-child { grid-row: 1 / 3; }
.lib-thumb.mosaic > svg { width: 14px; height: 14px; place-self: center; }
.lib-video { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.lib-video > svg { width: 22px; height: 22px; }
.lib-play { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.lib-play svg { width: 9px; height: 9px; fill: currentColor; }
@media (max-width: 760px) { .hide-sm { display: none; } }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.settings-name { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.settings-name small, .settings-note { color: var(--muted); font-size: 12.5px; font-weight: 400; }
/* Settings → Engines: one card per engine, with its set-up steps while it installs and signs in. */
.engine-card .engine-status { overflow-wrap: anywhere; }
.engine-card.failed .engine-status { color: var(--bad); }
.engine-steps { flex-basis: 100%; display: flex; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; font-size: 12px; color: var(--faint); }
.engine-steps li { flex: 1; min-width: 0; padding-top: 6px; border-top: 3px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.engine-steps li.done { border-color: var(--ok); color: var(--muted); }
.engine-steps li.now { border-color: var(--accent); color: var(--text); font-weight: 600; }
.engine-steps[hidden] { display: none; }
.engine-details { flex-basis: 100%; min-width: 0; font-size: 12px; color: var(--muted); }
.engine-details summary { cursor: pointer; }
.engine-details pre { margin: 4px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; }
/* Fix it for me: the sheet, Fix it yourself steps and the Setup helper chat. */
.fix-option { align-self: flex-start; }
.fix-title { margin: 0; font-size: 15px; }
.fix-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.fix-command { display: flex; gap: 8px; align-items: center; margin-top: 4px; min-width: 0; }
.fix-command code, .helper-card code { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; background: var(--bg); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.fix-actions { flex-wrap: wrap; }
.fix-support { margin: 0; font-size: 13px; }
.helper-dialog { width: min(680px, 100%); height: min(760px, 92dvh); max-height: min(760px, 92dvh); }
.helper-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.helper-feed { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.helper-msg { padding: 8px 10px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; max-width: 92%; }
.helper-msg.user { align-self: flex-end; background: var(--bg); }
.helper-msg.assistant { align-self: flex-start; border: 1px solid var(--line, rgba(0,0,0,.1)); }
.helper-notice { font-size: 12.5px; color: var(--muted); }
.helper-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line, rgba(0,0,0,.1)); }
.helper-card.run.pending { border-color: var(--accent, #c96); }
.helper-output { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; max-height: 220px; overflow-y: auto; }
.helper-exit, .helper-choice, .helper-gate { color: var(--muted); font-size: 12px; }
.helper-input { resize: vertical; min-height: 72px; max-height: 40dvh; font-size: 13px; }
/* A Claude or Codex card's extra subscription logins, in the order agents use them. */
.engine-logins { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.engine-logins > .settings-actions { justify-content: flex-start; }
.engine-login { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.engine-login .engine-status { overflow-wrap: anywhere; }
.engine-login.limited .engine-status { color: var(--warn); }
.settings-note { flex-basis: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.auto-hire-body { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.auto-hire-body .field { width: auto; align-self: flex-start; }
.auto-hire-agents { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.auto-hire-agents .check { flex-direction: row; flex: 0 0 auto; min-width: 0; font-weight: 400; }
.settings-note .field { flex: 1; min-width: 200px; }
/* Browser profiles and passwords stay compact enough to scan, while edit fields take a full row. */
.browser-settings { display: flex; flex-direction: column; gap: 8px; }
.browser-settings > .side-label { padding: 6px 0 0; }
.pw-value { margin-top: 4px; color: var(--faint); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pw-form { flex-direction: column; align-items: stretch; }
.pw-form .settings-actions { align-self: flex-end; }
/* Secrets: the add/edit form stacks its fields, and who-can-use-it is a wrapped list of checkboxes. */
.secret-form { flex-direction: column; align-items: stretch; }
.secret-form > small { margin-top: 4px; }
.secret-form > button { align-self: flex-start; }
.secret-scope { flex: none; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text); }
.form .secret-scope .check-row { flex: 0 0 160px; min-width: 0; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }
.secret-scope .check-row input { margin-top: 0; }
.form .mcp-list { display: flex; flex-direction: column; gap: 8px; }
.form .mcp-list .check-row { flex-direction: row; align-items: center; gap: 10px; flex: none; min-width: 0; }
.form .mcp-list .check-row input { margin-top: 0; }
.mcp-list .check-row strong { color: var(--text); font-weight: 600; }
/* An agent's Integrations block: Apps, Skills and Custom as on/off lists. */
.agent-integrations > .int-tabs { margin: 4px 0 2px; }
.int-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.int-pane[hidden] { display: none; }
.int-pane > button { align-self: flex-start; }
.int-pane-head { margin-top: 6px; font-size: 13px; color: var(--text); }
.skill-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.skill-line > .check-row { flex: 1 1 auto; min-width: 0; }
.skill-line > .settings-actions { flex: none; }
.mcp-reset { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Apply role defaults: one row per agent with what changes; servers used recently stand out before they go off. */
.mcp-roles { display: flex; flex-direction: column; gap: 10px; }
.mcp-role-row { flex-direction: column; align-items: stretch; gap: 6px; }
.form .mcp-role-row .check-row { flex-direction: row; align-items: center; gap: 8px; flex: none; min-width: 0; }
.form .mcp-role-row .check-row input { margin-top: 0; }
.form .mcp-role-pick { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 400; font-size: 13px; }
.mcp-role-pick select { flex: 1; min-width: 160px; }
.mcp-diff { display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.mcp-diff .mcp-off { color: var(--text); }
.mcp-diff .mcp-on { color: var(--ok); }
.mcp-recent { margin: 0; padding: 6px 8px; border: 1px solid var(--warn); border-radius: 8px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); font-size: 13px; font-weight: 600; }
.mcp-summary { flex-direction: column; align-items: stretch; gap: 2px; }
/* Integrations: connections and skills; each row says which engines it works with. */
.integrations { display: flex; flex-direction: column; gap: 10px; }
.int-tabs, .int-views { align-self: flex-start; }
.int-views[hidden] { display: none; }
.integrations-settings { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.integrations-settings > div { min-width: 0; }
.store-find[hidden], .skill-bar .skill-agent[hidden], .skill-sources[hidden] { display: none; }
.int-engines { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.int-engine { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; }
.int-row.off .settings-name strong { color: var(--muted); }
.int-tools { flex-basis: 100%; display: flex; flex-direction: column; gap: 3px; }
.int-tools:empty { display: none; }
.int-tool { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.int-tool small { color: var(--muted); }
.int-bad { color: var(--bad); }
.int-form { flex-basis: 100%; }
.int-form .field { min-width: 0; }
.int-form .form-row > label { min-width: 160px; }
.int-fields { display: flex; flex-direction: column; gap: 8px; }
.int-fields[hidden] { display: none; }
.int-creds { display: flex; flex-direction: column; gap: 6px; }
.int-cred { display: flex; gap: 6px; flex-wrap: wrap; }
.int-cred .field { flex: 1; min-width: 140px; }
.int-editor { font: 12.5px/1.5 var(--mono); min-height: 200px; }
.int-file summary { cursor: pointer; font: 12.5px var(--mono); color: var(--muted); }
.connect-form .int-file summary { font-family: inherit; font-size: 13px; }
/* A manual setup's actions: Docs, Add it manually and Guide me through it, all one height. */
.connect-form .settings-actions:has(> [data-action]) > :is(a, button) { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.int-file pre { margin: 6px 0 0; padding: 8px; max-height: 220px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; }
/* Integrations store: search and category chips, rows of connector tiles, the connect dialog */
.store-find { display: flex; flex-direction: column; gap: 8px; }
.store-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.store-chips .chip { padding: 4px 11px; font-size: 12.5px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.store-body { display: flex; flex-direction: column; gap: 18px; }
.apps-view, .apps-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.apps-view > *, .apps-content > * { min-width: 0; }
.apps-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.apps-empty p { margin: 0; }
.app-token { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.app-token p { margin: 0; }
.app-tile .tile-title { font-size: 14px; overflow-wrap: anywhere; }
.app-tile .tile-desc { margin: 0; color: var(--muted); font-size: 13px; }
.app-tile .tile-actions > button { max-width: 100%; white-space: normal; }
.app-connected { align-items: flex-start; }
.app-connected .settings-name { min-width: 0; overflow-wrap: anywhere; }
.app-connected .settings-actions { align-self: flex-start; }
.app-connected[data-status="ok"] .app-health { color: var(--ok); }
.dialog.agent-apps-dialog { max-width: 940px; }
.dialog.app-connect-dialog { max-width: 560px; }
.app-request-card { margin: 8px 0; }
@media (max-width: 760px) {
  .app-connected { flex-wrap: wrap; gap: 10px; }
  .app-connected .settings-name { flex-basis: calc(100% - 48px); }
  .app-connected .settings-actions { width: 100%; justify-content: flex-end; }
}
.store-row { display: flex; flex-direction: column; gap: 8px; }
.store-row-head { display: flex; flex-direction: column; gap: 1px; }
.store-row-head small { color: var(--muted); font-size: 12.5px; }
/* Tiles: equal heights in a wrapping grid; logo, name, one line, a quiet meta line and the action at the bottom. */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.store-tile { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); min-width: 0; }
.store-tile[data-connector]:not(.builtin), .store-tile[data-connector="ayrshare"] { cursor: pointer; }
@media (hover: hover) { .store-tile[data-connector]:not(.builtin):hover, .store-tile[data-connector="ayrshare"]:hover { border-color: var(--line-strong); } }
.store-tile.installed { border-color: var(--line-strong); }
.tile-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tile-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tile-title strong, .tile-name { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.tile-name { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-size: 14px; font-weight: 650; max-width: 100%; }
.tile-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Store and app tiles share one layout: logo and name (two lines at most), what it does (two lines), the quiet line, the action. */
.store-tile .tile-title strong, .store-tile .tile-name, .app-tile .tile-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.store-tile .tile-desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.store-chips .how-pick { padding: 4px 11px; font-size: 12.5px; color: var(--text); cursor: pointer; }
@media (max-width: 760px) {
  .apps-view .store-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .apps-view .store-chips > * { flex: none; }
  .apps-view .store-chips .how-pick { position: sticky; right: 0; box-shadow: -10px 0 10px var(--panel); }
}
.tile-meta { color: var(--faint); font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-meta .metered { color: var(--warn); }
.tile-logo.has-icon { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--brand); }
.tile-logo.has-icon svg { width: 20px; height: 20px; fill: currentColor; }
.tile-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tile-logo.has-img img { width: 22px; height: 22px; object-fit: contain; }
/* Every brand logo sits on the same white rounded square; a very light single-colour icon is darkened to show on it. */
.tile-logo.has-icon { background: #fff; }
.tile-logo.has-icon.hi { color: color-mix(in oklab, var(--brand), black 35%); }
.tile-title small, .tile-roles, .tile-cost, .tile-note { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.tile-cost { color: var(--warn); }
.tile-note { font-style: italic; }
.tile-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: hsl(var(--hue, 200) 45% 42%); }
.tile-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.tile-badge { font-size: 11px; border-radius: 99px; padding: 1px 8px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tile-badge.auth-oauth, .tile-badge.auth-url { border-color: var(--accent); color: var(--accent-ink); }
.tile-badge.auth-manual, .tile-badge.soon { border-style: dashed; }
.tile-badge.cost-metered { border-color: var(--warn); color: var(--warn); }
.tile-badge.ro { border-color: var(--ok); color: var(--ok); }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 2px; min-width: 0; }
.tile-actions > button { flex-shrink: 0; }
.tile-status { flex: 1 0 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.store-tile .int-engines { margin-top: 0; }
.store-empty { padding: 8px 0; }
.int-status { color: var(--text) !important; }
.int-row[data-status="error"] .int-status, .int-row[data-status="reconnect"] .int-status { color: var(--bad) !important; }
.int-safety { color: var(--ok) !important; }
.connect-dialog { max-width: 560px; }
/* A manual setup's actions: on a phone, Guide me through it takes its own full-width row above Docs and Add it manually. */
/* (Set it up for me is the primary when an agent recipe covers the entry; Guide me through it is then outlined.) */
@media (max-width: 760px) { .connect-form .settings-actions:has(> [data-action].primary) { flex-wrap: wrap; } .connect-form .settings-actions > [data-action].primary { order: -1; flex: 1 0 100%; } }
.connect-form { display: flex; flex-direction: column; gap: 10px; }
.connect-note { margin: 0; font-size: 13px; color: var(--muted); }
.connect-note.cost { color: var(--warn); }
.connect-note.ro { color: var(--ok); }
.connect-note.third-party { border: 1px solid var(--warn); border-radius: 10px; padding: 8px 10px; color: var(--text); }
.connect-steps ol { margin: 4px 0 0; padding-left: 20px; font-size: 13px; }
.connect-engines { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.connect-engines small { color: var(--muted); font-size: 12px; }
.connect-ok { color: var(--ok); margin: 0; font-weight: 600; }
.connect-wait { margin: 0; }
.cmd-preview { margin: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: 12.5px/1.45 var(--mono); white-space: pre-wrap; word-break: break-all; }
.primary.small { padding: 5px 12px; font-size: 13px; border-radius: 9px; }
@media (max-width: 760px) { .store-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }
/* Skills: one list of every skill, filtered by agent or group, source and search, grouped by source. */
.skills-view { display: flex; flex-direction: column; gap: 10px; }
.skill-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.skill-bar .skill-agent { flex: 0 1 220px; min-width: 0; }
.skill-bar .skill-search { flex: 1 1 200px; min-width: 0; }
.skill-bar > button { flex-shrink: 0; }
.skill-list { display: flex; flex-direction: column; gap: 16px; }
.skill-group { display: flex; flex-direction: column; gap: 6px; }
.skill-row .settings-name { flex: 1 1 300px; min-width: 0; }
.skill-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-who .skill-off { color: var(--warn); }
.skill-row .settings-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .skill-row .settings-name { flex-basis: 100%; } .skill-row .settings-actions { justify-content: flex-start; } }
.int-row:not(.skill-row) .settings-actions { flex-wrap: wrap; }
@media (max-width: 760px) { .int-row:not(.skill-row) .settings-name { flex-basis: calc(100% - 24px); } .int-row:not(.skill-row) .settings-actions { width: 100%; } }
.confirm-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.confirm-folder .settings-note { overflow-wrap: anywhere; }
/* ask(): the in-app text box. It can open over the file viewer, so it sits above it. */
.overlay.ask-overlay { z-index: 1001; }
.dialog.ask-dialog { width: min(440px, 100%); }
.ask-dialog .field[readonly] { font: 13px var(--mono); }
.ask-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-actions { display: flex; gap: 6px; }
.provider-login-actions { flex-wrap: wrap; flex-basis: 100%; min-width: 0; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.linkish { border: 0; background: transparent; color: var(--faint); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.linkish svg { width: 14px; height: 14px; }
@media (hover: hover) { .linkish:hover { color: var(--text); } }
/* Plan badge, usage and the upgrade card */
.side-foot { align-items: center; }
.side-foot .grow { flex: 1; }
.plan-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 2px 9px 2px 3px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); max-width: 170px; white-space: nowrap; overflow: hidden; }
.plan-dev { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
@media (hover: hover) { .plan-chip:hover { border-color: var(--line-strong); color: var(--text); } }
.plan-chip.full { border-color: var(--warn); }
.plan-badge { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 99px; background: var(--line); color: var(--muted); white-space: nowrap; flex: none; }
.plan-badge.pro, .plan-badge.team { background: var(--accent); color: var(--accent-text); }
.plan-badge.trial { background: var(--accent-soft); color: var(--accent-ink); }
.usage { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.usage-text { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.usage-text .muted, .upgrade .muted { color: var(--muted); font-size: 12.5px; }
.usage-bar { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; max-width: 220px; }
.usage-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.usage-bar span.high { background: var(--bad); }
.settings-row.plan-usage { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
.plan-usage-head { display: flex; align-items: center; gap: 8px; }
.plan-usage > small { color: var(--muted); font-size: 12.5px; }
.plan-usage > small.stale { color: var(--warn); }
.plan-window { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.plan-window-line { display: flex; justify-content: space-between; gap: 10px; }
.plan-window-line b { font-weight: 600; }
.plan-window-line.muted { color: var(--muted); font-size: 12.5px; }
.plan-window .usage-bar { max-width: none; height: 6px; background: var(--line-strong); }
.upgrade header { display: flex; align-items: center; gap: 10px; }
.upgrade-title { font-weight: 650; }
.upgrade-lead { margin: 0; color: var(--text); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); font-size: 13px; color: var(--muted); }
.plan-card.pro { border-color: var(--accent); background: var(--accent-soft); }
.plan-card strong { color: var(--text); font-size: 14px; }
.plan-card .price { color: var(--text); }
.plan-card .price b { font-size: 20px; letter-spacing: -.01em; }
.plan-card small { font-size: 12px; }
.button-link { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .upgrade footer { flex-wrap: wrap; } }
.inbox-row { display: flex; align-items: center; gap: 9px; margin: 2px 8px 0; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; text-align: left; }
@media (hover: hover) { .inbox-row:hover { background: var(--line); color: var(--text); } }
.inbox-row.has { color: var(--text); font-weight: 600; }
.inbox-row svg { width: 16px; height: 16px; }
.inbox-row .grow { flex: 1; }
.face .needs { position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.ask-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.ask-card.focus { border-color: var(--accent); }
.ask-card.urgent { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.agent-badge.urgent-badge { color: var(--bad); border-color: transparent; background: var(--bad-soft); letter-spacing: .06em; }
.ask-head { display: flex; align-items: center; gap: 8px; }
.ask-head .grow { flex: 1; }
.ask-options { display: flex; gap: 6px; flex-wrap: wrap; }
/* A long suggested answer wraps inside the card; its end is never hidden. */
.ask-options button { max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; }
.thread-card.ask:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); border-radius: var(--kb-radius-lg); }
.thread-card.ask:not(:disabled) .tc-label { color: var(--accent-ink); letter-spacing: .08em; }
details.rules { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 10px; }
details.rules summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
details.rules[open] { display: flex; }
details.rules label { margin-top: 8px; }
.form label.narrow { flex: 0 0 180px; min-width: 150px; }
/* Side tabs fit the panel: tight padding, and the row shrinks before anything is clipped. */
.side-tabs { flex: 0 1 auto; min-width: 0; }
.side-head .side-tabs button { flex: 0 1 auto; min-width: 0; padding: 3px 7px; font-size: 12.5px; white-space: nowrap; }
.side-head:has(.side-tabs) { gap: 6px; }
.side-head:has(.side-tabs) .hide-sm { display: none; }
/* In-app file viewer: a large panel on a computer, a full-screen sheet on a phone. touch-action: none on an image keeps
   phones from pinch-zooming the page behind it (the viewer zooms the image itself). */
.overlay.viewer { background: rgba(8, 8, 7, .72); backdrop-filter: none; z-index: 1000; padding: 24px; touch-action: none; overscroll-behavior: contain; }
.viewer-sheet { position: relative; display: flex; flex-direction: column; width: min(100%, 1280px); height: 100%; border-radius: 14px; background: #0b0b0a; color: #fff; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.viewer-grab { display: none; }
.viewer-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: #fff; touch-action: none; }
.viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.viewer-name { display: block; max-width: 100%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-bar .icon-btn { flex: none; color: #fff; width: 38px; height: 38px; }
@media (hover: hover) { .viewer-bar .icon-btn:hover, .viewer-stage .icon-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; } }
.viewer-path { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 2px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .62); font: 12px var(--font); cursor: pointer; }
.viewer-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-path svg { flex: none; width: 13px; height: 13px; }
@media (hover: hover) { .viewer-path:hover { color: #fff; text-decoration: underline; } }
.viewer-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 12px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); overflow: hidden; }
.viewer-stage > * { grid-area: 1 / 1; }
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; transform-origin: center; }
.viewer-stage.zoomed { cursor: grab; }
.viewer-stage.zoomed .viewer-img { border-radius: 0; }
.viewer-stage .viewer-prev, .viewer-stage .viewer-next { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
.viewer-stage .viewer-prev { left: 10px; } .viewer-stage .viewer-next { right: 10px; }
.viewer-stage .viewer-prev[hidden], .viewer-stage .viewer-next[hidden] { display: none; }
.overlay.viewer.doc { touch-action: auto; }
.viewer-media { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; }
audio.viewer-media { width: min(100%, 520px); background: none; }
.viewer-frame, .viewer-doc { width: min(100%, 900px); height: 100%; border: 0; border-radius: 6px; background: #fff; }
.viewer-doc { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--panel); color: var(--text); padding: 16px 18px; }
.viewer-code { margin: 0; font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-doc .md-table th, .viewer-doc .md-table td { white-space: nowrap; }
.viewer-pdf { background: #2a2a26; padding: 12px; }
.viewer-page { display: block; width: 100%; height: auto; margin: 0 auto 12px; background: #fff; border-radius: 2px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.viewer-note { color: var(--muted); font-size: 13px; }
.viewer-pdf > .viewer-note { color: rgba(255, 255, 255, .7); }
.viewer-card { display: grid; justify-items: center; gap: 8px; width: min(100%, 340px); padding: 24px; border-radius: 12px; background: var(--panel); color: var(--text); text-align: center; overflow-wrap: anywhere; }
.viewer-card-icon svg { width: 36px; height: 36px; color: var(--muted); }
.viewer-card-meta, .viewer-card p { margin: 0; color: var(--muted); font-size: 13px; }
.viewer-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.viewer-card-actions > * { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.viewer-card-actions .primary { color: var(--accent-text); }
.viewer-card-actions svg { width: 16px; height: 16px; }
body:has(> .overlay.viewer) > .toast { z-index: 1002; }
@media (max-width: 760px) {
  .overlay.viewer { padding: 0; background: #0b0b0a; }
  .viewer-sheet { width: 100%; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }
  .viewer-grab { display: block; flex: none; width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .3); touch-action: none; }
  .viewer-bar { padding: 4px 8px 8px; gap: 2px; }
  .viewer-stage { padding: 0 0 env(safe-area-inset-bottom); }
  .viewer-frame, .viewer-doc { width: 100%; border-radius: 0; }
  .viewer-img, .viewer-media { border-radius: 0; }
  .viewer-stage .viewer-prev, .viewer-stage .viewer-next { display: none; }
}
.tcard .switch { margin-left: 4px; }
.tcard .linkish { align-self: flex-start; }

/* ---------- phone polish: no tap-zoom, no sideways drift, safe areas ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; overscroll-behavior: none; }
button, a, select, input, textarea, .tcard, .thread-card, .project-head { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
  /* iOS zooms into any text field under 16px; keep them all at 16px on phones. */
  input, textarea, select, .field, .composer textarea, .pick, .memory-text, .dialog .path input { font-size: 16px; }
  .shell { height: var(--app-h, 100dvh); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .composer-wrap, .side .composer-wrap { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .main, .columns, .pane, .side, .feed, .feed-inner { min-width: 0; max-width: 100vw; }
  .md pre, .md .md-table, .step-arg { max-width: 100%; }
  .topbar { gap: 8px; }
  .topbar .title-wrap { min-width: 0; }
  .dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .overlay { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .tabs button { padding: 6px 12px; }
  .modes button { padding: 5px 11px; }
}

/* Long unbreakable text (domains, file names, inline code) wraps instead of widening the chat sideways. */
.feed { overflow-x: hidden; }
.feed-inner > * { min-width: 0; max-width: 100%; }
.msg-agent, .msg-user, .msg-error, .msg-note, .tc-body, .tcard, .ask-card, .md { overflow-wrap: anywhere; word-break: break-word; }
.md code { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.md pre, .md .md-table { max-width: 100%; overflow-x: auto; }
.md pre code { white-space: pre; word-break: normal; overflow-wrap: normal; }

/* Agent groups and the press-and-hold menu */
.side-label.group { cursor: pointer; user-select: none; }
@media (hover: hover) { .side-label.group:hover { color: var(--muted); } }
.side-label .fold { font-weight: 500; letter-spacing: 0; }
.side-label .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-label .board-btn { width: 24px; height: 24px; margin-right: 4px; color: var(--faint); }
.side-label .board-btn svg { width: 14px; height: 14px; }
@media (hover: hover) { .side-label .board-btn:hover { color: var(--text); background: var(--panel); } }
/* Open requests between agents, and a group's team board */
.requests-block { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.requests-title { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.request-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; }
.request-dir { color: var(--muted); font-weight: 600; white-space: nowrap; }
.request-about { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list > .side-label { padding: 12px 0 4px; }
.board-lead, .board-empty { margin: 0; color: var(--muted); font-size: 13.5px; }
.board-entry { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; }
.board-head { display: flex; align-items: baseline; gap: 8px; }
.board-head .grow { flex: 1; }
.board-text { font-size: 14px; white-space: pre-wrap; }
/* Merge into…: what moves and stays, and the note with Undo merge in the target's chat. */
.merge-plan { display: flex; flex-direction: column; gap: 4px; }
.merge-plan .side-label { padding: 8px 0 2px; }
.merge-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--text); }
.merge-undo-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.merge-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 9px 12px; }
.merge-card .ghost { flex: none; }
.ask-for { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.msg-user.fyi { opacity: .75; border-style: dashed; }
.project-head { -webkit-touch-callout: none; -webkit-user-select: none; }
.menu-catch { position: fixed; inset: 0; z-index: 90; }
.pop-menu { position: fixed; min-width: 190px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pop-menu button { text-align: left; padding: 10px 12px; border-radius: 9px; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
@media (hover: hover) { .pop-menu button:hover { background: var(--line); } }
.pop-menu button.danger { color: var(--danger, #ff7a7a); }
.pop-menu { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.pop-menu button.on { font-weight: 600; }
.pop-menu button.on::after { content: ' ✓'; color: var(--accent-ink); }
.pop-menu button:disabled { color: var(--faint); cursor: default; }
.pop-menu .note { max-width: 280px; padding: 8px 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pop-menu .sep { height: 1px; margin: 4px 6px; background: var(--line); }
.pop-menu .sep:first-child, .pop-menu .sep + .sep, .pop-menu .sep:last-child { display: none; }
.model-menu { width: min(420px, calc(100vw - 16px)); max-height: min(70vh, 540px); overflow: hidden; gap: 6px; }
.model-menu .model-search { flex: none; font-size: 16px; }
.model-menu .model-chips { flex: none; }
.model-menu .model-chips .chip { padding: 6px 12px; font-size: 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); }
.model-menu .model-chips .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.model-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.pop-menu .model-row { display: flex; flex-direction: column; gap: 2px; flex: none; }
.pop-menu .model-row.active { background: var(--line); }
.model-row .model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-row .model-meta { font-size: 12.5px; color: var(--muted); }
.pop-menu .model-row.on::after { content: none; }
.model-row.on .model-name::after { content: ' ✓'; color: var(--accent-ink); }
.bg-wait { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; }
.bg-wait .thinking { flex: none; }

/* Links styled as buttons (install guides in Settings). */
a.ghost { color: inherit; text-decoration: none; }
/* Tables keep whole words and scroll sideways inside the chat instead of squeezing columns to one letter. */
.md th, .md td { overflow-wrap: normal; word-break: normal; min-width: 10em; max-width: 22em; vertical-align: top; }
.md th:first-child, .md td:first-child { min-width: 0; }
.md th { white-space: nowrap; }

/* ---------- phone smoothness: taps, scroll containment, sheets, keyboard, motion ---------- */
/* No grey tap flash, no double-tap zoom delay, no text selection when a button is held. */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, .tabs, .modes, .side-tabs { -webkit-user-select: none; user-select: none; }
/* Each list scrolls on its own: reaching its end never drags the page or the list behind it. */
.side-scroll, .tcards, .dialog .list, .form, .memory-text, .overlay { overscroll-behavior: contain; }
/* While a sheet or the image viewer is open, nothing behind it scrolls (each list keeps its place). */
body:has(> .overlay) .shell :is(.feed, .tcards, .side-scroll, .memory-text) { overflow: hidden; }
/* With the keyboard up the home bar is hidden, so the composer drops its home-bar gap. */
html.kb .composer-wrap, html.kb .side .composer-wrap { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- phone composer: one row under the message (attach, engine, model, permissions, stop, send) ---------- */
@media (max-width: 760px) {
  .composer { padding: 8px 8px 8px 12px; }
  .composer-bar { flex-wrap: nowrap; gap: 4px; min-width: 0; }
  .composer-bar > * { flex: none; }
  .composer-bar > span { display: flex; align-items: center; }
  .composer-bar .slot-agent, .composer-bar .slot-model { flex: 0 1 auto; min-width: 64px; }
  .composer-bar .slot-effort:empty { display: none; }
  /* Effort keeps a short label with no arrow on a phone, so engine and model keep their room; Stop takes its place mid-turn. */
  .composer-bar:has(.slot-stop .stop) .slot-effort { display: none; }
  .composer-bar .pick.effort-pick { min-width: 40px; padding: 0 6px; font-size: 13px; text-align: center; background-image: none; }
  .effort-pick .long { display: none; }
  .effort-pick .short { display: inline; }
  .composer-bar .grow { flex: 1 1 0; min-width: 0; }
  .composer-bar .slot-stop:empty, .composer-bar .slot-delivery:empty { display: none; }
  .composer-bar:has(.slot-delivery:not(:empty)) .slot-agent,
  .composer-bar:has(.slot-delivery:not(:empty)) .slot-model { flex: 1 1 0; min-width: 0; }
  .composer-bar:has(.slot-delivery:not(:empty)) :is(.slot-agent, .slot-model) .pick { min-width: 0; }
  .composer-bar .pick { font-size: 14px; height: 40px; min-width: 64px; max-width: 100%; padding: 0 22px 0 10px; background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%; }
  .composer-bar .pick.locked { padding-right: 10px; }
  .composer-bar .icon-btn, .composer-bar .send { width: 40px; height: 40px; }
  .composer-bar .modes { display: none; }
  .composer-bar .mode-pick { display: grid; }
  .composer-bar .mode-pick svg { width: 18px; height: 18px; }
  .composer-bar .stop { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .composer-bar .stop span { display: none; }
}

/* purpose changes: before/after diff card, locked rules, purpose history */
.field-hint { color: var(--faint); font-size: 12px; line-height: 16px; font-weight: 400; }
.pcard-title { font-weight: 600; }
.pcard-reason .md { margin-top: 2px; }
.pdiff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdiff-side { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.pdiff-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.pdiff-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 19px; max-height: 320px; overflow-y: auto; }
.pdiff del { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; border-radius: 3px; }
.pdiff ins { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; border-radius: 3px; }
.pdiff-empty { color: var(--faint); font-style: italic; }
.pcard-actions { display: flex; justify-content: flex-end; gap: 8px; }
.purpose-history { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ph-row { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ph-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ph-head .grow { flex: 1; }
.ph-reason { font-size: 12.5px; color: var(--muted); }
.ph-row details summary { cursor: pointer; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .pdiff { grid-template-columns: 1fr; } }
/* Routines and skills an agent set up for itself */
.agent-badge { flex: none; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.notice-text { font-size: 14px; }
.notice-card .pcard-actions { align-items: center; }
.skill-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 0; max-height: 60vh; overflow: auto; }

/* ---------- the KrewBots browser pane: a fitted live frame, never resized by new frames ---------- */
.browser-view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; container: browser / inline-size; }
.browser-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.browser-bar .icon-btn { flex: none; width: 36px; height: 36px; }
.browser-bar .icon-btn:disabled { opacity: .4; }
.browser-bar .icon-btn svg { width: 17px; height: 17px; }
.browser-url { flex: 1; min-width: 0; height: 32px; border: 1px solid transparent; border-radius: 99px; padding: 0 14px; margin: 0 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.browser-url:focus { outline: 0; border-color: var(--accent); background: var(--surface); }
.browser-row { display: flex; align-items: center; gap: 6px; padding: 2px 10px 6px; min-height: 40px; }
.browser-row .grow { flex: 1; }
.browser-save { border-bottom: 1px solid var(--line); padding-top: 6px; font-size: 12.5px; }
.browser-save > svg { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
.browser-save-text { min-width: 0; overflow-wrap: anywhere; }
.browser-file { border-bottom: 1px solid var(--line); padding-top: 6px; font-size: 12.5px; }
.browser-file > svg { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
.browser-file-text { min-width: 0; overflow-wrap: anywhere; }
.browser-file.busy button { display: none; }
.browser-control { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; margin-right: 2px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.browser-control svg { width: 15px; height: 15px; flex: none; }
.browser-control-text { display: none; }
@container browser (min-width: 560px) { .browser-control-text { display: inline; } .browser-control { padding: 0 12px 0 10px; } }
.browser-note:empty { display: none; }
/* A narrow pane keeps room for the address: Forward and the close button return when it is wider (or expanded). At
   phone width the address has the toolbar's first row to itself and the buttons go below it. */
@container browser (max-width: 479px) { .browser-bar [aria-label="Forward"], .browser-close { display: none; } }
@container browser (max-width: 479px) { .browser-bar { gap: 1px; padding: 6px 4px; } .browser-url { margin: 0 2px; } }
@container browser (max-width: 599px) { .browser-bar { flex-wrap: wrap; row-gap: 4px; justify-content: space-between; } .browser-url { order: -1; flex: 1 0 100%; margin: 0 2px; } }
.browser-control[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.browser-control:disabled { opacity: .45; cursor: default; }
.browser-bar .browser-paste { flex: none; margin-right: 2px; }
/* One line of a fixed height (the full text is its tooltip): a longer note, as Take control shows, never resizes the
   stage under it, which would refit the tab and restart its frames. */
.browser-note { height: 30px; box-sizing: border-box; padding: 6px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-view.agent-active .browser-note { color: var(--accent-ink); font-weight: 600; }
.browser-view.agent-active .browser-note::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; animation: pulse 1.2s ease-in-out infinite; }
.browser-view.control .browser-note { color: var(--text); font-weight: 600; }
.browser-view.setup .browser-note { height: auto; white-space: normal; }
/* The stage's size is the tab's viewport (sent to the server), so the frame fills it; it is never resized by its
   content, and only scrolls when pinch-zoomed. --browser-ratio is the page's shape, set from each frame. */
.browser-stage { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overscroll-behavior: contain; container-type: size; display: grid; position: relative; place-items: center; }
.browser-view:not(.zoomed) .browser-stage { overflow: hidden; }
.browser-view.zoomed .browser-stage { display: block; }
.browser-zoom { position: relative; width: 100%; }
.browser-zoom:not([style*="width"]) { width: min(100cqw, 100cqh * var(--browser-ratio, 1.6)); }
.browser-frame { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--surface); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.browser-view.control .browser-frame { cursor: pointer; box-shadow: inset 0 0 0 2px var(--accent); }
.browser-view.agent-active .browser-frame { box-shadow: inset 0 0 0 2px var(--accent); }
/* Select element: a crosshair over the frame, an outline on the hovered element and its tag as a small label. */
.browser-view.picking .browser-frame { cursor: crosshair; box-shadow: inset 0 0 0 2px var(--accent); }
.browser-select[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.browser-pick-box { position: absolute; pointer-events: none; outline: 2px solid var(--accent); outline-offset: -1px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; }
.browser-pick-label { position: absolute; left: -2px; bottom: 100%; margin-bottom: 3px; max-width: 260px; padding: 2px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-text); font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-pick-box.label-in .browser-pick-label { bottom: auto; top: 2px; left: 2px; margin: 0; }
.att.element-ref .chip-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.browser-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0; padding: 24px; text-align: center; color: var(--muted); font-size: 13.5px; background: var(--surface); }
.browser-empty-agent { display: grid; justify-items: center; gap: 6px; max-width: 340px; }
.browser-globe { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--panel); color: var(--faint); }
.browser-globe svg { width: 26px; height: 26px; stroke-width: 1.6; }
.browser-empty-agent strong { color: var(--text); font-size: 16px; }
.browser-empty-agent p { margin: 0; line-height: 1.45; }
.browser-devline { margin-top: 10px !important; font-size: 12.5px; }
.browser-profile-line { margin-top: 4px !important; font-size: 12.5px; color: var(--muted); }
/* Browser profiles: the agents ticked for a profile (browserProfileDialog). */
.profile-agents { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.form label.profile-agent, .profile-agent { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; min-width: 0; font-size: 13.5px; font-weight: 400; color: var(--text); cursor: pointer; }
.profile-agent small { color: var(--muted); }
.handoff-profile { color: var(--muted); }
.handoff-state { display: flex; align-items: center; gap: 6px; }
.browser-detect { border: 0; background: none; padding: 0; color: var(--accent-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.browser-detect:disabled { opacity: .5; cursor: default; }
.browser-empty-signin { margin: 0; max-width: 340px; }
.browser-view.has-frame .browser-empty { display: none; }
/* The tab strip: one scrolling row of the view's tabs; the shown one is raised. */
.browser-strip { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0; background: var(--panel); flex: none; min-width: 0; }
.browser-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.browser-tabs::-webkit-scrollbar { display: none; }
.browser-tab { flex: 0 1 200px; min-width: 128px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; }
@media (hover: hover) { .browser-tab:not(.on):hover { background: var(--line); } }
.browser-tab.on { background: var(--surface); border-color: var(--line); color: var(--text); font-weight: 600; cursor: default; }
.browser-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.browser-tab.on { min-width: 156px; }
.browser-tab-icon { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 3px; object-fit: contain; color: var(--faint); }
.browser-tab-icon svg { width: 14px; height: 14px; }
.browser-tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-tab-who { flex: none; display: grid; place-items: center; }
.browser-tab-who .avatar { width: 18px; height: 18px; font-size: 8px; border-radius: 50%; }
.browser-tab-who.running .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.browser-tab-who.you { padding: 0 6px; height: 18px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; }
.browser-tab-close { flex: none; width: 22px; height: 22px; display: none; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--faint); padding: 0; }
.browser-tab-close svg { width: 13px; height: 13px; }
/* Only the shown tab (and the one under the mouse) spends room on its close button. */
.browser-tab.on .browser-tab-close, .browser-tab:hover .browser-tab-close, .browser-tab:focus-within .browser-tab-close { display: grid; }
@media (hover: hover) { .browser-tab-close:hover { background: var(--line-strong); color: var(--text); } }
.browser-newtab { flex: none; width: 30px; height: 30px; margin-bottom: 2px; }
.browser-newtab svg { width: 16px; height: 16px; }
.browser-keys { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; pointer-events: none; font-size: 16px; }
@media (max-width: 760px) {
  .browser-bar .icon-btn { width: 38px; height: 38px; }
  .browser-bar .browser-expand { display: none; }
  .browser-url { height: 40px; }
  .browser-tab { height: 38px; min-width: 120px; }
  .browser-newtab { width: 38px; height: 38px; }
  .browser-control { height: 36px; padding: 0 10px; }
}
.browser-view [hidden] { display: none !important; }
/* A narrow pane keeps room for the address: View as phone and Expand move to the ⋯ menu; with a mouse the touch
   helpers (Show keyboard, Paste) give way (Ctrl+V pastes there) and the buttons narrow a little, and on a touch screen
   Select element moves to the ⋯ menu instead. */
@container browser (max-width: 479px) { .browser-phone, .browser-bar .browser-expand { display: none; } }
@media (pointer: fine) { @container browser (max-width: 479px) { .browser-bar .icon-btn { width: 32px; } } }
@media (pointer: coarse) { @container browser (max-width: 479px) { .browser-bar .browser-select { display: none; } } }
@media (pointer: fine) { @container browser (max-width: 559px) { .browser-bar .browser-kbd, .browser-bar .browser-paste { display: none; } } }
.browser-phone[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
/* View as phone: the tab keeps the phone's size whatever the pane's size; the pane letterboxes it in a phone-shaped frame. */
.browser-view.phone:not(.zoomed) .browser-zoom:not([style*="width"]) { width: min(100cqw - 36px, (100cqh - 36px) * var(--browser-ratio, .46)); border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 7px #1d1d1b, 0 10px 30px rgba(0, 0, 0, .28); }
[data-theme="dark"] .browser-view.phone:not(.zoomed) .browser-zoom:not([style*="width"]) { box-shadow: 0 0 0 7px #4a4a46, 0 10px 30px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .browser-view.phone:not(.zoomed) .browser-zoom:not([style*="width"]) { box-shadow: 0 0 0 7px #4a4a46, 0 10px 30px rgba(0, 0, 0, .5); } }
/* The browser in its own window fills it; on a phone, ⤢ fills the screen with the pane instead. */
.browser-window { height: var(--app-h, 100dvh); display: flex; flex-direction: column; background: var(--surface); }
.browser-view.standalone .browser-popout, .browser-view.standalone .browser-expand { display: none; }
.browser-view.full { position: fixed; inset: 0; z-index: 18; height: var(--app-h, 100dvh); background: var(--surface); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); box-sizing: border-box; }
/* Expanded: the same live browser covers the chat columns; the chat underneath keeps its layout, so nothing jumps. */
.columns { position: relative; }
.columns.browser-big > .side { position: absolute; inset: 0; z-index: 5; border-left: 0; }
.columns.browser-big .side-head { display: none; }
/* X drafts for your account: exact text, media previews, character count and estimated cost before Post / Send. */
.xcard-text { white-space: pre-wrap; font-size: 15px; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.xcard-edit { font-size: 15px; line-height: 1.45; }
.xcard-original { display: grid; gap: 4px; padding: 8px 12px; border-left: 3px solid var(--line); border-radius: 0 10px 10px 0; background: var(--panel); min-width: 0; }
.xcard-original-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.xcard-original-head strong { color: var(--text); font-size: 13.5px; }
.xcard-original-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; color: var(--muted); }
.xcard-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* x_suggest_reply: four actions wrap as whole buttons on a phone. */
.xsuggest .pcard-actions { flex-wrap: wrap; align-items: center; }
.xsuggest .pcard-actions > *, .xsuggest .ask-head button { white-space: nowrap; }
/* Phones: the badge wraps below the agent's name instead of squeezing it. */
.xsuggest .ask-head { flex-wrap: wrap; row-gap: 4px; }
/* ig_suggest_comment: the post the comment goes on, with its link. */
.igsuggest-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.igsuggest-post { margin-top: 2px; }
.igsuggest-caption { min-width: 0; overflow-wrap: anywhere; }
.igsuggest-creator { color: var(--text); }
.igsuggest-note { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.handoff-media ul { margin: 4px 0 0; padding-left: 20px; font-size: 13px; overflow-wrap: anywhere; }
.engage-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.form label.engage-pick, .engage-pick { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; font-weight: 400; color: var(--text); }
.engage-pick input { flex: none; width: 18px; height: 18px; margin: 0; }
.engage-label { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.engage-item .button-link { flex: none; white-space: nowrap; }
.xcard-grid { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.xcard-grid.n1 { grid-template-columns: 1fr; }
.xcard-media { position: relative; display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; cursor: pointer; }
.xcard-grid.n1 .xcard-media.video { aspect-ratio: auto; max-height: 360px; }
.xcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xcard-grid.n1 .xcard-media.video img { object-fit: contain; max-height: 360px; min-height: 180px; }
.xcard-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, .6); border: 2px solid #fff; }
.xcard-play::after { content: ''; position: absolute; left: 20px; top: 14px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.xcard-media-name { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11.5px; }
.xcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.xcard-count.over { color: var(--bad); font-weight: 600; }
.xcard-warn { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 193, 7, .15); border: 1px solid rgba(255, 193, 7, .5); }
.xcard-warn[hidden] { display: none; }
.check-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.check-row input { margin-top: 3px; flex: none; }
.check-row > span { display: flex; flex-direction: column; gap: 2px; }
.x-activity-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 2px; border-top: 1px solid var(--line); font-size: 13px; }
.x-activity-who { color: var(--muted); }

/* ---------- New agent: 3 steps (role, quick setup, where it works) ---------- */
.new-agent header { display: flex; align-items: baseline; gap: 10px; }
.wiz-step { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.wizard .role-group h3 { margin: 4px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wizard .role-group + .role-group { margin-top: 6px; }
.wizard > .role-group, .wizard > .role-specialists { flex: none; }
.wizard .role-note { margin: -2px 0 8px; font-size: 12.5px; color: var(--muted); }
.wizard .role-group.main .role-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.role-card.main { grid-template-columns: 44px 1fr; min-height: 76px; padding: 12px; }
.role-card.main > .avatar { width: 44px; height: 44px; }
.role-card.main strong { font-size: 15px; }
.wizard .role-specialists { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.wizard .role-specialists > h3, .wizard .role-group.main > h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.wizard .role-group.area h3 { margin-top: 10px; }
.wizard .role-group.area .role-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.role-card.specialist span.role-when b { font-weight: 600; color: var(--text); }
.tpl-wrap { position: relative; display: grid; }
.tpl-wrap .role-card { padding-right: 34px; }
.tpl-wrap .role-card span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-more { position: absolute; top: 6px; right: 4px; width: 26px; height: 26px; }
.tpl-more svg { width: 16px; height: 16px; }
.wiz-name { display: flex; align-items: center; gap: 12px; }
.wiz-name > .avatar { width: 48px; height: 48px; flex: none; }
.wiz-name-input { font-size: 17px; font-weight: 600; }
.wiz-name-text { font-size: 17px; }
.wiz-job { white-space: pre-line; max-height: 9em; overflow: auto; }
.wizard .chip-q { display: flex; flex-direction: column; gap: 8px; }
.wizard .chip-label { font-size: 14px; font-weight: 600; }
.wizard .chips { justify-content: flex-start; margin-top: 0; }
.wizard .chip { color: var(--text); min-height: 34px; }
.wizard .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.wizard .chip-other { flex: 1 1 100%; }
.wiz-avatar summary { cursor: pointer; }
.wiz-avatar .avatar-grid { margin-top: 8px; }
.where-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.where-choice { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 16px; min-height: 110px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); cursor: pointer; }
.where-choice strong { font-size: 15px; }
.where-choice span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.where-choice.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
@media (max-width: 760px) { .where-choices { grid-template-columns: 1fr; } .where-choice { min-height: 84px; } }

/* ---------- Artifacts: a grid of published deliverables (two columns on a phone) ---------- */
.art-tools { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 0; }
.art-tools[hidden] { display: none; }
.art-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--faint); }
.art-search svg { width: 16px; height: 16px; flex: none; }
.art-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font: inherit; color: var(--text); }
.art-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.art-chips:empty { display: none; }
.art-chips::-webkit-scrollbar { display: none; }
.art-chips .chip { flex: none; padding: 4px 11px; font-size: 12.5px; }
.art-chips .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.art-list { display: block; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.art-card { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
@media (hover: hover) { .art-card:hover { border-color: var(--line-strong); } }
.art-card.pinned { border-color: var(--accent-ink); }
.art-open { display: flex; flex-direction: column; gap: 4px; width: 100%; border: 0; background: none; padding: 0 0 10px; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.art-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--panel); border-bottom: 1px solid var(--line); overflow: hidden; color: var(--muted); }
.art-thumb img, .art-thumb .lib-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-thumb > svg { width: 28px; height: 28px; }
.art-excerpt { align-self: stretch; justify-self: stretch; padding: 10px 11px; font-size: 11px; line-height: 1.45; color: var(--muted); white-space: pre-wrap; overflow: hidden; overflow-wrap: anywhere; mask-image: linear-gradient(#000 65%, transparent); }
.art-excerpt.mono { font-family: var(--mono); font-size: 10.5px; }
.art-icon { display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.art-icon svg { width: 30px; height: 30px; color: var(--muted); }
.art-title { padding: 6px 10px 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.art-meta { display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; }
.art-kind { flex: none; border: 1px solid var(--line-strong); border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 600; color: var(--muted); }
.art-pin { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--faint); opacity: 0; }
.art-pin svg { width: 15px; height: 15px; }
.art-pin.on { opacity: 1; color: var(--accent-text); background: var(--accent); }
.art-pin.on svg { fill: currentColor; }
.art-card:hover .art-pin, .art-pin:focus-visible { opacity: 1; }
@media (hover: none) { .art-pin { opacity: 1; } }
.art-reveal { position: absolute; top: 6px; right: 40px; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--faint); opacity: 0; }
.art-reveal svg { width: 15px; height: 15px; }
.art-card:hover .art-reveal, .art-reveal:focus-visible { opacity: 1; }
@media (hover: none) { .art-reveal { opacity: 1; } }
@media (max-width: 760px) { .art-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }
.thread-card.artifact .row-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.thread-card.artifact .row-icon svg { width: 15px; height: 15px; }
/* The artifact viewer: title and version note over the version picker. */
.viewer-name strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.viewer-name small { display: block; color: rgba(255, 255, 255, .6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.viewer-ver { flex: none; max-width: 42vw; -webkit-appearance: none; appearance: none; border: 1px solid rgba(255, 255, 255, .3); border-radius: 9px; background: #2a2a26; color: #fff; padding: 6px 10px; font: 13px var(--font); cursor: pointer; }
.viewer-ver option { color: #000; }
.viewer-text-btn { flex: none; border: 0; border-radius: 9px; background: var(--accent); color: var(--accent-text); padding: 7px 11px; font-weight: 600; font-size: 13px; }
body:has(> .overlay.viewer) > .menu-catch { z-index: 1001; }
@media (max-width: 760px) {
  .viewer-ver { font-size: 16px; padding: 5px 10px; }
  /* On a phone the artifact title gets its own row above the version picker and buttons. */
  .viewer-bar.has-tools { flex-wrap: wrap; row-gap: 4px; }
  .viewer-bar.has-tools .viewer-title { flex: 1 0 100%; }
  .viewer-bar.has-tools .viewer-ver { margin-right: auto; }
}

/* ---------- Files tab: a lazy tree of the Library and the agent folder; an open file widens the tab over the chat ---------- */
.columns.files-big > .side { position: absolute; inset: 0; z-index: 5; border-left: 0; }
.columns.files-big > .resizer { display: none; }
.files-view { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.files-view.has-doc { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); }
.files-tree { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.files-view.has-doc .files-tree { border-right: 1px solid var(--line); }
.files-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; padding: 8px 8px 4px 10px; }
.files-roots { margin-right: auto; }
.files-bar .icon-btn { width: 32px; height: 32px; }
.files-bar .icon-btn svg { width: 17px; height: 17px; }
.files-roots button { white-space: nowrap; }
.files-roots button:disabled { opacity: .45; cursor: default; }
/* Published: the artifacts gallery takes the tree's place; an open file stays loaded, hidden, for when you switch back. */
.files-published { display: none; }
.files-view.published, .files-view.published.has-doc { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.files-view.published :is(.files-bar .icon-btn, .files-target, .files-list, .files-doc) { display: none; }
.files-view.published .files-tree { border: 0; }
.files-view.published .files-published { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.files-target { padding: 0 12px 6px; color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 6px 16px; }
.files-row { display: flex; align-items: center; border-radius: 8px; }
.files-row.on { background: var(--accent-soft); }
.files-row.target:not(.on) > .files-main .files-name { font-weight: 600; }
@media (hover: hover) { .files-row:not(.on):hover { background: var(--line); } }
.files-main { flex: 1; min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 6px 4px calc(4px + var(--depth, 0) * 16px); font-size: 13.5px; text-align: left; }
.files-caret { flex: none; width: 14px; display: grid; place-items: center; color: var(--faint); }
.files-caret svg { width: 12px; height: 12px; transition: transform .12s ease; }
.files-caret.open svg { transform: rotate(90deg); }
.files-icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--muted); border-radius: 3px; overflow: hidden; }
.files-icon svg { width: 16px; height: 16px; }
.files-icon img { width: 18px; height: 18px; object-fit: cover; display: block; }
.files-row.folder .files-icon { color: var(--accent-ink); }
.files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-size { flex: none; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.files-more { flex: none; width: 28px; height: 28px; opacity: 0; }
.files-more svg { width: 16px; height: 16px; }
.files-row:hover .files-more, .files-row:focus-within .files-more, .files-row.on .files-more { opacity: 1; }
@media (hover: none) { .files-more { opacity: 1; } }
.files-empty, .files-note { padding: 18px 12px; color: var(--muted); font-size: 13px; }
.files-empty strong { display: block; color: var(--text); font-size: 14px; }
.files-empty p { margin: 4px 0 0; }
.files-doc { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.files-doc[hidden] { display: none; }
.files-doc-head { display: flex; align-items: center; gap: 4px; padding: 6px 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.files-doc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.files-doc-name strong, .files-doc-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-doc-name strong { font-size: 14px; }
.files-doc-name small { color: var(--faint); font: 11.5px var(--mono); }
.files-dirty { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--warn); vertical-align: 1px; }
.files-doc-head .icon-btn svg { width: 17px; height: 17px; }
.files-save { padding: 6px 14px; margin-left: 4px; }
.files-save:disabled { opacity: .5; cursor: default; }
.files-conflict { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: var(--bad-soft); color: var(--bad); font-size: 13.5px; font-weight: 600; }
.files-conflict[hidden] { display: none; }
.files-conflict .grow { flex: 1; }
.files-conflict .ghost { background: var(--surface); }
.files-body { flex: 1; min-height: 0; display: flex; }
.files-editor, .files-preview { flex: 1; min-width: 0; min-height: 0; }
.files-editor[hidden], .files-preview[hidden] { display: none; }
.files-preview { overflow: auto; display: grid; place-items: center; padding: 12px; background: var(--panel); }
.files-preview .viewer-img, .files-preview .viewer-media { max-height: 100%; }
.files-preview .viewer-frame, .files-preview .viewer-doc { width: 100%; height: 100%; align-self: stretch; }
.files-tidy[hidden] { display: none; }
.files-bar .files-select.on { background: var(--accent-soft); color: var(--accent-ink); }
.files-select-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 8px 6px; padding: 6px 8px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; }
.files-select-bar[hidden] { display: none; }
.files-select-bar .grow { flex: 1; }
.files-picked { font-weight: 600; }
.files-check { flex: none; width: 16px; height: 16px; margin: 0 0 0 6px; accent-color: var(--accent-ink); }
.files-row.picked { background: var(--accent-soft); }
.files-tidy-plan { display: flex; flex-direction: column; gap: 8px; }
.files-tidy-moves { max-height: 40vh; overflow: auto; }
.files-trash { display: flex; flex-direction: column; gap: 4px; }
.files-trash-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.files-trash-row .lib-text small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .files-view.has-doc { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 34%) minmax(0, 1fr); }
  .files-view.has-doc .files-tree { border-right: 0; border-bottom: 1px solid var(--line); }
  .files-main { min-height: 40px; }
  .files-bar .icon-btn { width: 36px; height: 36px; }
}

/* ---------- Settings: a rail of pages (a list, then a page with a back arrow, on a phone) ---------- */
.settings-dialog { width: min(1280px, 94vw); height: 90dvh; max-height: none; }
.dialog header.settings-head { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.settings-back { display: none; margin-left: -6px; }
.settings-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.settings-rail { overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.rail-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 7px 10px; color: var(--muted); }
.rail-item > svg { width: 16px; height: 16px; flex: none; }
.rail-item.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) { .rail-item:not(.on):hover { background: var(--line); color: var(--text); } }
.rail-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rail-label { font-size: 14px; font-weight: 550; }
.rail-note { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-note:empty { display: none; }
.rail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.rail-dot[hidden], .rail-chev { display: none; }
.settings-page { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.settings-title { margin: 0; padding: 16px 18px 6px; font-size: 18px; font-weight: 650; }
.settings-body { flex: 1; min-height: 0; padding-bottom: 18px; }
.settings-body > .side-label { padding: 6px 0 0; }
.social-cards { display: flex; flex-direction: column; gap: 14px; }
.social-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); }
.social-card.off { opacity: .55; }
.social-card.off .settings-note { margin: 0; }
.social-head { display: flex; align-items: center; gap: 10px; }
.social-head .grow { flex: 1; }
.social-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--text); color: var(--bg); flex: none; }
.social-card.off .social-mark { background: var(--line-strong); color: var(--muted); }
.social-status { font-size: 12.5px; color: var(--muted); text-align: right; }
.social-status.attention { color: var(--warn); font-weight: 600; }
/* Social accounts: one tab per network, each with its status dot */
.social-page { display: flex; flex-direction: column; gap: 12px; }
.social-tabs { display: flex; gap: 2px; align-self: flex-start; max-width: 100%; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 2px; }
.social-tab { border: 0; background: transparent; border-radius: 99px; padding: 5px 14px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; }
.social-tab:hover { color: var(--text); }
.social-tab.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.social-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.social-tab-dot.on { background: var(--ok); }
.social-tab-dot.attention { background: var(--warn); }
.social-body, .social-account { display: flex; flex-direction: column; gap: 8px; }
.social-account { padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong); }
.social-rules { font-size: 13px; }
.social-handoff { margin-bottom: 8px; }
/* "Optional: API keys" on a social card, folded by default. */
.social-api { margin-top: 18px; }
.social-api > summary { font-size: 13px; color: var(--text); }
.social-api-note { font-weight: 400; color: var(--muted); }
.social-api-note.attention { color: var(--warn); }
.social-api-adds { margin: 0; color: var(--muted); font-size: 13px; }
.connect-optional { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.social-rules ul, .social-guide ol { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--muted); }
.social-lead { margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.social-guide { font-size: 13px; }
.connect-choice { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--accent); }
.connect-choice[hidden], .dev-own[hidden], .dev-own-show[hidden] { display: none; }
.dev-own { display: flex; flex-direction: column; gap: 8px; }
.social-details > small { color: var(--muted); font-size: 12.5px; }
.dev-own-show { align-self: flex-start; }
.social-card .ig-settings { gap: 8px; }
.x-use { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.x-use .hint { display: block; color: var(--muted); font-size: 12.5px; }
.x-activity { display: flex; flex-direction: column; gap: 4px; }
.x-activity-row { display: grid; grid-template-columns: 90px 140px 1fr 70px; gap: 8px; align-items: baseline; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.x-activity-row .x-activity-who { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.x-activity-row a { color: var(--accent-ink); }
@media (max-width: 760px) {
  .settings-dialog { width: 100%; height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .settings-main { grid-template-columns: minmax(0, 1fr); }
  .settings-rail { border-right: 0; background: none; padding: 4px 12px; gap: 0; }
  .rail-item { padding: 12px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .rail-item.on { background: none; box-shadow: none; color: var(--muted); }
  .rail-item .rail-label { color: var(--text); }
  .rail-chev { display: block; width: 16px; height: 16px; color: var(--faint); flex: none; }
  .settings-dialog:not(.page-open) .settings-page { display: none; }
  .settings-dialog.page-open .settings-rail { display: none; }
  .settings-dialog.page-open .settings-back { display: grid; }
  .settings-title { padding-top: 12px; }
  .x-activity-row { grid-template-columns: 1fr auto; }
}
/* Instagram (internal): the Reel draft card and Settings → Social accounts → Instagram */
.backup-preview { display: flex; flex-direction: column; gap: 8px; }
.backup-item { flex-direction: column; align-items: stretch; gap: 6px; }
.backup-item .settings-note .field { min-width: 180px; }
.form .backup label.check { flex: none; min-width: 0; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--text); }
/* Settings → Storage: sizes, rules, and the clean-up preview */
.storage-bytes { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.storage-total { display: flex; justify-content: space-between; padding: 4px 12px; }
.storage-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form .storage label.check, .form .storage label.storage-unit { flex: none; min-width: 0; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--text); }
.form .storage .storage-num { width: 84px; min-width: 0; flex: none; }
.storage-plan { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.storage-plan[hidden] { display: none; }
.storage-group > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.storage-items { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.storage-items li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.storage-path { font-size: 12px; overflow-wrap: anywhere; color: var(--text); }
.storage-items small { color: var(--muted); font-size: 12px; }
/* Instagram (internal): the Reel or carousel draft card and Settings → Instagram */
.igcard-media { display: flex; gap: 8px; align-items: flex-start; }
.igcard-video { display: block; width: 100%; max-width: 200px; aspect-ratio: 9 / 16; max-height: 340px; border-radius: 10px; background: #000; border: 1px solid var(--line); object-fit: contain; }
.igcard-cover { width: 72px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.igcard-account { font-weight: 600; color: var(--text); }
.igcard .ask-head button { flex: none; }
.igcard-strip { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.igcard-slide { position: relative; flex: none; scroll-snap-align: start; }
.igcard-slide img { display: block; height: 180px; width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.igcard-slide-n { position: absolute; top: 6px; left: 6px; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
@media (max-width: 600px) { .igcard-slide img { height: 150px; } }
.ig-settings .ig-token-warn, .ig-settings .ig-host-off { color: var(--bad); }
.ig-storage-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ig-storage-fields .set { color: var(--ok); }
.ig-storage-result { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.ig-storage-privacy { display: block; margin-top: 6px; }
.ig-storage-result.bad { color: var(--bad); }
.ig-storage-result.ok { color: var(--ok); }
.ig-storage .setup-guide ul { margin: 4px 0 0; padding-left: 18px; }
.ig-storage-link { margin-top: 6px; align-self: flex-start; }
.ig-krew-dm .settings-name > * { margin-top: 6px; }
.ig-krew-dm .settings-name > strong { margin-top: 0; }
.ig-krew-dm .krew-dm-label { display: block; font-size: 12.5px; color: var(--muted); }
.krew-dm-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.krew-dm-posts li { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.krew-dm-post-preview, .krew-dm-posts-help { color: var(--muted); display: block; overflow-wrap: anywhere; }
.krew-dm-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.krew-dm-status, .krew-dm-today, .krew-dm-result, .krew-dm-none { display: block; overflow-wrap: anywhere; }
.krew-dm-status.bad, .krew-dm-result.bad, .krew-dm-err { color: var(--bad); }
.krew-dm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.krew-dm-confirm { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.krew-dm-sends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.krew-dm-sends li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; overflow-wrap: anywhere; }
.krew-dm-res.sent { color: var(--ok); }
.krew-dm-res.unconfirmed, .krew-dm-res.failed { color: var(--bad); }

/* The composer's "/" command menu: KrewBots commands, then the engine's skills with where each comes from. */
.composer { position: relative; }
.slash-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20; max-height: min(52vh, 380px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.slash-menu .slash-head { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.slash-menu .slash-item { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.slash-menu .slash-item.on { background: var(--line); }
.slash-menu .slash-name { flex: none; font-family: var(--mono); font-size: 13px; }
.slash-menu .slash-desc { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-menu .slash-src { flex: none; max-width: 40%; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-menu .slash-empty { padding: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .slash-menu .slash-item { flex-wrap: wrap; row-gap: 2px; padding: 10px; }
  .slash-menu .slash-desc { flex-basis: 100%; order: 3; white-space: normal; }
}

/* Remote access (KrewBots Cloud) */
.relay-code { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--panel); border: 1px dashed var(--line-strong); }
.relay-code strong { font-family: var(--mono); font-size: 22px; letter-spacing: .08em; }
.relay-code small { color: var(--muted); font-size: 12.5px; }
.settings-advanced summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* Role packs: the first-run card, the routine Suggestions, the agent's pack and "Works best with" */
.welcome-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.welcome-card .wc-label { font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.wc-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.wc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wc-text small { color: var(--muted); font-size: 12.5px; line-height: 17px; }
.wc-row button { flex: none; }
/* The first message's Get started card: a header that opens and closes it, then Try these, Turn on and Connect */
.get-started { display: block; padding: 0; }
.get-started > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; border-radius: 14px; }
.get-started > summary::-webkit-details-marker { display: none; }
.get-started > summary .grow { flex: 1; }
.get-started > summary svg { width: 16px; height: 16px; flex: none; }
.get-started > summary .gs-spark { color: var(--accent, var(--text)); }
.get-started > summary .chev { color: var(--faint); transition: transform .15s; }
.get-started[open] > summary .chev { transform: rotate(90deg); }
.gs-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.gs-body > .md p:first-child, .gs-body > p:first-child { margin-top: 0; }
.gs-section { display: flex; flex-direction: column; gap: 6px; }
.gs-try { width: 100%; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.gs-try-title { flex: 1; min-width: 0; font-weight: 500; }
.gs-try .gs-go { width: 15px; height: 15px; flex: none; color: var(--faint); transform: rotate(90deg); }
.gs-foot { display: flex; justify-content: flex-end; }
/* suggest_agent's hiring card */
.hire-role { display: flex; align-items: center; gap: 10px; }
.hire-role .avatar { width: 40px; height: 40px; flex: none; }
.hire-skills .wc-label { font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.hire-skills ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 18px; color: var(--muted); }
.hire-skills strong { color: var(--text); font-weight: 600; }
.hire-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; line-height: 18px; }
.hire-facts dt { color: var(--faint); }
.hire-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hire-card .pcard-actions { align-items: center; }
.hire-card .ask-head > button { flex: none; }
.dialog > header.with-action { display: flex; align-items: center; gap: 10px; }
.dialog > header.with-action > span { flex: 1; min-width: 0; }
.suggest-list { display: flex; flex-direction: column; gap: 6px; }
.suggest-item { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--text); }
.suggest-item small { color: var(--faint); font-size: 12px; }
.suggest-prompt { color: var(--muted); font-size: 12.5px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .suggest-item:hover, .wc-row:hover { border-color: var(--line-strong); } }
.pack-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pack-list .settings-name { flex: 1; min-width: 0; }
.pack-ok { color: var(--accent-ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.pack-badge { margin-left: 8px; vertical-align: 1px; font-weight: 500; }
.setup-guide ol { margin: 4px 0 0; padding-left: 20px; }
.setup-guide summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.button-link { display: inline-flex; align-items: center; text-decoration: none; }
/* An assignment picker collapsed to "Used by: … · Change" (Social accounts, Integrations, Skills). */
.scope-picker { font-size: 12.5px; color: var(--muted); min-width: 0; }
.scope-summary { min-width: 0; overflow-wrap: anywhere; }
.scope-change { font-size: 12.5px; flex-shrink: 0; }
.scope-open { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; color: var(--text); }
.scope-open > small { color: var(--muted); }
.skill-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.skill-who .scope-picker { flex: 0 1 auto; }
.skill-who .scope-open { flex-basis: 100%; }
/* "Who can use it": All agents · Groups · Specific agents, then a searchable list with chips (a bottom sheet on a phone) */
.access-label { color: var(--text); font-weight: 600; }
.access-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 560px; }
.form .access-editor .modes, .access-editor .modes { align-self: flex-start; max-width: 100%; }
.access-modes button { padding: 4px 12px; font-size: 13px; }
.access-pick { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.access-pick[hidden] { display: none; }
.access-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.access-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px 2px 3px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--text); font-size: 12.5px; }
.access-chip:not(:has(.avatar)) { padding-left: 10px; }
.access-chip > span:not(.avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-chip .avatar { width: 20px; height: 20px; font-size: 9px; }
.access-chip-x { border: 0; background: transparent; color: var(--muted); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; }
@media (hover: hover) { .access-chip-x:hover { background: var(--line); color: var(--text); } }
.access-none { color: var(--faint); font-size: 12.5px; }
.access-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 4px; }
.access-list > .field-hint { display: block; padding: 8px; }
.access-group + .access-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.access-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 2px; color: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.access-group-head .linkish { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--accent-ink); }
.form label.access-option, .access-option { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; flex: none; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 400; color: var(--text); cursor: pointer; }
@media (hover: hover) { .access-option:hover { background: var(--panel); } }
.access-option input { margin: 0; flex: none; accent-color: var(--accent-ink); }
.access-option .avatar { width: 24px; height: 24px; }
.access-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-option small { color: var(--faint); font-size: 12px; }
.access-faces { display: inline-flex; flex: none; }
.access-faces .avatar { width: 22px; height: 22px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface); }
.access-faces .avatar + .avatar { margin-left: -7px; }
.access-sheet-overlay { place-items: end stretch; padding: 0; }
.dialog.access-sheet { width: 100%; max-width: none; max-height: 86dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.access-sheet .access-editor { max-width: none; }
.access-sheet .access-list { max-height: none; }
.access-sheet-body { flex: 1; min-height: 0; }
.access-sheet footer .primary, .access-sheet footer .ghost { min-height: 40px; }

/* "Set it up for me": the guide, the pre-start list and the live run (Settings → Social accounts, Integrations) */
.setup-row { border-top: 1px dashed var(--line); }
.setup-dialog { max-width: 620px; }
.setup-dialog.running { width: min(1180px, 96vw); max-width: none; height: min(900px, 94dvh); max-height: none; }
.setup-dialog.running .setup-form { flex: 1; min-height: 0; overflow: hidden; gap: 10px; }
.setup-dialog.running .setup-banner { flex: none; }
.setup-run { flex: 1; min-height: 0; display: flex; gap: 10px; }
.setup-run .browser-view { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.setup-side { width: 280px; flex: none; overflow: auto; min-height: 0; }
.setup-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.setup-steps li small { display: block; color: var(--muted); }
.setup-steps li a { font-size: 12px; word-break: break-all; }
.setup-steps li.past { opacity: .55; }
.setup-steps li.now { font-weight: 600; }
.setup-step-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.setup-who { font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; background: var(--chip, rgba(127,127,127,.12)); }
.setup-who.you { background: color-mix(in srgb, var(--accent, #c66) 18%, transparent); }
.setup-unverified { font-style: italic; }
.setup-rules { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent, #c66) 8%, transparent); margin: 0; }
.setup-banner { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.setup-banner[data-state="paused"] { border-color: var(--accent, #c66); background: color-mix(in srgb, var(--accent, #c66) 10%, transparent); }
.setup-banner-text { flex: 1; display: grid; gap: 2px; }
.setup-banner small { color: var(--muted); }
.setup-log ol { font-size: 12px; padding-left: 18px; }
/* Set it up for me (an agent does the steps): each step's status, the actions under it, the owner's answers. */
.setup-dialog.agent .setup-who { font-size: 12px; }
.setup-dialog.agent .setup-steps li small, .setup-dialog.agent .agent-notes { font-size: 13px; }
.secret-name { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
.agent-fold > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: baseline; }
.agent-fold > summary::-webkit-details-marker { display: none; }
.agent-fold > summary::before { content: '›'; color: var(--muted); transition: transform .15s; flex: none; }
.agent-fold[open] > summary::before { transform: rotate(90deg); }
.agent-fold > summary .setup-step-head { flex: 1; min-width: 0; }
.agent-more { background: none; border: 0; padding: 2px 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; justify-self: start; }
.agent-strip, .agent-all { display: none; }
.setup-who.doing { background: color-mix(in srgb, var(--accent, #c66) 22%, transparent); }
.setup-who.done, .setup-who.skipped { background: color-mix(in srgb, var(--ok, #3a3) 18%, transparent); }
.agent-steps li[data-status="doing"] { font-weight: 400; }
.agent-steps li[data-status="doing"] > .setup-step-head strong { font-weight: 600; }
.agent-act { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.agent-act.refused, .agent-act.gate { color: var(--warn); }
.agent-act.saved { color: var(--ok); }
.agent-notes { font-size: 12px; padding-left: 18px; margin: 4px 0 0; }
.agent-answers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.setup-dialog.agent footer > button, .agent-answers > button, .setup-banner > button, .setup-banner > a.button-link { min-height: 44px; box-sizing: border-box; }
.setup-dialog.agent footer > button[hidden] { display: none; }
@media (max-width: 760px) {
  .setup-dialog.agent:not(.running) footer { flex-wrap: wrap; }
  .setup-dialog.agent:not(.running) footer > .grow { display: none; }
  .setup-dialog.agent:not(.running) footer > button { flex: 1 1 0; white-space: nowrap; }
  .setup-dialog.agent:not(.running) footer > [data-action="agent-start"] { order: -1; flex: 1 0 100%; }
  .connect-form .settings-actions:has(> [data-action="agent-setup"]) { display: grid; grid-template-columns: 1fr 1fr; }
  .connect-form .settings-actions:has(> [data-action="agent-setup"]) > [data-action="guided-setup"] { grid-column: 1 / -1; }
  .connect-form .settings-actions:has(> [data-action="agent-setup"]) > [data-action="agent-setup"] { grid-column: 1 / -1; }
  .agent-strip { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
  .agent-strip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .agent-all { display: inline-flex; min-height: 44px; width: 100%; justify-content: center; }
  .setup-dialog.agent .setup-side:not(.open) > :not(.agent-all) { display: none; }
}
@media (max-width: 760px) { .setup-dialog.agent .setup-banner { flex-wrap: wrap; } .agent-answers { width: 100%; } .agent-answers > button { flex: 1 0 auto; } .setup-dialog.agent .setup-banner > button { flex: 1 0 100%; } }
.browser-view.setup .browser-strip, .browser-view.setup .browser-more, .browser-view.setup .browser-popout, .browser-view.setup .browser-expand,
.browser-view.setup .browser-close, .browser-view.setup .browser-phone, .browser-view.setup .browser-empty-agent { display: none; }
@media (max-width: 760px) { .setup-dialog.running .setup-form { overflow: auto; } .setup-run { flex-direction: column; flex: none; } .setup-run .browser-view { height: 60dvh; flex: none; } .setup-side { width: auto; } }
.tt-uri { overflow-wrap: anywhere; font-size: 12.5px; }
/* Updates: the release notes, folded */
.update-progress { display: block; width: min(320px, 100%); height: 8px; margin: 6px 0 2px; accent-color: var(--accent); }
.update-detail { font-variant-numeric: tabular-nums; }
.update-status.update-error { color: var(--bad); }
.update-notes summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.update-notes ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.social-card details.rules:not([open]) { gap: 0; }

/* Remote pairing controls remain usable on touch screens and during status polling. */
.relay-settings button, .relay-settings summary, .relay-settings a { min-height: 44px; min-width: 44px; }

.pairing-qr { display: block; width: 256px; max-width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; background: #fff; align-self: flex-start; }
.relay-code { min-width: 0; }
.relay-code .mono { overflow-wrap: anywhere; user-select: text; }
.relay-code h3 { margin: 0; font-size: 16px; }

/* Settings → Connections: readable helper text, one width for every card, a divider before Devices, long device names stay on one line. */
.relay-settings .settings-name small, .relay-settings .settings-note, .relay-settings .relay-code small, .relay-settings .settings-advanced summary { font-size: 14px; }
.relay-settings .ghost.small { font-size: 14px; }
.relay-settings .settings-row, .relay-settings .settings-advanced { width: 100%; box-sizing: border-box; }
.relay-settings .devices-panel { flex-basis: 100%; width: 100%; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.relay-settings .replace-keys, .relay-settings .devices-panel > .ghost.small { align-self: flex-start; }
.device-row .settings-name { min-width: 0; }
.device-row .device-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.device-approval .device-facts dd { min-width: 0; }