/* New Horizon9 Remote — shared phone layout foundations, followed by the Colonnade Dawn UI layer. */

:root {
  --ph: #ffaa33; --ph-bright: #ffd9a3; --ph-dim: #b9791c; --ink: #190f02;
  --bg: #030201; --panel: rgba(5, 3, 1, 0.95); --panel2: #0c0704; --text: #eec88f;
  --warn: #ffe97a; --bad: #ff5c4d; --gold: #ffd34a; --ok: #7bc88a; --link-down: #ff6a4c;
  --ph-rgb: 255, 170, 51; --ph-bright-rgb: 255, 228, 180; --gold-rgb: 255, 211, 74; --ok-rgb: 123, 200, 138; --bad-rgb: 255, 92, 77;
  color-scheme: dark;
}
body {
  --gd-edge: rgba(var(--ph-rgb), .24);
  --gd-light: rgba(var(--ph-bright-rgb), .13);
  --gd-face: linear-gradient(165deg, rgba(var(--ph-rgb), .075), transparent 46%), color-mix(in srgb, var(--panel) 92%, transparent);
  --gd-hover: linear-gradient(120deg, rgba(var(--ph-rgb), .14), rgba(var(--ph-rgb), .035) 70%);
  --gd-shadow: inset 0 1px 0 var(--gd-light), 0 6px 24px rgba(0,0,0,.3);
  --gd-comms-edge: rgba(var(--ph-rgb), .2);
  --t-fast: 140ms; --ease-soft: cubic-bezier(.3,.7,.4,1);
  --gut: 14px;
  margin: 0; color: var(--text);
  background: radial-gradient(120% 46% at 50% -8%, rgba(var(--ph-rgb), .075), transparent 62%), var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 19px; line-height: 1.25;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
svg { display: block; }

#deck { display: flex; flex-direction: column; height: 100%; max-width: 640px; margin: 0 auto;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0); }

/* THE GLASS CARD — face + hairline edge + one inner highlight */
.glass { background: var(--gd-face); border: 1px solid var(--gd-edge); border-radius: 6px; box-shadow: var(--gd-shadow); }
.pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* TOP BAR */
.bar { display: flex; align-items: center; gap: 10px; padding: 10px var(--gut) 8px; min-height: 54px; }
.bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar-title { font-size: 24px; letter-spacing: 2.5px; line-height: 1.05; color: var(--ph-bright); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-sub { font-size: 15px; letter-spacing: .6px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-well { flex: none; width: 34px; height: 42px; }
.icon-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ph);
  border: 1px solid var(--gd-edge); border-radius: 5px; background: rgba(var(--ph-rgb), .04); box-shadow: inset 0 1px 0 var(--gd-light);
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); }
.icon-btn:is(:active,:focus-visible) { color: var(--ph-bright); background: var(--gd-hover); border-color: var(--ph-dim); outline: none; }
.icon-btn svg { width: 18px; height: 18px; }

/* the link lamp: reads ONLY what the connection proves */
.lamp { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: 1px; white-space: nowrap; color: var(--ph); }
.lamp i { width: 7px; height: 7px; border-radius: 50%; background: var(--ph-dim); }
.lamp.ok { color: var(--ok); } .lamp.ok i { background: var(--ok); }
.lamp.down { color: var(--link-down); } .lamp.down i { background: var(--link-down); }
.lamp.busy i { background: var(--warn); }

main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px var(--gut) 18px; display: flex; flex-direction: column; gap: 18px; }

main > * { flex: none; }   /* the page scrolls; nothing in it is squeezed to fit */

/* SECTION LABEL — a quiet overline with a hairline running out to the edge */
.label { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: 2.5px; color: var(--ph); text-transform: uppercase; }
.label::after { content: ""; flex: 1; height: 1px; background: var(--gd-comms-edge); }
.label.gold { color: var(--gold); } .label.gold::after { background: rgba(var(--gold-rgb), .35); }
.label .more { order: 3; font-size: 15px; letter-spacing: 1.5px; color: var(--ph-bright); padding: 6px 0 6px 8px; }
.sect { display: flex; flex-direction: column; gap: 9px; }
.note-line { font-size: 16px; opacity: .62; line-height: 1.3; }

/* THE STATION VIEW — the picture the desk's own renderer drew */
.hero { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--gd-edge); background: #040302;
  box-shadow: inset 0 1px 0 var(--gd-light), 0 10px 30px rgba(0,0,0,.45); }
.hero-frame { position: relative; width: 100%; }
.hero-frame img { display: block; width: 100%; height: auto; image-rendering: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hero.stale .hero-frame img { filter: saturate(.7) brightness(.88); }
.hero-empty { padding: 34px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hero-empty b { font-weight: 400; font-size: 20px; letter-spacing: 2px; color: var(--ph-bright); }
.hero-empty span { font-size: 16px; opacity: .65; max-width: 30ch; line-height: 1.3; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: 1.2px; padding: 3px 8px; border-radius: 4px; color: var(--ph-bright);
  border: 1px solid var(--gd-edge); background: color-mix(in srgb, var(--panel2) 82%, transparent); text-transform: uppercase; white-space: nowrap; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ph-dim); }
.chip.live { color: var(--ok); border-color: rgba(var(--ok-rgb), .4); } .chip.live i { background: var(--ok); }
.hero .chip { position: absolute; left: 8px; bottom: 8px; }
.hero .expand { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; }
.hero .expand svg { width: 15px; height: 15px; }
/* a crew marker over the picture: where that agent stood when the picture was drawn */
.mark { position: absolute; width: 0; height: 0; pointer-events: none; }
.mark::before { content: ""; position: absolute; left: -11px; top: -24px; width: 22px; height: 30px; border-radius: 50%; border: 1px solid transparent; }
.mark.work::before { border-color: rgba(var(--gold-rgb), .85); animation: beat 1.6s var(--ease-soft) infinite; }
.mark.sel::before { border-color: var(--ph-bright); }
.mark span { position: absolute; left: 0; top: -40px; transform: translateX(-50%); font-size: 13px; letter-spacing: 1px; padding: 0 5px; border-radius: 3px; white-space: nowrap;
  color: var(--gold); background: color-mix(in srgb, var(--panel2) 86%, transparent); border: 1px solid rgba(var(--gold-rgb), .4); }
.mark.sel span { color: var(--ph-bright); border-color: var(--gd-edge); }
@keyframes beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.18); } }

