/* Proxlab AI — Scandinavian: black, white, grey; a small light-blue accent. One button language. */
:root {
  --bg: #ffffff; --bg2: #f6f6f6; --bg3: #ececec; --fg: #111111; --fg2: #6f6f6f; --fg3: #767676; --line: #e4e4e4;
  --accent: #5aa9e6; --accent-soft: #e6f2fb; --glow: rgba(0, 0, 0, .10); --err: #c0392b; --warn: #c07a1e; --ok: #2e7d32;
  --r: 8px; --btn: 40px; --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  color-scheme: light dark;
}
/* Dark follows the system unless the user picked a theme in Settings (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000000; --bg2: #121212; --bg3: #1e1e1e; --fg: #f2f2f2; --fg2: #9a9a9a; --fg3: #8c8c8c; --line: #262626; --accent-soft: #0f2233; --glow: rgba(255, 255, 255, .22); --err: #e57368; --warn: #e0a24a; --ok: #6cbf75; }
}
:root[data-theme="dark"] { --bg: #000000; --bg2: #121212; --bg3: #1e1e1e; --fg: #f2f2f2; --fg2: #9a9a9a; --fg3: #8c8c8c; --line: #262626; --accent-soft: #0f2233; --glow: rgba(255, 255, 255, .22); --err: #e57368; --warn: #e0a24a; --ok: #6cbf75; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: hidden; max-width: 100vw; touch-action: manipulation; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.app { height: 100%; display: flex; flex-direction: column; }
.split { height: 100%; display: flex; min-height: 0; }
.sidebar { display: none; width: 340px; flex: none; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
@media (min-width: 820px) {
  .sidebar { display: flex; }
  .btn.icon.back-btn { display: none; }
}
.chat-item.active { background: var(--bg2); }
.empty.tall { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.empty.tall .logo { width: 32px; height: 32px; opacity: .35; }
.spin { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; animation: rotate .8s linear infinite; margin-right: 8px; }
@keyframes rotate { to { transform: rotate(360deg); } }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }

/* Buttons: one height, one radius, three variants. */
.btn { height: var(--btn); padding: 0 16px; border-radius: var(--r); border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 500; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.btn.secondary { background: var(--bg); color: var(--fg); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--fg2); }
.btn.icon { width: var(--btn); padding: 0; background: transparent; border-color: transparent; color: var(--fg); }
.btn.icon:hover { background: var(--bg2); }
.btn:disabled { opacity: .35; cursor: default; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--glow); }
.btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* 16px minimum: iOS Safari zooms the page into any smaller input on focus. */
input, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; height: var(--btn); width: 100%; outline: none; font-size: 16px; }
textarea { padding: 8px 12px; height: auto; line-height: 1.4; }
input:focus, textarea:focus { border-color: var(--fg2); box-shadow: 0 0 0 4px var(--glow); }
input::placeholder, textarea::placeholder { color: var(--fg3); }
a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.muted { color: var(--fg2); } .small { font-size: 13px; } .err { color: var(--err); } .ok { color: var(--ok); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 10px; } .grow { flex: 1; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.card > .h { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); margin-bottom: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
code { font: 13px ui-monospace, Menlo, monospace; background: var(--bg2); padding: 1px 6px; border-radius: 5px; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--sat)) 10px 8px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 2; min-height: calc(56px + var(--sat)); }
.topbar h1 { font-size: 17px; margin: 0 4px; flex: 1; font-weight: 600; letter-spacing: -.01em; }
.logo { width: 22px; height: 22px; fill: var(--fg); }

