/* Agent themes: every accent in this file reads these three colours. */
:root, :root[data-agent="friday"], [data-theme-agent="friday"] { --acc: 255, 138, 40; --acc-deep: 255, 100, 20; --acc-light: 255, 214, 168; }
:root[data-agent="jarvis"], [data-theme-agent="jarvis"] { --acc: 70, 190, 255; --acc-deep: 25, 120, 255; --acc-light: 200, 238, 255; }
:root[data-agent="edith"], [data-theme-agent="edith"] { --acc: 175, 115, 255; --acc-deep: 125, 60, 240; --acc-light: 228, 208, 255; }
:root[data-agent="ellie"], [data-theme-agent="ellie"] { --acc: 255, 110, 190; --acc-deep: 235, 60, 150; --acc-light: 255, 212, 236; }
:root[data-agent="alfred"], [data-theme-agent="alfred"] { --acc: 228, 232, 242; --acc-deep: 160, 168, 186; --acc-light: 255, 255, 255; }
:root[data-agent="ultron"], [data-theme-agent="ultron"] { --acc: 255, 36, 36; --acc-deep: 190, 0, 0; --acc-light: 255, 186, 186; }
body, .top, .panel, .chip, .agent-btn, .send, .msg, .ask, .hf-arc, .hf-seg { transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, stroke 0.6s ease; }

/* F.R.I.D.A.Y. — helmet HUD: icy hologram cyan, red-orange only for what matters.
   Layout: side panels fold to rails (wide), slide in as drawers (compact), or rise as sheets (phone). */
:root {
  --bg: #01050a;
  --holo: rgb(var(--acc));
  --holo-hi: rgb(var(--acc-light));
  --holo-dim: rgba(var(--acc), 0.5);
  --holo-faint: rgba(var(--acc), 0.13);
  --line: rgba(var(--acc), 0.3);
  --alert: #ff4d3a;
  --alert-dim: rgba(255, 77, 58, 0.55);
  --ok: #72f2c8;
  --text: #fbeee2;
  --muted: #6d93a8;
  --glow: 0 0 8px rgba(var(--acc), 0.55);
  --mono: "Share Tech Mono", ui-monospace, monospace;
  --side-w: clamp(260px, 23vw, 360px);
  --rail-w: 46px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: radial-gradient(ellipse at 50% 40%, #071a2a 0%, #020a13 45%, var(--bg) 100%) fixed, var(--bg);
  color: var(--text);
  font: 500 16px/1.4 "Rajdhani", system-ui, sans-serif;
  overflow: hidden;
}
.mono { font-family: var(--mono); letter-spacing: 0.06em; }
button { font: inherit; color: inherit; cursor: pointer; }

/* visor effects */
.fx-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 30, 55, 0.35) 78%, rgba(0, 0, 0, 0.85) 100%);
}
.fx-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(var(--acc), 0.035) 0 1px, transparent 1px 3px);
}
.edge { position: fixed; bottom: 0; width: 38vh; height: 38vh; pointer-events: none; z-index: 0; opacity: 0.45; }
.edge-l { left: 0; }
.edge-r { right: 0; }
.edge circle { fill: none; stroke: var(--holo); }
.e1 { stroke-opacity: 0.25; stroke-width: 1; }
.e2 { stroke-width: 6; stroke-dasharray: 2 9; stroke-opacity: 0.5; }
.e3 { stroke-width: 1.5; stroke-dasharray: 120 40 10 40; stroke-opacity: 0.7; }
.e4 { stroke-width: 2; stroke-dasharray: 60 160; stroke-opacity: 0.6; }
.edge-l .e-spin { transform-box: view-box; transform-origin: 0 400px; animation: spin 90s linear infinite; }
.edge-r .e-spin { transform-box: view-box; transform-origin: 400px 400px; animation: spin 90s linear infinite; }
.e-spin.rev { animation-direction: reverse; animation-duration: 120s; }

/* top bar */
.top {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--acc), 0.07), transparent);
}
.top::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: -5px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--holo-dim) 0 1px, transparent 1px 12px);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.brand { font-weight: 700; letter-spacing: 0.34em; color: var(--holo); text-shadow: var(--glow); font-size: 20px; white-space: nowrap; }
.brand span { margin-left: 12px; font-family: var(--mono); font-weight: 400; letter-spacing: 0.12em; color: var(--muted); font-size: 12px; text-transform: uppercase; text-shadow: none; }
.top-mid { display: flex; gap: 18px; align-items: center; color: var(--muted); font-size: 12px; white-space: nowrap; }
.link { letter-spacing: 0.2em; text-transform: uppercase; }
.link::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--alert); vertical-align: 0; }
.link.on { color: var(--holo); }
.link.on::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.top-right { display: flex; gap: 8px; align-items: center; }
.chip {
  background: rgba(var(--acc), 0.04); border: 1px solid var(--line); padding: 6px 12px; white-space: nowrap;
  color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.chip:hover { color: var(--holo-hi); border-color: var(--holo-dim); }
/* quiet: no pulsing, no pop-ups; just a number */
.notif.has { color: var(--holo); }
.notif.urgent { color: var(--alert); border-color: var(--alert-dim); }

/* ---------- layout ---------- */
.hud {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; padding: 20px 26px;
  perspective: 1600px; perspective-origin: 50% 45%;
}
.side { display: flex; min-height: 0; }

/* rail: a folded panel, still showing its one number */
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: var(--rail-w); padding: 16px 0;
  background: linear-gradient(180deg, rgba(var(--acc), 0.09), rgba(var(--acc), 0.02));
  border: 1px solid var(--line); color: var(--holo);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.rail:hover { border-color: var(--holo-dim); box-shadow: 0 0 16px rgba(var(--acc), 0.15); color: var(--holo-hi); }
.rail-label { writing-mode: vertical-rl; }
.rail-val { color: var(--holo-hi); font-size: 13px; letter-spacing: 0.04em; }
.rail-val.pri { color: var(--alert); }

/* panel */
.panel {
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  width: var(--w, var(--side-w));
  background: linear-gradient(160deg, rgba(var(--acc), 0.12), rgba(4, 22, 38, 0.35) 55%, rgba(4, 22, 38, 0.15));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 40px rgba(var(--acc), 0.06), 0 0 30px rgba(var(--acc), 0.05);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--holo); filter: drop-shadow(0 0 4px var(--holo)); pointer-events: none; z-index: 2; }
.panel::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.panel::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 16px; scrollbar-width: thin; scrollbar-color: var(--holo-faint) transparent; }
/* resize handle: lives outside the angled panel (3D panels swallow clicks); JS lines it up with the visible edge */
.grip { position: absolute; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 3; touch-action: none; display: none; }
.grip:hover, .grip.dragging { background: linear-gradient(90deg, transparent 3px, var(--holo-dim) 3px 5px, transparent 5px); }

.panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; margin-bottom: 12px; border-bottom: 1px solid var(--holo-faint); flex: none; }
.panel-head.sub { padding: 0 0 8px; margin-top: 22px; }
h2 { margin: 0; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--holo); font-weight: 600; text-shadow: var(--glow); }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; padding: 1px 6px; border: 1px solid var(--holo-dim); color: var(--holo); }
.tag.alert { color: var(--alert); border-color: var(--alert-dim); text-shadow: 0 0 6px rgba(255, 77, 58, 0.6); }
.fold { margin-left: auto; width: 28px; height: 24px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 16px; line-height: 1; }
.fold:hover { color: var(--holo-hi); border-color: var(--holo-dim); }

.scrim { position: absolute; inset: 0; z-index: 15; background: rgba(0, 4, 9, 0.62); }
.scrim[hidden] { display: none; }

/* wide: panels sit in the visor, angled; folded ones become rails */
@media (min-width: 1180px) {
  .side { position: relative; }
  .side.open .grip { display: block; }
  .side .panel { display: none; }
  .side.open .rail { display: none; }
  .side.open .panel { display: flex; }
  .side.left.open .panel { transform: rotateY(14deg); transform-origin: 0 50%; }
  .side.right.open .panel { transform: rotateY(-14deg); transform-origin: 100% 50%; }
  .scrim { display: none !important; }
}

/* compact: rails stay, panels slide in over the centre */
@media (max-width: 1179px) {
  .hud { perspective: none; gap: 14px; padding: 14px 16px; }
  .side .panel { display: none; position: absolute; top: 12px; bottom: 12px; z-index: 16; width: min(380px, calc(100% - 32px)); background: rgba(2, 12, 22, 0.97); }
  .side.left .panel { left: 16px; }
  .side.right .panel { right: 16px; }
  .side.open .panel { display: flex; }
  .side.open .rail { border-color: var(--holo); color: var(--holo-hi); }
}

/* phone: rails become two buttons up top, panels rise as sheets */
@media (max-width: 639px) {
  .hud { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "l r" "c c"; gap: 10px; padding: 10px 12px 12px; }
  .side.left { grid-area: l; }
  .side.right { grid-area: r; }
  .center { grid-area: c; }
  .rail { width: 100%; flex-direction: row; justify-content: space-between; padding: 10px 14px; }
  .rail-label { writing-mode: horizontal-tb; }
  .side .panel { top: auto; bottom: 0; left: 0 !important; right: 0 !important; width: 100%; height: 82%; border-bottom: 0; }
}

/* ---------- gauges ---------- */
.gauge-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gauge { width: 104px; height: 104px; flex: none; overflow: visible; }
.gauge circle { fill: none; stroke: var(--holo); }
.g-ticks { stroke-width: 4; stroke-dasharray: 1 6.33; stroke-opacity: 0.45; }
.g-track { stroke-width: 6; stroke-opacity: 0.12; }
.g-arc { stroke-width: 6; stroke-dasharray: 0 289; filter: drop-shadow(0 0 4px var(--holo)); transition: stroke-dasharray 0.6s ease; }
.g-inner { stroke-width: 1; stroke-opacity: 0.35; stroke-dasharray: 30 8; }
.g-val { fill: var(--holo-hi); font: 600 20px "Rajdhani", sans-serif; text-anchor: middle; letter-spacing: 0.04em; }
.g-cap { fill: var(--muted); font: 9px var(--mono); text-anchor: middle; letter-spacing: 0.2em; }
.gauge-meta { font-size: 12px; color: var(--muted); line-height: 1.7; }
.gauge-meta b { color: var(--holo); font-weight: 400; }
.gauge-meta .warn { color: var(--alert); }

/* ---------- machines ---------- */
.machine { border-left: 2px solid var(--holo-faint); padding: 2px 0 8px 12px; margin-bottom: 12px; }
.machine.on { border-left-color: var(--holo); }
.m-head { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0; background: none; border: 0; text-align: left; }
.m-name { font-weight: 700; letter-spacing: 0.14em; font-size: 17px; text-transform: uppercase; color: var(--holo-hi); }
.m-name::before { content: "▾"; display: inline-block; width: 14px; color: var(--muted); font-size: 12px; transition: transform 0.15s; }
.machine.folded .m-name::before { transform: rotate(-90deg); }
.m-head:hover .m-name { text-shadow: var(--glow); }
.m-state { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alert); white-space: nowrap; }
.machine.on .m-state { color: var(--ok); }
.m-meta { font-family: var(--mono); color: var(--muted); font-size: 11px; margin: 2px 0 6px 14px; }
.sess { display: flex; gap: 8px; align-items: center; font-size: 15px; padding: 3px 0; color: #b9dcea; cursor: pointer; }
.sess:hover { color: var(--holo-hi); text-shadow: var(--glow); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; opacity: 0.6; }
.dot.working { background: var(--holo); box-shadow: 0 0 8px var(--holo); opacity: 1; }
.sess .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more { background: none; border: 0; padding: 4px 0; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.more:hover { color: var(--holo); }
.empty { color: var(--muted); font-size: 15px; }

/* ---------- centre ---------- */
.center { display: flex; flex-direction: column; align-items: center; min-height: 0; min-width: 0; }
.core { position: relative; width: clamp(140px, min(30vw, 36vh), 330px); aspect-ratio: 1; margin-top: 4px; flex: none; transition: width 0.3s ease; }
body.zen .core { width: clamp(180px, min(40vw, 46vh), 430px); }
.core svg { width: 100%; height: 100%; overflow: visible; }
.core circle { fill: none; stroke: var(--holo); }
.c-ticks { stroke-width: 6; stroke-dasharray: 1.2 11.19; stroke-opacity: 0.5; }
.c0 { stroke-opacity: 0.22; stroke-width: 1; }
.c1 { stroke-width: 2; stroke-dasharray: 90 30 10 30; stroke-opacity: 0.85; filter: drop-shadow(0 0 3px var(--holo)); }
.c2 { stroke-width: 8; stroke-dasharray: 2 8; stroke-opacity: 0.45; }
.c3 { stroke-width: 1.5; stroke-dasharray: 160 70; stroke-opacity: 0.9; }
.c4 { stroke-width: 1; stroke-opacity: 0.45; }
.core .heart { fill: rgba(var(--acc), 0.1); stroke-width: 2; filter: drop-shadow(0 0 16px var(--holo)); }
.spin { transform-origin: 150px 150px; animation: spin 40s linear infinite; }
.s2 { animation-duration: 64s; animation-direction: reverse; }
.s3 { animation-duration: 26s; }
.core.listening .spin, .core.thinking .spin { animation-duration: 4s; }
.core.speaking .heart { animation: talk 0.45s ease-in-out infinite alternate; }
.core.listening .heart { fill: rgba(114, 242, 200, 0.14); stroke: var(--ok); }
.core-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(9px, 0.8vw, 11px); letter-spacing: 0.3em; color: var(--holo-hi); pointer-events: none; text-shadow: var(--glow); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes talk { from { fill: rgba(var(--acc), 0.08); } to { fill: rgba(var(--acc), 0.42); } }
@media (prefers-reduced-motion: reduce) { .spin, .e-spin, .core.speaking .heart { animation: none; } .core { transition: none; } }

.subtitle { text-align: center; font-size: clamp(17px, 0.6vw + 13px, 23px); color: var(--holo-hi); text-shadow: var(--glow); max-width: 680px; min-height: 28px; margin: 10px 0 12px; padding: 0 8px; }
.chat {
  width: 100%; max-width: 720px; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 10px;
  mask-image: linear-gradient(transparent, #000 48px); scrollbar-width: none;
}
.msg { max-width: 85%; padding: 7px 12px; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; color: #b9dcea; border-right: 2px solid var(--holo-faint); text-align: right; }
.msg.friday { align-self: flex-start; border-left: 2px solid var(--holo); background: linear-gradient(90deg, rgba(var(--acc), 0.08), transparent); }
.ask { width: 100%; max-width: 720px; display: flex; gap: 8px; padding-top: 8px; flex: none; }
.ask input {
  flex: 1; min-width: 0; background: rgba(0, 12, 22, 0.7); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 17px; padding: 12px 14px; outline: none;
}
.ask input::placeholder { color: var(--muted); }
.ask input:focus { border-color: var(--holo); box-shadow: 0 0 14px rgba(var(--acc), 0.25); }
.mic { width: 48px; flex: none; border: 1px solid var(--line); background: rgba(var(--acc), 0.05); color: var(--holo); display: grid; place-items: center; }
.mic:hover { border-color: var(--holo); }
.mic.live { background: var(--ok); color: #02140d; border-color: var(--ok); }
.send {
  background: var(--holo); color: #01121c; border: 0; padding: 0 20px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.send:hover { background: var(--holo-hi); }

/* ---------- right: one thing at a time ---------- */
.now .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--holo); margin-bottom: 4px; }
.now .label.pri { color: var(--alert); }
.now .text { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--holo-hi); }
.now .queued { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; }
.lockin {
  margin-top: 12px; width: 100%; background: transparent; border: 1px solid var(--holo-dim); color: var(--holo);
  padding: 9px; letter-spacing: 0.24em; text-transform: uppercase; font-family: var(--mono); font-size: 12px;
}
.lockin:hover { background: rgba(var(--acc), 0.1); color: var(--holo-hi); }
.feed .f { font-family: var(--mono); font-size: 11.5px; padding: 6px 0; border-bottom: 1px solid rgba(var(--acc), 0.06); color: #8fb3c4; line-height: 1.5; overflow-wrap: anywhere; }
.feed .f b { color: var(--holo); font-weight: 400; margin-right: 6px; }
.feed .f time { color: var(--muted); margin-right: 6px; }

/* ---------- focus mode ---------- */
.focus {
  position: fixed; inset: 0; z-index: 20; padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 34, 54, 0.98), rgba(1, 5, 10, 0.995) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.focus[hidden], .gate[hidden] { display: none; }
.focus-top { position: absolute; top: 18px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.focus-title { color: var(--holo); letter-spacing: 0.34em; text-transform: uppercase; font-weight: 700; text-shadow: var(--glow); }
.focus-count { color: var(--muted); font-size: 13px; }
.focus-card { position: relative; max-width: 780px; width: 100%; text-align: center; padding: 44px 36px; border: 1px solid var(--holo-faint); background: linear-gradient(160deg, rgba(var(--acc), 0.08), transparent 60%); }
.focus-card::before, .focus-card::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--holo); filter: drop-shadow(0 0 5px var(--holo)); }
.focus-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.focus-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.focus-card .src { font-family: var(--mono); color: var(--holo-dim); letter-spacing: 0.22em; text-transform: uppercase; font-size: 12px; margin-bottom: 16px; }
.focus-card .src .pri { color: var(--alert); }
.focus-card .big { font-size: clamp(28px, 5vw, 52px); font-weight: 700; line-height: 1.12; color: var(--holo-hi); text-shadow: 0 0 18px rgba(var(--acc), 0.45); overflow-wrap: anywhere; }
.focus-card .body { color: #b9dcea; font-size: 19px; margin-top: 20px; white-space: pre-wrap; text-align: left; max-height: 40vh; overflow: auto; }
.focus-card a { color: var(--holo); }
.focus-actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.focus-actions button {
  padding: 14px 30px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; font-size: 14px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.focus-actions .primary { background: var(--holo); color: #01121c; border: 0; }
.focus-actions .primary:hover { background: var(--holo-hi); }
.focus-actions .ghost { background: rgba(var(--acc), 0.05); color: var(--muted); border: 1px solid var(--line); }

.gate { position: fixed; inset: 0; z-index: 25; background: var(--bg); display: grid; place-items: center; }
.gate-box { display: flex; flex-direction: column; gap: 12px; width: min(320px, 90vw); text-align: center; color: var(--muted); }
.gate-box input { background: #000; border: 1px solid var(--line); color: var(--text); padding: 12px; font: inherit; }
.gate-box .send { padding: 12px; }

/* ---------- small screens: trim the chrome ---------- */
@media (max-width: 1000px) {
  .brand span { display: none; }
  .edge { width: 26vh; height: 26vh; opacity: 0.3; }
}
@media (max-width: 560px) {
  .top { padding: 10px 14px; }
  .brand { font-size: 17px; letter-spacing: 0.26em; }
  #clock { display: none; }
  .chip { padding: 6px 9px; }
  .focus-card { padding: 32px 20px; }
  .focus-top { left: 16px; right: 16px; }
}


/* =====================================================================
   GLOW PASS — real light, not flat colour.
   Bright near-white cores with cyan halos, glass panels, bloom, haze, grain.
   ===================================================================== */
:root {
  --core-light: #fff1e2;
  --bloom-text: 0 0 1px rgba(234, 252, 255, 0.9), 0 0 6px rgba(var(--acc), 0.85), 0 0 18px rgba(var(--acc), 0.45), 0 0 38px rgba(var(--acc), 0.25);
  --bloom-soft: 0 0 4px rgba(var(--acc), 0.6), 0 0 14px rgba(var(--acc), 0.3);
  --bloom-alert: 0 0 1px rgba(255, 220, 210, 0.9), 0 0 6px rgba(255, 77, 58, 0.9), 0 0 18px rgba(255, 77, 58, 0.45);
  --edge-glow: 0 0 0 1px rgba(var(--acc), 0.18), 0 0 14px rgba(var(--acc), 0.22), 0 0 42px rgba(var(--acc), 0.12);
}

/* atmosphere: light haze behind the visor + fine grain on top */
.fx-haze {
  position: fixed; inset: -10%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 30% at 50% 32%, rgba(var(--acc), 0.16), transparent 70%),
    radial-gradient(30% 50% at 0% 60%, rgba(var(--acc), 0.10), transparent 70%),
    radial-gradient(30% 50% at 100% 60%, rgba(var(--acc), 0.10), transparent 70%);
  filter: blur(10px);
  animation: breathe 9s ease-in-out infinite alternate;
}
.fx-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 31; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes breathe { from { opacity: 0.75; } to { opacity: 1; } }

/* text that emits light */
.brand, h2, .focus-title { color: var(--core-light); text-shadow: var(--bloom-text); }
.subtitle, .now .text, .m-name, .g-val { color: var(--core-light); text-shadow: var(--bloom-text); }
.focus-card .big { color: #f2fdff; text-shadow: 0 0 2px #fff, 0 0 10px rgba(var(--acc), 0.9), 0 0 30px rgba(var(--acc), 0.55), 0 0 70px rgba(var(--acc), 0.35); }
.core-label { color: #fff; text-shadow: var(--bloom-text); }
.tag, .rail, .m-meta, .gauge-meta, .feed .f b, .link.on, .lockin, .chip.notif.has { text-shadow: var(--bloom-soft); }
.tag.alert, .now .label.pri, .focus-card .src .pri, .gauge-meta .warn, .rail-val.pri, .notif.urgent { text-shadow: var(--bloom-alert); }
.sess { text-shadow: 0 0 6px rgba(var(--acc), 0.25); }
.g-val { filter: drop-shadow(0 0 6px rgba(var(--acc), 0.6)); }

/* glass panels with lit edges and a slow light sweep */
.panel, .rail, .focus-card {
  background:
    linear-gradient(115deg, transparent 30%, rgba(var(--acc-light), 0.07) 45%, transparent 60%) 0 0 / 300% 100%,
    linear-gradient(160deg, rgba(var(--acc), 0.16), rgba(6, 30, 52, 0.42) 55%, rgba(4, 22, 38, 0.22));
  border-color: rgba(var(--acc), 0.42);
  box-shadow: var(--edge-glow), inset 0 1px 0 rgba(var(--acc-light), 0.18), inset 0 0 50px rgba(var(--acc), 0.08);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  animation: sweep 14s linear infinite;
}
@keyframes sweep { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
.panel::before, .panel::after, .focus-card::before, .focus-card::after { border-color: var(--core-light); filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--holo)) drop-shadow(0 0 18px rgba(var(--acc), 0.5)); }
.panel-head { border-bottom: 0; position: relative; }
.panel-head::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc-light), 0.8), transparent); box-shadow: 0 0 8px rgba(var(--acc), 0.6); }
.panel-head.sub::after { left: 0; right: 0; }
.top { border-bottom-color: transparent; }
.top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc-light), 0.9) 30%, rgba(var(--acc-light), 0.9) 70%, transparent); box-shadow: 0 0 10px rgba(var(--acc), 0.8), 0 0 24px rgba(var(--acc), 0.4); }