/* CREW — a strip of the real sprites */
.crew { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.crew::-webkit-scrollbar { display: none; }
.mate { flex: none; width: 84px; padding: 8px 6px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid transparent; border-radius: 6px;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft); }
.mate.sel, .mate:active { background: var(--gd-hover); border-color: var(--gd-edge); box-shadow: inset 0 1px 0 var(--gd-light); }
.mate:focus-visible { outline: 1px solid var(--ph); outline-offset: -2px; }
.mate b { font-weight: 400; font-size: 17px; letter-spacing: 1px; color: var(--ph-bright); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.mate em { font-style: normal; font-size: 14px; letter-spacing: .8px; opacity: .6; white-space: nowrap; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mate.work em { color: var(--gold); opacity: 1; }
.mate.work em.clock { color: var(--ph); opacity: .6; font-size: 13px; }
/* the portrait well (glass-comms .comms-portrait) */
.well { flex: none; position: relative; width: 52px; height: 62px; display: grid; place-items: center; border: 1px solid var(--gd-edge); border-radius: 4px;
  background: rgba(var(--ph-rgb), .025); box-shadow: inset 0 1px 0 var(--gd-light); color: var(--ph); font-size: 22px; }
.well img { position: absolute; left: 8%; top: 6%; width: 84%; height: 88%; object-fit: contain; image-rendering: pixelated; }
.well.sm { width: 34px; height: 42px; font-size: 17px; border-radius: 3px; }
.well .dot { position: absolute; right: -3px; bottom: -3px; outline: 2px solid var(--bg); }
.well.file { width: 40px; height: 40px; font-size: 12px; letter-spacing: .5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #5a4630; }
.dot.work { background: var(--gold); } .dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); }

/* ROWS — transparent at rest, glass when pressed (the CREW / session row recipe) */
.list { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; min-height: 58px; border: 1px solid transparent; border-radius: 5px;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft); }
.row:is(button):is(:active,:focus-visible), .row.sel { background: var(--gd-hover); border-color: var(--gd-edge); box-shadow: inset 0 1px 0 var(--gd-light), 0 2px 8px rgba(0,0,0,.2); outline: none; }
.row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t b { font-weight: 400; font-size: 19px; color: var(--ph-bright); letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t span { font-size: 16px; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .d { flex: none; font-size: 14px; letter-spacing: .5px; opacity: .55; white-space: nowrap; align-self: flex-start; padding-top: 3px; }
.row .d.work { color: var(--gold); opacity: 1; }
.empty { padding: 18px 4px; font-size: 17px; opacity: .6; line-height: 1.3; }
.search { width: 100%; }

/* BUTTONS (.gd-controls button, sized for a thumb) */
.btn { font-size: 17px; letter-spacing: 1.2px; padding: 8px 15px; min-height: 42px; color: var(--ph); text-transform: uppercase; text-align: center;
  background: rgba(var(--ph-rgb), .05); border: 1px solid var(--gd-edge); border-radius: 4px; box-shadow: inset 0 1px 0 var(--gd-light); text-decoration: none; display: inline-grid; place-items: center; }
.btn:is(:active,:focus-visible) { color: var(--ph-bright); background: var(--gd-hover); border-color: var(--ph-dim); outline: none; }
.btn.go { color: var(--ok); border-color: rgba(var(--ok-rgb), .5); }
.btn.no { color: var(--bad); border-color: rgba(var(--bad-rgb), .45); }
.btn:disabled { opacity: .45; }
.btns { display: flex; gap: 7px; flex-wrap: wrap; }
.btns.fill .btn { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }

/* NEEDS YOU — the gold beat family */
.ask { padding: 12px; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 6px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(165deg, rgba(var(--gold-rgb), .08), transparent 55%), color-mix(in srgb, var(--panel2) 65%, transparent); box-shadow: inset 0 1px 0 var(--gd-light); }
.ask .who { font-size: 15px; letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase; }
.ask .what { font-size: 19px; color: var(--text); overflow-wrap: anywhere; line-height: 1.3; }
.ask pre, .md pre, .viewer-file pre { margin: 0; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--ph-bright); white-space: pre-wrap; overflow-wrap: anywhere;
  background: rgba(0,0,0,.35); border: 1px solid var(--gd-comms-edge); border-radius: 4px; padding: 7px 9px; }
.ask pre { max-height: 9em; overflow: auto; }
.ask .note { font-size: 15px; opacity: .62; line-height: 1.3; }
.ask textarea { min-height: 64px; }

/* CONVERSATION — the glass-comms message recipe */
.log { display: flex; flex-direction: column; gap: 9px; }
.msg { padding: 8px 11px 10px; border: 1px solid transparent; border-radius: 4px; max-width: 94%;
  background: linear-gradient(130deg, rgba(var(--ph-rgb), .035), transparent 70%); overflow-wrap: anywhere; }
.msg .who { display: block; font-size: 15px; letter-spacing: .9px; margin-bottom: 4px; }
.msg.agent { align-self: flex-start; border-left-color: rgba(var(--ph-rgb), .3); }
.msg.agent .who { color: var(--ph); }
.msg.user { align-self: flex-end; border-right-color: rgba(var(--gold-rgb), .45); max-width: 88%; }
.msg.user .who { color: var(--gold); text-align: right; }
.md { line-height: 1.38; display: flex; flex-direction: column; gap: 7px; }
.md p { margin: 0; white-space: pre-wrap; }
.md b { font-weight: 400; color: var(--ph-bright); }
.md .h { color: var(--ph-bright); letter-spacing: 1px; text-transform: uppercase; }
.md code { font: 14px/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--ph-bright); background: rgba(0,0,0,.35); border-radius: 3px; padding: 0 4px; }
.md .li { display: flex; gap: 8px; } .md .li::before { content: "·"; color: var(--ph); flex: none; }
.step { align-self: flex-start; display: flex; gap: 8px; align-items: center; font-size: 16px; letter-spacing: .5px; padding: 5px 9px; border-radius: 4px;
  border: 1px solid var(--gd-comms-edge); background: color-mix(in srgb, var(--panel2) 65%, transparent); box-shadow: inset 0 1px 0 var(--gd-light); }