/* Lists */
.list { display: flex; flex-direction: column; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.ptr { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--fg3); transition: height .2s; flex: none; }
.ptr.armed { color: var(--fg2); }
.ptr .dots { display: inline-flex; margin-left: 6px; }
.item { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.item:hover { background: var(--bg2); }
.item .t { font-weight: 500; }
.chat-item { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; }
.col0 { display: flex; flex-direction: column; min-width: 0; }
.row0 { display: flex; align-items: baseline; gap: 8px; }
.row0 .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { font-size: 12px; color: var(--fg3); white-space: nowrap; }
.preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg3); color: var(--fg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex: none; letter-spacing: .02em; }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.topbar .sub { font-size: 12px; color: var(--fg3); line-height: 1; margin: 2px 4px 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .col0 h1 { margin: 0 4px; line-height: 1.2; }
.empty { padding: 48px 18px; text-align: center; color: var(--fg2); }

/* Sign-in */
.center { max-width: 400px; width: 100%; margin: 0 auto; padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.hero { margin-top: 14vh; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero .logo { width: 40px; height: 40px; }
.brand { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.links { display: flex; gap: 16px; font-size: 13px; }

/* Chat */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; }
.msg { max-width: 86%; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--bg2); padding: 10px 14px; border-radius: 14px 14px 4px 14px; }
.msg.assistant { align-self: flex-start; padding: 2px 0; }
.msg.folded { opacity: .5; }
.msg .meta { font-size: 12px; color: var(--fg3); margin-top: 6px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.msg .meta .pinmark:empty { display: none; }
.msg .meta .pinmark svg { width: 12px; height: 12px; stroke: var(--accent); fill: none; stroke-width: 2; }
.msg .meta .info { background: none; border: 0; padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg3); cursor: pointer; }
.msg .meta .info svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; }
.msg .meta .info.on, .msg .meta .info:hover { color: var(--fg); }
.msg .extra { font-size: 12px; color: var(--fg3); margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
[hidden] { display: none !important; }
.thinking { align-self: flex-start; max-width: 100%; min-width: 0; font-size: 13px; color: var(--fg2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); margin-right: 3px; animation: pulse 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .2s } .dots span:nth-child(3) { animation-delay: .4s }
@keyframes pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.85) } 40% { opacity: 1; transform: scale(1) } }
details > summary { cursor: pointer; list-style: none; color: var(--fg2); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
details > summary .chev { width: 14px; height: 14px; stroke: var(--fg); fill: none; stroke-width: 2; transition: transform .15s; }
details[open] > summary .chev { transform: rotate(180deg); }
details > summary::-webkit-details-marker { display: none; }
details { max-width: 100%; min-width: 0; }
details pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font: 12px/1.45 ui-monospace, Menlo, monospace; max-height: 30vh; overflow: auto; margin: 8px 0 0; color: var(--fg2); border-left: 2px solid var(--line); padding-left: 10px; }
.summary { font-size: 13px; color: var(--fg2); border: 1px dashed var(--line); border-radius: var(--r); padding: 8px 12px; }
.composer { display: flex; gap: 8px; padding: 12px 14px max(8px, calc(var(--sab) - 12px)); border-top: 1px solid var(--line); background: var(--bg); align-items: flex-end; }
.composer > div { max-width: 760px; width: 100%; margin: 0 auto; }
.composer .line { display: flex; gap: 8px; align-items: flex-end; }
.strip { display: flex; gap: 8px; padding: 0 0 10px 48px; flex-wrap: wrap; }
.thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.thumb .x svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.attwrap { display: flex; flex-direction: column; gap: 6px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.filechip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: inherit; text-decoration: none; max-width: 100%; }
.filechip svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
.filechip .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.filechip.pend { position: relative; padding-right: 30px; }
.filechip.pend .x { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.filechip.pend .x svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.src.file { display: inline-flex; align-items: center; gap: 4px; }
.src.file svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.files .frow svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; color: var(--fg2); }
.files .frow .t { text-decoration: none; color: inherit; }
.files .frow .bad { color: #c0392b; }
.atts { display: grid; gap: 4px; margin-bottom: 6px; max-width: 320px; }
.atts.n1 { grid-template-columns: 1fr; }
.atts.n2, .atts.n3, .atts.n4 { grid-template-columns: 1fr 1fr; }
.atts img.att { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--line); cursor: zoom-in; }
.atts.n1 img.att { aspect-ratio: auto; max-height: 320px; object-fit: contain; background: var(--bg2); }
.atts.n3 img.att:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }
.msg.user .atts img.att { border-color: transparent; }
/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab)); }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-out; }
.lb-close { position: absolute; top: calc(10px + var(--sat)); right: 10px; color: #fff; }
.lb-close:hover { background: rgba(255, 255, 255, .12); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.lb-nav.prev { left: 10px; } .lb-nav.next { right: 10px; } .lb-nav.next svg { transform: rotate(180deg); }
.lb-counter { position: absolute; bottom: calc(14px + var(--sab)); left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 13px; }
@media (max-width: 819px) { .lb-nav { display: none; } }
.composer textarea { resize: none; max-height: 40vh; min-height: var(--btn); }
.pill { font-size: 12px; color: var(--fg3); display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg3); }
.pill.live::before { background: var(--accent); }
.pill.slow::before { background: #d59b2a; }
.pill.off::before { background: var(--err); }
.offtag { font-size: 11px; color: var(--fg3); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; line-height: 16px; margin-left: 6px; }
.modelnote { font-size: 12px; color: var(--fg2); background: var(--bg2); border-radius: 10px; padding: 6px 10px; margin: 0 0 6px; }
.daysep.event.held { color: var(--fg2); }
.msg.assistant.err.held { color: var(--fg2); border-color: var(--line); }
.ledger { gap: 12px; min-width: 0; }
.ledger .lgroup { gap: 4px; }
.ledger .lhead { font-size: 12px; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; }
.ledger .litem { gap: 6px; align-items: center; border-bottom: 1px solid var(--line); padding: 4px 0; }
.ledger .ltext { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--fg); font: inherit; font-size: 14px; padding: 6px 0; cursor: pointer; overflow-wrap: anywhere; }
.ledger select.kind { flex: none; max-width: 42%; height: 32px; font-size: 13px; }
.ledger .ladd { gap: 6px; flex-wrap: wrap; } .ledger .ladd input { flex: 1; min-width: 160px; }
.status { min-height: 18px; }

/* Assistant profile */
img.avatar { object-fit: cover; }
.avatar.big { width: 84px; height: 84px; font-size: 26px; }
.center.wide { max-width: 640px; }
.lbl { font-size: 13px; color: var(--fg2); margin-top: 4px; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; user-select: none; }
.toggle input { appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--fg2); border-radius: 4px; margin: 0; display: inline-grid; place-content: center; }
.toggle input::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--fg); transform: scale(0); transition: transform .1s; }
.toggle input:checked::before { transform: scale(1); }
.toggle:has(input:checked) { border-color: var(--fg2); }
.topbar .who { cursor: pointer; flex: 1; min-width: 0; gap: 10px; align-items: center; }

/* Sliders */
.sliders { display: flex; flex-direction: column; gap: 14px; }
.slider .row0 { justify-content: space-between; align-items: flex-start; gap: 12px; }
.slider .row0 .t { flex: none; overflow: visible; white-space: nowrap; }
.slider .lvl { flex: 1; min-width: 0; text-align: right; }
.slider .ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; border: 0; padding: 0; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 1px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line); border-radius: 1px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); border: 2px solid var(--bg); margin-top: -9px; box-shadow: 0 0 0 1px var(--line); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--fg); border: 2px solid var(--bg); }
input[type="range"]:focus { outline: none; box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--glow); }

