/* cyvoq web app -- black and white, like the watch and the phone app's Watch screen.
   A filled (white) pill is the main action or "on"; an outlined one is the other choice or "off".
   Phones: app-like, sticky header, bottom tab bar. Wide screens: a sidebar. */
:root {
  --bg: #000; --fg: #fff; --muted: rgba(255,255,255,.62); --faint: rgba(255,255,255,.28); --line: rgba(255,255,255,.9);
  --hair: rgba(255,255,255,.18); --r: 22px; --pill: 999px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

/* ---- layout */
main#app { min-height: 100dvh; }
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-t)) 20px 12px; background: rgba(0,0,0,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair); }
h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.content { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(var(--nav-h) + 28px + var(--safe-b)); }
h2 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
  margin: 26px 6px 10px; }
.lead { color: var(--muted); font-size: 14px; margin: 14px 6px 0; }
.muted { color: var(--muted); font-size: 13px; }
.err { color: var(--fg); min-height: 1.2em; font-weight: 600; }

/* ---- cards and lists */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 10px 0; }
.card > b:first-child { display: block; font-size: 16px; margin-bottom: 2px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid .card { margin: 0; } .grid b { font-size: 15px; }
.list { margin: 4px 0; }
.list > .row { padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: flex-start; }
.list > .row:last-child { border-bottom: 0; }
.list > .row > span { flex: 1; font-size: 15px; }
.list .item { border: 1px solid var(--line); border-radius: 18px; padding: 13px 16px; margin: 8px 0; cursor: pointer;
  transition: background .12s; }
.list .item:active { background: rgba(255,255,255,.08); }
.item .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.item .top b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .sum { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* status pills: outlined, "live" states filled */
.pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px;
  border-radius: var(--pill); border: 1px solid var(--line); color: var(--fg); white-space: nowrap; }
.pill.active, .pill.ringing, .pill.dialing { background: var(--fg); color: var(--bg); }
.pill.missed, .pill.failed, .pill.skipped, .pill.declined { border-color: var(--faint); color: var(--muted); }

/* ---- conversation bubbles (caller white, AI outlined -- like the watch) */
.turns { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow: auto; padding: 4px 0; }
.turns.card { max-height: none; }
.turn { max-width: 86%; padding: 9px 13px; border-radius: 18px; font-size: 15px; }
.turn.caller { align-self: flex-start; background: var(--fg); color: var(--bg); border-bottom-left-radius: 6px; }
.turn.agent { align-self: flex-end; border: 1px solid var(--line); border-bottom-right-radius: 6px; }
.turn.owner { align-self: flex-end; border: 1px dashed var(--fg); border-bottom-right-radius: 6px; }
.turn small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }

/* ---- forms */
input, textarea, select, button { font: inherit; color: inherit; }
label { display: block; font-size: 13px; color: var(--muted); margin-top: 12px; }
input, textarea, select { width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--faint); border-radius: 14px;
  padding: 12px 14px; margin: 6px 0 2px; outline: none; transition: border-color .12s; font-size: 16px; }
input:focus, textarea:focus, select:focus { border-color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { resize: vertical; }

/* buttons: filled pill = main action; .link = text; .danger = outlined */
button { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); border-radius: var(--pill); padding: 11px 20px;
  font-weight: 700; cursor: pointer; transition: transform .08s, opacity .12s; }
button:active { transform: scale(.97); }
button:disabled { opacity: .4; }
button.wide { width: 100%; padding: 14px; margin-top: 14px; font-size: 16px; }
button.link { background: none; color: var(--fg); border-color: transparent; padding: 8px 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
button.danger, button.outline { background: var(--bg); color: var(--fg); border-color: var(--line); }
form button[type=submit]:not(.wide) { margin-top: 14px; }
.btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .btns button { flex: 1; } .btns input { flex: 3; margin: 0; }

/* segmented presence control: Available / Busy / Busy 1 h / Busy 2 h */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.seg button { background: var(--bg); color: var(--fg); border-color: var(--line); padding: 11px 4px; font-size: 14px; }
.seg button.on { background: var(--fg); color: var(--bg); }

/* chips (whispers, schedule presets) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
button.chip { background: var(--bg); color: var(--fg); border-color: var(--line); padding: 7px 13px; font-size: 13px; font-weight: 600; }
button.chip.on { background: var(--fg); color: var(--bg); }

/* switches */
.switch { position: relative; width: 52px; height: 30px; flex: none; display: inline-block; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; margin: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border: 1.5px solid var(--line); border-radius: var(--pill); transition: .15s; }
.switch span:before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 2.5px; background: var(--fg); border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--fg); }
.switch input:checked + span:before { transform: translateX(21px); background: var(--bg); }
label.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--fg); font-size: 15px;
  padding: 12px 0; margin: 0; border-top: 1px solid var(--hair); }