.step b { font-weight: 400; color: var(--ok); } .step b.x { color: var(--bad); } .step b.w { color: var(--gold); } .step b.h { color: var(--ph-dim); }
.working { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: 1px; color: var(--gold); padding: 2px 4px; text-transform: uppercase; }
.working i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: beat 1.6s var(--ease-soft) infinite; }

/* COMPOSER — one glass edge around the writing and the send key (glass-comms #chat-inputrow) */
.compose { padding: 8px var(--gut) 8px; display: flex; flex-direction: column; gap: 6px; }
.compose .to { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; letter-spacing: 1.2px; color: var(--ph); text-transform: uppercase; padding: 3px 2px; }
.compose .to svg { width: 9px; height: 9px; opacity: .7; }
.compose .to b { font-weight: 400; color: var(--ph-bright); }
.compose-row { display: flex; align-items: flex-end; border: 1px solid var(--gd-edge); border-radius: 6px; background: var(--gd-face); box-shadow: inset 0 1px 0 var(--gd-light);
  transition: border-color var(--t-fast) var(--ease-soft); }
.compose-row:focus-within { border-color: rgba(var(--ph-rgb), .45); }
.compose-row textarea { border: 0; background: transparent; padding: 11px 12px; max-height: 140px; }
.send { flex: none; width: 42px; height: 38px; margin: 4px; display: grid; place-items: center; color: var(--ph-bright); border: 1px solid var(--gd-edge); border-radius: 4px; background: rgba(var(--ph-rgb), .07); }
.send svg { width: 17px; height: 17px; }
.send:active { background: var(--gd-hover); border-color: var(--ph-dim); }
.send:disabled { opacity: .4; }
textarea, input[type=text], input[type=search] { width: 100%; min-width: 0; resize: none; border: 1px solid var(--gd-edge); border-radius: 5px; background: rgba(0,0,0,.3);
  color: var(--ph-bright); padding: 9px 11px; font-size: 19px; line-height: 1.2; outline: none; appearance: none; -webkit-appearance: none; }
textarea:focus, input:focus { border-color: rgba(var(--ph-rgb), .5); }
textarea::placeholder, input::placeholder { color: var(--ph-dim); opacity: 1; }
input[type=search]::-webkit-search-cancel-button { display: none; }

/* TAB BAR — three glass keys (the desk's bottom bar) */
.tabs { display: flex; gap: 6px; padding: 6px var(--gut) calc(8px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--gd-comms-edge); background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.tab { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ph-dim); border: 1px solid transparent; border-radius: 5px;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); }
.tab[aria-selected="true"] { color: var(--ph-bright); background: var(--gd-hover); border-color: var(--gd-edge); box-shadow: inset 0 1px 0 var(--gd-light); }
.tab:focus-visible { outline: 1px solid var(--ph); outline-offset: -3px; }
.tab-ico svg { width: 16px; height: 16px; }
.tab .n { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 14px; line-height: 18px; text-align: center; letter-spacing: 0; color: var(--ink); background: var(--gold); }

/* files */
.viewer-file { display: flex; flex-direction: column; gap: 10px; }
.viewer-file img { max-width: 100%; border: 1px solid var(--gd-edge); border-radius: 5px; background: #000; }
.viewer-file pre { max-height: 60vh; overflow: auto; color: var(--text); }

/* settings lines */
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--gd-comms-edge); font-size: 17px; }
.kv:last-child { border-bottom: 0; }
.kv span { opacity: .62; flex: none; } .kv b { font-weight: 400; color: var(--ph-bright); text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* THE SHEET — rises from the bottom, like every station window */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: 640px; margin: 0 auto; max-height: 72vh; display: flex; flex-direction: column; gap: 8px;
  padding: 8px var(--gut) calc(14px + env(safe-area-inset-bottom, 0)); border: 1px solid var(--gd-edge); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: linear-gradient(165deg, rgba(var(--ph-rgb), .075), transparent 46%), var(--panel2); box-shadow: inset 0 1px 0 var(--gd-light), 0 -14px 44px rgba(0,0,0,.55);
  animation: rise var(--t-fast) var(--ease-soft); }