/* lit controls */
.chip, .fold, .mic, .ask input, .lockin, .focus-actions .ghost { box-shadow: 0 0 10px rgba(var(--acc), 0.12), inset 0 0 12px rgba(var(--acc), 0.05); }
.chip:hover, .fold:hover, .mic:hover, .lockin:hover, .rail:hover { box-shadow: 0 0 6px rgba(var(--acc), 0.5), 0 0 22px rgba(var(--acc), 0.3), inset 0 0 14px rgba(var(--acc), 0.12); }
.send, .focus-actions .primary {
  background: linear-gradient(180deg, rgb(var(--acc-light)), rgb(var(--acc)) 60%, rgb(var(--acc-deep)));
  box-shadow: 0 0 6px rgba(var(--acc), 0.9), 0 0 22px rgba(var(--acc), 0.55), 0 0 50px rgba(var(--acc), 0.3);
  filter: drop-shadow(0 0 8px rgba(var(--acc), 0.7));
}
.ask input:focus { box-shadow: 0 0 6px rgba(var(--acc), 0.6), 0 0 24px rgba(var(--acc), 0.3), inset 0 0 14px rgba(var(--acc), 0.1); }
.msg.friday { background: linear-gradient(90deg, rgba(var(--acc), 0.13), transparent 80%); border-left-color: var(--core-light); box-shadow: -4px 0 14px -6px rgba(var(--acc), 0.9); }

/* the core: a real light source */
.core::before {
  content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--acc-light), 0.28) 0%, rgba(var(--acc), 0.12) 35%, transparent 65%);
  filter: blur(6px);
  animation: breathe 4s ease-in-out infinite alternate;
}
.core circle { stroke: rgb(var(--acc-light)); }
.core .heart { fill: rgba(var(--acc-light), 0.16); stroke: var(--core-light); stroke-width: 2.5; }
.core.speaking::before { animation: talk-glow 0.45s ease-in-out infinite alternate; }
@keyframes talk-glow { from { opacity: 0.6; transform: scale(0.97); } to { opacity: 1; transform: scale(1.04); } }
.gauge circle { stroke: rgb(var(--acc-light)); }
.g-arc { stroke: var(--core-light); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--holo)) drop-shadow(0 0 14px rgba(var(--acc), 0.6)); }
.dot.working { background: #fff; box-shadow: 0 0 4px #fff, 0 0 10px var(--holo), 0 0 18px var(--holo); }
.link.on::before { box-shadow: 0 0 4px #fff, 0 0 10px var(--ok), 0 0 20px var(--ok); }
.edge { opacity: 0.6; filter: drop-shadow(0 0 4px rgba(var(--acc), 0.7)); }

@media (prefers-reduced-motion: reduce) { .fx-haze, .panel, .rail, .focus-card, .core::before { animation: none; } }


/* =====================================================================
   ELECTRIC PASS — vivid blueprint blue, particle core, agent network.
   ===================================================================== */
:root { --gold: #ffd65a; }
body { background: radial-gradient(ellipse 80% 70% at 50% 42%, #0e4fb8 0%, #083a8f 32%, #04215a 62%, #020d2b 100%) fixed, #020d2b; }
.fx-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
  background-image:
    linear-gradient(rgba(var(--acc), 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--acc), 0.10) 1px, transparent 1px),
    linear-gradient(rgba(var(--acc), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--acc), 0.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 85%);
}
.fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 10, 40, 0.45) 80%, rgba(0, 4, 20, 0.85) 100%); }
.fx-haze { background: radial-gradient(40% 35% at 50% 40%, rgba(var(--acc), 0.22), transparent 70%), radial-gradient(30% 50% at 0% 60%, rgba(var(--acc), 0.14), transparent 70%), radial-gradient(30% 50% at 100% 60%, rgba(var(--acc), 0.14), transparent 70%); }
.panel, .rail, .focus-card {
  background:
    linear-gradient(115deg, transparent 30%, rgba(var(--acc-light), 0.08) 45%, transparent 60%) 0 0 / 300% 100%,
    linear-gradient(160deg, rgba(var(--acc), 0.20), rgba(8, 40, 110, 0.45) 55%, rgba(6, 30, 85, 0.30));
}
@media (max-width: 1179px) { .side .panel { background: rgba(5, 28, 80, 0.96); } }
.focus { background: radial-gradient(ellipse at 50% 45%, rgba(var(--acc-deep), 0.97), rgba(2, 13, 43, 0.99) 70%); }
.ask input { background: rgba(4, 24, 70, 0.75); }

/* clock, MRR-style */
#clock { font-size: 11px; color: rgba(var(--acc-light), 0.8); }
#clock b { font-weight: 400; font-size: 17px; letter-spacing: 0.08em; color: #f0fbff; text-shadow: var(--bloom-text); margin-right: 6px; }

/* centre stage */
.stage { position: relative; width: 100%; flex: 1 1 auto; min-height: 240px; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voicebar { position: relative; width: min(340px, 90%); height: 46px; flex: none; margin-top: 2px; }
.voicebar canvas { position: absolute; inset: 0 0 14px; width: 100%; height: 32px; }
.voice-label { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 11px; letter-spacing: 0.4em; color: #f0fbff; text-shadow: var(--bloom-text); }
.voice-label[data-mode="speaking"] { color: #fff6d6; text-shadow: 0 0 2px #fff, 0 0 8px var(--gold), 0 0 20px rgba(var(--acc-light), 0.6); }
.subtitle { margin: 6px 0 8px; }
.chat { flex: 0 1 auto; max-height: 22vh; }


/* =====================================================================
   APPLE PASS — visionOS-style glass: rounded, soft depth, clean type.
   ===================================================================== */
:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Share Tech Mono", monospace;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 40%, rgba(var(--acc), 0.06));
  --glass-border: rgba(255, 255, 255, 0.18);
  --depth: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset, 0 24px 60px -12px rgba(0, 10, 40, 0.55), 0 8px 20px -8px rgba(0, 10, 40, 0.4), 0 0 40px rgba(var(--acc), 0.10);
  --radius: 22px;
}
body { font-family: var(--sf); font-weight: 400; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
.fx-scan { opacity: 0.18; }
.fx-grain { opacity: 0.04; }

/* glass cards */
.panel, .rail, .focus-card {
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: var(--depth);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  animation: none;
}
.panel::before, .panel::after, .focus-card::before, .focus-card::after { display: none; }
@media (max-width: 1179px) { .side .panel { background: rgba(14, 50, 120, 0.72); } }
.panel { transition: box-shadow 0.3s ease; }
.panel-head { padding: 16px 18px 10px; margin-bottom: 8px; }
.panel-head::after { left: 18px; right: 18px; background: rgba(255, 255, 255, 0.10); box-shadow: none; }
.panel-head.sub::after { left: 0; right: 0; }
h2 { font-family: var(--sf); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: #fff; text-shadow: 0 0 12px rgba(var(--acc), 0.35); }
.tag { border: 0; border-radius: 999px; padding: 2px 8px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-family: var(--sf); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; text-shadow: none; }
.tag.alert { background: rgba(255, 77, 58, 0.22); color: #ffb1a6; text-shadow: none; }
.fold { border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); width: 28px; height: 28px; box-shadow: none; }
.fold:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* rails: slim glass pills */
.rail { border-radius: 999px; font-family: var(--sf); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.85); text-shadow: none; transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), background 0.2s; }
.rail:hover { transform: scale(1.03); background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); }
.rail-val { font-family: var(--sf); font-weight: 700; font-size: 13px; color: #fff; }

/* top bar: quiet, clean */
.top { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent); }
.top::after { display: none; }
.top::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.25) 70%, transparent); box-shadow: 0 0 12px rgba(var(--acc), 0.4); }
.brand { font-family: var(--sf); font-weight: 700; letter-spacing: 0.28em; font-size: 17px; }
.chip { clip-path: none; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--depth); font-family: var(--sf); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: rgba(255, 255, 255, 0.85); padding: 7px 14px; backdrop-filter: blur(20px) saturate(180%); }
.chip:hover { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)); }
.notif.urgent { color: #ffb1a6; border-color: rgba(255, 120, 100, 0.45); }
#clock b { font-family: var(--sf); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.link { font-family: var(--sf); font-weight: 600; letter-spacing: 0.08em; }

/* type inside panels */
.m-name { font-family: var(--sf); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
.m-name::before { color: rgba(255, 255, 255, 0.5); }
.sess { font-family: var(--sf); font-size: 14px; color: rgba(235, 247, 255, 0.88); text-shadow: none; padding: 5px 8px; margin: 0 -8px; border-radius: 10px; transition: background 0.15s; }
.sess:hover { background: rgba(255, 255, 255, 0.08); text-shadow: none; }
.now .text { font-family: var(--sf); font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.now .label { font-family: var(--sf); font-weight: 600; letter-spacing: 0.06em; }
.lockin { border-radius: 999px; border: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); color: #fff; font-family: var(--sf); font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 14px; padding: 11px; box-shadow: var(--depth); text-shadow: none; }
.lockin:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12)); }
.more { font-family: var(--sf); font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 12px; }
.g-val { font-family: var(--sf); font-weight: 700; font-size: 19px; }
.g-cap { font-family: var(--sf); font-weight: 600; letter-spacing: 0.12em; }
.machine { border-left: 0; padding-left: 0; }

/* centre */
.subtitle { font-family: var(--sf); font-weight: 600; font-size: clamp(17px, 0.5vw + 13px, 22px); letter-spacing: -0.01em; }
.voice-label { font-family: var(--sf); font-weight: 600; letter-spacing: 0.3em; }
.msg { font-family: var(--sf); font-size: 15px; border-radius: 18px; padding: 9px 14px; }
.msg.user { border: 0; background: linear-gradient(180deg, rgba(var(--acc), 0.55), rgba(20, 120, 135, 0.6)); color: #fff; text-align: left; box-shadow: 0 6px 18px -8px rgba(0, 20, 60, 0.6); border-bottom-right-radius: 6px; }
.msg.friday { border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--depth); border-bottom-left-radius: 6px; backdrop-filter: blur(20px) saturate(180%); }

