/* ds1 dark stage (personal/shorts/ds/tokens.json): near-black, dot lattice, one amber accent, mint for live. */
@font-face { font-family: 'DS Sans'; font-weight: 100 900; font-display: swap; src: url('fonts/Inter.woff2') format('woff2'); }
@font-face { font-family: 'DS Mono'; font-weight: 400 800; font-display: swap; src: url('fonts/JetBrainsMono.woff2') format('woff2'); }

:root {
  --stage: #0A0A0B; --stage2: #121214;
  --surface: #141416; --surface2: #1B1B1E; --surface3: #232327;
  --line: rgba(255,255,255,0.08); --lineStrong: rgba(255,255,255,0.16);
  --hi: #F5F5F7; --mid: #A1A1AA; --lo: #6B6B76; --faint: #3F3F46;
  --accent: #FFBF00; --accentSoft: rgba(255,191,0,0.16); --accentLine: rgba(255,191,0,0.55); --onAccent: #140F00;
  --second: #5EEAD4; --secondSoft: rgba(94,234,212,0.14);
  --sans: 'DS Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DS Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --app-h: 100%; /* the full pinned screen; app.js sets it from visualViewport only while the keyboard is open */
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The shell never scrolls or bounces; only the list and the stream scroll, and their overscroll stays inside them. */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; left: 0; top: 0; width: 100%; height: var(--shell-h, 100%); } /* --shell-h: iOS standalone short-layout fix (app.js) */
.debugbox { position: fixed; z-index: 99; left: 8px; right: 8px; top: calc(var(--safe-t) + 56px); margin: 0; padding: 10px 12px; background: rgba(20,20,22,.94); border: 1px solid var(--accentLine); border-radius: 12px; color: var(--hi); font: 12px/1.45 var(--mono); white-space: pre-wrap; }
button, .agent, summary, .chip { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.topbar, .summary, .section, .note, .tag, .ago, .from, .ts { -webkit-user-select: none; user-select: none; }
body { background: var(--stage); color: var(--hi); }
body::before { /* dot lattice + key light on its own fixed layer: no repaint while scrolling */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse at 50% 34%, rgba(255,255,255,0.035), transparent 60%),
    radial-gradient(rgba(255,255,255,0.075) 1.2px, transparent 1.4px);
  background-size: 100% 100%, 32px 32px;
}
body { font: 15px/1.45 var(--sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
#app { height: var(--app-h); transform: translateY(var(--vv-top, 0px)); display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); padding-left: var(--safe-l); padding-right: var(--safe-r); }
@media (min-width: 900px) { #app.authed { grid-template-columns: minmax(340px, 400px) 1fr; } }

.pane { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  padding: calc(var(--safe-t) + 14px) 18px 12px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(var(--stage) 60%, transparent); position: relative; z-index: 2;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -0.02em; font-size: 20px; }
.brand .cube { width: 22px; height: 22px; }
.conn { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-left: auto; transition: background .3s; }
.conn.on { background: var(--second); box-shadow: 0 0 0 4px var(--secondSoft); }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--mid); }
.iconbtn:active { background: var(--surface2); }
.iconbtn svg { width: 22px; height: 22px; }
/* bell: amber when notifications are on; slashed when off or muted */
.bell .slash { display: none; }
.bell[aria-pressed="false"] .slash { display: inline; }
.bell[aria-pressed="true"] { color: var(--accent); }
#bell { margin-right: -8px; }
.mutedmark { font: 600 10px/1 var(--mono); color: var(--lo); letter-spacing: .06em; }

/* ---------- fleet list ---------- */
#fleet { border-right: 1px solid var(--line); }
.summary { display: flex; gap: 8px; padding: 0 18px 12px; flex-wrap: wrap; }
.pill { font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--mid); display: inline-flex; align-items: center; gap: 7px; }
.pill b { color: var(--hi); font-weight: 700; }
.list { flex: 1; overflow-y: auto; padding: 4px 12px calc(24px + var(--safe-b)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.section { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lo); padding: 18px 8px 10px; display: flex; justify-content: space-between; }
.section button { color: var(--lo); font: inherit; letter-spacing: inherit; }

.agent {
  width: 100%; text-align: left; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.agent:active { transform: scale(.985); }
.agent.sel { border-color: var(--accentLine); background: var(--surface2); }
.agent.offline { background: transparent; }
.agent.offline .who, .agent.offline .avatar { opacity: .55; }
.avatar {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; position: relative;
  background: var(--surface3); font: 700 15px/1 var(--mono); color: var(--mid); letter-spacing: -0.02em;
}
.avatar.cos { background: var(--accentSoft); color: var(--accent); }
.dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--surface); background: var(--faint); }
.st-working .dot { background: var(--accent); animation: pulse 1.6s var(--ease) infinite; }
.st-waiting .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.st-idle .dot { background: var(--second); }
.st-error .dot { background: #F87171; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,191,0,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,191,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,191,0,0); } }
.who { min-width: 0; }
.who .name { font-weight: 680; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.who .now { color: var(--mid); font-size: 13px; line-height: 1.35; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.st-working .now { color: var(--hi); }
.meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tag { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; color: var(--lo); background: var(--stage2); }
.st-working .tag { color: var(--onAccent); background: var(--accent); }
.st-waiting .tag { color: var(--accent); background: var(--accentSoft); }
.st-idle .tag { color: var(--second); background: var(--secondSoft); }
.ago { font: 500 11px/1 var(--mono); color: var(--lo); }

/* ---------- chat ---------- */
#chat { background: rgba(10,10,11,.55); }
#app:not(.chatting) #chat { display: none; }
@media (max-width: 899px) { #app.chatting #fleet { display: none; } }
@media (min-width: 900px) { #app.authed #chat { display: flex; } }
.chathead { border-bottom: 1px solid var(--line); }
.chathead .title { min-width: 0; flex: 1; }
.chathead .title .name { font-weight: 720; font-size: 17px; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; }
.chathead .title .now { color: var(--mid); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { margin-left: -8px; }
@media (min-width: 900px) { .back { display: none; } }
.empty { margin: auto; color: var(--lo); text-align: center; padding: 40px; font-size: 14px; }

.stream { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.stream > * { flex-shrink: 0; }
.b { max-width: min(86%, 680px); padding: 10px 13px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); word-wrap: break-word; overflow-wrap: anywhere; }
.fresh { animation: rise .35s var(--ease); } /* only live arrivals animate, never the loaded history */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.b.text { border-top-left-radius: 6px; }
.b.me { align-self: flex-end; background: var(--surface2); border-color: var(--accentLine); border-top-right-radius: 6px; }
.b.in { border-top-left-radius: 6px; background: var(--stage2); }
.b.out { border-top-left-radius: 6px; background: var(--stage2); border-style: dashed; }
.b.toyou { border-color: var(--accentLine); border-style: solid; }
.from { font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lo); margin-bottom: 7px; display: flex; gap: 8px; align-items: center; }
.b.me .from { color: var(--accent); justify-content: flex-end; }
.b.toyou .from { color: var(--accent); }
.from .rc { color: var(--second); letter-spacing: .04em; }
.from .rc.held { color: var(--accent); }
.body { white-space: pre-wrap; font-size: 14.5px; }
.body.clamp { max-height: 15.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.more { font: 600 11px/1 var(--mono); color: var(--accent); margin-top: 8px; letter-spacing: .06em; text-transform: uppercase; }
.body code { font: 13px var(--mono); background: var(--surface3); padding: 1px 5px; border-radius: 5px; }
.body pre { font: 12.5px/1.5 var(--mono); background: var(--stage); border: 1px solid var(--line); padding: 10px; border-radius: 10px; overflow-x: auto; white-space: pre; margin: 6px 0; }
.body strong { font-weight: 700; }
.ts { font: 500 10px/1 var(--mono); color: var(--faint); margin-top: 6px; }
.b.me .ts { text-align: right; }

.tools { align-self: flex-start; max-width: min(92%, 680px); font: 12px/1.5 var(--mono); color: var(--lo); padding: 2px 4px; }
.tools summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.tools summary::-webkit-details-marker { display: none; }
.tools summary::before { content: '▸'; color: var(--faint); transition: transform .2s; }
.tools[open] summary::before { transform: rotate(90deg); }
.tools .cnt { flex: none; white-space: nowrap; color: var(--lo); }
.tools .last { color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool { display: flex; gap: 8px; padding: 3px 0 3px 16px; border-left: 1px solid var(--line); margin-left: 3px; }
.tool .tn { color: var(--mid); flex: none; }
.tool .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool.err .tn { color: #F87171; }
.tool.run .tn { color: var(--accent); }
/* agent-to-agent messages: collapsed to one greyed line, expandable */
.peer { align-self: stretch; max-width: min(100%, 680px); color: var(--lo); font-size: 13px; border-radius: 10px; }
.peer summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 10px; min-width: 0; }
.peer summary::-webkit-details-marker { display: none; }
.peer summary:active { background: var(--surface); }
.peer .arrow { font: 600 12px var(--mono); color: var(--faint); flex: none; }
.peer .pname { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lo); flex: none; }
.peer .first { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lo); }
.peer .pts { font: 500 10px var(--mono); color: var(--faint); flex: none; }
.peer summary::after { content: '▸'; color: var(--faint); font-size: 11px; flex: none; transition: transform .2s var(--ease); }
.peer[open] summary::after { transform: rotate(90deg); }
.peer[open] { background: var(--stage2); border: 1px solid var(--line); }
.peer[open] .first { visibility: hidden; }
.peer .body { padding: 2px 12px 12px; color: var(--mid); font-size: 14px; }
.sys { align-self: center; font: 500 11px/1.4 var(--mono); color: var(--lo); background: var(--stage2); border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px; max-width: 92%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing { align-self: flex-start; font: 500 12px/1 var(--mono); color: var(--accent); padding: 6px 4px; display: flex; gap: 8px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ---------- composer ---------- */
.composer { padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--stage); }
.note { font: 500 11.5px/1.4 var(--mono); color: var(--lo); padding: 0 4px 8px; }
.note b { color: var(--accent); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px 8px; }
.chip { font: 500 12px/1 var(--mono); background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: flex; gap: 6px; align-items: center; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.chip button { color: var(--lo); }
.row { display: flex; align-items: flex-end; gap: 8px; }
.input { flex: 1; background: var(--surface); border: 1px solid var(--lineStrong); border-radius: 20px; display: flex; align-items: flex-end; padding: 4px 4px 4px 14px; transition: border-color .2s; }
.input:focus-within { border-color: var(--accentLine); }
textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; padding: 8px 0; max-height: 160px; min-height: 22px; line-height: 1.4; font-size: 16px; }
textarea::placeholder { color: var(--lo); }
.send { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--onAccent); display: grid; place-items: center; flex: none; transition: transform .15s var(--ease), opacity .2s; }
.send:disabled { opacity: .35; }
.send:active { transform: scale(.92); }
.send svg, .attach svg, .mic svg { width: 22px; height: 22px; }
.attach, .mic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--mid); flex: none; }
.mic.rec { background: var(--accent); color: var(--onAccent); animation: pulse 1.6s infinite; }
.recbar { font: 600 12px/1 var(--mono); color: var(--accent); padding: 0 4px 8px; display: flex; gap: 10px; align-items: center; }
.kb-open .composer { padding-bottom: 8px; } /* the home indicator is under the keyboard now */
.kb-open .note { display: none; }
.composer.disabled .input, .composer.disabled .send { opacity: .4; pointer-events: none; }

/* ---------- login ---------- */
#login { display: grid; place-items: center; padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b)); height: 100%; overflow-y: auto; }
.card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); }
.card h1 { font-size: 26px; letter-spacing: -0.03em; margin: 14px 0 6px; }
.card p { color: var(--mid); margin: 0 0 18px; font-size: 14px; }
.card input { width: 100%; background: var(--stage); border: 1px solid var(--lineStrong); border-radius: 12px; padding: 13px 14px; font: 16px var(--mono); outline: 0; } /* <16px makes iOS zoom on focus */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card input:focus { border-color: var(--accentLine); }
.btn { width: 100%; margin-top: 12px; background: var(--accent); color: var(--onAccent); font-weight: 720; border-radius: 12px; padding: 13px; }
.err { color: #F87171; font-size: 13px; margin-top: 10px; min-height: 1em; }
.toast.link { text-align: left; border-color: var(--accentLine); color: var(--hi); cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); background: var(--surface3); border: 1px solid var(--lineStrong); padding: 10px 14px; border-radius: 12px; font-size: 13px; max-width: 90vw; z-index: 9; animation: rise .3s var(--ease); }
.recbar .hint { color: var(--lo); }