.sheet-grip { align-self: center; width: 46px; height: 3px; border-radius: 3px; background: var(--ph-dim); margin-bottom: 4px; }
.sheet-body { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.sheet-body .list { margin: 0; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* THE STATION, FULL SCREEN */
.viewer { position: fixed; inset: 0; z-index: 40; background: #040302; touch-action: none; overflow: hidden; }
.viewer-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.viewer-stage img { display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.viewer-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0)) var(--gut) 10px; pointer-events: none; }
.viewer-top > * { pointer-events: auto; }
.viewer-top .icon-btn { background: color-mix(in srgb, var(--panel2) 82%, transparent); }
.viewer-plate { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(16px + env(safe-area-inset-bottom, 0)); max-width: 420px; margin: 0 auto; padding: 8px 8px 8px 10px;
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--gd-edge); border-radius: 6px; background: linear-gradient(165deg, rgba(var(--ph-rgb), .075), transparent 46%), var(--panel2);
  box-shadow: inset 0 1px 0 var(--gd-light), 0 14px 44px rgba(0,0,0,.55); }
.viewer-plate .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.viewer-plate .t b { font-weight: 400; font-size: 20px; letter-spacing: 1px; color: var(--ph-bright); text-transform: uppercase; }
.viewer-plate .t span { font-size: 15px; opacity: .65; }

/* pairing / setup */
.setup { padding: 28px var(--gut); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.brand { display: flex; flex-direction: column; line-height: .95; }
.brand-mark { font-size: 46px; letter-spacing: 5px; color: var(--ph-bright); }
.brand-sub { font-size: 22px; letter-spacing: 9px; color: var(--ph); }
.setup p { margin: 0; font-size: 18px; line-height: 1.35; }
.setup b { font-weight: 400; color: var(--ph-bright); }
.fp { font-size: 28px; letter-spacing: 3px; color: var(--ph-bright); }
.err-line { color: var(--bad); font-size: 17px; }
.hint { font-size: 15px; opacity: .62; }

/* a toast for one-line outcomes ("Approved", "Stopped") */
#toast { position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom, 0)); transform: translateX(-50%); z-index: 50;
  font-size: 17px; letter-spacing: 1px; padding: 8px 14px; border: 1px solid var(--gd-edge); border-radius: 5px; color: var(--ph-bright);
  background: color-mix(in srgb, var(--panel2) 94%, transparent); box-shadow: var(--gd-shadow); max-width: 92vw; }
#toast.bad { color: var(--bad); border-color: rgba(var(--bad-rgb), .45); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* the notifications card (Settings, and once under the station picture) */
.push-card .push-h { font-size: 19px; letter-spacing: 1px; color: var(--ph-bright); text-transform: uppercase; }
.btn.quiet { border-color: transparent; background: transparent; box-shadow: none; }

/* the live station: the room is a still, the crew are drawn on a canvas on top */
.hero-frame canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: manipulation; }
.hero.stale .hero-frame canvas { filter: saturate(.7) brightness(.88); }
#viewer .viewer-stage { position: absolute; inset: 0; transform: none; width: auto; height: auto; }
#viewer .viewer-stage canvas { display: block; width: 100%; height: 100%; }