/* Chat list status */
.chat-item .dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-item.unread .dot { display: inline-block; }
.chat-item.unread .t, .chat-item.unread .preview { color: var(--fg); font-weight: 600; }
.chat-item.unread .preview { font-weight: 500; }
.writing { display: inline-flex; align-items: center; gap: 6px; color: var(--fg2); }
.writing .dots span { width: 4px; height: 4px; }
.writing.tasking { color: var(--accent); } .writing.tasking.idle { color: var(--fg2); } .writing.tasking .spin { width: 10px; height: 10px; }

/* Reactions */
.msg.assistant { cursor: default; }
.rbar { display: flex; gap: 4px; margin-top: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); width: max-content; }
.rbar .r { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rbar .r:hover, .rbar .r.on { background: var(--bg3); }
.reaction { margin-top: 6px; height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; }

/* Settings tabs, segmented control, prompt view */
.tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--fg2); font-size: 14px; white-space: nowrap; cursor: pointer; }
.tab.on { color: var(--fg); border-color: var(--line); background: var(--bg2); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg-item { height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--fg2); cursor: pointer; font-size: 14px; }
.seg-item.on { background: var(--fg); color: var(--bg); }
.seg-item:disabled { opacity: .5; cursor: default; }
textarea.mono, pre.prompt { font: 12.5px/1.5 ui-monospace, Menlo, monospace; }
pre.prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; margin: 8px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); color: var(--fg); }

/* The person's reaction on your message */
.msg.user { position: relative; }
.msg.user .their { position: absolute; left: -10px; bottom: -10px; font-size: 14px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }

/* Desktop chat: full width of the right pane. Must come after the base .messages/.composer rules. */
@media (min-width: 820px) {
  .messages, .composer > div { max-width: none; margin: 0; }
  .messages { padding: 28px 56px 28px; gap: 20px; }
  .composer { padding-left: 56px; padding-right: 56px; }
  .msg { font-size: 16px; line-height: 1.55; }
  .msg.assistant { max-width: 72ch; }
  .msg.user { max-width: 60%; }
  .composer > div { max-width: calc(72ch + 60px); }
}
.msg .meta { opacity: .85; }
.daysep { align-self: center; font-size: 12px; color: var(--fg3); padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; margin: 6px 0; }

/* Delivery ticks */
.tickwrap { display: inline-flex; margin-left: 2px; }
.tickwrap .ticks { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tickwrap.sent, .tickwrap.seen { color: var(--fg3); }
.tickwrap.writing { color: var(--accent); }

/* Tool activity and sources */
.toolline { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 4px; }
.toolline .tlmore { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--fg3); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.tl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg2); }
.tl svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.tl.done { color: var(--fg3); }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.src { font-size: 12px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg2); text-decoration: none; }
.src:hover { color: var(--fg); border-color: var(--fg2); }

/* Watchlist and wake events */
.witem { padding: 8px 0; border-top: 1px solid var(--line); }
.witem:first-child { border-top: 0; }
.daysep.event { border-style: solid; color: var(--fg2); }
select { height: var(--btn); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--fg); padding: 0 10px; font: inherit; }

/* Context usage indicator */
.ctxrow { justify-content: center; margin-top: 3px; line-height: 1; }
@media (min-width: 820px) { .ctxrow { justify-content: flex-end; } }  /* centred on the phone only */
.ctx { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg3); }
.ctx .bar { width: 64px; height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; display: inline-block; }
.ctx .fill { display: block; height: 100%; background: var(--fg3); }
.ctx.hot .fill { background: var(--accent); }

/* Search */
.sbar { padding: 8px 12px; }
.search { height: 36px; font-size: 14px; }
.shead { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); padding: 10px 16px 4px; }
.spad { padding: 8px 16px 12px; }
.msg.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; transition: outline-color 1.2s; }