/* one pill input bar, Siri-like */
.ask { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 6px; box-shadow: var(--depth); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); margin-top: 6px; }
.ask input { background: transparent; border: 0; box-shadow: none; border-radius: 999px; font-family: var(--sf); font-size: 16px; padding: 10px 8px; }
.ask input:focus { box-shadow: none; }
.ask:focus-within { border-color: rgba(var(--acc-light), 0.6); box-shadow: var(--depth), 0 0 0 4px rgba(var(--acc), 0.18); }
.mic { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }
.mic:hover { background: rgba(255, 255, 255, 0.22); }
.mic.live { background: var(--ok); color: #02140d; }
.send, .focus-actions .primary {
  clip-path: none; border-radius: 999px; font-family: var(--sf); font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: 15px;
  background: linear-gradient(180deg, #ffffff, #ffe3c7); color: #3a1803;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px -6px rgba(0, 20, 70, 0.6), 0 0 24px rgba(var(--acc), 0.35);
  filter: none; transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}
.send:hover, .focus-actions .primary:hover { transform: translateY(-1px) scale(1.02); background: #fff; }
.send:active, .focus-actions .primary:active { transform: scale(0.97); }

/* focus mode: one big glass card */
.focus-card { border-radius: 30px; padding: 48px 40px; }
.focus-card .big { font-family: var(--sf); font-weight: 700; letter-spacing: -0.025em; }
.focus-card .src { font-family: var(--sf); font-weight: 600; letter-spacing: 0.08em; }
.focus-title { font-family: var(--sf); letter-spacing: 0.2em; }
.focus-actions button { clip-path: none; border-radius: 999px; font-family: var(--sf); font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: 15px; padding: 14px 30px; }
.focus-actions .ghost { background: var(--glass); border: 1px solid var(--glass-border); color: #fff; box-shadow: var(--depth); }
.gate-box input { border-radius: 14px; }
.gate-box .send { padding: 12px; }

/* =====================================================================
   DARK AMBIENCE — near-black room, blue light pooling around Friday.
   ===================================================================== */
body {
  background:
    radial-gradient(ellipse 55% 45% at 50% 38%, rgba(var(--acc), 0.28), transparent 70%),
    radial-gradient(ellipse 40% 60% at -5% 70%, rgba(var(--acc-deep), 0.18), transparent 70%),
    radial-gradient(ellipse 40% 60% at 105% 70%, rgba(var(--acc-deep), 0.18), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(var(--acc-deep), 0.22), transparent 70%),
    #02040a;
  background-attachment: fixed;
}
.fx-grid { opacity: 0.28; }
.fx-haze {
  background:
    radial-gradient(35% 30% at 50% 38%, rgba(var(--acc), 0.20), transparent 70%),
    radial-gradient(25% 45% at 0% 65%, rgba(var(--acc), 0.10), transparent 70%),
    radial-gradient(25% 45% at 100% 65%, rgba(var(--acc), 0.10), transparent 70%);
}
.fx-vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 2, 8, 0.55) 78%, rgba(0, 0, 0, 0.9) 100%); }
:root { --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 40%, rgba(var(--acc), 0.05)); --glass-border: rgba(255, 255, 255, 0.13); }
@media (max-width: 1179px) { .side .panel { background: rgba(6, 14, 34, 0.86); } }
.focus { background: radial-gradient(ellipse at 50% 45%, rgba(10, 100, 120, 0.35), rgba(2, 4, 10, 0.985) 65%); }
.gate { background: #02040a; }

/* =====================================================================
   SPACE DARK — near-black, blue ambient light only, no grid.
   ===================================================================== */
.fx-grid { display: none; }
body {
  background:
    radial-gradient(ellipse 50% 40% at 50% 38%, rgba(var(--acc), 0.24), transparent 70%),
    radial-gradient(ellipse 40% 30% at 82% 82%, rgba(var(--acc), 0.12), transparent 70%),
    radial-gradient(ellipse 40% 60% at -5% 70%, rgba(10, 110, 130, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 60% at 105% 70%, rgba(10, 110, 130, 0.12), transparent 70%),
    #010208;
  background-attachment: fixed;
}
.edge { opacity: 0.35; }

/* No chat transcript: Friday's latest line (the subtitle) is the only conversation on screen. */
.chat { display: none; }
.subtitle { margin: 8px 0 14px; max-width: 760px; }

/* =====================================================================
   MIC — pulsing ripples while listening; the input becomes a voice note.
   ===================================================================== */
.ask { position: relative; }
.mic { position: relative; overflow: visible; transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), background 0.2s; }
.mic.live { background: radial-gradient(circle at 50% 40%, #b9ffe6, #72f2c8 60%, #3fcf9f); color: #03271b; transform: scale(1.06); box-shadow: 0 0 12px rgba(114, 242, 200, 0.9), 0 0 32px rgba(114, 242, 200, 0.45); }
.mic.live::before, .mic.live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(114, 242, 200, 0.7);
  animation: ripple 1.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.mic.live::after { animation-delay: 0.8s; }
@keyframes ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
.mic.live svg { animation: mic-beat 1.1s ease-in-out infinite; }
@keyframes mic-beat { 50% { transform: scale(1.12); } }

.note { position: absolute; left: 58px; right: 96px; top: 6px; bottom: 6px; display: none; align-items: center; gap: 10px; pointer-events: none; }
.note canvas { flex: 1; height: 100%; min-width: 0; }
.note-time { font-family: var(--sf); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: #c9ffee; text-shadow: 0 0 8px rgba(114, 242, 200, 0.7); }
.note-time::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 8px #ff5a4a; margin-right: 7px; vertical-align: 1px; animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
.ask.listening .note { display: flex; }
.ask.listening input { color: transparent; caret-color: transparent; }
.ask.listening input::placeholder { color: transparent; }
.ask.listening { border-color: rgba(114, 242, 200, 0.55); box-shadow: var(--depth), 0 0 0 4px rgba(114, 242, 200, 0.14), 0 0 30px rgba(114, 242, 200, 0.18); }
@media (prefers-reduced-motion: reduce) { .mic.live::before, .mic.live::after, .mic.live svg, .note-time::before { animation: none; } }


/* =====================================================================
   STARK LAB COLOUR — teal/aqua hologram, warm amber-bronze rings, green dots.
   ===================================================================== */
:root { --holo: rgb(var(--acc)); --holo-hi: rgb(var(--acc-light)); --amber: #e1aa5f; --green: #5fe39a; --ok: #5fe39a; }
.edge circle { stroke: var(--amber); }
.edge { filter: drop-shadow(0 0 4px rgba(225, 170, 95, 0.6)); }
.top::before { background: linear-gradient(90deg, transparent, rgba(225, 170, 95, 0.55) 30%, rgba(225, 170, 95, 0.55) 70%, transparent); box-shadow: 0 0 12px rgba(225, 170, 95, 0.45); }
.g-ticks { stroke: var(--amber); stroke-opacity: 0.55; }
.dot { background: var(--green); opacity: 0.55; }
.dot.working { background: #fff; box-shadow: 0 0 4px #fff, 0 0 10px var(--amber), 0 0 18px var(--amber); }
.link.on::before { background: var(--green); box-shadow: 0 0 4px #fff, 0 0 10px var(--green), 0 0 20px var(--green); }
.machine.on .m-state { color: var(--green); }

/* Friday is orange: her label glows with her. */
.voice-label, .voice-label[data-mode="speaking"] { color: #fff1e0; text-shadow: 0 0 2px #fff, 0 0 8px rgba(var(--acc), 0.9), 0 0 20px rgba(var(--acc), 0.55); }

/* Friday's label matches the blue globe again. */
.voice-label, .voice-label[data-mode="speaking"] { color: #eef8ff; text-shadow: 0 0 2px #fff, 0 0 8px rgba(var(--acc), 0.9), 0 0 20px rgba(var(--acc), 0.5); }

/* Friday's globe is orange: her label glows with her. */
.voice-label, .voice-label[data-mode="speaking"] { color: #fff1e0; text-shadow: 0 0 2px #fff, 0 0 8px rgba(var(--acc), 0.9), 0 0 20px rgba(var(--acc), 0.55); }

/* Orange bloom, done on the GPU (cheaper and smoother than canvas blur). */
#globeCanvas { filter: drop-shadow(0 0 3px rgba(var(--acc), 0.95)) drop-shadow(0 0 12px rgba(var(--acc), 0.6)) drop-shadow(0 0 30px rgba(var(--acc-deep), 0.35)); will-change: filter; }
#wave { filter: drop-shadow(0 0 4px rgba(var(--acc), 0.95)) drop-shadow(0 0 12px rgba(var(--acc-deep), 0.55)); }

/* Crisper bloom: a tight glow plus a soft halo (the heavy triple blur made it look fuzzy). */
#globeCanvas { filter: drop-shadow(0 0 2px rgba(var(--acc), 0.8)) drop-shadow(0 0 10px rgba(var(--acc-deep), 0.4)); }

/* Gold mind hologram: tight glow, warm halo. */
#globeCanvas { filter: drop-shadow(0 0 3px rgba(var(--acc), 0.85)) drop-shadow(0 0 14px rgba(var(--acc), 0.35)); }

/* Energy orb (v1): its streaks carry their own light; keep just a soft warm halo. */
#globeCanvas { filter: drop-shadow(0 0 8px rgba(var(--acc), 0.35)); }

/* Crystal core (blue): cool bloom, and the label/waveform glow to match. */
#globeCanvas { filter: drop-shadow(0 0 3px rgba(var(--acc-light), 0.7)) drop-shadow(0 0 14px rgba(var(--acc), 0.35)); }
#wave { filter: drop-shadow(0 0 4px rgba(var(--acc-light), 0.9)) drop-shadow(0 0 12px rgba(var(--acc), 0.5)); }
.voice-label, .voice-label[data-mode="speaking"] { color: #fff4ea; text-shadow: 0 0 2px #fff, 0 0 8px rgba(var(--acc), 0.9), 0 0 20px rgba(var(--acc), 0.5); }

/* 3D core: black background blends away with "screen", so only the light shows. */
#core3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: screen; opacity: 0; transition: opacity 0.8s ease; }
#core3d.ready { opacity: 1; }
#globeCanvas { display: none; }
body.core-2d #globeCanvas { display: block; }
body.core-2d #core3d { display: none; }

/* Top bar: your one thing right now (replaces the clock). */
.now-pill {
  max-width: min(46vw, 560px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 6px 14px;
  font-family: var(--sf); font-size: 14px; font-weight: 600; color: #fff4ea; box-shadow: var(--depth);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}
.now-pill:hover { transform: scale(1.02); }
.now-k { font-size: 10px; letter-spacing: 0.18em; color: var(--holo); margin-right: 6px; }
.now-pill.pri .now-k { color: #ff8a7a; }
.now-pill.pri .now-k::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 8px #ff5a4a; margin-right: 6px; vertical-align: 1px; }
.now-t { color: rgba(220, 240, 255, 0.65); font-variant-numeric: tabular-nums; font-weight: 500; }
@media (max-width: 560px) { .now-pill { max-width: 42vw; font-size: 12px; padding: 5px 10px; } }

/* JARVIS cyan for the core's glow, waveform and label. */
#globeCanvas { filter: drop-shadow(0 0 3px rgba(var(--acc), 0.7)) drop-shadow(0 0 14px rgba(var(--acc), 0.35)); }
#wave { filter: drop-shadow(0 0 4px rgba(var(--acc), 0.9)) drop-shadow(0 0 12px rgba(var(--acc), 0.5)); }
.voice-label, .voice-label[data-mode="speaking"] { color: #fff4ea; text-shadow: 0 0 2px #fff, 0 0 8px rgba(var(--acc), 0.9), 0 0 20px rgba(var(--acc), 0.5); }

/* =====================================================================
   PREMIUM TYPE — crisp, quiet text; the light belongs to the graphics.
   ===================================================================== */
.subtitle {
  font-family: var(--sf); font-weight: 500; font-size: clamp(16px, 0.45vw + 12px, 20px);
  line-height: 1.45; letter-spacing: -0.012em; color: rgba(236, 246, 252, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); max-width: 640px;
}
.voice-label, .voice-label[data-mode="speaking"] {
  font-family: var(--sf); font-weight: 500; font-size: 10px; letter-spacing: 0.32em;
  color: rgba(var(--acc-light), 0.7); text-shadow: none;
}
.brand { color: #fff1e2; text-shadow: 0 0 14px rgba(var(--acc), 0.25); }
h2, .focus-title, .m-name, .now .text, .core-label, .g-val, .focus-card .big {
  text-shadow: none; color: #fff4ea;
}
.g-val { filter: none; }
.tag, .rail, .m-meta, .gauge-meta, .feed .f b, .link.on, .lockin, .chip.notif.has, .sess { text-shadow: none; }
.tag.alert, .now .label.pri, .focus-card .src .pri, .gauge-meta .warn, .rail-val.pri, .notif.urgent { text-shadow: none; }
.focus-card .big { font-weight: 600; letter-spacing: -0.03em; color: #fff6ee; }
.msg { text-shadow: none; }

/* More room for the voice line to swing. */
.voicebar { height: 74px; }
.voicebar canvas { inset: 0 0 18px; height: 56px; }

/* =====================================================================
   MODERN CONTROLS — slim, borderless glass; icons instead of words.
   ===================================================================== */
.top .chip, .now-pill {
  border: 0; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06); clip-path: none;
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: background 0.2s ease, transform 0.2s cubic-bezier(.2, .8, .2, 1);
}
.top .chip:hover, .now-pill:hover { background: rgba(255, 255, 255, 0.11); transform: none; }
.top .chip:active, .now-pill:active { transform: scale(0.96); }
#voiceBtn, #notifBtn { width: 34px; height: 34px; padding: 0; border-radius: 50%; justify-content: center; color: rgba(235, 247, 252, 0.85); position: relative; }
#voiceBtn.off { color: rgba(235, 247, 252, 0.4); }
#notifCount {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: rgb(var(--acc)); color: #2a1000; font: 700 10px/16px var(--sf); text-align: center; letter-spacing: 0;
}
.notif:not(.has) #notifCount { display: none; }
.notif.urgent #notifCount { background: #ff5a4a; color: #fff; }
.notif.urgent { color: rgba(235, 247, 252, 0.95); }
.now-pill { padding: 7px 14px; font-weight: 500; font-size: 13.5px; color: rgba(236, 246, 252, 0.92); }
.now-k { font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em; color: rgba(var(--acc), 0.85); }

/* =====================================================================
   SLIDE — panels glide in and out smoothly.
   ===================================================================== */
@keyframes slideInL { from { opacity: 0; transform: translateX(-32px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes slideInR { from { opacity: 0; transform: translateX(32px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes slideOutL { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-32px) scale(0.98); } }
@keyframes slideOutR { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(32px) scale(0.98); } }
@keyframes wideInL { from { opacity: 0; transform: rotateY(14deg) translateX(-36px); } to { opacity: 1; transform: rotateY(14deg); } }
@keyframes wideInR { from { opacity: 0; transform: rotateY(-14deg) translateX(36px); } to { opacity: 1; transform: rotateY(-14deg); } }
@keyframes wideOutL { from { opacity: 1; transform: rotateY(14deg); } to { opacity: 0; transform: rotateY(14deg) translateX(-36px); } }
@keyframes wideOutR { from { opacity: 1; transform: rotateY(-14deg); } to { opacity: 0; transform: rotateY(-14deg) translateX(36px); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.rail { animation: fadeIn 0.35s ease both; }
.scrim { animation: fadeIn 0.3s ease both; }
.scrim.closing { animation: fadeOut 0.23s ease both; }

@media (min-width: 1180px) {
  .side.left.open .panel { animation: wideInL 0.45s cubic-bezier(.2, .8, .2, 1) both; }
  .side.right.open .panel { animation: wideInR 0.45s cubic-bezier(.2, .8, .2, 1) both; }
  .side.left.closing .panel { animation: wideOutL 0.23s cubic-bezier(.4, 0, 1, 1) both; }
  .side.right.closing .panel { animation: wideOutR 0.23s cubic-bezier(.4, 0, 1, 1) both; }
}
@media (max-width: 1179px) and (min-width: 640px) {
  .side.left.open .panel { animation: slideInL 0.4s cubic-bezier(.2, .8, .2, 1) both; }
  .side.right.open .panel { animation: slideInR 0.4s cubic-bezier(.2, .8, .2, 1) both; }
  .side.left.closing .panel { animation: slideOutL 0.23s cubic-bezier(.4, 0, 1, 1) both; }
  .side.right.closing .panel { animation: slideOutR 0.23s cubic-bezier(.4, 0, 1, 1) both; }
}
@media (max-width: 639px) {
  .side.open .panel { animation: sheetUp 0.42s cubic-bezier(.2, .8, .2, 1) both; }
  .side.closing .panel { animation: sheetDown 0.23s cubic-bezier(.4, 0, 1, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .side .panel, .rail, .scrim { animation: none !important; } }

/* =====================================================================
   NO RAILS — panels live off-screen and slide in over the view.
   Open them from the top-bar icons, by resting the mouse on a screen edge,
   swiping in from an edge, or with [ and ].
   ===================================================================== */
.rail { display: none !important; }
.hud { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: none !important; }
.center { grid-column: 1; grid-row: 1; grid-area: auto !important; }
.side { position: absolute; top: 0; bottom: 0; width: 0; display: block; z-index: 16; }
.side.left { left: 0; }
.side.right { right: 0; }
.side .panel { display: none; position: absolute; top: 12px; bottom: 12px; width: min(var(--w, var(--side-w)), calc(100vw - 32px)); background: rgba(6, 14, 30, 0.86); }
.side.left .panel { left: 16px; }
.side.right .panel { right: 16px; }
.side.open .panel, .side.closing .panel { display: flex; }
.scrim { z-index: 15; }
@media (max-width: 639px) {
  .side .panel { top: auto; bottom: 0; left: 0 !important; right: 0 !important; width: 100vw; height: 82%; border-bottom: 0; }
}
.edge-hit { position: absolute; top: 0; bottom: 0; width: 14px; z-index: 14; cursor: pointer; }
.edge-hit.left { left: 0; }
.edge-hit.right { right: 0; }
.edge-hit::after { content: ""; position: absolute; top: 30%; bottom: 30%; width: 2px; border-radius: 2px; background: rgba(var(--acc), 0); transition: background 0.25s ease, box-shadow 0.25s ease; }
.edge-hit.left::after { left: 3px; }
.edge-hit.right::after { right: 3px; }
.edge-hit:hover::after { background: rgba(var(--acc), 0.55); box-shadow: 0 0 12px rgba(var(--acc), 0.6); }
#sysBtn, #focusBtn { width: 34px; height: 34px; padding: 0; border-radius: 50%; justify-content: center; color: rgba(235, 247, 252, 0.85); }
#sysBtn.active, #focusBtn.active { background: rgba(var(--acc), 0.18); color: #fff; }

/* =====================================================================
   TOP BAR — F.R.I.D.A.Y. centred; tools left and right.
   ===================================================================== */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.top-left { justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.brand { justify-self: center; display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: 0.3em; margin-right: -0.3em; }
#link { font-size: 0; letter-spacing: 0; display: inline-flex; }
#link::before { margin: 0; width: 7px; height: 7px; }
.top-mid { display: none; }
@media (max-width: 760px) {
  .top { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "s f b v n" "p p p p p"; row-gap: 10px; padding: 10px 14px; }
  .top-left, .top-right { display: contents; }
  #sysBtn { grid-area: s; } #focusBtn { grid-area: f; } .brand { grid-area: b; font-size: 15px; letter-spacing: 0.26em; }
  #voiceBtn { grid-area: v; } #notifBtn { grid-area: n; }
  #nowPill { grid-area: p; max-width: none; width: 100%; text-align: center; }
}

/* The 3D core's edges fade out so it melts into the room instead of showing a box. */
#core3d, #globeCanvas, #stageCanvas {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

/* Bigger core: let the fade start further out so it isn't clipped. */
#core3d, #globeCanvas, #stageCanvas {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent 100%);
}
/* Phones: just the core. */
@media (max-width: 760px) {
  #stageCanvas, .edge { display: none; }
}


/* =====================================================================
   F.R.I.D.A.Y. ORANGE — brand colour across the whole app.
   ===================================================================== */
:root { --holo: rgb(var(--acc)); --holo-hi: rgb(var(--acc-light)); --holo-dim: rgba(var(--acc), 0.5); --holo-faint: rgba(var(--acc), 0.13); --line: rgba(var(--acc), 0.3); }
body {
  background:
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(var(--acc-deep), 0.16), transparent 70%),
    radial-gradient(ellipse 40% 60% at -5% 70%, rgba(var(--acc-deep), 0.07), transparent 70%),
    radial-gradient(ellipse 40% 60% at 105% 70%, rgba(var(--acc-deep), 0.07), transparent 70%),
    #050302;
  background-attachment: fixed;
}
.fx-haze { background: radial-gradient(35% 30% at 50% 40%, rgba(var(--acc), 0.14), transparent 70%); }
.side .panel { background: rgba(18, 10, 5, 0.88); }
.send, .focus-actions .primary { background: linear-gradient(180deg, #fff3e6, #ffd2a6); color: #3a1803; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px -6px rgba(40, 15, 0, 0.6), 0 0 24px rgba(var(--acc), 0.35); }
.msg.user { background: linear-gradient(180deg, rgba(var(--acc), 0.55), rgba(220, 90, 15, 0.55)); }
.mic.live { background: radial-gradient(circle at 50% 40%, #ffe2c2, rgb(var(--acc)) 60%, rgb(var(--acc-deep))); color: #2a1000; box-shadow: 0 0 12px rgba(var(--acc), 0.9), 0 0 32px rgba(var(--acc), 0.45); }
.mic.live::before, .mic.live::after { border-color: rgba(var(--acc), 0.7); }
.ask.listening { border-color: rgba(var(--acc), 0.55); box-shadow: var(--depth), 0 0 0 4px rgba(var(--acc), 0.14), 0 0 30px rgba(var(--acc), 0.18); }
.note-time { color: rgb(var(--acc-light)); text-shadow: 0 0 8px rgba(var(--acc), 0.6); }
#core3d { mix-blend-mode: screen; }

/* =====================================================================
   HOLO FRAME — orange hologram lines down each side and along the bottom
   corners, leaving the chat bar clear.
   ===================================================================== */
:root { --hf: rgba(var(--acc), 0.85); --hf-glow: 0 0 4px rgba(var(--acc), 0.9), 0 0 14px rgba(var(--acc-deep), 0.45); --hf-inset: 10px; --hf-bottom: 14px; }
.holo-frame { position: fixed; inset: 0; pointer-events: none; z-index: 3; animation: holoFlicker 9s infinite; }
.holo-frame i { position: absolute; display: block; }
.hf-side { top: calc(var(--top-h, 58px) + 10px); bottom: var(--hf-bottom); width: 1.5px; box-shadow: var(--hf-glow);
  background: linear-gradient(180deg, transparent, var(--hf) 8%, var(--hf) 92%, rgba(var(--acc), 0.5)); }
.hf-side.l { left: var(--hf-inset); }
.hf-side.r { right: var(--hf-inset); }
/* tick marks beside each side line */
.hf-side::before { content: ""; position: absolute; top: 18%; height: 22%; width: 7px;
  background: repeating-linear-gradient(180deg, rgba(var(--acc), 0.6) 0 1px, transparent 1px 9px); }
.hf-side.l::before { left: 4px; }
.hf-side.r::before { right: 4px; }
/* a slow pulse of light travelling along each side */
.hf-side::after { content: ""; position: absolute; left: -1px; width: 3.5px; height: 70px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, #ffe6c8, transparent); box-shadow: 0 0 10px rgba(var(--acc), 0.9);
  animation: hfTravel 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.hf-side.r::after { animation-delay: -3.5s; }
@keyframes hfTravel { from { top: -70px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { top: 100%; opacity: 0; } }
/* bottom: from each corner toward the middle, fading before the chat bar */
.hf-bottom { bottom: var(--hf-bottom); height: 1.5px; width: min(24vw, 300px); box-shadow: var(--hf-glow); }
.hf-bottom.l { left: var(--hf-inset); background: linear-gradient(90deg, var(--hf), transparent); }
.hf-bottom.r { right: var(--hf-inset); background: linear-gradient(270deg, var(--hf), transparent); }
/* lit corner brackets */
.hf-corner { width: 16px; height: 16px; border: 2px solid rgb(var(--acc-light)); filter: drop-shadow(0 0 4px rgba(var(--acc), 0.9)); }
.hf-corner.tl { left: calc(var(--hf-inset) - 1px); top: calc(var(--top-h, 58px) + 10px); border-right: 0; border-bottom: 0; }
.hf-corner.tr { right: calc(var(--hf-inset) - 1px); top: calc(var(--top-h, 58px) + 10px); border-left: 0; border-bottom: 0; }
.hf-corner.bl { left: calc(var(--hf-inset) - 1px); bottom: calc(var(--hf-bottom) - 1px); border-right: 0; border-top: 0; }
.hf-corner.br { right: calc(var(--hf-inset) - 1px); bottom: calc(var(--hf-bottom) - 1px); border-left: 0; border-top: 0; }
@keyframes holoFlicker { 0%, 46%, 49%, 92%, 100% { opacity: 1; } 47% { opacity: 0.55; } 48% { opacity: 0.9; } 93% { opacity: 0.7; } }
@media (max-width: 760px) { :root { --hf-inset: 6px; --hf-bottom: 8px; } .hf-bottom { width: 6vw; } }
@media (prefers-reduced-motion: reduce) { .holo-frame, .hf-side::after { animation: none; } }
/* keep the chat bar and centre clear of the side lines */
.hud { padding-left: 28px; padding-right: 28px; }
@media (max-width: 760px) { .hud { padding-left: 16px; padding-right: 16px; } }

/* Holo frame: rounded, segmented corners (like the orb's rim) and true orange. */
:root { --hf: rgba(var(--acc-deep), 0.9); --hf-glow: 0 0 4px rgba(var(--acc), 0.95), 0 0 14px rgba(var(--acc-deep), 0.5); --hf-r: 44px; }
.hf-corner { width: var(--hf-r); height: var(--hf-r); border: 0; filter: drop-shadow(0 0 3px rgba(var(--acc), 0.95)) drop-shadow(0 0 10px rgba(var(--acc-deep), 0.5)); }
.hf-corner svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hf-arc { fill: none; stroke: rgb(var(--acc)); stroke-width: 1.6; }
.hf-seg { fill: none; stroke: rgb(var(--acc)); stroke-width: 4; stroke-dasharray: 5 3; opacity: 0.85; }
.hf-corner.tl { left: var(--hf-inset); top: calc(var(--top-h, 58px) + 10px); }
.hf-corner.tr { right: var(--hf-inset); top: calc(var(--top-h, 58px) + 10px); transform: scaleX(-1); }
.hf-corner.bl { left: var(--hf-inset); bottom: var(--hf-bottom); transform: scaleY(-1); }
.hf-corner.br { right: var(--hf-inset); bottom: var(--hf-bottom); transform: scale(-1, -1); }
/* side and bottom lines start where the arcs end */
.hf-side { top: calc(var(--top-h, 58px) + 10px + var(--hf-r)); bottom: calc(var(--hf-bottom) + var(--hf-r)); background: linear-gradient(180deg, var(--hf), var(--hf)); }
.hf-side.l { left: calc(var(--hf-inset) + 1px); }
.hf-side.r { right: calc(var(--hf-inset) + 1px); }
.hf-bottom { bottom: calc(var(--hf-bottom) + 1px); }
.hf-bottom.l { left: calc(var(--hf-inset) + var(--hf-r)); }
.hf-bottom.r { right: calc(var(--hf-inset) + var(--hf-r)); }
.hf-side::before { background: repeating-linear-gradient(180deg, rgba(var(--acc), 0.65) 0 1px, transparent 1px 9px); }
.hf-side::after { background: linear-gradient(180deg, transparent, rgb(var(--acc-light)), transparent); box-shadow: 0 0 10px rgba(var(--acc), 0.95); }
@media (max-width: 760px) { :root { --hf-r: 30px; } }
/* labels and accents: orange, not gold */
.voice-label, .voice-label[data-mode="speaking"] { color: rgba(var(--acc-light), 0.8); }
.now-k { color: rgb(var(--acc)); }
.top::before { background: linear-gradient(90deg, transparent, rgba(var(--acc-deep), 0.6) 30%, rgba(var(--acc-deep), 0.6) 70%, transparent); box-shadow: 0 0 12px rgba(var(--acc-deep), 0.45); }
#wave { filter: drop-shadow(0 0 4px rgba(var(--acc), 0.95)) drop-shadow(0 0 12px rgba(var(--acc-deep), 0.5)); }

/* Frame sits behind the app: panels, drawers and phone sheets always slide over it. */
.holo-frame { z-index: 0; }
/* When the chat bar spans most of the width, the frame closes above it instead of crossing it. */
@media (max-width: 1100px) {
  :root { --hf-bottom: 88px; }
  .hf-bottom { display: none; }
}
@media (max-width: 760px) {
  :root { --hf-bottom: 84px; }
}

/* Chat bar sits INSIDE the frame again, with clearance so nothing touches.
   (Undo the "frame closes above the chat" rule.) */
@media (max-width: 1100px) {
  :root { --hf-bottom: 12px; }
  .hf-bottom { display: block; width: calc(50vw - var(--hf-inset) - var(--hf-r) - 12px); }
  /* lift the chat bar above the curved corners and in from the side lines */
  .hud { padding-bottom: calc(var(--hf-bottom) + var(--hf-r) + 8px); padding-left: calc(var(--hf-inset) + 16px); padding-right: calc(var(--hf-inset) + 16px); }
}
@media (max-width: 760px) {
  :root { --hf-bottom: 8px; }
}
@media (min-width: 1101px) {
  .hud { padding-bottom: calc(var(--hf-bottom) + 22px); }
}

/* =====================================================================
   AGENT SWITCHER — pick who you're talking to.
   ===================================================================== */
.agent-switch { position: relative; }
.agent-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 12px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  font: 600 13px var(--sf); letter-spacing: 0.16em; color: rgba(255, 244, 234, 0.95);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: background 0.2s ease;
}
.agent-btn:hover, .agent-switch.open .agent-btn { background: rgba(255, 255, 255, 0.11); }
.ag-chev { opacity: 0.7; transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.agent-switch.open .ag-chev { transform: rotate(180deg); }
.ag-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex: none; }
.ag-dot.on { background: #5fe39a; box-shadow: 0 0 8px #5fe39a; }
.ag-dot.working { background: rgb(var(--acc)); box-shadow: 0 0 8px rgb(var(--acc)); }
.agent-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 240px; padding: 6px;
  background: rgba(20, 12, 7, 0.86); border-radius: 16px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  animation: menuIn 0.22s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top left;
}
.agent-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.ag-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: #fff4ea; text-align: left; }
.ag-item:hover { background: rgba(255, 255, 255, 0.07); }
.ag-item.sel { background: rgba(var(--acc), 0.14); }
.ag-item svg { margin-left: auto; color: rgb(var(--acc)); }
.ag-text { display: flex; flex-direction: column; gap: 2px; }
.ag-text b { font: 600 14px var(--sf); letter-spacing: 0.14em; }
.ag-text small { font: 500 11.5px var(--sf); color: rgba(255, 220, 190, 0.55); letter-spacing: 0.01em; }
@media (max-width: 760px) {
  #agentSwitch { grid-area: p; justify-self: center; }
  .agent-menu { left: 50%; transform-origin: top center; translate: -50% 0; }
}
/* frame corners start a little further below the top bar */
.hf-corner.tl, .hf-corner.tr { top: calc(var(--top-h, 58px) + 14px); }
.hf-side { top: calc(var(--top-h, 58px) + 14px + var(--hf-r)); }

/* Narrow screens: one continuous bottom line between the curved corners (no gap in the middle). */
@media (max-width: 1100px) {
  .hf-bottom.l { width: calc(100vw - 2 * (var(--hf-inset) + var(--hf-r))); background: var(--hf); }
  .hf-bottom.r { display: none; }
}

/* Desktop drawers: flat glass (the 3D angle broke clicks and let the stage show through),
   always above the core, agents and frame. */
@media (min-width: 1180px) {
  .side.left.open .panel, .side.right.open .panel { transform: none; }
  .side.left.open .panel { animation: slideInL 0.4s cubic-bezier(.2, .8, .2, 1) both; }
  .side.right.open .panel { animation: slideInR 0.4s cubic-bezier(.2, .8, .2, 1) both; }
  .side.left.closing .panel { animation: slideOutL 0.23s cubic-bezier(.4, 0, 1, 1) both; }
  .side.right.closing .panel { animation: slideOutR 0.23s cubic-bezier(.4, 0, 1, 1) both; }
  .scrim { display: block !important; }
  .scrim[hidden] { display: none !important; }
}
.center { position: relative; z-index: 1; }
.scrim { z-index: 18; }
.side { z-index: 20; }
.side .panel { background: rgba(14, 10, 8, 0.92); }

/* The centre name always shows (an old narrow-screen rule hid every span in .brand). */
.brand #brandName { display: inline !important; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
/* Send button and your chat bubble follow the agent's colour. */
.send, .focus-actions .primary {
  background: linear-gradient(180deg, #ffffff, rgb(var(--acc-light)));
  color: rgb(20, 14, 10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px -6px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--acc), 0.35);
}
.msg.user { background: linear-gradient(180deg, rgba(var(--acc), 0.55), rgba(var(--acc-deep), 0.55)); }
/* Hub link dot now lives in the agent pill. */
.agent-btn #link { font-size: 0; display: inline-flex; }
.agent-btn #link::before { margin: 0; width: 7px; height: 7px; }

/* Resize handle sits exactly on the open panel's inner edge; invisible until hovered. */
.grip { display: none; left: auto; right: auto; width: 12px; background: none !important; }
@media (min-width: 1180px) {
  .side.open .grip { display: block; }
  .side.left .grip { left: calc(16px + min(var(--w, var(--side-w)), calc(100vw - 32px)) - 6px) !important; }
  .side.right .grip { right: calc(16px + min(var(--w, var(--side-w)), calc(100vw - 32px)) - 6px) !important; }
  .side.closing .grip { display: none; }
}
.grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 5px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0); transition: background 0.2s ease; }
.grip:hover::after, .grip.dragging::after { background: rgba(255, 255, 255, 0.35); }

/* Bottom: short fading lines from each corner, not joined in the middle. */
@media (max-width: 1100px) {
  .hf-bottom.l, .hf-bottom.r { display: block; width: 16vw; }
  .hf-bottom.l { background: linear-gradient(90deg, var(--hf), transparent); }
  .hf-bottom.r { background: linear-gradient(270deg, var(--hf), transparent); }
}

/* Top-centre logo: Milkyano Industries (white mark, crisp, no glow). */
.brand { letter-spacing: 0; margin-right: 0; text-shadow: none; }
.brand-logo { display: block; height: 17px; width: auto; max-width: 100%; opacity: 0.94; user-select: none; -webkit-user-drag: none; }
@media (max-width: 760px) { .brand-logo { height: 13px; } }

/* Bigger logo, sized by width so it never squashes. */
.brand-logo { height: auto; width: 260px; max-width: 100%; }
@media (max-width: 760px) { .brand-logo { height: auto; width: min(180px, 100%); } }

/* Centre the logo inside its column. */
.brand { justify-content: center; }

/* Up to 1000px wide: two-row top bar (icons + logo, then the agent pill), so nothing collides. */
@media (max-width: 1000px) {
  .top { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "s f b v n" "p p p p p"; row-gap: 10px; padding: 10px 14px; }
  .top-left, .top-right { display: contents; }
  #sysBtn { grid-area: s; } #focusBtn { grid-area: f; } .brand { grid-area: b; }
  #voiceBtn { grid-area: v; } #notifBtn { grid-area: n; }
  #agentSwitch { grid-area: p; justify-self: center; }
  .brand-logo { width: min(220px, 100%); }
  .agent-menu { left: 50%; transform-origin: top center; translate: -50% 0; }
}
@media (max-width: 760px) { .brand-logo { width: min(180px, 100%); } }

/* Close button (and mic / lock-in): clean hover, no glow halo; smooth press. */
.fold, .mic, .lockin { transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s cubic-bezier(.2, .8, .2, 1); }
.fold:hover, .mic:hover, .lockin:hover { box-shadow: none; }
.fold { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78); box-shadow: none; font-size: 17px; }
.fold:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.fold:active { transform: scale(0.9); }
.mic:active { transform: scale(0.94); }

/* Travelling light follows the outline path (replaces the straight-line pulse). */
.hf-side::after { display: none; }
.hf-pulse { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hf-pulse path {
  fill: none; stroke: rgb(var(--acc-light)); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 70 930; stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 4px rgba(var(--acc), 1)) drop-shadow(0 0 10px rgba(var(--acc), 0.7));
  animation: hfFollow 7s cubic-bezier(.45, 0, .55, 1) infinite;
}
#hfPathR { animation-delay: -3.5s; }
@keyframes hfFollow { 0% { stroke-dashoffset: 1070; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hf-pulse path { animation: none; opacity: 0; } }


/* =====================================================================
   2026-10-30 PASS — "+" options menu, model picker, session target,
   daily review, gold news panel, listening state. Colours from --acc only.
   ===================================================================== */
/* "+" button: options, with a quiet badge for important messages */
.plus-wrap { position: relative; }
.chip.plus { position: relative; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
.plus svg { transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
.plus-wrap.open .plus svg { transform: rotate(45deg); }
.plus-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font: 700 10px/1 var(--sf); color: rgb(20, 14, 10); background: rgb(var(--acc-light)); text-shadow: none; }
.plus-badge[hidden] { display: none; }
.plus.urgent .plus-badge { background: var(--alert); color: #fff; }
.plus-menu, .model-menu {
  position: absolute; z-index: 45; padding: 6px; border-radius: 16px;
  background: rgba(20, 12, 7, 0.9); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  animation: menuIn 0.22s cubic-bezier(.2, .8, .2, 1) both;
}
.plus-menu { top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 24px)); max-height: min(72vh, 620px); overflow-y: auto; transform-origin: top right; }
.plus-menu[hidden], .model-menu[hidden] { display: none; }
.pm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: #fff4ea; text-align: left; transition: background 0.15s ease; }
.pm-row:hover, .pm-skill:hover { background: rgba(255, 255, 255, 0.07); }
.pm-row > svg:first-child { color: rgb(var(--acc)); flex: none; }
.pm-row .ag-text b, .pm-skill .ag-text b { letter-spacing: 0; font-size: 14px; }
.pm-chev { margin-left: auto; opacity: 0.5; }
.pm-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 11px var(--sf); background: rgba(var(--acc), 0.2); color: rgb(var(--acc-light)); }
.pm-top { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px; color: #fff; font: 600 14px var(--sf); }
.pm-top small { margin-left: auto; font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.45); }
.pm-back { width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background 0.15s ease; }
.pm-back:hover { background: rgba(255, 255, 255, 0.16); }
.pm-group { padding: 10px 12px 4px; font: 600 10.5px var(--sf); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.pm-conn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font: 500 13.5px var(--sf); color: rgba(255, 244, 234, 0.9); }
.pm-conn.add { color: rgba(255, 244, 234, 0.6); }
.pm-conn.add svg { color: rgb(var(--acc)); }
.pm-status { margin-left: auto; font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); }
.pm-foot { padding: 10px 12px; font: 500 12px/1.45 var(--sf); color: rgba(255, 255, 255, 0.45); }
.pm-scroll { max-height: 44vh; overflow-y: auto; margin-bottom: 4px; }
.pm-skill { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 11px; color: #fff4ea; cursor: grab; user-select: none; transition: background 0.15s ease; }
.pm-skill:active { cursor: grabbing; }
.pm-grip { flex: none; margin-top: 3px; color: rgba(255, 255, 255, 0.3); }
.pm-skill small { display: block; line-height: 1.35; }

/* chat bar: the model picker sits where the mic was */
.model-wrap { position: relative; flex: none; }
.model-btn { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 12px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 13px var(--sf); transition: background 0.2s ease, transform 0.15s cubic-bezier(.2, .8, .2, 1); }
.model-btn svg { color: rgb(var(--acc)); }
.model-btn:hover, .model-wrap.open .model-btn { background: rgba(255, 255, 255, 0.18); }
.model-btn:active { transform: scale(0.96); }
.model-menu { bottom: calc(100% + 12px); left: 0; min-width: 220px; transform-origin: bottom left; }
.model-menu .ag-text b { letter-spacing: 0; }
.note { left: 112px; }
.ask.drop-ready { box-shadow: var(--depth), 0 0 0 2px rgba(var(--acc), 0.35); }
.ask.drop-over { box-shadow: var(--depth), 0 0 0 4px rgba(var(--acc), 0.45); }

/* talking to one Claude session */
.target { display: inline-flex; align-items: center; gap: 8px; max-width: min(720px, 100%); margin-bottom: 8px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); font: 500 13px var(--sf); color: #fff;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: menuIn 0.25s cubic-bezier(.2, .8, .2, 1) both; }
.target[hidden] { display: none; }
.tg-arrow { color: rgb(var(--acc)); display: grid; }
.tg-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-note { color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-note.warn { color: #ffb1a6; }
.tg-x { width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 15px; line-height: 1; transition: background 0.15s ease; }
.tg-x:hover { background: rgba(255, 255, 255, 0.2); }
.sess.sel { background: rgba(var(--acc), 0.16); }

/* daily review in the right panel */
.review { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.rv-head { display: flex; justify-content: space-between; gap: 8px; font: 600 12px var(--sf); color: rgba(255, 255, 255, 0.55); }
.rv-sec { display: flex; flex-direction: column; gap: 2px; }
.rv-title { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; font: 600 13px var(--sf); color: #fff; }
.rv-title span { font-weight: 600; font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.rv-item { display: flex; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; transition: background 0.15s ease; }
.rv-item:hover { background: rgba(255, 255, 255, 0.05); }
.rv-dot { flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.rv-item.high .rv-dot { background: rgb(var(--acc)); }
.rv-item.low .rv-dot { background: rgba(255, 255, 255, 0.15); }
.rv-main { min-width: 0; }
.rv-text { font: 500 14px/1.4 var(--sf); color: rgba(255, 248, 240, 0.94); overflow-wrap: anywhere; }
.rv-meta { margin-top: 2px; font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.45); }
.rv-meta a { color: rgb(var(--acc-light)); text-decoration: none; }
.rv-meta a:hover { text-decoration: underline; }

/* J.A.R.V.I.S.'s gold news: a flat glass panel sliding in from the right, above everything */
.news { position: fixed; z-index: 30; top: calc(var(--top-h, 58px) + 8px); right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px));
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: rgba(8, 12, 18, 0.94); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  animation: newsIn 0.4s cubic-bezier(.2, .8, .2, 1) both; }
.news[hidden] { display: none; }
.news.closing { animation: newsOut 0.23s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes newsIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes newsOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px); } }
.news-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.1); }
.news-head .tag { background: rgba(var(--acc), 0.2); color: rgb(var(--acc-light)); }
.news-title { display: flex; flex-direction: column; min-width: 0; }
.news-title h2 { text-shadow: none; }
.news-title small { font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.45); }
.news-head .fold { margin-left: auto; }
.news-body { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.news-brief { margin: 4px 8px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--acc), 0.1); }
.news-brief .label { font: 600 11px var(--sf); letter-spacing: 0.04em; color: rgb(var(--acc-light)); margin-bottom: 4px; }
.news-brief p { margin: 0; font: 500 14px/1.45 var(--sf); color: #fff; }
.news-item { display: block; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.15s ease; }
.news-item:hover { background: rgba(255, 255, 255, 0.05); }
.news-meta { display: flex; align-items: center; gap: 8px; font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.45); }
.impact { padding: 1px 7px; border-radius: 999px; font: 700 10px var(--sf); letter-spacing: 0.05em; text-transform: uppercase; }
.impact.high { background: rgb(var(--acc)); color: rgb(8, 12, 18); }
.impact.medium { background: rgba(var(--acc), 0.22); color: rgb(var(--acc-light)); }
.impact.low { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.news-hl { margin-top: 5px; font: 600 14.5px/1.35 var(--sf); color: #fff; overflow-wrap: anywhere; }
.news-why { margin-top: 3px; font: 500 12.5px/1.4 var(--sf); color: rgba(255, 255, 255, 0.55); }
.news-note { padding: 10px 16px 14px; font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.08); }
.news .empty { padding: 16px 10px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .news, .news.closing, .target { animation: none; } }

/* two-row top bar: the "+" keeps the bell's slot */
@media (max-width: 1000px) { #plusWrap { grid-area: n; } }
/* phones: tap the core to talk; the chat bar keeps just the model picker and input */
@media (max-width: 760px) {
  .stage { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .model-btn { padding: 0 12px; }
  .model-btn #modelLabel { display: none; }
  .note { left: 58px; }
  .news { top: calc(var(--top-h, 58px) + 6px); right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .target { font-size: 12px; }
}

/* The core is clickable: pointer cursor while hovering it. */
.stage.core-hover, .stage.core-hover canvas { cursor: pointer; }

/* Effort chips under the model list. */
.effort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px 8px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.effort-k { font: 600 10.5px var(--sf); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-right: 4px; }
.effort-chip { border: 0; border-radius: 999px; padding: 5px 10px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); font: 600 12px var(--sf); transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.effort-chip:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.effort-chip:active { transform: scale(0.94); }
.effort-chip.sel { background: rgba(var(--acc), 0.28); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(var(--acc-light), 0.5); }

/* Wider model menu so the effort chips sit on one or two rows. */
.model-menu { min-width: min(330px, calc(100vw - 48px)); }

/* =====================================================================
   PERFORMANCE — drop full-screen effects composited over the moving core.
   ===================================================================== */
.fx-grain, .fx-scan { display: none; }
.fx-haze { animation: none; filter: none; }
.edge { display: none; }
/* frame pulse: no live blur filter (it redrew every frame); a soft wide stroke gives the glow instead */
.hf-pulse path { filter: none; stroke-width: 3; }
.hf-corner { filter: none; }
.hf-side, .hf-bottom { box-shadow: 0 0 6px rgba(var(--acc), 0.55); }

/* =====================================================================
   "+" BROWSE SHEET — App Store-style tiles in our dark glass.
   ===================================================================== */
.plus-menu { width: min(440px, calc(100vw - 24px)); padding: 14px; border-radius: 24px; background: rgba(16, 12, 10, 0.92); }
.pm-head { display: flex; align-items: center; gap: 4px; padding: 2px 4px 12px; color: #fff; }
.pm-head b { font: 700 24px var(--sf); letter-spacing: -0.02em; }
.pm-head svg { opacity: 0.55; margin-top: 2px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-tile {
  position: relative; height: 112px; border: 0; border-radius: 20px; padding: 14px; overflow: hidden;
  display: flex; align-items: flex-end; text-align: left; color: #fff;
  background: linear-gradient(150deg, rgba(var(--t), 0.78), rgba(var(--t), 0.34) 62%, rgba(var(--t), 0.2)), #141010;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 14px 26px -16px rgba(var(--t), 0.75);
  animation: tileIn 0.4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s ease;
}
.pm-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%); }
.pm-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 18px 30px -14px rgba(var(--t), 0.85); }
.pm-tile:active { transform: scale(0.97); }
.pm-tile-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; max-width: 74%; }
.pm-tile-text b { font: 700 17px/1.12 var(--sf); letter-spacing: -0.015em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.pm-tile-text small { font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.78); }
.pm-tile-art { position: absolute; top: 8px; right: 8px; width: 54px; height: 54px; filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.38)); transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
.pm-tile-art svg { width: 100%; height: 100%; display: block; }
.pm-tile:hover .pm-tile-art { transform: rotate(-6deg) scale(1.06); }
.pm-tile-badge { position: absolute; top: 12px; left: 12px; z-index: 1; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ff4a3a; color: #fff; font: 700 11px/20px var(--sf); text-align: center; }
@keyframes tileIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: none; } }

/* Phones: the Browse sheet rises from the bottom like the Systems sheet. */
@media (max-width: 760px) {
  .plus-menu { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 84vh; border-radius: 26px 26px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheetUp 0.42s cubic-bezier(.2, .8, .2, 1) both; translate: none; }
  .plus-wrap.open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); animation: fadeIn 0.3s ease both; }
  .pm-tile { height: 104px; }
}
@media (prefers-reduced-motion: reduce) { .pm-tile { animation: none; } }

/* Browse tiles in OUR style: dark glass, hairline edge, agent-colour accents, thin line icons. */
.pm-tile {
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--acc), 0.16), transparent 60%), rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.pm-tile::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%); }
.pm-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 0.5px rgba(var(--acc-light), 0.45), 0 0 22px -6px rgba(var(--acc), 0.45); }
.pm-tile-text b { font: 600 16px/1.15 var(--sf); text-shadow: none; color: #fff; }
.pm-tile-text small { color: rgba(255, 255, 255, 0.5); }
.pm-tile-art {
  top: 12px; right: 12px; width: 40px; height: 40px; padding: 9px; border-radius: 12px; filter: none;
  color: rgb(var(--acc-light)); background: rgba(var(--acc), 0.14); box-shadow: inset 0 0 0 0.5px rgba(var(--acc-light), 0.25);
}
.pm-tile:hover .pm-tile-art { transform: none; background: rgba(var(--acc), 0.22); }

/* Gold news: live price card + Fed tone gauge. */
.px-card, .tone-card { border-radius: 16px; padding: 14px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.px-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.px-k { font: 600 10.5px var(--sf); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.px-price { font: 700 26px var(--sf); letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px; }
.px-chg { text-align: right; font: 700 15px var(--sf); font-variant-numeric: tabular-nums; padding: 5px 10px; border-radius: 10px; }
.px-chg small { display: block; font: 500 11px var(--sf); opacity: 0.8; margin-top: 2px; }
.px-chg.up { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.px-chg.down { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.px-spark { display: block; width: 100%; height: 70px; margin: 12px 0 8px; }
.px-foot { display: flex; justify-content: space-between; font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.px-wait { font: 500 12.5px var(--sf); color: rgba(255, 255, 255, 0.5); padding: 14px 0; }
.tone-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tone-lean { font: 700 14px var(--sf); }
.tone-lean.hawkish { color: #f87171; }
.tone-lean.dovish { color: #34d399; }
.tone-lean.balanced { color: rgba(255, 255, 255, 0.8); }
.tone-bar { position: relative; height: 8px; border-radius: 999px; margin: 12px 0 6px; background: linear-gradient(90deg, rgba(52, 211, 153, 0.55), rgba(255, 255, 255, 0.15) 50%, rgba(248, 113, 113, 0.55)); }
.tone-fill { display: none; }
.tone-mark { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4); transition: left 0.6s cubic-bezier(.2, .8, .2, 1); }
.tone-ends { display: flex; justify-content: space-between; font: 600 11px var(--sf); color: rgba(255, 255, 255, 0.55); }
.tone-why { font: 500 12.5px/1.45 var(--sf); color: rgba(255, 255, 255, 0.7); margin: 10px 0 4px; }
.tone-note { font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); }

/* =====================================================================
   SIRI GLOW — an animated band of the agent's colours around the screen edges.
   ===================================================================== */
@property --siri-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.siri-glow { position: fixed; inset: 0; pointer-events: none; z-index: 35; opacity: 0; transition: opacity 0.5s cubic-bezier(.2, .8, .2, 1); }
.siri-glow::before, .siri-glow::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from var(--siri-a), rgb(var(--acc-light)), rgb(var(--acc)), rgb(var(--acc-deep)), #ffffff, rgb(var(--acc)), rgb(var(--acc-light)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: siriSpin 3.4s linear infinite;
}
.siri-glow::before { padding: 3px; }
.siri-glow::after { padding: 26px; filter: blur(28px); opacity: calc(0.7 + var(--siri-lvl, 0) * 0.3); }
body.siri .siri-glow { opacity: 1; }
body.siri-speak:not(.siri) .siri-glow { opacity: 0.5; }
@keyframes siriSpin { to { --siri-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .siri-glow::before, .siri-glow::after { animation: none; } }

/* Siri glow comes FROM the holo frame lines (not a band at the screen edge). */
.siri-glow { display: none; }
.hf-side, .hf-bottom, .hf-arc, .hf-seg, .hf-pulse path { transition: box-shadow 0.5s ease, background-color 0.5s ease, stroke 0.5s ease, opacity 0.5s ease; }
body.siri .holo-frame, body.siri-speak .holo-frame { animation: none; }
body.siri .hf-side, body.siri .hf-bottom {
  background: rgb(var(--acc-light));
  box-shadow: 0 0 6px 1px rgb(var(--acc)), 0 0 22px 6px rgba(var(--acc), calc(0.55 + var(--siri-lvl, 0) * 0.4)), 0 0 60px 18px rgba(var(--acc), calc(0.25 + var(--siri-lvl, 0) * 0.3));
  animation: siriBreathe 1.6s ease-in-out infinite alternate;
}
body.siri .hf-arc, body.siri .hf-seg { stroke: rgb(var(--acc-light)); }
body.siri .hf-corner { filter: drop-shadow(0 0 6px rgb(var(--acc))) drop-shadow(0 0 18px rgba(var(--acc), 0.7)); }
/* light streams around the outline, fast */
body.siri .hf-pulse path {
  stroke: #fff; stroke-width: 4; stroke-dasharray: 160 840;
  filter: drop-shadow(0 0 6px rgb(var(--acc-light))) drop-shadow(0 0 16px rgb(var(--acc)));
  animation-duration: 1.5s;
}
/* softer while she's answering */
body.siri-speak:not(.siri) .hf-side, body.siri-speak:not(.siri) .hf-bottom {
  background: rgb(var(--acc-light)); box-shadow: 0 0 5px rgb(var(--acc)), 0 0 18px 4px rgba(var(--acc), 0.45);
}
body.siri-speak:not(.siri) .hf-pulse path { stroke-dasharray: 110 890; animation-duration: 2.6s; stroke: rgb(var(--acc-light)); }
@keyframes siriBreathe { from { opacity: 0.8; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.siri .hf-side, body.siri .hf-bottom { animation: none; } }

/* Active glow is just a glow: no moving light on the frame while Friday listens or answers. */
body.siri .hf-pulse path, body.siri-speak .hf-pulse path { animation: none !important; opacity: 0 !important; stroke: transparent !important; filter: none !important; }

/* While recording, the Send button is a Stop button. */
.send.is-stop { background: linear-gradient(180deg, #ffffff, #ffd9d4); color: #7a1a10; }
.send.is-stop::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: #e5483a; margin-right: 7px; vertical-align: 0; }

/* Closing animations: pop-ups shrink/fade away; on phones the Browse sheet slides back down. */
@keyframes menuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.agent-menu.closing, .model-menu.closing, .plus-menu.closing { animation: menuOut 0.24s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
.model-menu.closing { animation-name: menuOutUp; }
@keyframes menuOutUp { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.97); } }
@media (max-width: 760px) {
  .plus-menu.closing { animation: sheetDown 0.26s cubic-bezier(.4, 0, 1, 1) both; }
  .plus-wrap.closing::before { animation: fadeOut 0.26s ease both; }
}
@media (prefers-reduced-motion: reduce) { .agent-menu.closing, .model-menu.closing, .plus-menu.closing, .plus-wrap.closing::before { animation-duration: 0.01s; } }

/* Drawers sit centred INSIDE the orange frame (equal gap to the top, bottom and side lines)
   and swipe fully in from / out to the frame edge. Phones keep the bottom sheet. */
@media (min-width: 640px) {
  :root { --dr-gap: 12px; --dr-x: calc(var(--hf-inset) + var(--dr-gap) + 2px); }
  .side .panel { top: calc(14px + var(--dr-gap)); bottom: calc(var(--hf-bottom) + var(--dr-gap)); width: min(var(--w, var(--side-w)), calc(100vw - 2 * var(--dr-x))); }
  .side.left .panel { left: var(--dr-x); }
  .side.right .panel { right: var(--dr-x); }
  .side.left.open .panel { animation: swipeInL 0.42s cubic-bezier(.22, 1, .36, 1) both; }
  .side.right.open .panel { animation: swipeInR 0.42s cubic-bezier(.22, 1, .36, 1) both; }
  .side.left.closing .panel { animation: swipeOutL 0.3s cubic-bezier(.55, 0, .75, .2) both; }
  .side.right.closing .panel { animation: swipeOutR 0.3s cubic-bezier(.55, 0, .75, .2) both; }
}
@media (min-width: 1180px) {
  .side.left .grip { left: calc(var(--dr-x) + min(var(--w, var(--side-w)), calc(100vw - 2 * var(--dr-x))) - 6px) !important; }
  .side.right .grip { right: calc(var(--dr-x) + min(var(--w, var(--side-w)), calc(100vw - 2 * var(--dr-x))) - 6px) !important; }
}
@keyframes swipeInL { from { opacity: 0.4; transform: translateX(calc(-100% - var(--dr-x))); } to { opacity: 1; transform: none; } }
@keyframes swipeInR { from { opacity: 0.4; transform: translateX(calc(100% + var(--dr-x))); } to { opacity: 1; transform: none; } }
@keyframes swipeOutL { from { opacity: 1; transform: none; } to { opacity: 0.4; transform: translateX(calc(-100% - var(--dr-x))); } }
@keyframes swipeOutR { from { opacity: 1; transform: none; } to { opacity: 0.4; transform: translateX(calc(100% + var(--dr-x))); } }

/* Bottom frame lines taper to a clean point: the glow follows the line's own fade
   (drop-shadow traces the gradient) instead of a box-shadow block that ends in a smudge. */
.hf-bottom, body.siri .hf-bottom, body.siri-speak:not(.siri) .hf-bottom { box-shadow: none; transition: filter 0.5s ease, opacity 0.5s ease; }
.hf-bottom { filter: drop-shadow(0 0 2px rgba(var(--acc), 0.9)) drop-shadow(0 0 6px rgba(var(--acc), 0.5)); }
.hf-bottom.l { background: linear-gradient(90deg, var(--hf) 0%, var(--hf) 30%, transparent 100%); }
.hf-bottom.r { background: linear-gradient(270deg, var(--hf) 0%, var(--hf) 30%, transparent 100%); }
body.siri .hf-bottom.l, body.siri-speak:not(.siri) .hf-bottom.l { background: linear-gradient(90deg, rgb(var(--acc-light)) 0%, rgb(var(--acc-light)) 30%, transparent 100%); }
body.siri .hf-bottom.r, body.siri-speak:not(.siri) .hf-bottom.r { background: linear-gradient(270deg, rgb(var(--acc-light)) 0%, rgb(var(--acc-light)) 30%, transparent 100%); }
body.siri .hf-bottom { filter: drop-shadow(0 0 3px rgb(var(--acc))) drop-shadow(0 0 12px rgba(var(--acc), 0.8)) drop-shadow(0 0 28px rgba(var(--acc), 0.45)); }
body.siri-speak:not(.siri) .hf-bottom { filter: drop-shadow(0 0 3px rgb(var(--acc))) drop-shadow(0 0 12px rgba(var(--acc), 0.5)); }

/* Longer bottom lines from each corner. */
.hf-bottom.l, .hf-bottom.r { width: min(34vw, 440px); }
@media (max-width: 1100px) { .hf-bottom.l, .hf-bottom.r { width: 25vw; } }

/* Stronger glow on the frame lines (static, so no per-frame cost). Siri states still override. */
.hf-side { box-shadow: 0 0 3px rgba(var(--acc), 0.95), 0 0 10px rgba(var(--acc), 0.6), 0 0 24px rgba(var(--acc-deep), 0.35); }
.hf-bottom { filter: drop-shadow(0 0 3px rgba(var(--acc), 1)) drop-shadow(0 0 9px rgba(var(--acc), 0.7)) drop-shadow(0 0 20px rgba(var(--acc-deep), 0.45)); }
.hf-corner { filter: drop-shadow(0 0 3px rgba(var(--acc), 0.95)) drop-shadow(0 0 9px rgba(var(--acc), 0.55)); }

/* Viral Radar: same glass panel as gold news, with thumbnails and a Recreate action. */
.news-meta { flex-wrap: wrap; row-gap: 3px; }
.vr-group { padding: 12px 10px 4px; font: 600 11px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.vr-item { display: flex; gap: 12px; padding: 10px; border-radius: 14px; transition: background 0.15s ease; }
.vr-item:hover { background: rgba(255, 255, 255, 0.05); }
.vr-thumb { position: relative; flex: none; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.vr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-thumb.none { display: none; }
.vr-play { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vr-play::after { content: ""; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.vr-main { min-width: 0; flex: 1; }
.vr-hl { display: block; text-decoration: none; }
.vr-hl:hover { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); }
.vr-item .news-why b { color: rgb(var(--acc-light)); font-weight: 600; }
.impact.vr-hot { background: rgb(var(--acc)); color: rgb(8, 12, 18); }
.impact.vr-rising { background: rgba(var(--acc), 0.22); color: rgb(var(--acc-light)); }
.impact.vr-watch { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.vr-up { color: rgb(52, 211, 153); }
.vr-acts { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.vr-kind { font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); }
.vr-btn { margin-left: auto; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; font: 600 12px var(--sf); color: rgb(var(--acc-light)); background: rgba(var(--acc), 0.16); transition: background 0.15s ease; }
.vr-btn:hover { background: rgba(var(--acc), 0.28); }

/* Bible: search, situation chips, passages and a chapter reader. */
.bb-search { display: flex; gap: 8px; padding: 10px 14px 4px; }
.bb-search input { flex: 1; min-width: 0; padding: 10px 14px; border: 0; border-radius: 12px; outline: none; font: 500 14px var(--sf); color: #fff; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.bb-search input:focus { box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.6); }
.bb-search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.bb-read-btn { padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer; font: 600 13px var(--sf); color: rgb(var(--acc-light)); background: rgba(var(--acc), 0.16); }
.bb-read-btn:hover { background: rgba(var(--acc), 0.28); }
.bb-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 8px 12px; }
.bb-chip { padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer; font: 500 12.5px var(--sf); color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.07); transition: background 0.15s ease, color 0.15s ease; }
.bb-chip:hover { background: rgba(var(--acc), 0.22); color: #fff; }
.bb-card { margin: 0 4px 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.bb-ref { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 13.5px var(--sf); color: rgb(var(--acc-light)); }
.bb-ref span { font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); }
.bb-ref:hover { text-decoration: underline; }
.bb-text { margin: 6px 0 0; font: 400 15px/1.55 var(--sf); color: rgba(255, 255, 255, 0.92); }
.bb-nav { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.bb-nav select { min-width: 0; padding: 7px 10px; border: 0; border-radius: 10px; font: 500 13px var(--sf); color: #fff; background: rgba(255, 255, 255, 0.08); }
.bb-nav select:first-of-type { flex: 1; }
.bb-nav option, .bb-nav optgroup { background: #15110e; color: #fff; }
.bb-step { display: flex; gap: 4px; margin-left: auto; }
.bb-step button { width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer; font: 600 18px var(--sf); color: #fff; background: rgba(255, 255, 255, 0.08); }
.bb-step button:disabled { opacity: 0.3; cursor: default; }
.bb-h { margin: 6px 10px 6px; font: 700 19px var(--sf); color: #fff; }
.bb-chapter { padding: 0 10px 8px; }
.bb-chapter p { margin: 0 0 9px; font: 400 15.5px/1.6 var(--sf); color: rgba(255, 255, 255, 0.92); }
.bb-chapter sup { margin-right: 5px; font: 600 10px var(--sf); color: rgb(var(--acc-light)); }
.bb-bar { display: flex; align-items: center; gap: 6px; padding: 6px 4px 2px; }
.bb-bar .vr-group { padding: 0 6px; }
.bb-back { flex: none; }

/* Voice menu (from the speaker button): Live conversation + spoken replies. */
.voice-wrap { position: relative; }
@media (max-width: 1000px) { .voice-wrap { grid-area: v; } }
.voice-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 290px; padding: 6px;
  background: rgba(20, 12, 7, 0.86); border-radius: 16px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  animation: menuIn 0.22s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top right;
}
.voice-menu[hidden] { display: none; }
.voice-menu.closing { animation: menuOut 0.24s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
@media (max-width: 760px) { .voice-menu { right: -44px; width: min(290px, calc(100vw - 24px)); } }
.vm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 11px; background: transparent; color: #fff4ea; text-align: left; cursor: pointer; }
.vm-row:hover { background: rgba(255, 255, 255, 0.07); }
.vm-row .ag-text b { letter-spacing: 0; }
.vm-row .ag-text small { line-height: 1.35; }
.vm-switch { flex: none; margin-left: auto; width: 38px; height: 23px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); position: relative; transition: background 0.2s ease; }
.vm-switch span { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.22s cubic-bezier(.2, .8, .2, 1); }
.vm-switch.on { background: rgb(var(--acc)); }
.vm-switch.on span { transform: translateX(15px); }
/* Live on: the speaker button lights up in the agent's colour. */
#voiceBtn.live { color: rgb(var(--acc-light)); background: rgba(var(--acc), 0.22); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.55), 0 0 14px rgba(var(--acc), 0.35); }

/* Menus and drawers take the active agent's colour (they were a fixed warm brown that only suited F.R.I.D.A.Y.). */
:root { --menu-glass: color-mix(in srgb, rgb(var(--acc-deep)) 9%, rgb(11 11 13 / 0.9)); --panel-glass: color-mix(in srgb, rgb(var(--acc-deep)) 8%, rgb(12 12 14 / 0.94)); }
.agent-menu, .plus-menu, .model-menu, .voice-menu { background: var(--menu-glass); transition: background-color 0.6s ease; }
.side .panel { background: var(--panel-glass); }
.ag-item, .pm-row, .pm-skill, .vm-row { color: #fff; }
.ag-text small { color: rgba(var(--acc-light), 0.6); }
.ag-item.sel { background: rgba(var(--acc), 0.16); }
.bb-nav option, .bb-nav optgroup { background: rgb(18 18 22); }
/* Dimmed text (placeholders, empty states, labels) is a neutral grey with a hint of the agent's colour, not a fixed blue. */
:root { --muted: color-mix(in srgb, rgb(var(--acc-light)) 30%, rgb(140 140 148)); }

/* Guide panel */
.gd-body { padding: 4px 8px 14px; }
.gd-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.gd-row:hover { background: rgba(255, 255, 255, 0.04); }
.gd-row b { font: 600 13px/1.35 var(--sf); color: rgb(var(--acc-light)); }
.gd-row span { font: 400 13.5px/1.45 var(--sf); color: rgba(255, 255, 255, 0.85); }
.gd-note { margin: 12px 10px 0; font: 500 12px/1.45 var(--sf); color: rgba(255, 255, 255, 0.45); }
@media (max-width: 480px) { .gd-row { grid-template-columns: 1fr; gap: 3px; } }

/* Startup: the frame and core come online (silent) */
body.booting .hf-side, body.booting .hf-bottom, body.booting .hf-arc, body.booting .hf-seg { animation: bootLine 1.6s ease-out both; }
body.booting #stage { animation: bootCore 1.8s ease-out both; }
body.booting #subtitle { font-family: var(--mono); letter-spacing: 0.22em; font-size: 12px; color: rgb(var(--acc-light)); }
@keyframes bootLine { 0% { opacity: 0; filter: brightness(2.2); } 35% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 1; filter: none; } }
@keyframes bootCore { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: none; } }

/* ULTRON: red, darker, a little unstable. The warning screen, a red vignette, faint scanlines and a glitching name. */
:root[data-agent="ultron"] body { background: radial-gradient(ellipse 75% 65% at 50% 42%, rgba(120, 0, 0, 0.35), transparent 70%), #050000; }
:root[data-agent="ultron"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(80, 0, 0, 0.55) 100%); }
:root[data-agent="ultron"] #agentLabel { animation: ultronGlitch 4.5s infinite steps(1); letter-spacing: 0.32em; display: inline-block; }
/* ULTRON idles unstable: every few seconds a short glitch burst runs through the whole screen (boss: keep it, always on). */
:root[data-agent="ultron"] .stage canvas { animation: ultronCore 6s infinite steps(1); }
:root[data-agent="ultron"] #subtitle, :root[data-agent="ultron"] #coreLabel { animation: ultronText 7.3s infinite steps(1); }
:root[data-agent="ultron"] .hf-corner, :root[data-agent="ultron"] .hf-bottom { animation: ultronFlicker 6s infinite steps(1); }
:root[data-agent="ultron"]::after { content: ""; position: fixed; left: 0; right: 0; height: 9vh; top: 30%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 30, 30, 0.22) 30%, rgba(0, 225, 255, 0.12) 60%, transparent); mix-blend-mode: screen;
  animation: ultronBand 6s infinite steps(1); }
@keyframes ultronCore {
  0%, 87%, 100% { transform: none; filter: none; }
  88% { transform: translate(-6px, 2px) skewX(-3deg); filter: drop-shadow(5px 0 rgba(0, 225, 255, 0.55)) drop-shadow(-5px 0 rgba(255, 0, 40, 0.7)); }
  89% { transform: translate(5px, -1px); filter: drop-shadow(-4px 0 rgba(0, 225, 255, 0.5)) brightness(1.4); }
  90% { transform: translate(-2px, 0) scaleY(1.03); filter: contrast(1.6); }
  91% { transform: none; filter: none; }
  93% { transform: translate(3px, 1px) skewX(2deg); filter: drop-shadow(-6px 0 rgba(255, 0, 40, 0.6)); }
  94% { transform: none; filter: none; } }
@keyframes ultronText {
  0%, 84%, 100% { text-shadow: none; transform: none; opacity: 1; }
  85% { text-shadow: -3px 0 #ff0033, 3px 0 #00e1ff; transform: translateX(3px); }
  86% { text-shadow: 3px 0 #ff0033, -3px 0 #00e1ff; transform: translateX(-4px); opacity: 0.7; }
  87% { text-shadow: none; transform: none; }
  90% { text-shadow: -2px 0 #ff0033, 2px 0 #00e1ff; transform: translateX(2px) skewX(-6deg); }
  91% { text-shadow: none; transform: none; } }
@keyframes ultronFlicker { 0%, 87%, 100% { opacity: 1; } 88% { opacity: 0.15; } 89% { opacity: 1; } 90% { opacity: 0.4; } 92% { opacity: 1; } 93% { opacity: 0.2; } 94% { opacity: 1; } }
@keyframes ultronBand { 0%, 87%, 95%, 100% { opacity: 0; top: 30%; } 88% { opacity: 1; top: 24%; } 89% { opacity: 0.8; top: 61%; } 90% { opacity: 1; top: 43%; } 93% { opacity: 0.9; top: 70%; } 94% { opacity: 0.6; top: 12%; } }
@keyframes ultronGlitch { 0%, 88%, 100% { text-shadow: none; transform: none; opacity: 1; }
  89% { text-shadow: -3px 0 #ff0033, 3px 0 #00e1ff; transform: translateX(3px) skewX(-8deg); }
  91% { text-shadow: 3px 0 #ff0033, -3px 0 #00e1ff; transform: translateX(-3px); opacity: 0.55; }
  93% { text-shadow: -2px 0 #ff0033, 2px 0 #00e1ff; transform: translateX(2px); opacity: 1; }
  95% { text-shadow: none; transform: none; } 97% { opacity: 0.5; } 98% { opacity: 1; } }
.ultron-gate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgba(10, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ugIn 0.35s ease-out both; }
.ultron-gate.out { animation: ugOut 0.26s ease-in both; }
.ug-box { max-width: 460px; width: 100%; text-align: center; padding: 30px 26px 24px; border: 1px solid rgba(255, 40, 40, 0.6); border-radius: 18px;
  background: linear-gradient(180deg, rgba(60, 0, 0, 0.85), rgba(15, 0, 0, 0.92)); box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.15), 0 0 60px rgba(255, 0, 0, 0.35), inset 0 0 40px rgba(255, 0, 0, 0.12); color: #ffd9d9; }
.ug-warn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.4em; color: #ff3b3b; animation: ugBlink 1s steps(2) infinite; }
.ug-title { margin: 10px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: 0.18em; color: #fff; text-shadow: 0 0 18px rgba(255, 0, 0, 0.8); animation: ultronGlitch 2.2s infinite steps(1); }
.ug-box p { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #f3bcbc; display: flex; flex-direction: column; gap: 4px; text-wrap: balance; }
.ug-box p span { display: block; }
.ug-box .ug-hard { color: #fff; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.ug-btns button:focus { outline: none; }
.ug-btns button:focus-visible { outline: 2px solid rgba(255, 70, 70, 0.9); outline-offset: 3px; }
.ug-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ug-btns button { padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.ug-no { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; }
.ug-yes { background: #ff2424; border: 0; color: #fff; box-shadow: 0 0 22px rgba(255, 36, 36, 0.6); }
@keyframes ugIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ugOut { to { opacity: 0; } }
@keyframes ugBlink { 50% { opacity: 0.25; } }

/* sign-in screen */
.gate-logo { height: 18px; width: auto; align-self: center; margin-bottom: 6px; opacity: 0.95; }
#gateUser { background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--muted); text-align: center; }
.gate-box small { font-size: 11.5px; line-height: 1.45; color: var(--muted); opacity: 0.8; }

/* Desktop app on a Mac: the window's traffic lights sit top-left, and the top bar is where you drag the window */
html.mac-app .top { padding-left: 86px; -webkit-app-region: drag; }
html.mac-app .top button, html.mac-app .top a, html.mac-app .top input, html.mac-app .top select, html.mac-app .top [role="button"],
html.mac-app .top [role="listbox"], html.mac-app #agentSwitch, html.mac-app #agentMenu, html.mac-app #plusMenu, html.mac-app .top .brand { -webkit-app-region: no-drag; }

/* answers: two lines on screen; click to read the rest */
#subtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; cursor: pointer; }
#subtitle.open { -webkit-line-clamp: unset; line-clamp: none; }

/* Daily Review: F.R.I.D.A.Y.'s report PDFs */
.rp-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rp-day { flex: none; padding: 5px 10px; border-radius: 999px; font: 600 12px var(--sf); color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.rp-day.on { color: #fff; background: rgba(var(--acc), 0.18); border-color: rgba(var(--acc), 0.45); }
.rp-list { display: flex; flex-direction: column; gap: 6px; }
.rp-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-align: left; color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); transition: background 0.15s ease; }
.rp-item:hover { background: rgba(255, 255, 255, 0.08); }
.rp-item.plan { border-color: rgba(var(--acc), 0.4); background: rgba(var(--acc), 0.08); }
.rp-thumb { flex: none; width: 46px; height: 62px; border-radius: 5px; object-fit: cover; object-position: top; background: rgba(255, 255, 255, 0.08); }
.rp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-text b { font: 600 14px var(--sf); }
.rp-text small { font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.5); }
.rp-viewer { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: rgba(5, 6, 8, 0.96); }
.rp-viewer[hidden] { display: none; }
.rp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); color: #fff; font: 600 14px var(--sf); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rp-bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar button { padding: 7px 12px; border-radius: 9px; color: #fff; background: rgba(255, 255, 255, 0.08); font: 600 13px var(--sf); }
.rp-pages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; }
.rp-pages img { width: min(100%, 900px); height: auto; flex: none; object-fit: contain; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }   /* flex: none: Safari squashed the pages flat */
.rp-pages img:not([src]) { aspect-ratio: 1 / 1.414; }   /* an A4-shaped space while a page loads */
.rp-pages { padding-bottom: max(16px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.rp-pages.zoomed { align-items: flex-start; overflow-x: auto; }
.rp-pages.zoomed img { width: 220%; max-width: none; }   /* tap a page: read the small print (tap again to fit) */

/* Clients & Team (web/health.js): health from Notion, kept by F.R.I.D.A.Y. */
.health { --ok: 52, 211, 153; --warn: 251, 191, 36; --bad: 248, 81, 73; --idle: 148, 156, 172; }
.hl-tabs { display: flex; gap: 4px; margin: 0 14px 6px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); }
.hl-tabs button { flex: 1; padding: 7px 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font: 600 13px var(--sf); color: rgba(255, 255, 255, 0.55); }
.hl-tabs button[aria-selected="true"] { color: #fff; background: rgba(var(--acc), 0.2); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.4); }
.hl-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 10px 2px; }
.hl-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; background: rgba(var(--c), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--c), 0.28); }
.hl-chip b { font: 700 20px var(--sf); color: rgb(var(--c)); }
.hl-chip span { font: 600 11px var(--sf); color: rgba(255, 255, 255, 0.6); }
.hl-chip.risk, .hl-client.risk { --c: var(--bad); }
.hl-chip.watch, .hl-client.watch { --c: var(--warn); }
.hl-chip.healthy, .hl-client.healthy { --c: var(--ok); }
.hl-chip.paused, .hl-client.paused { --c: var(--idle); }
.hl-client { padding: 10px; border-radius: 14px; cursor: pointer; transition: background 0.15s ease; }
.hl-client:hover, .hl-client.open { background: rgba(255, 255, 255, 0.05); }
.hl-client.paused { opacity: 0.6; }
.hl-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hl-row b { font: 600 15px var(--sf); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgba(var(--c), 0.8); }
.hl-ball { margin-left: auto; flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.5); }
.hl-next { margin: 4px 0 0 17px; font: 400 13.5px/1.45 var(--sf); color: rgba(255, 255, 255, 0.78); }
.hl-more { margin: 10px 0 0 17px; display: grid; gap: 3px; }
.hl-more dt { font: 600 11px var(--sf); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-top: 6px; }
.hl-more dd { margin: 0; font: 400 13px/1.45 var(--sf); color: rgba(255, 255, 255, 0.8); }
.hl-foot, .hl-period { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0 17px; font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.45); }
.hl-period { margin: 6px 10px 8px; }
.hl-notion { flex: none; padding: 5px 10px; border-radius: 8px; font: 600 12px var(--sf); color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.hl-notion:hover { background: rgba(var(--acc), 0.22); }
.news-note .hl-notion { margin-left: 6px; }
.hl-team { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.hl-person { padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.hl-emoji { flex: none; font-size: 16px; }
.hl-role { margin-left: auto; font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.5); }
.hl-facts, .hl-improve { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font: 400 13px/1.45 var(--sf); color: rgba(255, 255, 255, 0.75); }
.hl-improve { margin: 0 10px 10px; }
.hl-tag { margin-top: 7px; padding: 7px 9px; border-radius: 9px; font: 400 13px/1.45 var(--sf); color: rgba(255, 255, 255, 0.82); }
.hl-tag b { display: block; font: 600 11px var(--sf); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.hl-tag.good { background: rgba(52, 211, 153, 0.08); } .hl-tag.good b { color: rgb(52, 211, 153); }
.hl-tag.gap { background: rgba(248, 81, 73, 0.08); } .hl-tag.gap b { color: rgb(248, 81, 73); }

/* Connectors: live from Claude */
.pm-conn > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pm-conn small { font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); }
.pm-status.on { color: rgb(52, 211, 153); font-weight: 600; }
.pm-cbtn { margin-left: auto; flex: none; padding: 5px 11px; border: 0; border-radius: 8px; font: 600 12px var(--sf); color: #fff; text-decoration: none; cursor: pointer; background: rgba(var(--acc), 0.28); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.5); }
.pm-cbtn:hover { background: rgba(var(--acc), 0.42); }
.pm-steps { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; font: 400 12.5px/1.5 var(--sf); color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.04); }
.pm-steps .pm-cbtn { margin-left: 0; }
.pm-copy { display: flex; gap: 8px; align-items: center; max-width: 100%; padding: 6px 9px; border: 0; border-radius: 8px; font: 500 12px ui-monospace, Menlo, monospace; color: #fff; background: rgba(0, 0, 0, 0.35); cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.pm-copy span { flex: none; font: 600 11px var(--sf); color: rgb(var(--acc-light, var(--acc))); }
.pm-foot a { color: rgb(var(--acc)); }
.pm-steps p { margin: 0; }

/* Activity log: a drop-down, one line per entry */
.feed-toggle { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.feed-toggle .feed-chev { margin-left: auto; opacity: 0.6; transition: transform 0.2s ease; }
.feed-toggle[aria-expanded="true"] .feed-chev { transform: rotate(180deg); }
.feed .f { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.feed .f.full { white-space: normal; }
.fold svg { display: block; }

/* Important Messages: reply to F.R.I.D.A.Y.'s Slack DM from the hub */
.focus-card .reply { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.focus-card .reply textarea { width: 100%; min-height: 64px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); color: #fff; font: 400 15px/1.45 var(--sf); outline: none; }
.focus-card .reply textarea:focus { border-color: rgba(var(--acc), 0.6); box-shadow: 0 0 0 3px rgba(var(--acc), 0.15); }
.reply-note { font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.45); }

/* James's Agenda (web/calendar.js) */
.calendar { display: flex; flex-direction: column; }
.cal-title { font: italic 600 26px/1.05 "New York", "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif !important; letter-spacing: -0.01em;
  background: linear-gradient(100deg, #fff6e4 0%, #f3c97a 45%, #d99a3e 70%, #fbe3b0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 12px rgba(243, 180, 90, 0.25)); }
.cal-title span { display: block; font: 500 10.5px/1.6 var(--sf); font-style: normal; letter-spacing: 0.32em; text-transform: uppercase; -webkit-text-fill-color: rgba(255, 236, 205, 0.6); }
.cal-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 14px 10px; }
.cal-day { flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.6); cursor: pointer; }
.cal-day small { font: 600 10px var(--sf); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-day b { font: 600 19px var(--sf); color: #fff; }
.cal-day i { font: 600 10px var(--sf); font-style: normal; color: rgba(255, 255, 255, 0.4); }
.cal-day.today small { color: rgb(243, 201, 122); }
.cal-day.on { background: linear-gradient(160deg, rgba(243, 201, 122, 0.28), rgba(217, 154, 62, 0.16)); box-shadow: inset 0 0 0 1px rgba(243, 201, 122, 0.55); }
.cal-body { flex: 1; min-height: 0; }
.cal-ev { display: flex; gap: 12px; padding: 9px 10px; border-radius: 12px; position: relative; }
.cal-ev:hover { background: rgba(255, 255, 255, 0.04); }
.cal-ev.past { opacity: 0.42; }
.cal-ev.live { background: rgba(243, 201, 122, 0.1); box-shadow: inset 3px 0 0 rgb(243, 201, 122); }
.cal-time { flex: none; width: 58px; text-align: right; font: 600 13px var(--sf); color: #fff; font-variant-numeric: tabular-nums; }
.cal-time small { display: block; font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.4); }
.cal-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.cal-main b { font: 600 14px/1.35 var(--sf); color: #fff; }
.cal-main small { font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.5); }
.cal-links { display: flex; gap: 6px; margin-top: 4px; }
.cal-links a { padding: 3px 9px; border-radius: 7px; font: 600 11.5px var(--sf); color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.cal-links a:first-child { background: rgba(243, 201, 122, 0.25); }
.cal-chat { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.cal-thread { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; }
.cal-thread:empty { display: none; }
.cal-msg { max-width: 85%; padding: 7px 11px; border-radius: 14px; font: 400 13px/1.4 var(--sf); color: #fff; background: rgba(255, 255, 255, 0.07); align-self: flex-start; }
.cal-msg.me { align-self: flex-end; background: rgba(243, 201, 122, 0.22); }
.cal-msg.typing { color: rgba(255, 255, 255, 0.55); font-style: italic; }
.cal-msg.err { background: rgba(248, 81, 73, 0.15); }
.cal-ask { display: flex; gap: 8px; }
.cal-ask input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); color: #fff; font: 400 14px var(--sf); outline: none; }
.cal-ask input:focus { border-color: rgba(243, 201, 122, 0.6); }
.cal-ask button { flex: none; padding: 0 16px; border: 0; border-radius: 999px; font: 600 13px var(--sf); color: #1b1206; background: linear-gradient(120deg, #fbe3b0, #f3c97a); cursor: pointer; }

/* Important Messages (web/messages.js) */
.msg-card { margin: 0 6px 8px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); cursor: pointer; transition: background 0.15s ease; }
.msg-card:hover, .msg-card.open { background: rgba(255, 255, 255, 0.07); }
.msg-card.high { box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.45), 0 0 18px rgba(var(--acc), 0.08); }
.msg-card.done { opacity: 0.5; }
.msg-top { display: flex; align-items: center; gap: 8px; font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.5); }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.msg-card.high .msg-dot { background: rgb(var(--acc)); box-shadow: 0 0 8px rgb(var(--acc)); }
.msg-pri { margin-left: auto; padding: 2px 8px; border-radius: 999px; font: 700 10px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--acc)); background: rgba(var(--acc), 0.14); }
.msg-ok { margin-left: auto; font: 600 11px var(--sf); color: rgb(52, 211, 153); }
.msg-title { display: block; margin-top: 6px; font: 600 15px/1.35 var(--sf); color: #fff; }
.msg-text { margin-top: 4px; font: 400 13.5px/1.5 var(--sf); color: rgba(255, 255, 255, 0.75); white-space: pre-wrap; }
.msg-reply textarea { width: 100%; margin-top: 10px; min-height: 60px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.32); color: #fff; font: 400 14px/1.45 var(--sf); outline: none; }
.msg-reply textarea:focus { border-color: rgba(var(--acc), 0.6); box-shadow: 0 0 0 3px rgba(var(--acc), 0.14); }
.msg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.msg-btn { padding: 7px 13px; border: 0; border-radius: 10px; font: 600 12.5px var(--sf); color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.09); cursor: pointer; }
.msg-btn:hover { background: rgba(255, 255, 255, 0.16); }
.msg-btn.primary { background: rgba(var(--acc), 0.85); color: #170d04; }
.msg-btn.primary:hover { background: rgb(var(--acc)); }
.msg-btn[disabled] { opacity: 0.6; cursor: default; }
.msg-note { margin-top: 6px; font: 500 12px var(--sf); color: rgb(248, 81, 73); }
.msg-donebtn { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; }
.cal-ev { text-decoration: none; color: inherit; }

/* Phones: the chat bar stays clear of the home bar. In a browser tab the frame sits above it; as a Home Screen app the
   frame runs along the screen's edges and its bottom corners follow the phone's own rounded corners. */
:root { --hf-rb: var(--hf-r); }
.hf-corner.bl, .hf-corner.br { width: var(--hf-rb); height: var(--hf-rb); }
.hf-side { bottom: calc(var(--hf-bottom) + var(--hf-rb)); }
.hf-bottom.l { left: calc(var(--hf-inset) + var(--hf-rb)); }
.hf-bottom.r { right: calc(var(--hf-inset) + var(--hf-rb)); }
@media (max-width: 760px) {
  :root { --hf-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); --hf-inset: calc(7px + env(safe-area-inset-left, 0px)); }
  .hud { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) and (display-mode: standalone) {
  :root { --hf-bottom: 4px; --hf-inset: 4px; --hf-rb: 58px; }   /* newer iPhone screen corners are about 55-62pt */
  .hf-bottom { width: 30vw; }
}

/* Startup splash: the arc reactor powers up, the wordmark sweeps in, light traces the screen's edges, then it opens
   into the hub. Only opacity and transform are animated (smooth on phones); glows are static layers that fade. */
.splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: radial-gradient(60% 45% at 50% 46%, #1d0d03 0%, #060607 70%); will-change: opacity, transform; }
.splash.out { animation: spOut 0.9s cubic-bezier(.65, 0, .35, 1) forwards; pointer-events: none; }
.splash.gone { display: none; }
@keyframes spOut { to { opacity: 0; transform: scale(1.08); } }
.sp-reactor { position: relative; width: min(46vw, 210px); aspect-ratio: 1; }
.sp-reactor img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; will-change: transform, opacity;
  animation: spPower 1.5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes spPower { from { opacity: 0; transform: scale(0.7) rotate(-30deg); } to { opacity: 1; transform: none; } }
.sp-ring, .sp-ring2 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.sp-ring circle, .sp-ring2 circle { fill: none; stroke: rgb(255, 138, 40); }
.sp-ring { animation: spSpin 8s linear infinite; }
.sp-ring2 { opacity: 0; animation: spFade 0.8s 0.5s ease-out forwards, spSpinBack 4s linear infinite; }
.sp-ring circle { stroke-width: 1.6; stroke-dasharray: 590; stroke-dashoffset: 590; animation: spDraw 1.4s 0.1s cubic-bezier(.16, 1, .3, 1) forwards; }
.sp-ring2 circle { stroke-width: 3.5; stroke-dasharray: 6 5; }
@keyframes spDraw { to { stroke-dashoffset: 0; } }
@keyframes spSpin { to { transform: rotate(360deg); } }
@keyframes spSpinBack { to { transform: rotate(-360deg); } }
@keyframes spFade { to { opacity: 0.7; } }
.sp-flare { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 225, 0.9), rgba(255, 150, 60, 0.35) 45%, transparent 70%);
  opacity: 0; will-change: transform, opacity; animation: spFlare 1.3s 0.7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes spFlare { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.2); } }
.sp-word { width: min(78vw, 380px); opacity: 0; will-change: transform, opacity; animation: spWord 1s 0.8s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes spWord { from { opacity: 0; transform: translateY(10px); letter-spacing: 0; } to { opacity: 1; transform: none; } }
.sp-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sp-edge path { fill: none; stroke: rgb(255, 150, 60); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 5px rgba(255, 138, 40, 0.9)); animation: spTrace 1.7s 0.15s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes spTrace { to { stroke-dashoffset: 0; } }

/* Phones, upright or sideways: the top bar, the side labels and the frame stay inside the safe area (clear of the
   Dynamic Island and the rounded screen corners). On computers the safe area is zero, so nothing moves. */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  .top { padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(14px, calc(env(safe-area-inset-left, 0px) + 8px)); padding-right: max(14px, calc(env(safe-area-inset-right, 0px) + 8px)); }
  .hud { padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 6px)); padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 6px)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --hf-inset: calc(max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + 4px); --hf-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
  .hud { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Phones: the chat bar and the answer text sit inside the frame (not across its side lines); as a Home Screen app the
   bar drops close to the bottom curve, no dead gap under it. */
@media (max-width: 760px) {
  .center .ask { width: calc(100% - 44px); align-self: center; }
  .subtitle { padding: 0 20px; }
}
@media (max-width: 760px) and (display-mode: standalone) {
  .hud { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
}
/* Phones: the answer under STANDING BY is one line ("…" if longer) so nothing jumps up and down; tap it for the rest */
@media (max-width: 760px) {
  /* a plain one-line ellipsis: Safari sizes a centred line-clamp box to the whole sentence, so it ran off both sides */
  #subtitle { display: block; width: 100%; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: unset; line-clamp: none; min-height: 0; }
  #subtitle.open { white-space: normal; overflow: visible; }
}
/* Phones: drawers are a bottom sheet pinned to the screen itself (the right one used to open off the screen's edge) */
@media (max-width: 639px) {
  .side .panel { position: fixed; left: 0 !important; right: 0 !important; bottom: 0; top: auto; width: 100vw; height: 82%;
    padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 40; }
}

/* Invoice Generator (web/invoice.js) */
.invoice { display: flex; flex-direction: column; }
.inv-body { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.inv-label { margin-top: 8px; font: 600 11px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.inv-label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: rgba(255, 255, 255, 0.3); margin-left: 6px; }
.inv-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.inv-seg button { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.inv-seg b { font: 600 14px var(--sf); color: #fff; }
.inv-seg small { font: 500 10.5px var(--sf); color: rgba(255, 255, 255, 0.45); }
.inv-seg button.on { background: rgba(var(--acc), 0.18); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.6); }
.inv-in { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); color: #fff; font: 400 14px var(--sf); outline: none; color-scheme: dark; }
.inv-in:focus { border-color: rgba(var(--acc), 0.6); box-shadow: 0 0 0 3px rgba(var(--acc), 0.14); }
select.inv-in { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.inv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inv-items { display: flex; flex-direction: column; gap: 6px; }
.inv-item { display: grid; grid-template-columns: minmax(0, 1fr) 54px 92px 28px; gap: 6px; align-items: center; }
.inv-qty { text-align: center; padding: 10px 4px; }
.inv-rate { position: relative; }
.inv-rate span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.45); font: 500 14px var(--sf); pointer-events: none; }
.inv-rate .inv-in { padding-left: 22px; }
.inv-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); font-size: 16px; cursor: pointer; }
.inv-x[disabled] { opacity: 0.3; cursor: default; }
.inv-add { align-self: flex-start; padding: 7px 12px; border: 0; border-radius: 9px; background: rgba(var(--acc), 0.14); color: rgb(var(--acc)); font: 600 12.5px var(--sf); cursor: pointer; }
.inv-check { display: flex; align-items: center; gap: 9px; margin-top: 6px; font: 500 14px var(--sf); color: #fff; cursor: pointer; flex-wrap: wrap; }
.inv-check input { width: 18px; height: 18px; accent-color: rgb(var(--acc)); }
.inv-check small { width: 100%; padding-left: 27px; font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.4); }
.inv-check.off { color: rgba(255, 255, 255, 0.45); cursor: default; }
.inv-mini { display: flex; flex-direction: column; gap: 5px; font: 600 11px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.inv-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.inv-recent { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: #fff; text-align: left; cursor: pointer; }
.inv-recent:hover { background: rgba(255, 255, 255, 0.08); }
.inv-recent b { font: 600 13px ui-monospace, Menlo, monospace; }
.inv-recent span { font: 500 12.5px var(--sf); color: rgba(255, 255, 255, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-recent i { font: 600 13px var(--sf); font-style: normal; }
.inv-recent.failed { box-shadow: inset 0 0 0 1px rgba(248, 81, 73, 0.5); }
.inv-foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.inv-total { flex: 1; display: flex; flex-direction: column; }
.inv-total small { font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.5); }
.inv-total b { font: 700 22px var(--sf); color: #fff; font-variant-numeric: tabular-nums; }
.inv-make { padding: 12px 18px; border: 0; border-radius: 999px; font: 700 14px var(--sf); color: #170d04; background: linear-gradient(120deg, #ffd9a8, rgb(var(--acc))); cursor: pointer; }
.inv-make[disabled] { opacity: 0.65; cursor: default; }

/* Team Results (web/team.js) */
.team .hl-tabs button small { margin-left: 4px; font: 700 10.5px var(--sf); opacity: 0.7; }
.tm-days { padding: 0 14px 8px; }
.tm-card { margin: 0 6px 10px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); cursor: pointer; }
.tm-card.open, .tm-card:hover { background: rgba(255, 255, 255, 0.07); }
.tm-card.approved { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35); }
.tm-card.revision { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45); }
.tm-files { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.tm-thumb { position: relative; flex: none; width: 112px; height: 140px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.07); cursor: zoom-in; display: grid; place-items: center; font: 600 11px var(--sf); color: rgba(255, 255, 255, 0.5); }
.tm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-thumb.none img { display: none; }
.tm-files .tm-thumb:only-child { width: 100%; height: 190px; }
.tm-files .tm-thumb:only-child img { object-fit: contain; background: #000; }
.tm-top { display: flex; align-items: center; gap: 8px; }
.tm-status { padding: 2px 8px; border-radius: 999px; font: 700 10px var(--sf); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
.tm-card.approved .tm-status { color: rgb(52, 211, 153); background: rgba(52, 211, 153, 0.12); }
.tm-card.revision .tm-status { color: rgb(251, 191, 36); background: rgba(251, 191, 36, 0.12); }
.tm-card.new .tm-status { color: rgb(var(--acc)); background: rgba(var(--acc), 0.14); }
.tm-meta { font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.45); }
.tm-title { display: block; margin-top: 6px; font: 600 14.5px/1.35 var(--sf); color: #fff; }
.tm-thread { margin-top: 6px; display: grid; gap: 3px; font: 400 12.5px/1.4 var(--sf); color: rgba(255, 255, 255, 0.65); }
.tm-thread b { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.tm-hint { margin-top: 6px; font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.35); }
.tm-card textarea { width: 100%; margin-top: 10px; min-height: 60px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.32); color: #fff; font: 400 14px/1.45 var(--sf); outline: none; }
.tm-card textarea:focus { border-color: rgba(var(--acc), 0.6); }
.msg-btn.tm-ok { background: rgba(52, 211, 153, 0.18); color: rgb(110, 231, 183); }
.msg-btn.tm-no { background: rgba(248, 113, 113, 0.16); color: rgb(252, 165, 165); }
.tm-card.rejected { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.45); }
.tm-card.rejected .tm-status { color: rgb(248, 113, 113); background: rgba(248, 113, 113, 0.12); }
.tm-card .msg-note { color: rgba(255, 255, 255, 0.55); }
.tm-view { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: rgba(0, 0, 0, 0.92); }
.tm-view[hidden] { display: none; }
.tm-view img { max-width: 94vw; max-height: 88vh; border-radius: 8px; }
.tm-view button { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 20px; }
.tm-thumb.none, .tm-files .tm-thumb.none:only-child { height: 52px; cursor: default; }

/* Task Creator (web/task.js) */
.task { display: flex; flex-direction: column; }
.tk-depts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 0 14px 6px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.tk-depts button { padding: 8px 2px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.6); font: 600 12px var(--sf); cursor: pointer; }
.tk-depts button.on { color: #fff; background: rgba(var(--acc), 0.22); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.5); }
.tk-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font: 700 12px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--acc)); }
.tk-sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: rgba(255, 255, 255, 0.3); }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { padding: 7px 11px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); font: 500 12.5px var(--sf); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tk-chip.on { background: rgba(var(--acc), 0.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.55); }
.inv-mini textarea.inv-in { text-transform: none; letter-spacing: 0; font: 400 14px/1.45 var(--sf); resize: vertical; }
.inv-mini .inv-in { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tk-due { font-size: 17px !important; }
.inv-drop { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 2px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); background: none; color: rgba(255, 255, 255, 0.55);
  font: 600 11px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-align: left; }
.inv-drop small { letter-spacing: 0; color: rgba(255, 255, 255, 0.35); }
.inv-drop svg { margin-left: auto; transition: transform 0.2s ease; }
.inv-drop[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Phones: smooth and tidy. Solid panels (live blur behind a moving 3D core is heavy on a phone), 16px text in every
   box (smaller makes the iPhone zoom in when you tap it), and date/time boxes that stay inside their column. */
@media (max-width: 760px) {
  .news { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8, 12, 18, 0.985); }   /* same colour as before; nearly solid instead of a live blur */
  .news input, .news textarea, .news select, .inv-in, .cal-ask input, .ask input, .focus-card textarea { font-size: 16px !important; }
  .inv-row2 > * { min-width: 0; }
  input[type="date"].inv-in, input[type="time"].inv-in { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 44px; text-align: left; }
  .inv-in::-webkit-date-and-time-value { text-align: left; }
  .news-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
/* Browse tiles: name and description on one line each */
.pm-tile-text b, .pm-tile-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pm-tile-text { min-width: 0; max-width: 100%; }

/* Phones: nothing in a panel may be wider than the screen (no sideways scrolling), boxes shrink to their column,
   and panels only scroll up and down. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .news, .news-body, .side .panel, .plus-menu { overflow-x: hidden; max-width: 100vw; }
  .news-body, .side .panel-body, .plus-menu .pm-scroll { touch-action: pan-y; overscroll-behavior: contain; }
  .news input, .news select, .news textarea, .inv-in { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .inv-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .inv-mini, .inv-row2 > label, .inv-item > * { min-width: 0; }
  input[type="date"].inv-in, input[type="time"].inv-in { width: 100%; max-width: 100%; padding-left: 12px; padding-right: 8px; }
  .inv-item { grid-template-columns: minmax(0, 1fr) 46px 84px 26px; }
  .tk-depts button { white-space: nowrap; font-size: 12.5px; }
}
.news-head .inv-reset { margin-left: auto; } .news-head .inv-reset + .fold { margin-left: 6px; }
.tm-watch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tm-watch .msg-btn { text-decoration: none; }
/* James's Agenda header: one line, gold italic, plain subtitle with room to breathe */
.cal-head .news-title { gap: 3px; min-width: 0; }
.cal-title { font-size: 24px !important; line-height: 1.15 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.cal-head .news-title small { font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.45); }
/* App panels: titles, subtitles and footer notes are one line each ("…" if longer), nothing cramped */
.news-title { flex: 1; min-width: 0; gap: 2px; }
.news-title h2, .news-title small, .news-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-head .tag { flex: none; }
/* Clients & Team: a note for F.R.I.D.A.Y. under each client / person */
.hl-act { margin: 10px 0 0 17px; }
.hl-person .hl-act { margin-left: 0; }
.hl-act textarea { width: 100%; min-height: 56px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.32); color: #fff; font: 400 14px/1.45 var(--sf); outline: none; }
.hl-act textarea:focus { border-color: rgba(var(--acc), 0.6); }
.hl-sent { margin-top: 6px; font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.55); }
.hl-person { cursor: pointer; }
@media (max-width: 760px) { .hl-act textarea { font-size: 16px; } }
/* Phones: the hub itself never scrolls or bounces; only the app panels and drawers scroll inside themselves */
@media (max-width: 760px), (display-mode: standalone) {
  html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { touch-action: manipulation; }
}

/* Sending from the hub bar: the words lift off and drift up toward the core, the Send button presses */
.send-fly { position: fixed; z-index: 60; display: flex; align-items: center; padding: 0 18px 0 62px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 16px var(--sf); color: #fff; text-shadow: 0 0 12px rgba(var(--acc), 0.8); will-change: transform, opacity;
  animation: sendFly 0.65s cubic-bezier(.3, .6, .2, 1) forwards; }
@keyframes sendFly { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-120px) scale(0.86); } }
.ask button[type="submit"].sent { animation: sendPress 0.32s ease-out; }
@keyframes sendPress { 0% { transform: scale(1); } 35% { transform: scale(0.9); box-shadow: 0 0 0 6px rgba(var(--acc), 0.25); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(var(--acc), 0); } }

/* Moving between the hub and Chat Sessions: a soft cross-fade instead of a blink (browsers that support page transitions),
   and a dark page from the first frame so there's never a white flash */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.26s ease both; }
::view-transition-new(root) { animation: vtIn 0.34s ease both; }
@keyframes vtOut { to { opacity: 0; transform: scale(0.985); } }
@keyframes vtIn { from { opacity: 0; transform: scale(1.012); } }
html { background: #050506; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
html.back body { animation: hubBack 0.4s ease both; }
@keyframes hubBack { from { opacity: 0; } to { opacity: 1; } }

/* Chat Sessions as a sheet over the hub on phones (slides up; back slides it away instantly) */
.studio-sheet { position: fixed; inset: 0; z-index: 8000; background: #0b0b0d; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%); transition: transform 0.32s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.studio-sheet.open { transform: none; }
.studio-sheet[hidden] { display: none; }
.studio-sheet iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b0b0d; }
.pm-skill .ag-text { min-width: 0; } .pm-skill .ag-text b, .pm-skill .ag-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Skills: one drop-down per group */
.pm-drop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; border: 0; border-radius: 11px; background: none; color: #fff4ea; font: 600 14px var(--sf); text-align: left; cursor: pointer; }
.pm-drop:hover { background: rgba(255, 255, 255, 0.06); }
.pm-drop small { color: rgba(255, 255, 255, 0.4); font-weight: 500; }
.pm-drop .pm-chev { margin-left: auto; opacity: 0.6; transition: transform 0.2s ease; }
.pm-drop[aria-expanded="true"] .pm-chev { transform: rotate(90deg); }

/* Scheduler (web/scheduler.js) */
.scheduler { display: flex; flex-direction: column; }
.sch-tabs button small { margin-left: 3px; font: 700 10.5px var(--sf); color: rgb(var(--acc)); }
.sch-brands { padding: 0 14px 8px; }
.sch-card { margin: 0 6px 8px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); cursor: pointer; }
.sch-card.open, .sch-card:hover { background: rgba(255, 255, 255, 0.07); }
.sch-card.stale { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4); }
.sch-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sch-thumb { position: relative; flex: none; width: 52px; height: 66px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.07); display: grid; place-items: center; font: 600 10px var(--sf); color: rgba(255, 255, 255, 0.45); }
.sch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sch-thumb.none img { display: none; }
.sch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sch-main b { font: 600 14px var(--sf); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-main small { font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-card.stale .sch-main small { color: rgb(251, 191, 36); }
.sch-pl { display: inline-block; margin: 2px 4px 0 0; padding: 1px 7px; border-radius: 999px; font: 700 10px var(--sf); color: #fff; background: rgba(255, 255, 255, 0.1); }
.sch-pl.instagram { background: rgba(225, 48, 108, 0.35); } .sch-pl.tiktok { background: rgba(37, 244, 238, 0.22); } .sch-pl.youtube { background: rgba(255, 0, 0, 0.35); }
.sch-pl.linkedin { background: rgba(10, 102, 194, 0.45); } .sch-pl.facebook { background: rgba(24, 119, 242, 0.4); }
.sch-time { flex: none; width: 54px; font: 700 13px var(--sf); color: #fff; font-variant-numeric: tabular-nums; }
.sch-box { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; cursor: default; }
.sch-box textarea { width: 100%; min-height: 54px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.32); color: #fff; font: 400 14px/1.45 var(--sf); outline: none; }
.sch-best { width: 100%; min-height: 40px; }
.sch-best.on { background: rgba(var(--acc), 0.22); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.55); }
.sch-brand { margin: 0 6px 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.sch-brand .sch-row b { font: 600 15px var(--sf); color: #fff; }
.sch-stat { margin-left: auto; display: flex; gap: 6px; }
.sch-stat i { font: 600 11px var(--sf); font-style: normal; color: rgba(255, 255, 255, 0.55); }
.sch-stat i.warn { color: rgb(251, 191, 36); }
.sch-accts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sch-acct { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.7); text-decoration: none; opacity: 0.6; }
.sch-acct.on { opacity: 1; }
.sch-acct .sch-pl { margin: 0; }
.sch-last { display: block; margin-top: 8px; font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.45); }
.sch-warn { margin: 0 6px 10px; padding: 10px 12px; border-radius: 12px; font: 500 12.5px/1.45 var(--sf); color: rgb(251, 191, 36); background: rgba(251, 191, 36, 0.08); }
@media (max-width: 760px) { .sch-box textarea { font-size: 16px; } }
/* Scheduler: brands not yet in Metricool */
.sch-connect { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 9px 10px 9px 12px; border-radius: 12px; background: rgba(251, 191, 36, 0.09); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3); }
.news-body > .sch-connect { margin: 0 6px 10px; }
.sch-connect span { flex: 1; min-width: 0; font: 500 12.5px var(--sf); color: rgb(251, 191, 36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-connect .msg-btn { flex: none; text-decoration: none; white-space: nowrap; }
.sch-dotlabel { margin-left: auto; font: 600 11px var(--sf); color: rgba(255, 255, 255, 0.45); }
.sch-dotlabel.on { color: rgb(52, 211, 153); }
.sch-brand.off .sch-row b { color: rgba(255, 255, 255, 0.75); }
.sch-brand { cursor: pointer; }
.sch-brand.open { background: rgba(255, 255, 255, 0.07); }
.sch-inside { margin-top: 6px; cursor: default; }
.sch-inside .vr-group { padding: 10px 0 4px; }
.sch-mini { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sch-mini b { font: 600 13px var(--sf); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-mini small, .sch-none { font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.45); }
.sch-inside .msg-acts { margin-top: 10px; }
.msg-btn[disabled] { opacity: 0.55; }
.sch-kind { margin: 0 6px 10px; } .sch-kind button small { margin-left: 4px; font: 700 10.5px var(--sf); opacity: 0.75; }
.sch-demo { margin: 0 6px 10px; padding: 9px 12px; border-radius: 12px; font: 500 12.5px var(--sf); color: rgba(255,255,255,0.8); background: rgba(var(--acc), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.35); } .sch-demo b { color: rgb(var(--acc)); margin-right: 6px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; }
.sch-pl.task { background: rgba(var(--acc), 0.25); }
/* ULTRON only: the wipe button beside his name */
.agent-switch { position: relative; }
.ultron-wipe { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 36, 36, 0.45); background: rgba(255, 36, 36, 0.12); color: rgb(255, 120, 120); cursor: pointer; }
.ultron-wipe:hover { background: rgba(255, 36, 36, 0.25); color: #fff; }
.ultron-wipe[hidden] { display: none; }

/* Mic on/off in the bar: off lets go of the mic (for Wispr Flow); answers are still spoken */
.mic-toggle { flex: none; width: 40px; height: 40px; align-self: center; display: grid; place-items: center; border-radius: 50%; border: 0; padding: 0;
  background: transparent; color: rgb(var(--acc-light)); cursor: pointer; transition: color 0.2s, background 0.2s, opacity 0.2s; -webkit-tap-highlight-color: transparent; }
.mic-toggle:hover { background: rgba(var(--acc), 0.12); }
.mic-toggle.off { color: rgba(255, 255, 255, 0.42); }
.mic-toggle.off svg .slash { opacity: 1; }
.mic-toggle svg .slash { opacity: 0; transition: opacity 0.2s; }
.ask.listening .mic-toggle { display: none; }

/* ===== Phones: every Browse app (audit 4 Nov 2026) ===== */
/* Safari's own button / field styling (rounded grey boxes, blue text, native dropdown arrows) never shows through */
button, select, input[type="date"], input[type="time"], input[type="search"] { -webkit-appearance: none; appearance: none; }
button, a, [role="tab"], [role="button"], select, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* no grey flash, no tap delay */
select { background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }   /* our own arrow */
@media (max-width: 760px) {
  /* thumb-sized targets: close buttons, tabs, chips and action buttons at least 36 px tall */
  section.news .fold { width: 38px; height: 38px; }
  section.news button:not(.fold):not(.inv-x):not([data-rm]), section.news [role="tab"], section.news .msg-btn, section.news .hl-notion { min-height: 36px; }
  section.news .rp-day, section.news .bb-chip, section.news .tk-chip, section.news .vr-btn { min-height: 34px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  section.news .inv-x { width: 34px; height: 34px; }
  section.news input[type="checkbox"], section.news input[type="radio"] { width: 22px; height: 22px; flex: none; }
  /* nothing smaller than 11 px to read */
  section.news small, section.news .tk-sub, section.news .tm-status, section.news .impact, section.news .px-k { font-size: max(11px, 1em); }
  /* fields: 16 px so iOS doesn't zoom in, full width, no overflow */
  section.news input:not([type="checkbox"]):not([type="radio"]), section.news select, section.news textarea { font-size: 16px; max-width: 100%; min-width: 0; }
  /* sideways strips (days, brands, chips) scroll smoothly and show they scroll */
  section.news .rp-days, section.news .sc-brands, section.news .tk-chips { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
}
@media (max-width: 760px) {
  .agent-btn { min-height: 34px; }
  .side .fold { width: 38px; height: 38px; }
  .side .more { min-height: 34px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  .side .m-head { min-height: 36px; }
}
@media (max-width: 760px) { section.news .inv-item { grid-template-columns: minmax(0, 1fr) 46px 84px 34px; } }   /* room for the bigger remove button */

/* "‹" Back to Browse in every app's header (✕ still closes everything) */
.news-head .news-back { flex: none; width: 36px; height: 36px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0;
  background: rgba(255, 255, 255, 0.06); color: var(--fg, #fff); }
.news-head .news-back:hover { background: rgba(var(--acc), 0.18); }
@media (max-width: 760px) { section.news .news-head .news-back { width: 38px; height: 38px; min-height: 0; } }

/* ===== Daily Review: report tabs, PDF on top, the report as a checklist (ticks stay, green) ===== */
.rv-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.rv-tabs button { flex: 1; min-width: 0; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.6); font: 600 12.5px var(--sf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tabs button[aria-selected="true"] { background: rgba(var(--acc), 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.45); }
.rv-pdf { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; text-align: left; color: #fff; cursor: pointer;
  border: 1px solid rgba(var(--acc), 0.4); background: rgba(var(--acc), 0.08); }
.rv-pdf:hover { background: rgba(var(--acc), 0.14); }
.rv-pdf .rp-text { flex: 1; }
.rv-open { flex: none; padding: 6px 12px; border-radius: 999px; font: 600 12px var(--sf); color: #111; background: rgb(var(--acc-light)); }
.rv-count { font: 500 12.5px var(--sf); color: rgba(255, 255, 255, 0.6); }
.rv-count b { color: #fff; font-size: 15px; }
.rv-task { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; cursor: pointer; transition: background 0.15s ease; }
.rv-task:hover, .rv-task.open { background: rgba(255, 255, 255, 0.05); }
.rv-check { flex: none; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1.6px solid rgba(255, 255, 255, 0.35); background: transparent; color: transparent; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s; }
.rv-check:active { transform: scale(0.9); }
.rv-task.done .rv-check { background: rgb(var(--acc)); border-color: rgb(var(--acc)); color: #111; }   /* ticked: same colours, the circle just fills in */
.rv-body { flex: 1; min-width: 0; }
.rv-t { font: 500 14px/1.4 var(--sf); color: rgba(255, 248, 240, 0.94); overflow-wrap: anywhere; }
.rv-time { flex: none; min-width: 44px; padding-top: 1px; font: 600 13.5px var(--sf); color: #fff; }
.rv-bullet { flex: none; width: 6px; height: 6px; margin: 8px 4px 0; border-radius: 50%; background: rgba(var(--acc), 0.8); }
.rv-d { margin-top: 2px; font: 500 12.5px/1.4 var(--sf); color: rgba(255, 255, 255, 0.5); overflow-wrap: anywhere; }
.rv-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--sf); letter-spacing: 0.04em; text-transform: uppercase; color: #111; background: rgb(var(--acc-light)); vertical-align: 1px; }
.rv-notes-n { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.rv-note { margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(var(--acc), 0.1); font: 500 13px/1.4 var(--sf); color: rgba(255, 248, 240, 0.9); }
.rv-note time { display: block; margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.rv-say { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.rv-say textarea { flex: 1; min-width: 0; resize: none; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.25); color: #fff; font: 500 14px var(--sf); outline: none; }
.rv-say textarea:focus { border-color: rgba(var(--acc), 0.6); }
.rv-row { display: flex; gap: 10px; padding: 5px 0; font: 500 13.5px/1.4 var(--sf); color: rgba(255, 248, 240, 0.86); }
.rv-row b { flex: none; min-width: 44px; color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .rv-tabs button { min-height: 36px; }
  .rv-check { width: 30px; height: 30px; }
  .rv-say textarea { font-size: 16px; }
}

/* ===== Upseller: clients ranked by money on the table; open one for its ideas ===== */
.up-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.up-sum div { padding: 10px; border-radius: 12px; background: rgba(var(--acc), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.22); text-align: center; min-width: 0; }
.up-sum b { display: block; font: 700 17px var(--sf); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-sum span { font: 500 11.5px var(--sf); color: rgba(255, 255, 255, 0.55); }
.up-client { border-radius: 14px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); overflow: hidden; }
.up-client.open { border-color: rgba(var(--acc), 0.35); }
.up-row { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; min-height: 56px; }
.up-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.up-name b { font: 600 15px var(--sf); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-name small { font: 500 12px var(--sf); color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-pot { flex: none; padding: 4px 10px; border-radius: 999px; font: 700 13px var(--sf); color: #111; background: rgb(var(--acc-light)); }
.up-chev { flex: none; color: rgba(255, 255, 255, 0.45); transition: transform 0.2s; }
.up-client.open .up-chev { transform: rotate(90deg); }
.up-summary { padding: 0 12px 8px; font: 500 13px/1.45 var(--sf); color: rgba(255, 248, 240, 0.8); }
.up-links { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.up-idea { margin: 0 8px 8px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border-left: 3px solid rgba(255, 255, 255, 0.2); }
.up-idea.high { border-left-color: rgb(var(--acc)); }
.up-top { display: flex; align-items: baseline; gap: 10px; }
.up-top b { flex: 1; min-width: 0; font: 600 14.5px/1.35 var(--sf); color: #fff; }
.up-price { flex: none; font: 700 13.5px var(--sf); color: rgb(var(--acc-light)); }
.up-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.up-chips span { padding: 2px 8px; border-radius: 999px; font: 600 11px var(--sf); color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); }
.up-chips .up-imp.high { color: #111; background: rgb(var(--acc-light)); }
.up-chips .up-st { text-transform: capitalize; color: rgb(var(--acc-light)); background: rgba(var(--acc), 0.15); }
.up-why { margin-top: 5px; font: 500 13px/1.45 var(--sf); color: rgba(255, 248, 240, 0.82); }
.up-why b { color: #fff; font-weight: 600; margin-right: 4px; }
.up-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; }
.up-ev a { color: rgb(var(--acc-light)); text-decoration: none; }
.up-ev span { color: rgba(255, 255, 255, 0.55); }
.up-idea .msg-acts { margin-top: 10px; }
.up-idea .msg-btn:disabled, .up-links .msg-btn:disabled { opacity: 0.45; cursor: default; }

/* ===== The hub's own picture / video viewer (web/media.js): nothing goes off to Google Drive ===== */
.mv { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; background: #000; }
.mv[hidden] { display: none; }
html.mv-open, html.mv-open body { overflow: hidden; }
.mv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); color: #fff; font: 600 14px var(--sf); background: rgba(0, 0, 0, 0.85); }
.mv-bar b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-ext { flex: none; padding: 7px 12px; border-radius: 999px; font: 600 12.5px var(--sf); color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.mv-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; font-size: 16px; color: #fff; background: rgba(255, 255, 255, 0.14); }
.mv-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
.mv-stage iframe { width: 100%; height: 100%; border: 0; background: #000; }
.mv-pic { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; }
.mv-pic img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; cursor: zoom-in; }
.mv-pic.zoom { display: block; }
.mv-pic.zoom img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
.mv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 26px; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.55); }
.mv-nav.prev { left: 8px; } .mv-nav.next { right: 8px; }

/* Important Messages: the pictures / videos a message is about */
.msg-media { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.msg-media::-webkit-scrollbar { display: none; }
.msg-pic { position: relative; flex: none; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); padding: 0; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); font: 600 12px var(--sf); display: grid; place-items: center; }
.msg-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msg-pic.video { width: 74px; height: 112px; }

/* buttons that are links (Open in Slack, Website ↗): text in the middle, like the other buttons */
.msg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.2; }

/* ===== Winning Creatives ===== */
.wc-tabs button i { font-style: normal; margin-left: 4px; font-size: 11px; opacity: 0.7; }
.wc-tabs button i:empty { display: none; }
.wc-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; margin-top: 8px; }
.wc-nums div { padding: 7px 6px; border-radius: 10px; text-align: center; background: rgba(255, 255, 255, 0.06); min-width: 0; }
.wc-nums b { display: block; font: 700 14px var(--sf); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-nums span { font: 500 11px var(--sf); color: rgba(255, 255, 255, 0.5); }
.wc-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wc-box label { display: flex; flex-direction: column; gap: 4px; font: 600 11.5px var(--sf); color: rgba(255, 255, 255, 0.55); min-width: 0; }
.wc-box textarea, .wc-box input { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.25); color: #fff; font: 500 14px/1.4 var(--sf); outline: none; resize: vertical; }
.wc-box textarea:focus, .wc-box input:focus { border-color: rgba(var(--acc), 0.6); }
.wc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wc-pick { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 13px var(--sf); color: #fff; cursor: pointer; }
.wc-pick input { width: 20px; height: 20px; accent-color: rgb(var(--acc)); }
.wc-card .up-chips a { padding: 2px 8px; border-radius: 999px; font: 600 11px var(--sf); color: rgb(var(--acc-light)); background: rgba(var(--acc), 0.12); text-decoration: none; }
@media (max-width: 760px) { .wc-box textarea, .wc-box input { font-size: 16px; } .wc-tabs button { padding-left: 4px; padding-right: 4px; font-size: 12px; } }
.tk-depts.wc-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.tk-depts.wc-tabs button { min-width: 0; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 760px) { .tk-depts.wc-tabs button { font-size: 11.5px; } .wc-tabs button i { margin-left: 2px; font-size: 10.5px; } }
.up-hold { font: 500 12.5px var(--sf); color: rgba(255, 255, 255, 0.55); }
.up-holdtag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--sf); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); vertical-align: 2px; }

/* Pocket lock: the bar's lock button covers the screen so nothing in a pocket can tap it; the hub keeps listening and
   the screen stays on. Hold the lock for a second to unlock. Touch screens only. */
.lock-btn { display: none; }
@media (pointer: coarse) { .lock-btn { display: grid; } .ask.listening .lock-btn { display: grid; } }
.pocket-lock { position: fixed; inset: 0; z-index: 2147483000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  /* the orb stays at full brightness: only the very top (time) and bottom (slider) are shaded, for reading */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.6) 100%);
  animation: plIn 0.35s cubic-bezier(.2, .8, .2, 1) both; }
.pocket-lock[hidden] { display: none; }
.pocket-lock.out { animation: plOut 0.3s ease both; }
@keyframes plIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plOut { to { opacity: 0; transform: translateY(-14px); } }
/* everything behind steps back a little */
html.pocket-on .top, html.pocket-on .ask, html.pocket-on #subtitle, html.pocket-on #coreLabel { opacity: 0; transition: opacity 0.3s; }
.pl-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 34px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; font-family: var(--sf); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.pl-lock { color: rgba(255, 255, 255, 0.85); margin-bottom: 6px; }
.pl-time { font-size: 76px; line-height: 1; font-weight: 600; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 30%, rgb(var(--acc-light))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-date { font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.pl-state { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); display: flex; justify-content: center; align-items: center; gap: 8px;
  font: 600 12px/1 var(--sf); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.pl-state i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--acc-light)); box-shadow: 0 0 10px rgb(var(--acc)); }
.pocket-lock[data-mode="listening"] .pl-state i { animation: plPulse 1s ease-in-out infinite; }
.pocket-lock[data-mode="speaking"] .pl-state i, .pocket-lock[data-mode="thinking"] .pl-state i { animation: plPulse 0.6s ease-in-out infinite; }
@keyframes plPulse { 50% { transform: scale(1.6); opacity: 0.5; } }
/* the chat bar, turned into the slider */
.pl-slider { position: fixed; display: flex; align-items: center; border-radius: 999px; padding: 6px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--depth), 0 0 0 1px rgba(var(--acc), 0.12);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }
.pl-slider::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;   /* the trail behind the knob */
  background: linear-gradient(90deg, rgba(var(--acc), 0.28), rgba(var(--acc), 0.05)); opacity: var(--p, 0); }
.pl-text { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 40px; pointer-events: none;
  font: 500 17px/1 var(--sf); letter-spacing: 0.01em; opacity: calc(1 - var(--p, 0) * 1.6);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.35) 40%, #fff 50%, rgba(255, 255, 255, 0.35) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: plShine 2.4s linear infinite; }
@keyframes plShine { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.pl-knob { position: relative; z-index: 1; height: 100%; aspect-ratio: 1.35; border-radius: 999px; border: 0; padding: 0; display: grid; place-items: center; touch-action: none; cursor: grab;
  background: linear-gradient(180deg, #ffffff, rgb(var(--acc-light))); color: rgb(20, 14, 10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px -6px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--acc), 0.4);
  transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.2); -webkit-tap-highlight-color: transparent; }
.pl-slider.dragging .pl-knob { transition: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .pl-text { animation: none; } }

/* Browse → Password: set / change the hub password, sign other devices out */
.sec-sheet { z-index: 2147482000; background: rgba(2, 4, 10, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 16px; }
.sec-sheet[hidden] { display: none; }
.sec-sheet .gate-box { position: relative; width: min(360px, 100%); }
.sec-sheet .sec-x { position: absolute; top: -6px; right: -4px; }
.sec-sheet .sec-title { font: 600 20px/1.2 var(--sf); color: #fff; margin-top: 8px; }
.sec-sheet p { margin: 0; font: 400 14px/1.45 var(--sf); color: rgba(255, 255, 255, 0.7); }
.sec-sheet input { font-size: 16px; }
.sec-out { border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 12px; font: 500 14px/1 var(--sf); cursor: pointer; }
.sec-out:disabled { opacity: 0.4; cursor: default; }
.sec-sheet #secMsg { min-height: 1.4em; color: rgb(var(--acc-light)); opacity: 1; }
.sec-sheet { overflow-y: auto; align-items: start; }
.sec-sheet .gate-box { margin: max(24px, env(safe-area-inset-top)) auto 32px; }
.sec-alerts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: left; }
.sec-sheet .sec-title.sm { font-size: 17px; margin: 0; text-align: center; }
.sec-alerts p { text-align: center; }
.sec-h { font: 600 13px/1.3 var(--sf); color: #fff; margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
.sec-on { font-weight: 500; color: rgb(var(--acc-light)); }
.sec-alerts small { text-align: left; }
.sec-alerts small a { color: rgb(var(--acc-light)); }
.sec-link { background: none; border: 0; color: rgba(255, 255, 255, 0.55); font: 500 13px/1 var(--sf); text-decoration: underline; cursor: pointer; padding: 6px; }
.sec-sheet #secAlMsg { min-height: 1.4em; color: rgb(var(--acc-light)); opacity: 1; text-align: center; }

/* Important Messages: a PDF (her reports) shows its first page with the name on it; it opens in the report viewer */
.msg-pic.pdf { width: 84px; height: 112px; background: rgba(255, 255, 255, 0.92); }
.msg-pdf { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 5px 6px 6px; text-align: left;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82) 35%); color: #fff; font: 600 9.5px/1.2 var(--sf); }
.msg-pdf b { align-self: flex-start; font-size: 9px; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 4px; background: rgb(var(--acc)); color: #1a0d02; }

/* Viewer: a Drive file on its way from your server, then the hub's own player */
.mv-video { width: 100%; height: 100%; max-height: 100%; background: #000; object-fit: contain; }
.mv-wait { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; font-family: var(--sf); }
.mv-wait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.35; filter: blur(2px); }
.mv-wait b, .mv-wait small, .mv-wait .mv-spin { position: relative; }
.mv-wait b { font-size: 16px; font-weight: 600; }
.mv-wait small { font-size: 13px; color: rgba(255, 255, 255, 0.7); max-width: 280px; }
.mv-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: rgb(var(--acc-light)); animation: mvSpin 0.9s linear infinite; }
@keyframes mvSpin { to { transform: rotate(360deg); } }

/* Winning Creatives: one client at a time (the row of clients), then where their ads are (five even steps with counts) */
.wc-clients { display: flex; gap: 6px; overflow-x: auto; padding: 2px 14px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wc-clients::-webkit-scrollbar { display: none; }
.wc-clients button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); font: 600 13px var(--sf); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wc-clients button small { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font: 700 11px var(--sf); background: rgba(var(--acc), 0.25); color: rgb(var(--acc-light)); }
.wc-clients button.on { background: rgba(var(--acc), 0.2); border-color: rgba(var(--acc), 0.65); color: #fff; }
.wc-clients button.on small { background: rgb(var(--acc)); color: #1a0d02; }
.wc-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 14px 10px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.wc-steps button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 7px; border: 0; border-radius: 10px; background: transparent;
  color: rgba(255, 255, 255, 0.6); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s; }
.wc-steps button b { font: 700 17px/1.1 var(--sf); color: #fff; }
.wc-steps button span { font: 600 11px/1.2 var(--sf); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wc-steps button.zero b { color: rgba(255, 255, 255, 0.3); }
.wc-steps button.on { background: rgba(var(--acc), 0.2); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.6); color: rgb(var(--acc-light)); }
.wc-steps button.on b { color: rgb(var(--acc-light)); }
/* (6 Nov) bigger, to match the hub's other buttons */
.wc-clients { gap: 8px; padding: 4px 16px 10px; }
.wc-clients button { height: 40px; padding: 0 16px; font-size: 14.5px; gap: 7px; }
.wc-clients button small { min-width: 20px; height: 20px; font-size: 12px; }
.wc-steps { margin: 0 16px 12px; padding: 5px; gap: 5px; border-radius: 16px; }
.wc-steps button { padding: 9px 4px 10px; gap: 2px; border-radius: 12px; }
.wc-steps button b { font-size: 20px; }
.wc-steps button span { font-size: 13px; }
@media (max-width: 420px) { .wc-steps button span { font-size: 11.5px; } .wc-steps button b { font-size: 18px; } .wc-clients button { font-size: 14px; } }

/* (6 Nov) the quick voice's answers are marked, so you can tell them from the agent's full-context ones */
.msg-quick { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; opacity: .6; border: 1px solid currentColor; }

/* Team Results: the Revisions tab */
.tm-day { margin: 10px 2px 4px; font: 700 10px var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.tm-revlink { display: inline-block; margin-top: 4px; font-size: 12px; color: rgb(251, 191, 36); text-decoration: none; }
a.rp-day { text-decoration: none; }
.tm-chan { margin-left: 6px; color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.tm-done-toggle { margin: 12px 0 4px; }
.tm-rev { cursor: default; }
.rp-day[data-rev] small { margin-left: 5px; opacity: 0.75; }

/* Voice lock: recording his voiceprint (web/voicelock.js) */
.vl-sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(2, 8, 16, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vl-card { width: min(440px, 100%); padding: 18px; border-radius: 18px; background: rgba(12, 22, 36, 0.96); box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.25), 0 20px 60px rgba(0, 0, 0, 0.5); color: #e8f1ff; }
.vl-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.vl-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.vl-say { margin: 10px 0 14px; color: rgba(232, 241, 255, 0.7); font-size: 13px; }
.vl-line { min-height: 54px; font-size: 19px; line-height: 1.35; font-weight: 600; }
.vl-meter { height: 4px; margin: 14px 0 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vl-meter i { display: block; height: 100%; width: 0; background: rgb(var(--acc)); transition: width 0.1s; }
.vl-steps { display: flex; gap: 6px; }
.vl-steps span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.vl-steps span.now { background: rgba(var(--acc), 0.55); }
.vl-steps span.done { background: rgb(var(--acc)); }
.vl-note { min-height: 18px; margin-top: 12px; font-size: 12.5px; color: rgba(232, 241, 255, 0.75); }
.vl-acts { margin-top: 12px; display: flex; justify-content: flex-end; }
.vm-link { color: rgb(var(--acc)); text-decoration: underline; cursor: pointer; }
.vm-go { padding: 4px 10px; border-radius: 999px; background: rgba(var(--acc), 0.18); color: rgb(var(--acc)); font: 600 12px var(--sf); }
/* Team Results: Send to F.R.I.D.A.Y. */
.msg-btn.tm-fri { background: rgba(var(--acc), 0.16); color: rgb(var(--acc)); }