/* ACTIVITY */
.act { display: flex; flex-direction: column; }
.act .row .t span.why.done { opacity: .75; }
.act .row .t span.why.failed { color: var(--bad); opacity: 1; }
.act .row .t span.why.stopped { opacity: .5; }
.act-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px 55px; }
.file-chip { font-size: 15px; letter-spacing: .4px; color: var(--ph-bright); padding: 4px 9px; border: 1px solid var(--gd-edge); border-radius: 4px;
  background: rgba(var(--ph-rgb), .04); box-shadow: inset 0 1px 0 var(--gd-light); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip:active { background: var(--gd-hover); border-color: var(--ph-dim); }

/* the compact notifications prompt under the station picture: one line and a key */
.push-card.compact { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.push-card.compact .push-h { font-size: 16px; letter-spacing: .8px; flex: 1; min-width: 0; }
.push-card.compact .btns { flex: none; flex-wrap: nowrap; gap: 4px; }
.push-card.compact .btn { min-height: 36px; padding: 6px 12px; font-size: 15px; }

/* first run: the Home Screen walkthrough and the one-tap paste */
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.35; }
.steps li::marker { color: var(--ph); }
.steps .btns { margin-top: 8px; }
.steps b, .setup .manual summary { font-weight: 400; color: var(--ph-bright); }
.btn.done { color: var(--ok); border-color: rgba(var(--ok-rgb), .5); }
.share-ico { display: inline-block; width: 14px; height: 16px; vertical-align: -2px; border: 1.5px solid var(--ph-bright); border-top: 0; border-radius: 0 0 2px 2px; position: relative; margin: 0 2px; }
.share-ico::before { content: ""; position: absolute; left: 5px; top: -7px; width: 1.5px; height: 10px; background: var(--ph-bright); }
.setup .manual { font-size: 16px; }
.setup .manual summary { cursor: pointer; padding: 4px 0; opacity: .8; }
.setup .manual[open] summary { margin-bottom: 8px; }
.setup .manual .btns { margin-top: 8px; }

/* an agent's question at the end of a run: the question and one key per answer (the desk's choice chips) */
.qcard { margin-top: 8px; padding: 10px 11px; border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 6px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(165deg, rgba(var(--gold-rgb), .07), transparent 55%), color-mix(in srgb, var(--panel2) 65%, transparent); box-shadow: inset 0 1px 0 var(--gd-light); }
.qcard .q { font-size: 19px; color: var(--ph-bright); line-height: 1.3; }

/* ============================================================
   THE 0.13 LOOK (Andrew 10-02: "update it to the even newer UI style, slightly less glass"). The desk's settled
   rule, frontend/css/pipglass.css: GLASS ON THE PANEL, CRT ON THE CONTENT. On a phone the glass is turned down a
   notch: matte panels (no blur, no sheen band, no amber haze, the faintest tint), 10px panels and 8px cards/keys.
   The content carries the Pip-Boy screen: phosphor glow with a whisper of colour fringe on titles, a soft glow on
   secondary type, section rules ending in a tick, the tube's vignette inside each panel, a selection that lights up
   as a lit bar and blooms, and housed lamps that only say what the station says.
   ============================================================ */
body {
  --gd-edge: rgba(var(--ph-rgb), .26);
  --gd-light: rgba(var(--ph-bright-rgb), .05);
  --gd-face: linear-gradient(168deg, rgba(var(--ph-rgb), .045), rgba(var(--ph-rgb), .01) 40%, transparent 60%), color-mix(in srgb, var(--panel2) 94%, transparent);
  --gd-hover: linear-gradient(120deg, rgba(var(--ph-rgb), .2), rgba(var(--ph-rgb), .07));
  --gd-comms-edge: rgba(var(--ph-rgb), .18);
  --cg-card: linear-gradient(165deg, rgba(var(--ph-rgb), .06), transparent 46%), rgba(0, 0, 0, .24);
  --cg-hair: rgba(var(--ph-rgb), .14);
  --lit-edge: rgba(var(--ph-rgb), .5);
  --lit-gold: linear-gradient(120deg, rgba(var(--gold-rgb), .18), rgba(var(--gold-rgb), .05));
  --bloom: 0 0 14px rgba(var(--ph-rgb), .2);
  --tube: radial-gradient(ellipse 118% 98% at 50% 45%, transparent 55%, rgba(0, 0, 0, .42) 100%);
  --pg-glow: -0.45px 0 rgba(255, 64, 48, .2), 0.45px 0 rgba(64, 150, 255, .17), 0 0 6px rgba(var(--ph-rgb), .5);
  --pg-glow-soft: 0 0 3px rgba(var(--ph-rgb), .33);
  --pg-line: rgba(var(--ph-rgb), .6);
  --lamp-house: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
  background: var(--bg);
}

/* GLASS (a notch down): the panel — matte face, one crisp edge, the tube's vignette inside, a quiet float shadow */
.glass { border-radius: 10px; background: var(--tube), var(--gd-face); box-shadow: inset 0 1px 0 var(--gd-light), 0 10px 28px rgba(0, 0, 0, .42); }
.hero { border-radius: 10px; border-color: rgba(var(--ph-rgb), .3); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 120% 100% at 50% 45%, transparent 62%, rgba(0, 0, 0, .34) 100%); box-shadow: inset 0 0 26px rgba(0, 0, 0, .38); }
.hero .chip, .hero .expand { z-index: 1; }
.tabs { background: color-mix(in srgb, var(--panel2) 96%, transparent); border-top-color: rgba(var(--ph-rgb), .2); }
.sheet { border-radius: 12px 12px 0 0; background: var(--tube), linear-gradient(168deg, rgba(var(--ph-rgb), .045), transparent 50%), var(--panel2); }
.viewer-plate { border-radius: 10px; background: linear-gradient(168deg, rgba(var(--ph-rgb), .045), transparent 50%), var(--panel2); }

/* cards and keys: 8px, the card fill, a crisp edge */
.btn, .icon-btn, .send, .file-chip, .row, .step, .well, .msg { border-radius: 8px; }
.btn, .icon-btn, .send, .file-chip { background: var(--cg-card); border-color: rgba(var(--ph-rgb), .3); box-shadow: inset 0 1px 0 var(--gd-light); }
.btn:is(:active,:focus-visible), .icon-btn:is(:active,:focus-visible), .send:active, .file-chip:active { background: var(--gd-hover); border-color: var(--lit-edge); box-shadow: var(--bloom); }
.btn.go { border-color: rgba(var(--ok-rgb), .55); } .btn.no { border-color: rgba(var(--bad-rgb), .5); }
.btn.quiet { background: transparent; border-color: transparent; box-shadow: none; }
.chip { border-radius: 6px; background: rgba(0, 0, 0, .55); border-color: rgba(var(--ph-rgb), .3); }
.compose-row { border-radius: 10px; background: var(--cg-card); border-color: rgba(var(--ph-rgb), .3); }
.compose-row:focus-within { border-color: var(--lit-edge); box-shadow: var(--bloom); }
textarea, input[type=text], input[type=search] { border-radius: 8px; border-color: rgba(var(--ph-rgb), .28); }
#toast { border-radius: 8px; background: var(--panel2); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }

/* CRT: phosphor type — titles glow with the fringe, secondary type glows softly */
.bar-title, .label, .mate b, .row .t b, .tab[aria-selected="true"], .push-h, .brand-mark, .fp, .hero-empty b,
.viewer-plate .t b, .ask .who, .msg .who, .qcard .q, .kv b { text-shadow: var(--pg-glow); }
.bar-sub, .mate em, .row .t span, .row .d, .chip, .lamp, .compose .to, .step, .working, .note-line, .label .more { text-shadow: var(--pg-glow-soft); }
.label, .compose .to, .tab, .ask .who, .msg .who { letter-spacing: 1.8px; }

/* CRT: a Pip-Boy section rule — the line runs to the edge and ends in a tick */
.label::after { height: 8px; align-self: center; margin-top: 7px; background:
  linear-gradient(var(--pg-line), var(--pg-line)) left top / 100% 1px no-repeat,
  linear-gradient(var(--pg-line), var(--pg-line)) right top / 1px 8px no-repeat; }