/* Message / header menus, excluded messages, small buttons */
.brand-btn { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; background: transparent; border: 0; padding: 4px 6px 4px 2px; border-radius: 10px; color: inherit; cursor: pointer; text-align: left; }
.brand-btn:hover { background: var(--bg2); }
.brand-btn h1 { flex: none; }
.brand-btn > svg:last-child { width: 14px; height: 14px; stroke: var(--fg3); fill: none; stroke-width: 2; transition: transform .15s; }
.brand-btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }  /* down closed, up open */
.navmenu { position: fixed; z-index: 20; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; min-width: 260px; max-width: calc(100vw - 16px); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.navmenu .mi.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; height: auto; }
.navmenu .mi.nav.on { background: var(--bg2); }
.navmenu .mi.nav svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
.navmenu .mi.nav svg.logo { fill: currentColor; stroke: none; }
.navmenu .mi.nav .t { font-weight: 500; }
.daysep.event .linkish { background: none; border: 0; color: var(--fg3); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0 4px; }
.why { white-space: pre-wrap; font-size: 12px; max-width: 720px; margin: 0 auto 10px; padding: 8px 12px; border-left: 2px solid var(--line); }
.mmenu { position: fixed; z-index: 20; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; min-width: 200px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.mi { text-align: left; height: 38px; padding: 0 12px; border: 0; background: transparent; color: var(--fg); border-radius: 8px; font-size: 14px; cursor: pointer; }
.mi:hover { background: var(--bg2); }
.mi.danger { color: var(--err); }
.msg.excluded { opacity: .45; }
.msg.excluded::after { content: "hidden from context"; display: block; font-size: 11px; color: var(--fg3); margin-top: 4px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.msg.user { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 13px; pointer-events: none; }

/* Library page */
.libwrap { max-width: 1100px; margin: 0 auto; padding: 12px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.libbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.libfilters { gap: 8px; flex: 1; min-width: 240px; } .libfilters input { flex: 1; min-width: 140px; } .libfilters select { flex: none; }
.libupload { gap: 8px; align-items: center; } .libfilters { align-items: center; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.fcard { display: flex; flex-direction: column; gap: 8px; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 14px; padding: 10px; color: inherit; cursor: pointer; font: inherit; min-width: 0; }
.fcard:hover { border-color: var(--fg2); } .fcard.dim { opacity: .7; }
.fcard .fbody { min-width: 0; gap: 2px; } .fcard .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fthumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fthumb.plain { flex-direction: column; gap: 6px; color: var(--fg3); }
.fthumb.plain svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.fthumb.plain .ext { font-size: 12px; letter-spacing: .08em; }
/* the detail modal: a preview panel the file fills as far as its shape allows */
.fthumb.fbig { flex: 1 1 320px; max-width: 420px; aspect-ratio: auto; height: auto; min-height: 180px; padding: 6px; }
.fthumb.fbig img { width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 6px; }
.fthumb.fbig.zoom { cursor: zoom-in; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; color: var(--fg3); text-align: center; }
.empty svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.lb.sheet { align-items: flex-start; overflow-y: auto; }
.fdetail { width: 100%; max-width: 760px; margin: auto; background: var(--bg); gap: 14px; }
.fdetail .fname.big { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.fdtop { display: flex; gap: 16px; flex-wrap: wrap; }
.kvs { gap: 8px; min-width: 200px; }
.kv { display: flex; gap: 10px; align-items: center; font-size: 14px; } .kv .k { width: 92px; flex: none; color: var(--fg3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .kv select { flex: 1; min-width: 0; }
.ftext { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.fchunk pre { white-space: pre-wrap; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 2px 0 0; padding: 8px 10px; border-left: 2px solid var(--line); }
.btn.danger { color: var(--err); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { .fgrid { grid-template-columns: repeat(2, 1fr); } .fthumb.fbig { flex-basis: 100%; max-width: none; min-height: 140px; } .fthumb.fbig img { max-height: 260px; } }

/* Settings › Tools */
.tools .trow { padding: 8px 0; border-top: 1px solid var(--line); gap: 6px; }
.tools .trow.gone { opacity: .55; }
.tools .trow select { height: 34px; font-size: 13px; }
.tools .trow input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.tools .trow .row input:not([type]) { flex: 1; height: 34px; font-size: 13px; }

/* Tools page */
.h2 { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); margin-top: 8px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pcard { display: flex; flex-direction: column; gap: 6px; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: inherit; cursor: pointer; font: inherit; min-width: 0; }
.pcard:hover { border-color: var(--fg2); }
.pcard .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.note { font-size: 13px; padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--bg2); border-radius: 0 8px 8px 0; }
.scard .row .t { font-weight: 500; }

.steps { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.steps code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; user-select: all; }
details.small summary { cursor: pointer; }
.acct { padding: 6px 0; border-top: 1px solid var(--line); }

/* Approval cards */
.acard { align-self: flex-start; max-width: min(100%, 560px); margin: 4px 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.acard.approved { border-left-color: var(--ok); } .acard.rejected, .acard.expired { border-left-color: var(--fg3); opacity: .8; } .acard.failed { border-left-color: var(--err); }
.acard .t { font-weight: 500; } .acard .kv { align-items: flex-start; } .acard .kv .v { white-space: pre-wrap; overflow-wrap: anywhere; cursor: default; } .acard .kv .k { width: 84px; }
.acard .row { margin-top: 4px; }
.acard .ahead { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }

.kindpill { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fdetail.wide { max-width: 900px; }
.prow { padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; }
.prow input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.scard.dim { opacity: .6; }
.fdetail.bare { padding: 0; border: 0; background: transparent; } .fdetail.bare > .card { background: var(--bg); }

/* Rendered replies */
.msg.assistant .body { white-space: normal; }
.body p { margin: 0 0 .75em; } .body p:last-child { margin-bottom: 0; }
.body p.hd { font-weight: 600; margin: .9em 0 .35em; } .body p.hd:first-child { margin-top: 0; }
.body ul, .body ol { margin: .1em 0 .75em 1.35em; padding: 0; } .body li { margin: .18em 0; } .body li::marker { color: var(--fg3); }
.body strong { font-weight: 600; } .body em { font-style: italic; }
.body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--bg2); padding: 1px 5px; border-radius: 4px; }
.body pre { background: var(--bg2); padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 0; white-space: pre; }
.codewrap { position: relative; margin: 0 0 .75em; }
.codewrap .copybtn { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); color: var(--fg2); cursor: pointer; opacity: 0; transition: opacity .12s; }
.codewrap .copybtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.codewrap:hover .copybtn, .codewrap .copybtn:focus-visible { opacity: 1; }
.codewrap .copybtn:hover { color: var(--fg); border-color: var(--fg3); }
@media (hover: none) { .codewrap .copybtn { opacity: .7; } }
.body pre code { background: transparent; padding: 0; font-size: 12.5px; }
.body a { color: var(--accent); text-decoration: none; } .body a:hover { text-decoration: underline; }
.acard .asum { white-space: pre-line; line-height: 1.45; }
.clip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1; }
.clipbtn { background: none; border: 0; padding: 0; color: var(--fg2); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.acard .aresult .why { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
a.btn { text-decoration: none; }
.tcard { align-self: flex-start; max-width: min(100%, 560px); margin: 4px 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.tcard.done { border-left-color: var(--ok); } .tcard.failed { border-left-color: var(--err); } .tcard.cancelled, .tcard.paused { border-left-color: var(--fg3); }
.tcard .t { font-weight: 500; overflow-wrap: anywhere; } .tcard .ahead { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.tcard .tstatus { color: var(--fg2); } .tcard.running .tstatus, .tcard.queued .tstatus { color: var(--accent); } .tcard.waiting_user .tstatus, .tcard.waiting_approval .tstatus { color: var(--fg); font-weight: 500; }
.tcard .tplan { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .tcard .titem { display: flex; gap: 8px; align-items: baseline; } .tcard .titem.done { color: var(--fg2); } .tcard .tick { width: 12px; flex: none; color: var(--ok); }
.tcard .thead { gap: 8px; align-items: baseline; } .tcard .thead .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tcard .tdetail { display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tcard .tact { display: flex; gap: 6px; align-items: center; min-width: 0; } .tcard .tact .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tcard .titem.now { color: var(--fg); font-weight: 500; } .tcard .tick { display: inline-flex; justify-content: center; align-items: center; }
.spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: tspin .8s linear infinite; flex: none; box-sizing: border-box; }
@keyframes tspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
.tcard .linkish { background: none; border: 0; padding: 0; color: var(--fg2); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; flex: none; }
.twait { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 10px; background: var(--bg2); }
.twaithead { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: var(--fg); font-weight: 500; }
.twait .tq { white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; }
.twait textarea { width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical; font: inherit; font-size: 14px; }
.tapprovals { display: flex; flex-direction: column; gap: 6px; }
.tauto { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; }
.tauto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.tauto .linkish { background: none; border: 0; padding: 0; color: var(--fg2); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.tapprovals .acard { margin: 0; max-width: 100%; align-self: stretch; background: var(--bg2); }
.waitbar { display: flex; justify-content: center; padding: 0 0 6px; }
.compacting { display: flex; gap: 8px; align-items: center; padding: 6px 10px; margin: 0 0 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; color: var(--fg2); }
.compacting.done { border-color: var(--ok); }
/* Admin: a table of users with a detail panel beside it (desktop first) */
.adminwrap { padding: 16px; max-width: 1280px; margin: 0 auto; width: 100%; }
.umain { flex: 1; min-width: 0; gap: 10px; }
.utools { gap: 10px; align-items: center; }
.utools input[type="search"] { flex: 1; max-width: 360px; }
.utable, .itable { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.urow { display: grid; grid-template-columns: minmax(180px, 2.2fr) 0.8fr 1fr 1.4fr 0.9fr 0.8fr; gap: 12px; align-items: center; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.urow:first-child { border-top: 0; }
.urow.head { cursor: default; background: var(--bg2); padding-block: 8px; }
.urow:not(.head):hover { background: var(--bg2); }
.urow.on { background: var(--accent-soft); }
.urow.dim { opacity: .6; }
.ucell { min-width: 0; }
.ucell .ell, .codebox .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ubar { display: flex; align-items: center; gap: 8px; }
.ubar .cap { flex: 1; }
.irow { display: grid; grid-template-columns: minmax(200px, 2.4fr) 0.8fr 1fr 1.2fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.irow:first-child { border-top: 0; }
.irow.head { background: var(--bg2); padding-block: 8px; }
@media (max-width: 900px) {
  .urow { grid-template-columns: 1fr auto; }
  .urow > span:nth-child(3), .urow > span:nth-child(4), .urow > span:nth-child(5) { display: none; }
  .irow { grid-template-columns: 1fr auto; }
  .irow > span:nth-child(3), .irow > span:nth-child(4) { display: none; }
}
.codebox { gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.codebox .code { flex: 1; font-size: 20px; letter-spacing: .06em; }
.mailpreview { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg2); }
.mailpreview pre { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 8px 0 0; }
/* The setup guide */
.wizard { max-width: 560px; width: 100%; gap: 12px; }
.wdots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.wdots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wdots span.done { background: var(--fg3); }
.wdots span.on { background: var(--accent); }
.wchips { flex-wrap: wrap; gap: 6px; }
.chipbtn { border: 1px solid var(--line); background: var(--bg); color: var(--fg2); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.chipbtn:hover { border-color: var(--fg2); color: var(--fg); }
.pcard.tone.on { border-color: var(--accent); background: var(--accent-soft); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 112px; flex: none; }
.spark span { flex: 1; background: var(--fg3); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark span:last-child { background: var(--accent); }
.waitbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.waitbtn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.body .tablewrap { overflow-x: auto; max-width: 100%; margin: 0 0 .75em; -webkit-overflow-scrolling: touch; }
.body table { border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.body th, .body td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 5em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.body th { font-weight: 600; background: var(--bg2); border-bottom-color: var(--fg3); white-space: nowrap; }
.body tbody tr:last-child td { border-bottom: 0; }
.body th.al-r, .body td.al-r { text-align: right; white-space: nowrap; } .body th.al-c, .body td.al-c { text-align: center; }
/* task data dialog */
.fdetail .tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.mdtable { border-collapse: collapse; font-size: 13px; }
.mdtable th, .mdtable td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; white-space: nowrap; }
.mdtable th { color: var(--fg3); font-weight: 500; }

/* Chat side panel: this person's conversations, or this conversation's notes. Beside the chat on
   wide screens, over it (with a shade) otherwise. */
.chatwrap { flex: 1; display: flex; min-height: 0; min-width: 0; }
.chatwrap > .chat { min-width: 0; }
.panel { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg); }
.panel .phead h1 { flex: 1; }
.panel .pbody { flex: 1; overflow-y: auto; padding: 14px 16px calc(16px + var(--sab)); display: flex; flex-direction: column; gap: 12px; }
.panelshade { display: none; }
@media (max-width: 1179px) {
  .panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 25; box-shadow: -8px 0 30px rgba(0, 0, 0, .2); }
  .panelshade { display: block; position: fixed; inset: 0; z-index: 24; background: rgba(0, 0, 0, .3); }
}
.btn.icon.on { background: var(--bg2); }
.btn.icon.badged { position: relative; }
.btn.icon.badged .count { position: absolute; top: 3px; right: 1px; font-size: 10px; line-height: 15px; min-width: 15px; padding: 0 4px; border-radius: 999px; background: var(--fg); color: var(--bg); }
.btn.icon.badged .count:empty { display: none; }
.pactions .btn { width: 100%; }
.convlist { gap: 2px; }
.convitem { display: flex; flex-direction: column; gap: 2px; width: 100%; border-radius: var(--r); padding: 10px; color: var(--fg); cursor: pointer; }
.convitem:hover, .convitem.active { background: var(--bg2); }
.convitem .convtop { gap: 8px; align-items: center; }
.convitem .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.convitem .convprev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convitem .btn.icon.convedit { width: 28px; height: 28px; margin: -6px -6px -6px -2px; opacity: .45; } .convitem .convedit svg { width: 16px; height: 16px; }
.convitem:hover .convedit, .convitem .convedit:focus-visible { opacity: 1; }

/* In-app dialogs (askConfirm / askText / notice): centred card over a shade, above sheets. */
.dlg-shade { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--sat)) 16px calc(16px + var(--sab)); animation: dlgfade .12s ease-out; }
.dlg { width: 100%; max-width: 380px; background: var(--bg); gap: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.dlg-title { font-size: 16px; font-weight: 600; }
.dlg-text { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dlg-input { width: 100%; }
.dlg-actions { justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.btn.danger-fill { background: var(--err); border-color: var(--err); color: #fff; }
@keyframes dlgfade { from { opacity: 0; } to { opacity: 1; } }

/* Settings → Models */
.models .mhead { align-items: center; gap: 8px; }
.models .mhead .h { margin-bottom: 0; }
.models .mrow { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.models .mtop { gap: 8px; align-items: center; flex-wrap: wrap; }
.models .mname { font-weight: 500; overflow-wrap: anywhere; }
.models .mrow .small.muted { overflow-wrap: anywhere; }
.models .mselects { gap: 10px; flex-wrap: wrap; }
.models .mselects .mfield { flex: 1 1 200px; min-width: 0; }
.mfield { gap: 4px; min-width: 0; }
.mfield select, .models select { width: 100%; height: var(--btn); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--fg); padding: 0 10px; font-size: 16px; }
.mcaps { gap: 14px; flex-wrap: wrap; }
.mcap { gap: 6px; align-items: center; }
.mcap input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; }
.mlist { gap: 10px; align-items: center; flex-wrap: wrap; }
.mpick { gap: 6px; flex-wrap: wrap; }
.mpick .chip { border: 1px solid var(--line); background: var(--bg2); color: var(--fg); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.mpick .chip:hover { border-color: var(--fg2); }

/* The context indicator is a button: it opens the breakdown of the last turn's prompt. */
.ctx { border: 0; background: none; padding: 4px 0; cursor: pointer; font-family: inherit; font-size: 11px; }
.ctx svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; opacity: .6; }
.ctxdetail .ctxpart { gap: 3px; padding: 8px 0; border-top: 1px solid var(--line); }
.ctxdetail .ctxtop { gap: 8px; font-size: 14px; }
.ctxdetail .bar { width: 100%; height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; display: block; }
.ctxdetail .bar .fill { display: block; height: 100%; background: var(--fg2); }
.ctxdetail .ctxsum { padding-top: 10px; border-top: 1px solid var(--line); }

/* Who is signed in: a sticky footer under the chat list. */
.userbar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px calc(10px + var(--sab)); border: 0; border-top: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; text-align: left; cursor: pointer; flex: none; }
.userbar:hover { background: var(--bg2); }
.userbar .t { font-size: 14px; font-weight: 500; }
.userbar > svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; opacity: .5; transform: rotate(-90deg); }

/* A dot per day, like a contribution graph. */
.dotwrap { overflow-x: auto; padding-bottom: 4px; }
.daygrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; }
.daysq { width: 12px; height: 12px; border-radius: 3px; background: var(--bg3); flex: none; }
.daysq.pad { background: transparent; }
.daysq.l0 { background: var(--bg3); }
.daysq.l1 { background: color-mix(in srgb, var(--accent) 22%, var(--bg3)); }
.daysq.l2 { background: color-mix(in srgb, var(--accent) 40%, var(--bg3)); }
.daysq.l3 { background: color-mix(in srgb, var(--accent) 58%, var(--bg3)); }
.daysq.l4 { background: color-mix(in srgb, var(--accent) 76%, var(--bg3)); }
.dotkey { gap: 4px; align-items: center; margin-top: 8px; }
.srow { gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.srow .t { font-variant-numeric: tabular-nums; }

/* One grid so every row lines up: name, tokens, calls, then a bar under all three. */
.srow { display: grid; grid-template-columns: minmax(0, 1fr) 76px 56px; column-gap: 10px; row-gap: 5px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.srow .sname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .snum { font-variant-numeric: tabular-nums; text-align: right; }
.srow .scalls { font-variant-numeric: tabular-nums; text-align: right; }
.srow .statbar { grid-column: 1 / -1; }
.shead { border-top: 0; padding-bottom: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.statbar { display: block; height: 4px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.statbar .fill { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 55%, var(--bg3)); }
.skeleton .skel { height: 12px; border-radius: 4px; background: var(--bg2); margin-top: 8px; }
.skeleton .skel.short { width: 45%; }

/* Charts on your page. */
.chartwrap { display: flex; flex-direction: column; gap: 6px; }
.tchart { width: 100%; height: 120px; display: block; overflow: visible; }
.tchart .area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.tchart .line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.wchart { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.wbar { flex: 1; height: 100%; display: flex; align-items: flex-end; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.wbar .fill { display: block; width: 100%; background: color-mix(in srgb, var(--accent) 60%, var(--bg3)); border-radius: 4px; }
.wbar:last-child .fill { background: var(--accent); }
.chartkey { gap: 8px; }
/* The footer's little five-hour spark. */
.userbar .usage { font-size: 11px; }
/* the five-hour window drawn around the avatar */
.ringwrap { position: relative; width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; }
.ringwrap .avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.ring { position: absolute; top: 0; left: 0; width: 38px; height: 38px; display: block; transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 2.2; }
.ring .track { stroke: var(--bg3); }
.ring .fill { stroke: color-mix(in srgb, var(--accent) 70%, var(--bg3)); stroke-linecap: round; }
.ring.high .fill { stroke: var(--warn); }
.ring.full .fill { stroke: var(--err); }
.userbar .spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.userbar .sparkbar { width: 3px; background: color-mix(in srgb, var(--accent) 55%, var(--bg3)); border-radius: 1px; }
.userbar .sparkbar:last-child { background: var(--accent); }

/* How much of the five-hour window is spent. */
.cap { display: block; width: 72px; height: 5px; border-radius: 3px; background: var(--bg3); overflow: hidden; flex: none; }
.cap .fill { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 65%, var(--bg3)); }
.cap.high .fill { background: var(--warn); }
.cap.full .fill { background: var(--err); }
.cap.big { width: 100%; height: 8px; border-radius: 4px; }
.capwrap { gap: 6px; }
.capwrap .sline { gap: 10px; align-items: baseline; }

.modelnote.spent { color: var(--err); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.modelnote.spent .linkish { background: none; border: 0; padding: 0; color: var(--fg2); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

.keyline { white-space: pre-wrap; overflow-wrap: anywhere; font: 11.5px/1.45 ui-monospace, Menlo, monospace; background: var(--bg2); border-radius: 6px; padding: 8px 10px; margin: 4px 0; }
/* Admin: one page per user */
.upage { gap: 12px; max-width: 1100px; }
.uhead { gap: 12px; align-items: center; }
.pill.err { color: var(--err); }
.pill.err::before { background: var(--err); }
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.upcard { gap: 10px; margin: 0; }
.upcard .spark { height: 48px; width: 100%; }
/* Routines and the heartbeat log on an assistant's page */
.witem.dim { opacity: .55; }
.rtadd { gap: 8px; flex-wrap: wrap; align-items: center; }
.rtadd input:first-child { flex: 1 1 220px; min-width: 0; }
.rtadd input[type="time"] { width: 7.5em; flex: none; }
.rtadd select { width: auto; flex: none; }
.hbrow { gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); align-items: baseline; }
.hbtime { flex: none; width: 6.5em; }
.hbdec { flex: none; width: 9.5em; color: var(--fg2); }
.hbdec.message { color: var(--accent); }
.hbdec.missed { color: var(--warn); }
@media (max-width: 560px) { .hbrow { flex-wrap: wrap; } .hbdec { width: auto; } }
/* Server (admin): model APIs and the heartbeat */
.serverwrap { display: flex; flex-direction: column; gap: 16px; padding: 16px; max-width: 1280px; width: 100%; margin: 0 auto; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.scard { gap: 12px; margin: 0; min-width: 0; }
.srvhead { gap: 12px; align-items: center; }
.srvhead .ell, .hbwho.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sstate { align-items: flex-end; text-align: right; flex: none; }
.sdot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg3); flex: none; box-shadow: 0 0 0 4px var(--bg2); }
.sdot.online { background: var(--ok); }
.sdot.slow { background: var(--warn); }
.sdot.offline { background: var(--err); }
.sdot.pulse { animation: spulse 2s ease-in-out infinite; box-shadow: none; width: 8px; height: 8px; }
@keyframes spulse { 50% { opacity: .35; } }
.slive { gap: 8px; align-items: center; }
.schips { gap: 6px; flex-wrap: wrap; }
.schip { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg2); }
.schip.on { border-color: var(--accent); color: var(--fg); }
.stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stiles.top { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); min-width: 0; }
.stiles.top .stile { background: var(--bg2); }
.sval { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tchartwrap { display: flex; flex-direction: column; gap: 4px; }
.tchart { width: 100%; display: block; overflow: visible; }
.tchart .grid { stroke: var(--line); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tchart .bar.calls { fill: var(--fg3); }
.tchart .hit { fill: transparent; }
.tchart .hit:hover { fill: var(--glow); }
.tchart .tline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.taxis { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.slegend, .klegend { gap: 14px; flex-wrap: wrap; align-items: center; }
.swat { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--fg3); }
.swat.line { height: 2px; vertical-align: 3px; background: var(--accent); }
.tchart .d-message, .swat.d-message { fill: var(--accent); background: var(--accent); }
.tchart .d-wait, .swat.d-wait { fill: var(--fg3); background: var(--fg3); opacity: .6; }
.tchart .d-skip, .swat.d-skip { fill: var(--fg2); background: var(--fg2); }
.tchart .d-missed, .swat.d-missed { fill: var(--warn); background: var(--warn); }
.kbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 6px 0; }
.kbar span, .swat.k0, .swat.k1, .swat.k2, .swat.k3, .swat.k4 { min-width: 4px; }
.k0 { background: var(--accent); } .k1 { background: var(--fg2); } .k2 { background: var(--fg3); } .k3 { background: var(--bg3); } .k4 { background: var(--warn); }
.skinds { gap: 0; }
.rhead { justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
.hbwho { flex: none; width: 10em; }
.hbqueue { gap: 6px; }
.qline { position: relative; height: 26px; margin: 4px 8px 0; }
.qtrack { position: absolute; left: 0; right: 0; top: 12px; height: 2px; border-radius: 1px; background: var(--line); }
.qtick { position: absolute; top: 7px; width: 1px; height: 12px; background: var(--line); }
.qdot { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--fg3); box-shadow: 0 0 0 2px var(--bg2); }
.qdot.mine { background: var(--accent); z-index: 1; }
.qdue { position: absolute; top: 2px; min-width: 22px; height: 22px; margin-left: -11px; padding: 0 5px; border-radius: 11px; background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; z-index: 2; }
.qaxis { justify-content: space-between; margin: 0 2px; font-variant-numeric: tabular-nums; }
.swat.qmine { border-radius: 50%; background: var(--accent); }
.swat.qguest { border-radius: 50%; background: var(--fg3); }
.qin { flex: none; width: 6em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .qrow .hbtime { width: 5.5em; } .qrow .hbwho { flex: 1 1 0; } .qin { width: auto; } }
.hbwhy { min-width: 0; color: var(--fg2); }
@media (max-width: 640px) {
  .serverwrap { padding: 12px; }
  .sval { font-size: 19px; }
  .hbrow { flex-wrap: wrap; gap: 2px 10px; }
  .hbwho { width: auto; }
  .hbwhy { flex-basis: 100%; }
}
/* Nudges: turn on notifications, install on iPhone */
.nudgeslot:empty { display: none; }
.nudgeslot { padding: 8px 12px 4px; }
.nudge { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--bg2); }
.nudge .grow { min-width: 180px; flex: 1 1 180px; }
.nudge.done { border-left-color: var(--ok); gap: 10px; }
.nbtns { gap: 8px; flex: none; }
.nicon { width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.nicon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nicon svg.logo { fill: currentColor; stroke: none; }
.iguide { gap: 14px; }
.istep { gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.inum { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
/* The invite email, as it will arrive */
.mailframe { width: 100%; height: 560px; border: 0; border-radius: 8px; background: #000; margin-top: 8px; }
/* Server › Live: gauge, requests in flight, the last minute */
.serverrest { gap: 16px; }
.lhead { gap: 10px; align-items: baseline; padding: 0 2px 8px; }
.lhead .t { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.scard.live { transition: border-color .4s; }
.scard.live.busy { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.scard.live:not(.busy) .sdot.pulse { background: var(--fg3); animation: none; }
.lrow { display: grid; grid-template-columns: minmax(180px, 230px) 1fr; gap: 18px; align-items: center; }
.lgauge { align-items: stretch; }
.gauge { width: 100%; height: auto; overflow: visible; }
.gtrack { fill: none; stroke: var(--bg3); stroke-width: 14; stroke-linecap: round; }
.gfill { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.gneedle { stroke: var(--fg); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.ghub { fill: var(--fg); }
.gscale { justify-content: space-between; align-items: flex-end; margin-top: 6px; font-variant-numeric: tabular-nums; }
.gmid { align-items: center; }
.gval { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lflight { gap: 8px; min-width: 0; }
.lfhead { gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pips { display: inline-flex; gap: 4px; margin-left: auto; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--fg3); }
.pips i.writing { background: var(--accent); animation: spulse 1.2s ease-in-out infinite; }
.lcalls { gap: 4px; }
.lcall { gap: 1px; padding: 5px 0; border-top: 1px solid var(--line); min-width: 0; }
.lcall .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 12px; }
.lcalltop { gap: 8px; justify-content: space-between; align-items: baseline; }
.lphase { color: var(--fg2); white-space: nowrap; }
.lphase.writing { color: var(--accent); }
.lnum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lsparks { gap: 6px; }
.llegend { gap: 14px; flex-wrap: wrap; align-items: center; }
.swat.lin { background: #e3b341; } .swat.lout { background: var(--accent); }
.swat.ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
.lmarks { display: flex; gap: 2px; height: 14px; align-items: center; }
.lmarks span { flex: 1; display: flex; justify-content: center; }
.lmarks b { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); font-size: 9px; line-height: 12px; color: var(--bg); font-weight: 700; display: grid; place-items: center; }
.lmarks b.many { width: 12px; height: 12px; }
.lchart { gap: 2px; }
.lchead { gap: 8px; font-variant-numeric: tabular-nums; }
.lplot { position: relative; height: 44px; border-bottom: 1px solid var(--line); }
.lgrid { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.lbars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.lbar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.lbar i { display: block; width: 100%; border-radius: 1px 1px 0 0; transition: height .5s; }
.lbars.in .lbar i { background: #e3b341; }
.lbars.out .lbar i { background: var(--accent); }
.lnowin { font-size: 12px; color: #e3b341; min-height: 1.2em; }
@media (max-width: 560px) {
  .lrow { grid-template-columns: 1fr; }
  .lgauge { max-width: 260px; margin: 0 auto; width: 100%; }
  .gval { font-size: 26px; }
}
.gscale .gval { color: var(--fg); }
/* green: writing a reply to a user's chat; blue: everything in the background */
.swat.lchat { background: #3fb950; }
.lbar.stack { position: relative; display: block; }
.lbar.stack i { position: absolute; left: 0; right: 0; border-radius: 0; transition: height .5s, bottom .5s; }
.lbar.stack i.chat { background: #3fb950; }
.lbar.stack i.bg { background: var(--accent); border-radius: 1px 1px 0 0; }
.lphase.writing.chat { color: #3fb950; }
.gfill.chat { stroke: #3fb950; }