label.toggle small { display: block; color: var(--muted); font-size: 12px; }

/* schedule rules */
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.rule .days { display: flex; gap: 2px; width: 100%; } .day { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.rule input[type=time] { width: auto; }
.rule input[type=checkbox] { width: auto; accent-color: #fff; }

/* the receptionist's question: pinned, inverted */
.ask { position: sticky; top: calc(64px + var(--safe-t)); z-index: 5; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ask .muted { color: rgba(0,0,0,.6); } .ask b { display: block; margin: 6px 0 12px; font-size: 18px; }
.ask button { flex: 1; padding: 14px; background: var(--bg); color: var(--fg); border-color: var(--bg); }
.ask button.danger { background: var(--fg); color: var(--bg); border-color: var(--bg); }

/* live connection dot */
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--fg); }
.dot.on { background: var(--fg); box-shadow: 0 0 0 4px rgba(255,255,255,.15); }

/* ---- navigation: bottom tab bar on phones */
nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: rgba(0,0,0,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--hair); padding: 6px 6px calc(6px + var(--safe-b)); }
nav .brand { display: none; }
nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; color: var(--muted);
  border: 0; border-radius: 16px; padding: 7px 0 5px; font-size: 11px; font-weight: 600; }
nav button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav button.on { color: var(--fg); }
nav button.on svg { stroke-width: 2.2; }

/* ---- login */
#login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 380px; margin: 0 auto;
  padding: 24px; text-align: center; }
.wordmark { font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
#login form { margin-top: 28px; }

/* ---- wide screens: sidebar */
@media (min-width: 900px) {
  :root { --nav-h: 0px; }
  main#app { padding-left: 232px; }
  nav { top: 0; right: auto; width: 232px; flex-direction: column; gap: 4px; padding: 24px 14px; border-top: 0; border-right: 1px solid var(--hair); }
  nav .brand { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; padding: 0 12px 22px; }
  nav button { flex: none; flex-direction: row; gap: 12px; padding: 12px 14px; font-size: 15px; justify-content: flex-start; }
  nav button.on { background: var(--fg); color: var(--bg); }
  header { padding: 22px 32px 16px; }
  .content { padding: 8px 32px 48px; max-width: 760px; margin: 0; }
  .ask { top: 72px; }
}
@media (hover: hover) { .list .item:hover { background: rgba(255,255,255,.06); } nav button:not(.on):hover { color: var(--fg); } }
.list > .row > span.muted, .list > .row > .muted { flex: none; font-size: 12px; }
#aicall > .row { display: block; } #aicall > .row .muted { display: block; margin-top: 8px; text-align: center; }
.seg.two { grid-template-columns: repeat(2, 1fr); }
.stepper { gap: 10px; align-items: center; } .stepper button { padding: 6px 14px; min-width: 44px; } .stepper b { min-width: 40px; text-align: center; }
.devpick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.devpick button { border-radius: var(--r); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; background: var(--bg); color: var(--fg); border-color: var(--line); }
.devpick button.on { background: var(--fg); color: var(--bg); }
.devpick svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2; }
.devpick span { font-weight: 700; } .devpick small { color: inherit; opacity: .7; font-size: 12px; }
.devcard { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.devcard svg { width: 56px; height: 56px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.devcard .grow { flex: 1; } .devcard b { font-size: 18px; } .devcard .chev { font-size: 26px; }
#ag-url, #ag-key { word-break: break-all; user-select: all; }

/* ---- toast: saves and errors, above the tab bar */
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 18px + var(--safe-b)); z-index: 30;
  background: var(--fg); color: var(--bg); font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: var(--pill);
  max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.6); animation: pop .16s ease-out; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- home: stat tiles, folded AI-call form, "see all" */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { border: 1px solid var(--line); border-radius: 18px; padding: 12px 10px; text-align: center; }
.stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
.stat span { font-size: 11px; color: var(--muted); }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr 1fr; } }
.center { text-align: center; } #r-more { margin: 10px 6px 0; }
.h2row { margin: 26px 0 0; } .h2row h2 { margin: 0 6px; } .h2row .link { font-size: 13px; padding: 4px 6px; }
details.fold > summary, details.plugin > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; }
details > summary::-webkit-details-marker { display: none; }
details.fold > summary b { flex: 1; font-size: 16px; }
details .chev { font-size: 24px; transition: transform .15s; line-height: 1; }
details[open] > summary .chev { transform: rotate(90deg); }
details.fold[open] > summary { margin-bottom: 10px; }

/* ---- calls: search, filters, a heading per day */
#calls-q { margin-top: 14px; }
.day-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 6px 4px; }

/* ---- plugins: one card per outside service, tap to open */
.plico { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 14px; display: grid; place-items: center; }
.plico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
details.plugin > summary .grow { flex: 1; min-width: 0; }
details.plugin > summary .grow b { display: block; font-size: 16px; }
details.plugin > summary .grow .muted { display: block; }
details.plugin[open] .plico { background: var(--fg); color: var(--bg); }
.plbody { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.plbody > .row:first-of-type select { width: auto; }
#wa-opts { margin-top: 12px; }
#wa-adv summary { cursor: pointer; padding: 6px 0; }

/* ---- settings: unsaved-changes bar, stuck above the tab bar */
.savebar { position: sticky; bottom: calc(var(--nav-h) + 10px + var(--safe-b)); z-index: 8; display: flex; align-items: center; gap: 8px;
  background: var(--fg); color: var(--bg); border-radius: var(--pill); padding: 6px 6px 6px 18px; margin: 14px 0; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.savebar span { flex: 1; font-size: 14px; }
.savebar button { background: var(--bg); color: var(--fg); border-color: var(--bg); padding: 9px 18px; margin: 0 !important; }
.savebar button.outline { background: var(--fg); color: var(--bg); border-color: var(--bg); }
@media (min-width: 900px) { .savebar { bottom: 16px; } #toast { bottom: 24px; } }

/* (the hub's Content-Security-Policy blocks style="" attributes, so every style lives here) */
.mt12 { margin-top: 12px; } label.mt0 { margin-top: 0; } .muted.sub { margin: 4px 0 10px; }
.row.links { justify-content: flex-start; flex-wrap: wrap; gap: 4px; }
#c-audio { width: 100%; margin-top: 8px; }
#wa-qr { width: 260px; height: 260px; max-width: 100%; background: #fff; padding: 10px; border-radius: 12px; display: block; margin: 8px 0; }
#wa-adv { margin-top: 8px; }

/* ---- knowledge base */
.kb-add { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.kb-add button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 18px; font-size: 14px; }
.kb-add svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#kb-fileform input[type=file] { padding: 10px; }
#kb-who { margin: 8px 0 0; }
.hit { border-top: 1px solid var(--hair); padding: 10px 0; font-size: 14px; white-space: pre-wrap; }
.hit b { display: block; font-size: 13px; margin-bottom: 4px; }
#kb-hits .muted { margin-top: 10px; }
.kb-link { margin-top: 14px; } .kb-link button { padding: 8px 18px; }
#kb-body { font-size: 15px; line-height: 1.5; }
#kb-chars { text-align: right; }

/* ---- assistants */
.mono { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center;
  font-weight: 800; font-size: 17px; }
.asitem { display: flex; align-items: center; gap: 14px; }
.asitem .grow { flex: 1; min-width: 0; } .asitem .grow b { display: block; font-size: 16px; } .asitem .grow .muted { display: block; }
.asitem .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.asitem.on { background: var(--fg); color: var(--bg); } .asitem.on .muted { color: rgba(0,0,0,.6); } .asitem.on .mono { border-color: var(--bg); }
.asitem .chev { font-size: 24px; }
button.answering { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-weight: 400; }
button.answering .grow { flex: 1; } button.answering .grow .muted { display: block; font-size: 12px; } button.answering b { font-size: 17px; }
button.answering .chev { font-size: 24px; }
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--bg); border: 1px solid var(--line); border-radius: 26px 26px 0 0; width: 100%; max-width: 560px;
  padding: 20px 18px calc(18px + var(--safe-b)); max-height: 85vh; overflow: auto; animation: up .18s ease-out; }
.sheet > b { font-size: 18px; display: block; margin-bottom: 4px; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
@media (min-width: 900px) { .sheet-bg { align-items: center; } .sheet { border-radius: 26px; } }
.block { display: block; }
.rule select { width: auto; flex: 1; min-width: 140px; margin: 0; }
#as-del { flex: none; }

/* ---- talk (Dude in the browser) */
.hdr-r { gap: 14px; }
button.talkbtn { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
button.talkbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sheet.talk { text-align: center; }
.sheet.talk .chips { justify-content: center; }
.orb { width: 120px; height: 120px; margin: 22px auto 10px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.orb span { width: 56px; height: 56px; border-radius: 50%; background: var(--fg); opacity: .25; transition: transform .3s, opacity .3s; }
.orb.listening span { opacity: .9; animation: breathe 1.6s ease-in-out infinite; }
.orb.thinking span { opacity: .6; animation: spin 1s linear infinite; border-radius: 30%; }
.orb.speaking span { opacity: 1; animation: talk .35s ease-in-out infinite alternate; }
.orb.initializing span, .orb.paused span { opacity: .35; }
@keyframes breathe { 50% { transform: scale(1.18); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes talk { from { transform: scale(.85); } to { transform: scale(1.35); } }
.talk-state { font-weight: 700; min-height: 1.4em; }
#talk-turns { text-align: left; max-height: 34vh; margin: 12px 0; }
@media (prefers-reduced-motion: reduce) { .orb span { animation: none !important; } }

/* ---- voice engine / keys */
#eng-seg, #lk-mode { margin: 4px 0 10px; }
#keys-list label { margin-top: 12px; }
#keys-list .link { padding: 4px 0; font-size: 13px; }
#pl-engine code, #lk-mode-hosted code { font-size: 12px; }

/* ---- plan & usage (2026-10-29, billing): bars are SVG rects (the CSP blocks style attributes) */
button.usage-chip { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--bg);
  color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-weight: 400; }
button.usage-chip .grow { flex: 1; } button.usage-chip .grow .muted { display: block; font-size: 12px; }
button.usage-chip b { display: block; font-size: 17px; } button.usage-chip .chev { font-size: 24px; }
.meter { display: block; width: 100%; height: 6px; margin-top: 8px; }
.meter.lg { height: 10px; margin: 10px 0 6px; }
.meter .track { fill: var(--hair); }
.meter .fill { fill: var(--fg); }
.banner { border-width: 2px; }
.banner b { display: block; }
.big { font-size: 32px; font-weight: 800; margin-top: 10px; }
.small { font-size: 11px; }
.days { display: block; width: 100%; height: 90px; }
.days rect { fill: var(--fg); }
.days rect.zero { fill: var(--hair); }
#u-days-axis { justify-content: space-between; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
input.narrow { width: 110px; flex: none; }
.cost-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.cost-row .muted { grid-column: 1 / -1; }
.est { font-size: 10px; font-weight: 700; letter-spacing: .04em; border: 1px dashed var(--faint); color: var(--muted);
  border-radius: var(--pill); padding: 1px 7px; margin-left: 6px; text-transform: uppercase; }
.list .item.flat { cursor: default; }
.stat.on { background: var(--fg); color: var(--bg); } .stat.on span { color: var(--bg); }
/* contact page: what the AI remembers, and the calls with them (2026-10-30) */
.memlist, .ctcalls { list-style: none; padding: 0; margin: 10px 0; }
.memlist li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.memlist li:last-child { border-bottom: 0; }
.memlist .mt { flex: 1; word-break: break-word; }
.memlist .src { font-size: 11px; opacity: .6; margin-left: 6px; }
.memlist button { padding: 2px 10px; min-height: 0; }
.memlist .empty { opacity: .7; border: 0; }
.ctcalls li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ctcalls .cs { margin: 4px 0; }
.ctcalls .ctturns { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); }
.ctcalls li:last-child { border-bottom: 0; }
.ctcalls .cm { font-size: 13px; opacity: .7; }
.ctcalls audio { width: 100%; margin-top: 6px; }
.danger-link { color: var(--bad, #e5484d); }
/* contacts list: initials, last call, what it was about (2026-10-30) */
.ctsbar { gap: 8px; align-items: center; }
.ctsbar input { flex: 1; margin: 0; }
.ctsbar button { white-space: nowrap; }
.people .item { display: flex; gap: 12px; align-items: flex-start; }
.people .item .grow { flex: 1; min-width: 0; }
.people .item .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.people .item .top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .item .when { font-size: 12px; opacity: .7; white-space: nowrap; }
.people .item .sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.av.big { width: 56px; height: 56px; font-size: 20px; }
.av.mem { background: var(--fg); color: var(--bg); }
.ct2head { display: flex; gap: 14px; align-items: center; }
.ct2head b { font-size: 20px; }
.tag { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; opacity: .8; }

/* first-time setup (2026-11-07): request access, the Get started card, device and agent sheets, the admin's waitlist */
#signup-form, #signup-done { margin-top: 28px; }
#signup-form textarea { min-height: 64px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#setup-card .meter { margin: 8px 0 4px; }
#setup-card .agent-row { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; }
#setup-card .agent-row button { flex: none; padding: 8px 18px; }
.step { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.step:last-child { border-bottom: 0; }
.step .tick { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.step.done .tick { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.step.done b { color: var(--muted); font-weight: 600; }
.step .grow > span { display: block; color: var(--muted); font-size: 13px; }
.step.opt .tick { border-style: dashed; }
ol.steps, ul.steps { margin: 10px 0; padding-left: 22px; font-size: 15px; line-height: 1.45; }
ol.steps li, ul.steps li { margin: 6px 0; }
.copyrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.copyrow code { flex: 1; min-width: 0; font-size: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; word-break: break-all; user-select: all; }
.copyrow button { flex: none; padding: 8px 14px; }
.pending .btns { margin-top: 10px; justify-content: flex-start; }
.devpick { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
#ak-prompt { word-break: normal; overflow-wrap: anywhere; }

/* the admin dashboard (2026-11-07) */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; background: var(--bg); color: var(--fg); border-color: var(--line); padding: 9px 14px; font-size: 14px; }
.tabs button.on { background: var(--fg); color: var(--bg); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 800; text-align: center; }
.tabs button.on .badge { background: var(--bg); color: var(--fg); }
.hrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.hrow:last-child { border-bottom: 0; }
.hrow .grow > span { display: block; }
.hrow .dotx { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--fg); color: var(--bg); }
.hrow.bad .dotx { background: none; color: var(--fg); border: 2px solid var(--fg); }
.hrow.bad b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hrow button { flex: none; padding: 7px 16px; }
.keyrow { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.keyrow:first-child { padding-top: 0; } .keyrow:last-child { border-bottom: 0; padding-bottom: 0; }
.keyrow form { margin-top: 8px; flex-wrap: nowrap; }
.keyrow form input { flex: 1; min-width: 0; margin: 0; }
.keyrow form button { flex: none; padding: 9px 14px; }
.acct-acts { flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 10px 0 4px; }
.acct-acts button { padding: 8px 14px; font-size: 14px; }
#firstrun-form { margin-top: 28px; }
.card > label.toggle:first-child { border-top: 0; padding-top: 0; }
.seg.mini { display: inline-grid; grid-template-columns: auto auto; gap: 4px; margin: 0; }
.seg.mini button { padding: 6px 10px; font-size: 12px; }
#pf-mode button { font-size: 13px; }
#pf-models > .muted:first-child { margin-bottom: 6px; }

/* ---- Home and Settings UX pass (2026-11-07) */
/* Home: one "Right now" card */
.now .now-big { display: block; font-size: 22px; line-height: 1.25; margin: 4px 0 2px; letter-spacing: -.01em; }
.now #ai-sub { margin-bottom: 4px; }
.now .seg { margin: 14px 0 8px; }
.now-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.now-foot button.answering { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 18px; gap: 10px; }
.now-foot button.answering .mono { width: 32px; height: 32px; font-size: 13px; }
.now-foot button.answering .grow .muted { display: inline; font-size: 13px; }
.now-foot button.answering b { font-size: 15px; }
.mini-toggle { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
/* Get started: chevrons at the right edge, optional extras folded */
.step .grow { flex: 1; min-width: 0; }
.setup-more { border-top: 1px solid var(--hair); }
.setup-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer; color: var(--muted); font-size: 14px; }
.setup-more > summary::-webkit-details-marker { display: none; }
.setup-more[open] > summary .chev { transform: rotate(90deg); }
.card.empty b { font-size: 17px; }
/* phone nav: labels never run into each other */
nav button { min-width: 0; }
nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; padding: 0 1px; }
@media (min-width: 900px) { nav button span { font-size: inherit; padding: 0; } }
/* desktop Home: two columns */
@media (min-width: 1100px) {
  .content.wide { max-width: 1180px; }
  .homegrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 0 22px; align-items: start; }
  .homecol.side > :first-child, .homecol > :first-child { margin-top: 10px; }
}
/* Settings: section index (sticky chips on phones, a column on wide screens) */
.setnav { position: sticky; top: var(--hdr, 64px); z-index: 9; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 10px 16px; background: rgba(0,0,0,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.setnav::-webkit-scrollbar { display: none; }
.setnav button { flex: none; background: var(--bg); color: var(--fg); border-color: var(--line); padding: 7px 13px; font-size: 13px; font-weight: 600; }
.setnav button.on { background: var(--fg); color: var(--bg); }
#me-form label small { color: var(--faint); font-size: 12px; margin-left: 4px; }
#me-form label:first-child { margin-top: 10px; }
#dev-none b { display: block; font-size: 16px; }
@media (min-width: 900px) {
  .setlayout { display: grid; grid-template-columns: 170px minmax(0, 760px); gap: 28px; align-items: start; }
  .setnav { flex-direction: column; top: 16px; margin: 18px 0 0; padding: 0; background: none; backdrop-filter: none; border: 0; }
  .setnav button { text-align: left; border-color: transparent; padding: 9px 12px; font-size: 14px; }
  .setnav button:not(.on):hover { background: rgba(255,255,255,.06); }
}

/* chat mode (2026-11-07): the live call as a full-screen chat */
.turn.note { align-self: flex-end; border: 1px dotted var(--faint); color: var(--muted); font-style: italic; border-bottom-right-radius: 6px; }
.chatv { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; max-width: 720px; margin: 0 auto;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
@media (min-width: 721px) { .chatv { border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.88); } }
.chat-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.chat-top button.chat-back { font-size: 28px; line-height: 1; padding: 2px 10px; text-decoration: none; }
.chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-who .muted { font-size: 12px; }
.chat-top .outline { padding: 8px 14px; font-size: 13px; }
.chat-modes { display: flex; gap: 6px; padding: 10px 12px 4px; }
.chat-modes button { flex: 1; padding: 8px 6px; font-size: 13px; background: var(--bg); color: var(--fg); border-color: var(--faint); }
.chat-modes button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chat-hint { color: var(--muted); font-size: 12px; padding: 4px 16px 6px; min-height: 1.2em; }
.chat-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.cb { max-width: 80%; padding: 8px 12px 6px; border-radius: 18px; font-size: 15px; line-height: 1.35; word-wrap: break-word; }
.cb small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.cb .meta { display: block; text-align: right; font-size: 11px; opacity: .7; margin-top: 2px; }
.cb.in { align-self: flex-start; background: var(--fg); color: var(--bg); border-bottom-left-radius: 6px; }
.cb.ai { align-self: flex-end; border: 1px solid var(--line); border-bottom-right-radius: 6px; }
.cb.me { align-self: flex-end; border: 2px solid var(--fg); border-bottom-right-radius: 6px; }
.cb.note { align-self: flex-end; border: 1px dashed var(--faint); color: var(--muted); font-style: italic; border-bottom-right-radius: 6px; }
.cb.sys { align-self: center; color: var(--muted); font-size: 12px; padding: 4px 10px; }
.chat-chips { padding: 0 12px; flex-wrap: nowrap; overflow-x: auto; }
.chat-chips button.outline { white-space: nowrap; font-size: 13px; padding: 7px 13px; }
.chat-compose { display: flex; gap: 8px; align-items: center; padding: 8px 12px 12px; border-top: 1px solid var(--hair); }
.chat-compose input { flex: 1; margin: 0; border-radius: var(--pill); }
.chat-compose button { padding: 10px 16px; }
.chat-now { padding: 10px 12px; font-size: 13px; }
.chat-now[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
body.noscroll { overflow: hidden; }