.label.gold::after { --pg-line: rgba(var(--gold-rgb), .6); background:
  linear-gradient(var(--pg-line), var(--pg-line)) left top / 100% 1px no-repeat,
  linear-gradient(var(--pg-line), var(--pg-line)) right top / 1px 8px no-repeat; }

/* CRT: the selection is a lit bar that blooms */
.row:is(button):is(:active,:focus-visible), .row.sel, .mate.sel, .mate:active, .tab[aria-selected="true"] {
  background: var(--gd-hover); border-color: var(--lit-edge); box-shadow: var(--bloom); }
.tab { border-radius: 8px; }
.tab[aria-selected="true"] { color: var(--ph-bright); }
.mate { border-radius: 10px; }

/* the portrait well and its housed lamp (the desk's crew cards): idle green, working amber, needs you gold */
.well { background: rgba(0, 0, 0, .32); border-color: var(--cg-hair); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); }
.well.sm { border-radius: 6px; }
.well .dot { left: auto; bottom: auto; right: 4px; top: 4px; width: 8px; height: 8px; outline: 0; z-index: 1; box-shadow: var(--lamp-house); }
.well.sm .dot { right: 3px; top: 3px; width: 7px; height: 7px; }
.dot.ok { box-shadow: var(--lamp-house), 0 0 5px rgba(var(--ok-rgb), .4); }
.dot.work { background: var(--ph); box-shadow: var(--lamp-house), 0 0 6px rgba(var(--ph-rgb), .5); }
.dot.ask { background: var(--gold); box-shadow: var(--lamp-house), 0 0 6px rgba(var(--gold-rgb), .55); }
.mate.ask { border-color: rgba(var(--gold-rgb), .5); background: var(--lit-gold); }
.mate.ask em { color: var(--gold); opacity: 1; }
.lamp i, .chip i { box-shadow: var(--lamp-house); }
.lamp.ok i, .chip.live i { box-shadow: var(--lamp-house), 0 0 5px rgba(var(--ok-rgb), .45); }

/* NEEDS YOU: the gold card, lit and blooming */
.ask, .qcard { border-radius: 10px; border-color: rgba(var(--gold-rgb), .55); background: var(--lit-gold), rgba(0, 0, 0, .3);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), .16); }
.ask pre, .md pre, .viewer-file pre { border-radius: 8px; border-left: 2px solid var(--ph-dim); background: rgba(0, 0, 0, .34); }

/* CONVERSATION: the agent on a phosphor rail, you on gold (comms.css); replies read like the desk's reports */
.msg { background: var(--cg-card); border: 1px solid var(--cg-hair); }
.msg.agent { border-left: 2px solid rgba(var(--ph-rgb), .55); }
.msg.user { border-right: 2px solid rgba(var(--gold-rgb), .6); }

/* New Horizon9 — the desktop's Colonnade Dawn palette, sized for a phone. */
:root {
  --ph: #6b4e0e; --ph-bright: #2a1d02; --ph-dim: #806b47; --ink: #fffaf0;
  --bg: #fbf6ea; --panel: #fffdf8; --panel2: #f6eedc; --text: #2a2116;
  --warn: #8a4b00; --bad: #b3261e; --gold: #8c6620; --ok: #1f6b3a; --link-down: #b3261e;
  --ph-rgb: 107,78,14; --ph-bright-rgb: 42,29,2; --gold-rgb: 164,123,38;
  --ok-rgb: 31,107,58; --bad-rgb: 179,38,30;
  --c9-gold: #c99a3c; --c9-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --c9-serif: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color-scheme: light;
}
body {
  --gd-edge: rgba(140,102,32,.28); --gd-light: rgba(255,255,255,.9);
  --gd-face: linear-gradient(150deg,#fffefa,#f8f1e4); --gd-hover: #f3e5c8;
  --gd-shadow: inset 0 1px 0 #fff, 0 6px 22px rgba(92,65,20,.07);
  --gd-comms-edge: rgba(140,102,32,.2); --cg-card: #fffdf8; --cg-hair: rgba(140,102,32,.23);
  --tube: linear-gradient(transparent,transparent); --pg-glow: none; --pg-glow-soft: none;
  --bloom: 0 0 0 3px rgba(201,154,60,.18); --lit-edge: #a77925;
  --lamp-house: 0 0 0 2px #fffdf8; --gut: 18px;
  background: linear-gradient(155deg,transparent 42%,rgba(210,197,173,.13) 43%,transparent 44%),
    linear-gradient(180deg,#cfe6f7 0,#eef4f6 120px,#fbf1dc 260px,#fbf6ea 520px);
  background-attachment: fixed;
  font-family: var(--c9-sans); font-size: 16px; line-height: 1.5;
}
body * { text-shadow: none !important; }
#deck { min-height: 100%; height: 100dvh; max-width: 760px; }
button, input, textarea { touch-action: manipulation; }
button { min-height: 44px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #8c6620; outline-offset: 3px;
}
.glass { border-radius: 16px; }
.pad { padding: 22px; gap: 16px; }
.setup { position: relative; padding: 32px var(--gut) calc(24px + env(safe-area-inset-bottom,0)); gap: 24px; }
.brand { flex-direction: row; gap: 14px; align-items: center; padding: 4px 0 16px; border-bottom: 1px solid var(--gd-edge); }
.brand-icon { flex: none; width: 64px; height: 64px; }
.brand-type { display: flex; flex-direction: column; gap: 8px; }
.brand-mark { font-family: var(--c9-serif); font-size: clamp(22px,6vw,28px); font-weight: 700; line-height: 1.1; letter-spacing: .6px; color: #8c6620; }
.brand-sub { font-size: 10px; font-weight: 700; letter-spacing: 5px; color: #806b47; }
.setup-intro { padding: 8px 4px 0; }
.eyebrow, .section-kicker { color: #8c6620; font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.setup h1 { margin: 12px 0; font-family: var(--c9-serif); font-size: clamp(36px,10vw,52px); font-weight: 400; line-height: 1.08; letter-spacing: -.8px; }
.setup h2 { margin: 0; font-family: var(--c9-serif); font-size: 25px; font-weight: 400; line-height: 1.25; }
.setup p { font-size: 15px; line-height: 1.6; }
.setup-intro p { max-width: 38ch; color: #66573e; }
.setup b, .steps b { font-weight: 650; }
.setup .hint { font-size: 13px; color: #6a5d46; opacity: 1; }
.setup .setup-foot { padding: 0 10px; font-size: 12px; text-align: center; color: #75644a; }
.btn, .btns .btn, .push-card.compact .btn { min-height: 46px; padding: 11px 16px; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: .15px; }
.btn.go { color: #fffdf8; background: linear-gradient(135deg,#9e7729,#795714); border-color: #795714; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.btn.go:is(:active,:focus-visible) { background: #795714; color: #fffdf8; }
.btn.no { color: #a22b23; background: #fff8f4; }
.btn.quiet { color: #68512a; }
.btn.done { color: #1f6b3a; background: #eef5e9; }
input, textarea, .setup input { min-height: 46px; font-size: 16px; line-height: 1.45; background: #fffdf8; border-color: var(--gd-edge); border-radius: 10px; }
.steps { font-size: 15px; line-height: 1.65; gap: 20px; padding-left: 20px; }
.setup .manual { font-size: 14px; }
.setup .manual summary { min-height: 44px; display: flex; align-items: center; color: #6b4e0e; opacity: 1; }
.fp { padding: 12px; background: #f5ecd7; border: 1px solid var(--gd-edge); border-radius: 10px; font: 600 21px ui-monospace,monospace; letter-spacing: 2px; text-align: center; overflow-wrap: anywhere; }
.bar { position: relative; gap: 9px; padding: 12px var(--gut) 18px; min-height: 78px; background: linear-gradient(180deg,#bfdff4,#f7ebc9); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-block: 1px solid #a6833c;
  background: repeating-linear-gradient(90deg,#b8995b 0 3px,#f9f0d9 3px 12px); opacity: .7; }
.bar-brand { color: #8c6620; font: 700 9px var(--c9-sans); letter-spacing: 2px; margin-bottom: 4px; }
.bar-title { font-family: var(--c9-serif); font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: .3px; }
.bar-sub { font-size: 12px; letter-spacing: 0; opacity: .8; }
.icon-btn, .hero .expand { width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: rgba(255,253,248,.8); border-radius: 10px; }
.lamp { max-width: 130px; white-space: normal; font-size: 9px; font-weight: 700; letter-spacing: .6px; line-height: 1.4; }
.lamp i { flex: none; }
main { padding-top: 18px; gap: 22px; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.label .more { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .3px; }
.note-line { font-size: 14px; color: #74654c; opacity: 1; line-height: 1.5; }
.hero { border-radius: 16px; border-color: rgba(140,102,32,.4); box-shadow: 0 8px 24px rgba(92,65,20,.12); background: #243039; }
.hero, .viewer { background: #bfdff4 url('/assets/olympus-dawn.jpg') center / cover no-repeat; }
.hero::after { display: none; }
.hero-empty b { color: #fff4d4; font-family: var(--c9-serif); font-size: 19px; letter-spacing: .6px; }
.hero-empty span { color: #e9e2d4; opacity: 1; font-size: 14px; }
.chip, .hero .chip { color: #493514; background: rgba(255,253,248,.95); border-color: var(--gd-edge); font-size: 10px; letter-spacing: .5px; }
.chip.live { color: #1f6b3a; }
.well { background: linear-gradient(180deg,#fffdf8,#efe4cd); box-shadow: inset 0 1px 4px rgba(140,102,32,.1); }
.mate { width: 88px; border-radius: 12px; }
.mate b { font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.mate em, .mate.work em.clock { font-size: 10px; letter-spacing: .2px; opacity: 1; color: #75664e; }
.row { min-height: 62px; padding-block: 12px; }
.row .t b { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.row .t span, .row .d { font-size: 12px; letter-spacing: 0; opacity: .85; }
.msg { padding: 14px; max-width: 96%; border-radius: 12px; }
.msg.user { background: #f4e9d2; }
.msg .who { font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.md { font-size: 15px; line-height: 1.65; }
.md pre, .md code { font-family: ui-monospace,monospace; font-size: 12px; }
.step, .working { font-size: 12px; line-height: 1.5; letter-spacing: 0; }
.compose { padding-top: 10px; background: rgba(251,246,234,.97); border-top: 1px solid var(--gd-edge); }
.compose .to { min-height: 44px; font-size: 11px; letter-spacing: .7px; }
.compose-row { background: #fffdf8; border-radius: 14px; }
.compose-row textarea { font-size: 16px; min-height: 48px; }
.send { width: 44px; min-width: 44px; height: 44px; margin: 3px; color: #fffdf8; background: #8c6620; }
.tabs { background: #f9f0df; gap: 8px; padding-top: 8px; }
.tab { min-height: 48px; font-size: 12px; font-weight: 650; letter-spacing: .6px; border-radius: 12px; }
.tab[aria-selected="true"] { background: #ecddba; border-color: rgba(140,102,32,.25); }
.tab .n { font: 600 10px/18px var(--c9-sans); color: #fffdf8; background: #8c6620; }
.sheet { background: #fffaf0; border: 1px solid var(--gd-edge); box-shadow: 0 -10px 40px rgba(60,42,14,.15); }
.viewer-plate { background: #fffaf0; }
.viewer-plate .t b { font-size: 16px; font-family: var(--c9-serif); letter-spacing: .5px; }
.viewer-plate .t span { font-size: 12px; }
.push-card .push-h, .push-card.compact .push-h { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; }
#toast { max-width: calc(100vw - 32px); background: #fffaf0; color: #493514; box-shadow: 0 8px 32px rgba(60,42,14,.15); font-size: 14px; line-height: 1.5; }
@media (max-width: 360px) { body { --gut: 14px; } .pad { padding: 18px; } .bar { gap: 6px; } .lamp { max-width: 92px; font-size: 8px; } }
@media (min-width: 600px) { .setup { padding-inline: 54px; max-width: 600px; width: 100%; margin: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.md b { color: var(--ph); text-shadow: 0 0 4px rgba(var(--ph-rgb), .38); }
.md .h { display: flex; align-items: center; gap: 9px; margin-top: 4px; font-size: .86em; letter-spacing: 2px; color: var(--ph); text-shadow: 0 0 5px rgba(var(--ph-rgb), .4); }
.md .h::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(var(--ph-rgb), .32); }
.md code { border-radius: 4px; background: rgba(var(--ph-rgb), .08); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.voice-mic { flex: none; align-self: flex-end; display: grid; place-items: center; width: 42px; min-width: 42px; height: 44px; margin: 3px 0 3px 2px; color: #8c6620; border-radius: 10px; }
.voice-mic svg { width: 21px; height: 21px; }
.voice-mic:is(:active,:focus-visible) { background: #f3e5c8; }
.voice-mic:disabled { opacity: .4; }
.voice-call { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto;
  padding: calc(28px + env(safe-area-inset-top,0)) 24px calc(28px + env(safe-area-inset-bottom,0));
  background: radial-gradient(ellipse at 50% 30%,rgba(255,253,246,.83),rgba(251,246,234,.97) 65%), url('/assets/olympus-dawn.jpg') center / cover; }
.voice-call-body { display: flex; align-items: center; flex-direction: column; width: min(100%,420px); min-height: min(650px,86dvh); text-align: center; }
.voice-kicker { margin-bottom: clamp(34px,8dvh,72px); color: #947339; font-size: 10px; letter-spacing: 2.4px; font-weight: 650; }
.voice-orbit { display: grid; place-items: center; width: 154px; height: 154px; flex: none; border: 1px solid rgba(184,139,53,.42); border-radius: 50%;
  background: radial-gradient(circle,#fffdf7 38%,#f5e7c6 71%,#cfae68 100%); box-shadow: 0 0 0 12px rgba(202,165,87,.06),0 18px 58px rgba(168,122,34,.13),inset 0 0 30px rgba(255,255,255,.9); }
.voice-orbit[data-phase="listening"], .voice-orbit[data-phase="speaking"] { border-color: #b48a3d; box-shadow: 0 0 0 12px rgba(202,165,87,.1),0 0 0 26px rgba(202,165,87,.04),0 18px 58px rgba(168,122,34,.17); }
.voice-portrait .well { width: 106px; height: 118px; border: 0; background: none; box-shadow: none; border-radius: 50%; font: 48px var(--c9-serif); color: #92702e; }
.voice-portrait .well img { max-width: 90px; max-height: 110px; }
.voice-call h2 { margin: 26px 0 4px; font: 400 clamp(28px,7vw,38px)/1.2 var(--c9-serif); color: #49351b; overflow-wrap: anywhere; }
.voice-call-status { margin: 8px 0 0; min-height: 22px; color: #8c6620; font-size: 14px; letter-spacing: .4px; }
.voice-detail { margin: 6px 0 0; max-width: 290px; min-height: 38px; font-size: 12px; line-height: 1.5; color: #817557; }
.voice-meter { --voice-level: 0; display: flex; align-items: center; justify-content: center; gap: 5px; height: 56px; margin-top: 12px; color: #b68b36; opacity: .5; }
.voice-meter i { display: block; width: 4px; height: 18px; background: currentColor; border-radius: 4px; transform: scaleY(calc(.28 + var(--voice-level)*.72)); transition: transform 90ms linear; }
.voice-meter i:nth-child(2), .voice-meter i:nth-child(6) { height: 28px; }
.voice-meter i:nth-child(3), .voice-meter i:nth-child(5) { height: 38px; }
.voice-meter i:nth-child(4) { height: 48px; }
.voice-meter[data-active="true"] { opacity: 1; }
.voice-captions { width: 100%; min-height: 72px; max-height: 22dvh; margin: 10px 0 28px; overflow-y: auto; }
.voice-caption { margin: 8px auto; color: #5c492c; font-size: 15px; line-height: 1.5; max-width: 36ch; }
.voice-caption.yours { color: #9a8461; font-size: 13px; }
.voice-end { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin-top: auto; padding: 14px 28px; border: 1px solid rgba(163,112,34,.35); border-radius: 32px; color: #fffdf7; background: linear-gradient(135deg,#aa8137,#805a20); box-shadow: 0 6px 24px rgba(132,94,28,.16); font-size: 14px; font-weight: 600; }
.voice-end svg { width: 22px; height: 22px; }
.voice-end:active { background: #795714; }

/* a long conversation opens on its newest page; the older part loads above, a page at a time */
.log > .earlier { align-self: center; font-size: 15px; min-height: 36px; text-shadow: var(--pg-glow-soft); }