/* Unibar's own UI, rebuilt from the SwiftUI views at their real point sizes.
   Tokens mirror `Theme` in Sources/Unibar/RailViews.swift: dark = black panel, white ink;
   light = cool gray panel (#dadde1), near-black ink. Everything else is ink at an opacity. */

.ui {
  --ink: 255,255,255;
  --panel: #000;
  --rim-top: rgba(255,255,255,.28);
  --rim-bot: rgba(255,255,255,.06);
  --sel: rgba(255,255,255,.14);
  --cap: #2e2e2e;                       /* Theme.gray(0.18) */
  --green: #30d158;
  --amber: #ff9f0a;
  --idle: #6b6b6b;                      /* Theme.gray(0.42) */
  --blue: #0a85ff;
  --red: #ff455c;
  --code: rgb(250,184,140);
  --sec: rgba(var(--ink),.55);
  --ter: rgba(var(--ink),.35);
  --panel-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.6);
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Inter", sans-serif;
  --ui-mono: "SF Mono", ui-monospace, Menlo, "Geist Mono", monospace;
}
[data-theme="light"] .ui {
  --ink: 18,20,23;
  --panel: #dadde1;
  --rim-top: rgba(18,20,23,.08);
  --rim-bot: rgba(18,20,23,.08);
  --sel: #bababa;
  --cap: rgb(184,187,190);
  --green: rgb(26,153,61);
  --amber: rgb(224,128,0);
  --idle: rgb(138,141,145);
  --code: rgb(179,77,26);
  --panel-shadow: 0 22px 60px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.12);
}

/* Glass: solid panel, 1px rim fading top to bottom */
:where(.ui .glass, .ui.glass) { position: relative; }
.ui .glass, .ui.glass {
  background: var(--panel); color: rgb(var(--ink));
  box-shadow: var(--panel-shadow); font-family: var(--ui-font); letter-spacing: 0;
}
.ui .glass::after, .ui.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--rim-top), var(--rim-bot));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* KeyCap */
.kc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 14px; padding: 3px 7px; border-radius: 5px; box-sizing: content-box;
  font: 600 11px/14px var(--ui-font); color: rgb(var(--ink));
  background: var(--cap); box-shadow: inset 0 0 0 1px rgba(var(--ink),.2);
}

.ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle; }

/* Status dot: blue spinner working, amber needs you, green done, gray idle */
.sd { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--idle); }
.sd.amber { background: var(--amber); }
.sd.green { background: var(--green); }
.sd.empty { background: var(--idle); opacity: .7; }
.sd.blue { background: none; border: 1.8px solid var(--blue); border-right-color: transparent; box-sizing: border-box; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Agent icons (AgentIcon) */
.ai {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 22%; color: #fff;
}
.ai svg { width: 62%; height: 62%; }
.ai.claude { background: #d97857; }
.ai.codex { background: #fff; color: #000; }
.ai.opencode { background: none; box-shadow: inset 0 0 0 2.6px rgb(var(--ink)); border-radius: 15%; }
.ai.opencode::after { content: ""; position: absolute; width: 35%; height: 35%; top: 42%; background: rgba(var(--ink),.5); }
.ai.copilot { background: #24292e; }
.ai.tm { background: #d9d9d9; color: #000; }
.ai.server { background: #0f766e; font: 700 9px var(--ui-font); }

/* ---------- Stage: a 1440 × 900 Mac screen ---------- */
.stage-wrap {
  position: relative; width: 100%; aspect-ratio: 1440 / 900; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 120px -20px rgba(10,133,255,.25), 0 30px 80px rgba(0,0,0,.6);
}
[data-theme="light"] .stage-wrap { box-shadow: rgba(0,0,0,.22) 3px 5px 30px 0; }
.stage { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; transform-origin: 0 0; overflow: hidden; font: 13px var(--ui-font); color: rgb(var(--ink)); }

.wallpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 15% 100%, #ff7a3d 0%, transparent 60%),
    radial-gradient(55% 60% at 85% 95%, #c13cff 0%, transparent 60%),
    radial-gradient(70% 80% at 60% 10%, #1d3bff 0%, transparent 65%),
    linear-gradient(180deg, #0b1440, #24104a 60%, #3a0f2c);
}
.wallpaper::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
[data-theme="light"] .wallpaper {
  background:
    radial-gradient(60% 70% at 12% 100%, #ffd2b8 0%, transparent 60%),
    radial-gradient(55% 60% at 88% 95%, #e6c9ff 0%, transparent 60%),
    radial-gradient(70% 80% at 60% 0%, #b9d4ff 0%, transparent 65%),
    linear-gradient(180deg, #dfe9fb, #efe6f7 60%, #f8e9e2);
}
[data-theme="light"] .wallpaper::after { background: none; }

.menubar {
  position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; padding: 0 18px;
  background: rgba(20,20,30,.35); backdrop-filter: blur(20px); font-size: 13.5px; color: #fff;
}
[data-theme="light"] .menubar { background: rgba(255,255,255,.45); color: #111; }
.mb-left, .mb-right { display: flex; gap: 20px; align-items: center; }
.mb-left span { opacity: .9; }
.mb-logo { width: 14px; height: 14px; border-radius: 50%; background: currentColor; opacity: .9; }
.mb-ico { width: 16px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; }
.mb-mic { display: none; width: 26px; height: 18px; border-radius: 9px; background: #ff9f0a; align-items: center; justify-content: center; color: #fff; }
.mb-mic.on { display: inline-flex; }
.mb-mic svg { width: 11px; height: 11px; }

/* Windows */
.win { position: absolute; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.5); transition: opacity .5s, transform .5s; }
[data-theme="light"] .win { box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.18); }
.win-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 13px; background: #2a2a2e; font-size: 12.5px; color: rgba(255,255,255,.6); }
.win-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { margin: 0 auto; transform: translateX(-26px); }
[data-theme="light"] .win-bar { background: #e9e9eb; color: #555; }

.win-app { left: 560px; top: 84px; width: 760px; height: 470px; background: #16161a; }
[data-theme="light"] .win-app { background: #fff; }
.app-body { display: flex; height: calc(100% - 34px); }
.app-body aside { width: 200px; padding: 14px 10px; background: #111114; border-right: 1px solid rgba(255,255,255,.06); }
[data-theme="light"] .app-body aside { background: #f5f5f7; border-color: #e5e5e5; }
.side-h { font-size: 11px; color: rgba(var(--ink),.4); margin-bottom: 8px; text-transform: uppercase; }
.side-row { padding: 7px 10px; border-radius: 7px; color: rgba(var(--ink),.6); font-size: 12.5px; }
.side-row.on { background: rgba(var(--ink),.08); color: rgb(var(--ink)); }
.app-chat { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; background: #222228; color: rgba(var(--ink),.85); font-size: 13px; }
[data-theme="light"] .bubble { background: #ececee; }
.bubble.me { align-self: flex-end; background: #2b4ad6; color: #fff; }

.win-term { left: 110px; top: 180px; width: 820px; height: 540px; background: #121218; }
[data-theme="light"] .win-term { background: #fbfbfc; }
.term { padding: 16px 18px; font: 13.5px/1.7 var(--ui-mono); color: #e6e6e6; }
[data-theme="light"] .win-term .term { color: #1d1d1f; }
.term > div { white-space: pre-wrap; }
.t-box { border: 1px solid #d97857; border-radius: 6px; padding: 6px 12px; width: fit-content; margin-bottom: 8px; }
.t-dim2 { opacity: .5; }
.t-claude { color: #d97857; }
.t-user { margin: 6px 0; background: rgba(127,127,127,.12); padding: 2px 8px; border-radius: 4px; }
.t-add { color: #30d158; }
[data-theme="light"] .win-term .t-add { color: #1a993d; }
.cursor-blk { display: inline-block; width: 8px; height: 16px; background: currentColor; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.win-ssh { left: 140px; top: 130px; width: 700px; height: 360px; background: #0f1113; opacity: 0; transform: translateY(20px) scale(.98); }
.win-ssh .win-bar { background: #2a2a2e; color: rgba(255,255,255,.6); }
.win-ssh .term { color: #e6e6e6; }
.win-ssh.show { opacity: 1; transform: none; }

/* overlay show/hide */
.ov { opacity: 0; visibility: hidden; transition: opacity .28s, transform .28s, visibility 0s .28s; }
.ov.show { opacity: 1; visibility: visible; transition: opacity .28s, transform .28s, visibility 0s; }

/* ---------- Side notch (NotchRail) ---------- */
.rail { position: absolute; right: 5px; top: 50%; width: 40px; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; transform: translateY(-50%); }
.rail > * { transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.rail.folded > * { opacity: 0; transform: scale(.55); pointer-events: none; }
.r-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.r-badge {
  position: absolute; top: -1px; right: -2px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--amber); color: #000; font: 700 9px/15px var(--ui-font); text-align: center;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.35); z-index: 2; transition: transform .25s;
}
.r-badge.hide { transform: scale(0); }
.r-agents { width: 34px; border-radius: 17px; padding: 7px 0; display: flex; flex-direction: column; }
.r-agents .slot { height: 17px; display: flex; align-items: center; justify-content: center; }
.r-bottom { width: 34px; height: 68px; border-radius: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 15px; }
.r-bottom span { height: 28px; display: flex; align-items: center; }

/* Folded: the black edge tab, flush with the screen edge, with concave flares */
.tab {
  position: absolute; right: 0; top: 50%; width: 24px; z-index: 21; background: #000; border-radius: 10px 0 0 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 9px 0;
  transform: translateY(-50%); transition: opacity .25s;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12);
}
.tab::before, .tab::after { content: ""; position: absolute; right: 0; width: 8px; height: 8px; }
.tab::before { top: -8px; background: radial-gradient(circle at 0 0, transparent 8px, #000 8.5px); }
.tab::after { bottom: -8px; background: radial-gradient(circle at 0 100%, transparent 8px, #000 8.5px); }
.tab .sd { width: 9px; height: 9px; }
.tab .sd.blue { border-color: #0a85ff; border-right-color: transparent; }
.tab .sd.green { background: #30d158; }
.tab .sd.amber { background: #ff9f0a; }
.rail:not(.folded) ~ .tab { opacity: 0; }

/* ---------- ⌘L launcher (NavigatorView) ---------- */
.nav-l { position: absolute; left: 50%; top: 104px; width: 760px; height: 690px; border-radius: 22px; z-index: 30; transform: translateX(-50%) scale(.97); display: flex; flex-direction: column; overflow: hidden; }
.nav-l.show { transform: translateX(-50%); }
.nl-search { height: 62px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid rgba(var(--ink),.08); }
.nl-search .ico { font-size: 19px; color: var(--sec); }
.nl-q { font-size: 20px; color: rgb(var(--ink)); }
.nl-q:empty::before { content: "Search your agents and chats…"; color: rgba(var(--ink),.42); }
.caret { width: 1.5px; height: 22px; background: rgb(var(--ink)); margin-left: -11px; animation: blink 1s steps(1) infinite; }
.nl-count { margin-left: auto; font-size: 12px; color: var(--ter); }
.nl-list { height: 258px; flex: none; overflow: hidden; padding: 6px 10px; border-bottom: 1px solid rgba(var(--ink),.08); }
.nl-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--ter); padding: 8px 0 1px 14px; }
.nl-sec.ready { color: var(--green); }
.nl-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; white-space: nowrap; margin-top: 1px; }
.nl-row.sel { background: var(--sel); }
.nl-row .dotbox { width: 12px; display: flex; justify-content: center; flex: none; }
.nl-row b { font-size: 14px; font-weight: 600; flex: none; max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 9px; font-weight: 600; color: var(--sec); background: rgba(var(--ink),.1); padding: 1px 5px; border-radius: 99px; flex: none; }
.nl-row .sub { font-size: 12px; color: var(--ter); overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 20px; }
.nl-row .where { font-size: 11.5px; color: var(--ter); flex: none; }
.nl-row .n, .nl-row .cn { height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.nl-row .n { width: 20px; font-size: 10.5px; color: var(--sec); background: rgba(var(--ink),.08); }
.nl-row .cn { width: 28px; font-size: 10px; color: var(--ter); background: rgba(var(--ink),.05); margin-left: -6px; }
.nl-prev { height: 320px; flex: none; padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.pv-card { flex: 1; border: 1px solid rgba(var(--ink),.18); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.pv-top { display: flex; border-bottom: 1px solid rgba(var(--ink),.18); flex: none; }
.pv-top > div { flex: 1; padding: 9px 14px; }
.pv-top > div + div { border-left: 1px solid rgba(var(--ink),.18); }
.pv-label { font-size: 10px; font-weight: 600; color: var(--ter); text-transform: uppercase; }
.pv-text { font-size: 12.5px; color: var(--sec); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-reply { padding: 9px 14px 10px; font-size: 13px; line-height: 1.45; color: rgba(var(--ink),.92); overflow: hidden; }
.pv-reply .pv-label { margin-bottom: 4px; display: flex; gap: 6px; }
.pv-reply .pv-label i { font-style: normal; font-weight: 400; font-size: 10.5px; text-transform: none; }
.pv-reply .pv-label .working { color: var(--blue); }
.pv-reply p { margin: 0 0 8px; }
.md code { font: 12px var(--ui-mono); color: var(--code); background: rgba(var(--ink),.08); padding: 0 2px; border-radius: 3px; }
.md b { font-weight: 700; }
.nl-reply { height: 36px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: rgba(var(--ink),.05); box-shadow: inset 0 0 0 1px rgba(var(--ink),.08); }
.nl-reply .ico { font-size: 12px; color: var(--sec); }
.nl-reply > span:not(.kc) { flex: 1; font-size: 13.5px; color: rgba(var(--ink),.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-foot { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: rgba(var(--ink),.05); font-size: 13px; color: var(--sec); }
.nl-foot .grow { flex: 1; }
.nl-talk { display: contents; }
.vsep { width: 1px; height: 16px; background: rgba(var(--ink),.2); flex: none; }

/* Unibar's icon (ri:chat-voice-fill) */
.logo { width: 20px; height: 20px; flex: none; color: rgb(var(--ink)); }
.cue-pill.routing .logo { color: var(--sec); }

/* ---------- ⌘⌘ voice (RecordingPill) ---------- */
.vp { position: absolute; left: 50%; top: 330px; width: 600px; z-index: 32; display: flex; flex-direction: column; gap: 10px; transform: translate(-50%, 14px); }
.vp.show { transform: translate(-50%, 0); }
.vp-bar { height: 64px; border-radius: 22px; display: flex; align-items: center; padding: 0 14px; }
.vp-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--ink),.1); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.vp-mid { flex: 1; display: flex; align-items: center; gap: 14px; padding: 0 12px; min-width: 0; }
.wave { display: flex; gap: 3px; align-items: center; width: 32px; height: 40px; flex: none; justify-content: center; }
.wave i { width: 3.3px; border-radius: 2px; background: rgb(var(--ink)); height: 5px; transition: height .12s ease-in-out; }
.vp-text { font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; color: rgb(var(--ink)); }
.vp-text.idle { color: var(--sec); }
.vp-text bdi { direction: ltr; unicode-bidi: plaintext; }
.vp-right { display: flex; gap: 4px; }
.vp-hint { height: 76px; border-radius: 22px; padding: 10px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.vp-row { display: flex; align-items: center; gap: 10px; }
.vp-row .cue { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(var(--ink),.95); }
.vp-row .cue.routing { color: var(--sec); }
.vp-row .app-ico.dim { opacity: .45; }
.vp-row .lbl { font-size: 13px; font-weight: 500; color: rgba(var(--ink),.85); }
.vp-row .route { font-size: 13px; font-weight: 500; color: rgba(var(--ink),.7); display: flex; gap: 6px; align-items: center; }
.vp-row .or { font-size: 12px; color: var(--ter); }
.vp-row .grow { flex: 1; }
.app-ico { width: 20px; height: 20px; border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center; }
.app-ico.ghostty { background: linear-gradient(#3a63d8, #1d2f8f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.app-ico.ghostty::before { content: ""; width: 9px; height: 10px; background: #fff; border-radius: 5px 5px 2px 2px; }

/* PendingToast: "Sending… press Esc to undo", then "✓ Sent to …" */
.pt { position: absolute; left: 50%; top: 820px; transform: translateX(-50%); z-index: 33; }
.pt-send { width: 300px; height: 44px; border-radius: 14px; display: flex; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; }
.pt-send .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(var(--ink),.2); border-top-color: rgba(var(--ink),.7); animation: spin .8s linear infinite; flex: none; }
.pt-send div { flex: 1; min-width: 0; }
.pt-send b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-send small { display: block; font-size: 11px; color: var(--sec); }
.pt-send .undo { font-size: 12px; font-weight: 600; color: var(--blue); }
.pt-sent { height: 38px; border-radius: 19px; padding: 0 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.pt-sent .ico { color: var(--green); font-size: 12px; }
.pt-sent span { color: var(--sec); }
.pt > * { display: none; }
.pt[data-mode="send"] .pt-send, .pt[data-mode="sent"] .pt-sent { display: flex; }

/* ---------- Inbox card ---------- */
.ib { position: absolute; right: 56px; width: 380px; border-radius: 20px; padding: 16px; z-index: 25; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; transform: translateX(16px); }
.ib.show { transform: none; }
.ib-h { display: flex; align-items: center; gap: 8px; }
.ib-h b { font-size: 15px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-sent { font-size: 12px; font-weight: 600; color: var(--green); display: none; align-items: center; gap: 4px; }
.ib-sent.on { display: inline-flex; }
.ib-h .x { color: var(--sec); font-size: 12px; }
.ib-who { display: flex; align-items: center; gap: 10px; }
.ib-who .ai { width: 24px; height: 24px; }
.ib-who .sd { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; box-shadow: 0 0 0 1.5px var(--panel); }
.ib-who b { display: block; font-size: 13px; font-weight: 600; }
.ib-who small { display: block; font-size: 11.5px; color: var(--sec); }
.ib-q { font-size: 14px; font-weight: 700; line-height: 1.35; }
.ib-opts { display: flex; flex-direction: column; gap: 8px; margin-top: -4px; }
.ib-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(var(--ink),.07); font-size: 13px; transition: background .2s, opacity .2s, box-shadow .2s; }
.ib-opt .num { width: 20px; height: 20px; border-radius: 5px; background: rgba(var(--ink),.12); font: 700 11px/20px ui-rounded, var(--ui-font); text-align: center; flex: none; }
.ib-opt .rec { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--green); background: color-mix(in srgb, var(--green) 18%, transparent); padding: 2px 7px; border-radius: 99px; }
.ib-opt.hl { background: color-mix(in srgb, var(--green) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); }
.ib-opt.hl .num, .ib-opt.chosen .num { background: var(--green); color: #fff; font-size: 0; }
.ib-opt.hl .num::before, .ib-opt.chosen .num::before { content: "✓"; font-size: 11px; }
.ib-opt.chosen { background: color-mix(in srgb, var(--green) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 80%, transparent); }
.ib-opt.chosen .rec { display: none; }
.ib-opt.faded { opacity: .45; }
.ib-comp { display: flex; gap: 8px; }
.rec-btn { flex: 1; height: 40px; border-radius: 12px; background: rgba(var(--ink),.07); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 13px; }
.rec-btn .ico { font-size: 13px; }
.rec-btn > span:not(.kc) { flex: 1; }
.circ { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--ink),.1); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.ib-hints { display: flex; gap: 10px; font-size: 10.5px; color: var(--ter); }
.ib-hints span { display: inline-flex; gap: 3px; align-items: center; }
.ib-hints i { font: 600 9.5px ui-rounded, var(--ui-font); font-style: normal; padding: 1px 4px; border-radius: 3px; background: rgba(var(--ink),.1); }

/* ---------- Agent list (ThreadList) ---------- */
.tl { position: absolute; right: 56px; width: 440px; border-radius: 20px; padding: 10px; z-index: 24; box-sizing: border-box; transform: translateX(16px); }
.tl.show { transform: none; }
.tl-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--ter); padding: 8px 6px 2px; }
.tl-sec.ready { color: var(--green); }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; }
.tl-row.hover { background: rgba(var(--ink),.12); }
.tl-row .dotbox { width: 10px; display: flex; justify-content: center; flex: none; }
.tl-row .sd { width: 8px; height: 8px; }
.tl-row .txt { flex: 1; min-width: 0; }
.tl-row .t1 { display: flex; align-items: center; gap: 6px; }
.tl-row b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-row small { display: block; font-size: 11.5px; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-acts { display: flex; gap: 2px; color: rgba(var(--ink),.75); font-size: 14px; }
.tl-acts span { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }

/* ---------- Settings window ---------- */
.sw { position: absolute; left: 700px; top: 150px; width: 600px; border-radius: 12px; overflow: hidden; z-index: 26; background: #1e1e20; color: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.5); transform: translateY(16px); }
[data-theme="light"] .sw { background: #ececec; color: #1d1d1f; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 30px 80px rgba(0,0,0,.2); }
.sw.show { transform: none; }
.sw .win-bar { background: transparent; }
.sw-seg { display: flex; margin: 4px 16px 0; padding: 2px; border-radius: 7px; background: rgba(var(--ink),.08); }
.sw-seg span { flex: 1; text-align: center; font-size: 11.5px; padding: 3px 0; border-radius: 5px; color: rgba(var(--ink),.85); }
.sw-seg span.on { background: rgba(var(--ink),.22); color: rgb(var(--ink)); font-weight: 500; }
[data-theme="light"] .sw-seg span.on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sw-form { margin: 16px; padding: 14px; border-radius: 9px; background: rgba(var(--ink),.04); box-shadow: inset 0 0 0 1px rgba(var(--ink),.08); display: flex; flex-direction: column; gap: 10px; }
.sw-form b { font-size: 12px; font-weight: 600; }
.sw-code { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 8px; background: rgba(var(--ink),.06); }
.sw-code code { flex: 1; font: 11px/1.45 var(--ui-mono); color: rgba(var(--ink),.85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.mac-btn { font-size: 12.5px; padding: 3px 10px; border-radius: 6px; background: rgba(var(--ink),.14); box-shadow: 0 .5px 0 rgba(0,0,0,.2); flex: none; transition: background .2s; }
[data-theme="light"] .mac-btn { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.08); }
.mac-btn.press { background: var(--blue) !important; color: #fff; }
.sw-cap { font-size: 11px; color: var(--sec); }
.sw-fields { display: flex; gap: 8px; align-items: center; }
.mac-field { flex: 1; height: 22px; border-radius: 5px; padding: 0 7px; font-size: 13px; line-height: 22px; background: rgba(var(--ink),.08); box-shadow: inset 0 0 0 .5px rgba(var(--ink),.2); color: rgb(var(--ink)); white-space: nowrap; overflow: hidden; }
[data-theme="light"] .mac-field { background: #fff; }
.mac-field.ph { color: rgba(var(--ink),.35); }
.mac-field.small { flex: none; width: 140px; }
.sw-ok { font-size: 11px; color: var(--green); opacity: 0; transition: opacity .3s; }
.sw-ok.on { opacity: 1; }

/* ---------- Phone: the mobile app's palette (mobile/src/lib/theme.ts); iOS light colors in light mode ---------- */
.phone, .phone-mini {
  --p-bg: #000; --p-card: #1c1c1e; --p-raised: #2c2c2e; --p-sep: #38383a; --p-label: #fff;
  --p-sec: #8e8e93; --p-ter: #636366; --p-blue: #0a84ff; --p-green: #30d158; --p-amber: #ff9f0a; --p-red: #ff453a; --p-bar: rgba(10,10,12,.95);
  --p-press: #3a3a3c; --p-mic: #ffffff; --p-mic-ink: #000;
}
[data-theme="light"] .phone, [data-theme="light"] .phone-mini {
  --p-bg: #f2f2f7; --p-card: #ffffff; --p-raised: #e5e5ea; --p-sep: #c6c6c8; --p-label: #000;
  --p-sec: #6c6c70; --p-ter: #8e8e93; --p-blue: #007aff; --p-green: #34c759; --p-amber: #ff9500; --p-red: #ff3b30; --p-bar: rgba(249,249,249,.94);
  --p-press: #d1d1d6; --p-mic: #000000; --p-mic-ink: #fff;
}
.phone-dim { position: absolute; inset: 0; z-index: 39; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
[data-theme="light"] .phone-dim { background: rgba(255,255,255,.4); }
.phone {
  --p-num: #48484a; --p-needs: rgba(255,159,10,.35);
  position: absolute; left: 50%; top: 70px; width: 370px; height: 760px; z-index: 40; border-radius: 60px; background: #0a0a0a; padding: 12px; box-sizing: border-box;
  box-shadow: 0 0 0 2px #3a3a3e, 0 0 0 7px #1a1a1c, 0 40px 100px rgba(0,0,0,.6);
  transform: translate(-50%, 115%); transition: transform .7s cubic-bezier(.2,.8,.2,1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Inter", sans-serif; color: var(--p-label);
}
[data-theme="light"] .phone { --p-num: #d1d1d6; --p-needs: rgba(255,149,0,.45); box-shadow: 0 0 0 2px #c7c7cc, 0 0 0 7px #e5e5ea, 0 40px 100px rgba(0,0,0,.25); background: #e5e5ea; }
.phone.show { transform: translate(-50%, 0); }
.ph-island { position: absolute; top: 24px; left: 50%; width: 110px; height: 32px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 3; }
.ph-screen { position: relative; height: 100%; border-radius: 48px; overflow: hidden; background: var(--p-bg); }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 19px 34px 0 38px; font-size: 15px; font-weight: 600; }
.ph-sig { font-size: 9px; letter-spacing: 1px; display: flex; align-items: center; gap: 5px; }
.ph-sig i { width: 22px; height: 11px; border-radius: 3px; background: currentColor; }
.ph-tab { position: absolute; inset: 56px 0 82px; padding: 0 16px; transition: opacity .35s; overflow: hidden; }
.ph-talk { opacity: 0; display: flex; flex-direction: column; }
.ph-talk.show { opacity: 1; }
.ph-inbox.hide { opacity: 0; }
.ph-tab h4 { font-size: 34px; font-weight: 700; margin: 10px 0 2px; letter-spacing: .01em; }
.ph-sec { font-size: 12px; font-weight: 600; letter-spacing: .6px; color: var(--p-sec); padding: 14px 4px 2px; margin-bottom: 8px; }
.ph-card { background: var(--p-card); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px transparent; margin-bottom: 8px; transition: box-shadow .3s; }
.ph-card.needs { box-shadow: inset 0 0 0 1px var(--p-needs); }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 14px; }
.ph-dot { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.ph-dot .d { width: 10px; height: 10px; border-radius: 50%; }
.d.amber { background: var(--p-amber); } .d.blue { background: var(--p-blue); } .d.green { background: var(--p-green); } .d.gray { background: var(--p-ter); }
.ios-spin { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 10%, var(--p-blue)); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); animation: spin .9s linear infinite; }
.kb { width: 22px; height: 22px; border-radius: 6px; background: #48484a; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.ph-txt { flex: 1; min-width: 0; }
.ph-txt b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-txt small { display: block; font-size: 13px; color: var(--p-sec); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--p-blue); flex: none; }
.ph-q { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; max-height: 220px; transition: max-height .4s, opacity .3s, padding .4s; }
.ph-q.gone { max-height: 0; opacity: 0; padding-bottom: 0; }
.ph-prompt { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.ph-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--p-raised); font-size: 14px; font-weight: 600; transition: background .15s, opacity .2s; }
.ph-opt.pick { background: var(--p-press); }
.ph-q.answering .ph-opt:not(.pick) { opacity: .5; }
.ph-n { width: 22px; height: 22px; border-radius: 6px; background: var(--p-num); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.ph-chips { display: flex; gap: 6px; padding: 0 14px 14px; }
.ph-chips span { font-size: 13px; font-weight: 600; color: var(--p-green); background: color-mix(in srgb, var(--p-green) 15%, transparent); padding: 6px 12px; border-radius: 14px; }
.ph-main { text-align: center; margin-top: 10px; }
.ph-main b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.ph-main .d { width: 8px; height: 8px; border-radius: 50%; }
.ph-main small { display: block; font-size: 13px; color: var(--p-sec); margin-top: 4px; }
.ph-msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.ph-bubble { align-self: flex-end; max-width: 85%; padding: 9px 13px; border-radius: 18px; background: var(--p-blue); color: #fff; font-size: 16px; line-height: 21px; opacity: 0; transition: opacity .3s; }
.ph-bubble:empty { display: none; }
.ph-bubble.show { opacity: 1; }
.ph-receipt { text-align: center; font-size: 12px; font-weight: 600; color: var(--p-green); opacity: 0; transition: opacity .3s; }
.ph-receipt i { font-style: normal; font-weight: 400; color: var(--p-ter); margin-left: 6px; }
.ph-receipt.show { opacity: 1; }
.ph-micwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-mic { width: 76px; height: 76px; border-radius: 50%; background: var(--p-mic); color: var(--p-mic-ink); display: flex; align-items: center; justify-content: center; font-size: 30px; transition: background .2s, transform .2s, box-shadow .2s; }
.ph-mic.on { background: var(--p-red); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 8px color-mix(in srgb, var(--p-red) 25%, transparent); }
.ph-hold { font-size: 13px; font-weight: 600; color: var(--p-sec); }
.ph-composer { margin: 16px 0 6px; height: 40px; border-radius: 20px; background: var(--p-card); color: var(--p-ter); font-size: 15px; display: flex; align-items: center; padding: 0 16px; }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 82px; display: flex; justify-content: space-around; padding-top: 8px; border-top: .5px solid var(--p-sep); background: var(--p-bar); font-size: 10.5px; font-weight: 500; color: var(--p-ter); }
.ph-tabs > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 70px; }
.ph-tabs .ico { font-size: 24px; }
.ph-tabs .on { color: var(--p-label); }
.ph-badge { position: absolute; top: -3px; left: 40px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--p-red); color: #fff; font: 600 12px/18px -apple-system, system-ui, sans-serif; text-align: center; font-style: normal; transition: transform .25s; }
.ph-badge.hide { transform: scale(0); }
.ph-tap { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(127,127,127,.35); border: 2px solid rgba(127,127,127,.6); pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s, left .5s, top .5s; z-index: 5; }
.ph-tap.show { opacity: 1; transform: scale(1); }

/* Keys being pressed (explains the shortcut; not part of the app) */
.keys { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; gap: 12px; z-index: 60; pointer-events: none; }
.keycap {
  min-width: 84px; height: 84px; padding: 0 20px; border-radius: 18px; font: 600 36px var(--ui-font); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; color: rgb(var(--ink));
  background: var(--cap); box-shadow: inset 0 0 0 1px rgba(var(--ink),.2), 0 6px 0 rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.35);
  animation: keypress .9s ease forwards;
}
@keyframes keypress { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 15% { opacity: 1; transform: none; } 30% { transform: translateY(4px); } 45% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Outside the stage: small pieces of the same UI */
.cue-pill.ui { box-shadow: var(--panel-shadow); }
.cue-pill .app-ico { width: 20px; height: 20px; }
.cue-pill b { color: rgba(var(--ink),.95); font-weight: 600; }
.cue-pill small { color: var(--sec); }
.cue-pill.routing b { color: var(--sec); }
.feat-rail.ui { flex-direction: column; padding: 10px 0; gap: 0; border-radius: 17px; width: 34px; align-items: center; }
.feat-rail.ui .slot { height: 17px; display: flex; align-items: center; }
/* ChoiceCard (router asks) */
.ui { --card: #1c1c1c; --card-hover: #292929; }
[data-theme="light"] .ui { --card: rgb(197,200,204); --card-hover: rgb(188,191,194); }
.chooser.ui { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; font-size: 13px; }
.ch-req { font-size: 13px; font-weight: 600; padding: 10px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(var(--ink),.08); }
.ch-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(var(--ink),.08); }
.ch-row:first-of-type { background: var(--card-hover); }
.ch-row > div { flex: 1; min-width: 0; }
.ch-row b { display: block; font-size: 13px; font-weight: 600; }
.ch-row small { display: block; font-size: 11px; color: var(--sec); margin-top: 2px; }
.ch-row small i { font-style: normal; color: var(--ter); }
.ch-n { width: 20px; height: 20px; border-radius: 5px; background: color-mix(in srgb, var(--blue) 85%, transparent); color: #fff; font: 700 11px/20px var(--ui-font); text-align: center; flex: none; }
.ch-score { font-size: 11px; color: var(--ter); }
.ch-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--ter); }
.ch-other { font-size: 11.5px; color: var(--blue); }

/* Browser window (the "Any app" scene) */
.win-web { left: 70px; top: 60px; width: 1080px; height: 780px; background: #fff; opacity: 0; transform: translateY(14px) scale(.985); z-index: 2; }
.win-web.show { opacity: 1; transform: none; }
.web-bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #2b2b2e; }
[data-theme="light"] .web-bar { background: #ececee; }
.web-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.web-bar i:nth-child(2) { background: #febc2e; } .web-bar i:nth-child(3) { background: #28c840; }
.web-url { margin: 0 auto; width: 380px; height: 28px; border-radius: 8px; background: rgba(127,127,127,.18); font-size: 13px; color: rgba(var(--ink),.7); display: flex; align-items: center; justify-content: center; transform: translateX(-30px); }
.web-page { padding: 64px 80px; color: #111; font-family: var(--ui-font); text-align: center; }
.web-page h5 { font-size: 40px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.web-sub { color: #666; font-size: 15px; display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0 40px; }
.web-toggle { width: 38px; height: 22px; border-radius: 11px; background: #d1d1d6; position: relative; transition: background .3s; }
.web-toggle i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .3s; }
.web-cards { display: flex; gap: 22px; justify-content: center; }
.web-card { width: 250px; padding: 30px 24px; border-radius: 16px; border: 1px solid #e5e5ea; display: flex; flex-direction: column; gap: 8px; text-align: left; transition: transform .5s, box-shadow .5s, border-color .5s; }
.web-card b { font-size: 17px; }
.web-card em { font-style: normal; font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.web-card small { color: #666; font-size: 14px; margin-bottom: 18px; }
.web-card span { padding: 10px; border-radius: 10px; background: #f2f2f7; text-align: center; font-size: 14px; font-weight: 600; transition: background .5s, color .5s; }
.web-card.hot { transform: translateY(-10px); border-color: #0a85ff; box-shadow: 0 20px 50px rgba(10,133,255,.18); }
.web-card.hot span { background: #0a85ff; color: #fff; }
.app-ico.safari { background: radial-gradient(circle, #fff 0 22%, transparent 23%), conic-gradient(#38a1ff, #1d6fe0, #38a1ff); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.app-ico.dim { opacity: .45; }
.vp-row .route.hidden { visibility: hidden; }

/* ---------- Camera: the desktop zooms into a piece of it (the notch's notice) ---------- */
.cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.65,0,.35,1); }

/* ---------- Top notch (TopNotch.swift) ----------
   Always dark, like the hardware notch it hangs from (the app pins it to darkAqua). */
.ui .tn {
  --ink: 255,255,255; --panel: #000; --sel: rgba(255,255,255,.14); --cap: #2e2e2e;
  --green: #30d158; --amber: #ff9f0a; --idle: #6b6b6b; --blue: #0a85ff; --code: rgb(250,184,140);
  --sec: rgba(255,255,255,.55); --ter: rgba(255,255,255,.35);
  position: absolute; top: 0; left: 50%; z-index: 40; transform: translateX(-50%);
  width: var(--w, 180px); height: var(--h, 32px); background: #000; color: #fff;
  border-radius: 0 0 var(--r, 9px) var(--r, 9px);
  transition: width .55s cubic-bezier(.3,1.2,.4,1), height .55s cubic-bezier(.3,1.15,.4,1), border-radius .4s, box-shadow .4s;
}
.tn::before, .tn::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; }
.tn::before { left: -10px; background: radial-gradient(circle at 0 100%, transparent 10px, #000 10.5px); }
.tn::after { right: -10px; background: radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px); }
.tn.open { box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.tn-bar { position: absolute; top: 0; left: 0; right: 0; height: 32px; display: flex; justify-content: center; transition: opacity .2s; }
.tn.open .tn-bar { opacity: 0; }
.tn-cam { width: 180px; flex: none; }
.tn-l, .tn-r { width: var(--wing, 0px); flex: none; display: flex; align-items: center; overflow: hidden; transition: width .3s; }
.tn-l { justify-content: flex-end; padding-right: 8px; box-sizing: border-box; }
.tn-r { gap: 4px; padding-left: 8px; box-sizing: border-box; }
.tn-r b { font: 700 10.5px ui-rounded, var(--ui-font); color: var(--sec); }
.tn-card { position: absolute; top: 32px; left: 50%; width: 680px; transform: translateX(-50%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.tn.open .tn-card { opacity: 1; transition: opacity .3s .15s; }
.nc { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.nc-h { display: flex; align-items: center; gap: 10px; }
.nc-ico { position: relative; display: inline-flex; }
.nc-ico .sd { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; box-shadow: 0 0 0 1.5px #000; }
.nc-t { flex: 1; min-width: 0; }
.nc-t b { display: block; font-size: 13.5px; font-weight: 600; }
.nc-t small { display: block; font-size: 11px; color: var(--sec); }
.nc-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--sec); font-size: 13px; flex: none; }
.nc-q { font-size: 13.5px; font-weight: 600; }
.nc .ib-opts { margin-top: -2px; }
.nc .pv-card { flex: none; }
.nc .pv-reply { max-height: 120px; }
.nc-sent { color: var(--green); font-weight: 600; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.nc-foot, .zen-hints { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sec); white-space: nowrap; }
.nc-foot .kc, .zen-hints .kc { padding: 2px 5px; font-size: 10.5px; }
.nc-foot .vsep, .zen-hints .vsep { height: 12px; margin: 0 4px; }
.fa { display: inline-flex; align-items: center; gap: 4px; }
.fa.hot { color: rgb(var(--ink)); }

/* Reply bar: record, listening, the transcript to read over, sent (VoiceReplyButton / NavigatorReplyBar) */
.rb { display: flex; gap: 8px; align-items: center; }
.rb-main { flex: 1; min-width: 0; height: 36px; border-radius: 10px; background: rgba(var(--ink),.07); display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; transition: background .2s, box-shadow .2s; }
.rb-main .ico { font-size: 13px; flex: none; }
.rb-main .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.rb-main .txt bdi { direction: ltr; unicode-bidi: plaintext; }
.rb-main .ph { color: rgba(var(--ink),.42); }
.rb-main .stop { font-size: 11.5px; color: var(--sec); font-weight: 500; }
.rb.listening .rb-main { background: rgba(var(--ink),.1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 55%, transparent); }
.rb.draft .rb-main { background: rgba(var(--ink),.1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 70%, transparent); }
.rb.sent .rb-main .ico { color: var(--green); }
.rb-circ { width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--ink),.1); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.rb .caret { margin-left: 0; height: 16px; flex: none; }
.send-pill { flex: none; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.wave.sm { width: 22px; height: 24px; gap: 2px; }
.wave.sm i { width: 2.4px; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity: .35; } }
.nl-reply.rb-host { padding: 0; background: none; box-shadow: none; }
.nl-reply.rb-host .rb { flex: 1; }
.nl-reply.rb-host .rb-main > span:not(.kc) { color: inherit; flex: none; font-size: 13.5px; }
.nl-reply.rb-host .rb .rb-main .txt { flex: 1 1 0; }
.nl-reply.rb-host .rb-main .ph { color: rgba(var(--ink),.42); }

/* ---------- Chat window ---------- */
.cw { position: absolute; left: 50%; top: 110px; width: 700px; height: 580px; border-radius: 16px; z-index: 30; display: flex; flex-direction: column; overflow: hidden; transform: translate(-50%, -24px) scale(.94); transform-origin: 50% 0; }
.cw.show { transform: translate(-50%, 0); transition: opacity .35s, transform .5s cubic-bezier(.3,1.2,.4,1), visibility 0s; }
.cw-h { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid rgba(var(--ink),.1); }
.cw-r1, .cw-r2 { display: flex; align-items: center; gap: 10px; }
.cw-t b { display: block; font-size: 14px; font-weight: 700; }
.cw-t small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sec); }
.cw-t small .sd { width: 7px; height: 7px; }
.grow { flex: 1; }
.cw-git { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ter); }
.cw-git code { font: 500 10.5px var(--ui-mono); color: var(--sec); background: rgba(var(--ink),.1); padding: 1px 5px; border-radius: 4px; }
.diff-tg { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--sec); box-shadow: inset 0 0 0 1px rgba(var(--ink),.15); transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.diff-tg.on { background: rgba(var(--ink),.16); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 70%, transparent); }
.diff-tg.press { transform: scale(.92); }
.cw-body { flex: 1; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; line-height: 1.5; justify-content: flex-end; }
.cw-me { align-self: flex-end; max-width: 75%; padding: 8px 12px; border-radius: 14px; background: rgba(var(--ink),.1); }
.cw-me.new { animation: bubble .45s cubic-bezier(.3,1.3,.4,1); }
@keyframes bubble { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.cw-tool { font-size: 12px; color: var(--ter); font-family: var(--ui-mono); }
.cw-ag p { margin: 0 0 6px; }
.cw-comp { padding: 4px 10px 10px; }
.cw .nl-foot { height: 40px; font-size: 12px; gap: 6px; }
.cw .nl-foot .kc { padding: 2px 5px; font-size: 10.5px; }

/* ---------- Zen ---------- */
.zen { position: absolute; inset: 0; z-index: 36; background: var(--panel); display: flex; transform: scale(1.02); }
.zen.show { transform: none; transition: opacity .4s, transform .5s, visibility 0s; }
.zen-main { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 0 40px; }
.zen-col { width: 100%; max-width: 900px; display: flex; flex-direction: column; padding: 56px 0 30px; transition: max-width .45s; }
.zen.diffs .zen-col { max-width: 700px; }
.zen-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.zen-h b { font-size: 16px; font-weight: 600; }
.zen-h small { font-size: 13px; color: var(--ter); }
.zen-h .pos { font-size: 12px; color: var(--ter); }
.zen-read { flex: 1; overflow: hidden; padding-top: 30px; -webkit-mask: linear-gradient(transparent, #000 4%, #000 90%, transparent); mask: linear-gradient(transparent, #000 4%, #000 90%, transparent); }
.zen-lbl { font-size: 11px; font-weight: 600; letter-spacing: .6px; color: var(--ter); text-transform: uppercase; margin-bottom: 6px; }
.zen-p { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.zen-rule { height: 1px; background: rgba(var(--ink),.12); margin: 6px 0 30px; }
.zen-text { font-size: 20px; line-height: 1.65; color: rgba(var(--ink),.9); }
.zen-text p { margin: 0 0 16px; }
.zen-text code { font: 17px var(--ui-mono); color: var(--code); background: rgba(var(--ink),.08); padding: 0 3px; border-radius: 4px; }
.zen-files { margin-top: 22px; border: 1px solid rgba(var(--ink),.15); border-radius: 12px; font-size: 13px; }
.zen-files div { display: flex; gap: 10px; padding: 8px 14px; border-top: 1px solid rgba(var(--ink),.08); font-family: var(--ui-mono); font-size: 12px; }
.zen-files div:first-child { border-top: 0; font-family: var(--ui-font); font-weight: 600; font-size: 12.5px; }
.zen-files .a { color: #5ecc71; } .zen-files .d { color: #ff6762; }
.zen-reply { padding: 10px 0 14px; }
.zen-reply .rb-main { height: 48px; border-radius: 13px; font-size: 17px; padding: 0 16px; }
.zen-reply .rb-main .ico { font-size: 16px; }
.zen-hints { justify-content: center; font-size: 12.5px; }
.zen-diff { width: 0; flex: none; overflow: hidden; border-left: 1px solid rgba(var(--ink),.1); background: color-mix(in srgb, var(--panel) 92%, rgb(var(--ink))); transition: width .55s cubic-bezier(.3,1,.4,1); padding-top: 28px; box-sizing: border-box; }
.zen.diffs .zen-diff { width: 560px; }
.dp { width: 560px; height: 100%; font-size: 12px; display: flex; flex-direction: column; }
.dp-scroll { flex: 1; min-height: 0; overflow: hidden; }
.dp-h { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(var(--ink),.1); font-weight: 600; font-size: 12.5px; }
.dp-h .grow { flex: 1; }
.dp-h .nc-btn { width: 20px; }
.dp-f { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font: 500 12px var(--ui-mono); background: rgba(var(--ink),.04); border-bottom: 1px solid rgba(var(--ink),.08); }
.dp-f .m { color: #69b1ff; }
.dp-l { display: flex; font: 11.5px/19px var(--ui-mono); white-space: pre; }
.dp-l .n { width: 38px; text-align: right; padding-right: 10px; color: rgba(var(--ink),.35); flex: none; }
.dp-l .s { width: 14px; flex: none; }
.dp-l.add { background: rgba(48,209,88,.10); box-shadow: inset 2px 0 0 #5ecc71; } .dp-l.add .s { color: #5ecc71; }
.dp-l.del { background: rgba(255,69,92,.10); box-shadow: inset 2px 0 0 #ff6762; } .dp-l.del .s { color: #ff6762; }
.dp-l.hunk { color: var(--ter); background: rgba(10,133,255,.07); }
.dp-stat .a { color: #5ecc71; } .dp-stat .d { color: #ff6762; }
.dp-body { transition: transform 2.4s ease-in-out; }

/* Feature card: the top notch at rest */
.feat-notch.ui { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; margin-top: 18px; background: #000; color: #fff; border-radius: 0 0 12px 12px; --green: #30d158; }
.feat-notch .cam { position: static; width: 110px; height: 1px; }
.feat-notch b { font: 700 11px ui-rounded, var(--ui-font); color: rgba(255,255,255,.55); }
.stage.zoomed .keys { top: 84%; }
.rb-main .txt.ph { direction: ltr; }

/* Keys out of the way of a zoomed launcher */
.stage.zoomed[data-keys="top"] .keys { top: 13%; }
/* The launcher preview part being pointed at */
.pv-top > div, .pv-reply { transition: background .35s, box-shadow .35s; }
.pv-hl { background: color-mix(in srgb, var(--blue) 13%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 75%, transparent); }

/* ---------- Chrome with claude.ai (a look-alike, not the real page) ---------- */
.win-cai { --cai-bg: #faf9f5; --cai-ink: #3d3929; --cai-bubble: #f0eee6; --cai-line: #e5e2d9; --cai-comp: #fff;
  left: 150px; top: 64px; width: 1140px; height: 780px; background: var(--cai-bg); z-index: 3; opacity: 0; transform: translateY(14px) scale(.985); }
[data-theme="dark"] .win-cai { --cai-bg: #262624; --cai-ink: #e8e5dc; --cai-bubble: #141413; --cai-line: #3a3936; --cai-comp: #30302e; }
.win-cai.show { opacity: 1; transform: none; }
.cai-tabs { height: 40px; display: flex; align-items: flex-end; gap: 6px; padding: 0 14px; background: #2b2b2e; }
[data-theme="light"] .cai-tabs { background: #dfe1e5; }
.cai-tabs > i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; align-self: center; }
.cai-tabs > i:nth-child(2) { background: #febc2e; } .cai-tabs > i:nth-child(3) { background: #28c840; margin-right: 14px; }
.cai-tab { height: 32px; width: 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 9px 9px 0 0; font-size: 12.5px; color: rgba(255,255,255,.65); box-sizing: border-box; transition: background .25s, color .25s; }
[data-theme="light"] .cai-tab { color: #5f6368; }
.cai-tab .fav { width: 14px; height: 14px; border-radius: 4px; background: #0a85ff; flex: none; }
.cai-tab .fav.cl { background: #d97757; border-radius: 50%; }
.cai-tab .fav.busy { background: none; border: 2px solid #d97757; border-right-color: transparent; box-sizing: border-box; animation: spin .9s linear infinite; }
.win-cai[data-tab="1"] .t1, .win-cai[data-tab="2"] .t2 { background: var(--cai-bar); color: var(--cai-tab-ink); }
.win-cai { --cai-bar: #3c3c3f; --cai-tab-ink: #fff; }
[data-theme="light"] .win-cai { --cai-bar: #fff; --cai-tab-ink: #202124; }
.cai-bar { height: 40px; display: flex; align-items: center; justify-content: center; background: var(--cai-bar); }
.cai-url { width: 460px; height: 28px; border-radius: 14px; background: rgba(127,127,127,.2); font-size: 13px; color: var(--cai-tab-ink); opacity: .8; display: flex; align-items: center; padding: 0 14px; }
.cai-pane { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; transition: opacity .3s; }
.cai-pane.p1 { background: #fff; }
.win-cai[data-tab="1"] .p2, .win-cai[data-tab="2"] .p1 { opacity: 0; pointer-events: none; }
.cai-col { width: 700px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding: 30px 0 22px; box-sizing: border-box; color: var(--cai-ink); }
.cai-msgs { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
.cai-me { align-self: flex-end; max-width: 75%; background: var(--cai-bubble); border-radius: 14px; padding: 10px 14px; font: 15px/1.5 var(--ui-font); }
.cai-me.new { animation: bubble .5s cubic-bezier(.3,1.3,.4,1); }
.cai-ai { font: 16.5px/1.6 Georgia, "Times New Roman", serif; }
.cai-ai p { margin: 0 0 12px; }
.cai-ai .think { font: italic 14px var(--ui-font); opacity: .55; }
.cai-comp { margin-top: 18px; min-height: 58px; border-radius: 18px; background: var(--cai-comp); box-shadow: 0 0 0 1px var(--cai-line), 0 4px 18px rgba(0,0,0,.06); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; font: 15px var(--ui-font); }
.cai-comp #cai-input { flex: 1; opacity: .5; }
.cai-comp #cai-input.typed { opacity: 1; }
.cai-send { width: 32px; height: 32px; border-radius: 9px; background: #c96442; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ⌘⏎: the chat's own app comes to the front, its window ringed */
.win-term { transition: opacity .5s, transform .5s, box-shadow .35s; }
.win-term.jump { z-index: 3; box-shadow: 0 0 0 3px var(--accent), 0 24px 60px rgba(0,0,0,.35); }
#nl-open.hot, #nl-open.hot + .kc, #nl-open.hot + .kc + .kc { color: var(--accent); font-weight: 600; }
#nl-open.hot + .kc, #nl-open.hot + .kc + .kc { border-color: var(--accent); }

/* ---------- MacBook (last scene) ----------
   --mb fades the body in around the desktop and pulls the camera back and up; --lid closes it.
   At 0/0 nothing is transformed, so every other scene is the plain desktop. */
.stage-box { perspective: 4200px; perspective-origin: 50% 30%; }
.mbp { --mb: 0; --lid: 0; position: relative; transform-style: preserve-3d; transform-origin: 50% 45%;
  transform: translateY(calc(var(--mb) * -13%)) scale(calc(1 - var(--mb) * .38)) rotateX(calc(var(--mb) * -16deg)); }
.mbp-lid { position: relative; transform-style: preserve-3d; transform-origin: 50% calc(100% + 3.2%);
  transform: rotateX(calc(var(--mb) * 10deg - var(--lid) * 99.6deg)); }
.mbp .stage-wrap { backface-visibility: hidden; }
.mbp.on .stage-wrap { border-radius: 6px; box-shadow: none; }
/* the black bezel and its aluminium rim */
.mbp-lid::before { content: ""; position: absolute; inset: -2.6% -1.7% -3.2%; border-radius: 22px 22px 6px 6px; background: #0b0b0d;
  box-shadow: 0 0 0 2px #a7a9ae, 0 0 0 3px #7d8085; opacity: var(--mb); backface-visibility: hidden; transform: translateZ(-1px); }
/* the lid's back, seen once it's closed */
.mbp-back { position: absolute; inset: -2.6% -1.7% -3.2%; border-radius: 22px 22px 6px 6px; backface-visibility: hidden; opacity: var(--mb);
  background: linear-gradient(160deg, #d6d8dc, #aeb1b6); transform: rotateY(180deg) translateZ(2px); display: grid; place-items: center; }
/* the logo on the lid, polished like the real thing; upside down from the front, as on a closed MacBook */
.mbp-back svg { width: 13%; height: auto; filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 -1px 1px rgba(0,0,0,.18)); }
/* the deck: aluminium, the keyboard well and the trackpad, lying toward you from the hinge */
.mbp-deck { position: absolute; left: -1.7%; right: -1.7%; top: calc(100% + 3.2%); height: 105.8%; transform-origin: 50% 0; transform: rotateX(90deg);
  transform-style: preserve-3d; opacity: var(--mb); border-radius: 0 0 22px 22px;
  background: linear-gradient(#d3d6da, #c2c5ca 60%, #b8bbc0); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
/* the keyboard: real keycaps in a recessed well */
.mbp-kb { position: absolute; left: 12.5%; right: 12.5%; top: 4%; height: 40%; padding: .6%; border-radius: 8px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 1.6%; background: #a9acb1; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.mbp-kb .row { display: flex; gap: .55%; flex: 2 1 0; min-height: 0; }
.mbp-kb .row.fn { flex: 1.1 1 0; }
.mbp-kb .row.split { flex-direction: column; flex: none; gap: 6%; height: 100%; }
.mbp-kb .k { flex: var(--w, 1); position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 5px;
  background: linear-gradient(#2c2c30, #1d1d20); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  font: 500 11px/1 var(--ui-font); color: rgba(255,255,255,.82); font-style: normal; }
.mbp-kb .k b { font-weight: 500; }
.mbp-kb .k.l, .mbp-kb .k.r { font-size: 8px; align-items: flex-end; padding: 0 5px 4px; }
.mbp-kb .k.l { justify-content: flex-start; }
.mbp-kb .k.r { justify-content: flex-end; }
.mbp-kb .k.f { font-size: 8px; color: rgba(255,255,255,.6); }
.mbp-kb .k.id { background: radial-gradient(circle, #2a2a2e 52%, #3a3a3f 56%, #1d1d20 60%); }
.mbp-kb .k.arrows { background: none; box-shadow: none; gap: 4%; font-size: 6px; align-items: stretch; }
.mbp-kb .k.arrows > b, .mbp-kb .k.arrows span b { display: flex; align-items: center; justify-content: center; border-radius: 4px;
  background: linear-gradient(#2c2c30, #1d1d20); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.mbp-kb .k.arrows > b { flex: 1; align-self: flex-end; height: 46%; }
.mbp-kb .k.arrows span { flex: 1; display: flex; flex-direction: column; gap: 8%; }
.mbp-kb .k.arrows span b { flex: 1; }
/* speaker grilles either side, and the trackpad */
.mbp-spk { position: absolute; top: 4%; height: 40%; width: 8%; left: 3%; border-radius: 6px;
  background: radial-gradient(circle, rgba(0,0,0,.28) 32%, transparent 38%) 0 0 / 7px 7px; }
.mbp-spk.r { left: auto; right: 3%; }
.mbp-tp { position: absolute; left: 29%; right: 29%; top: 49%; height: 44%; border-radius: 14px;
  background: linear-gradient(#c9ccd0, #c1c4c9); box-shadow: inset 0 0 0 1px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.5); }
/* the front lip with its thumb notch */
.mbp-front { position: absolute; left: 0; right: 0; top: 100%; height: 2.4%; transform-origin: 50% 0; transform: rotateX(-90deg); border-radius: 0 0 22px 22px / 0 0 100% 100%;
  background: radial-gradient(ellipse 7% 70% at 50% 0, #8f9297 60%, transparent 62%), linear-gradient(#b4b7bc, #8d9095);
  box-shadow: 0 30px 60px -10px rgba(0,0,0,.35); }
/* how the agents are doing, over the closed MacBook */
.mbp-pills { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 4; }
.mbp-pill { display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border-radius: 999px; font: 500 15px var(--ui-font); white-space: nowrap;
  background: rgba(20,20,22,.88); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .35s, transform .35s; }
.mbp-pill.show { opacity: 1; transform: none; }
.mbp-pill small { color: rgba(255,255,255,.6); font-size: 13px; }
.mbp-pill .sd { margin: 0; }

/* ---------- Keep awake (the notch grown into its options) ---------- */
.ka { padding: 6px 20px 18px; color: #fff; font-size: 13px; display: grid; gap: 12px; }
.ka-h { display: flex; align-items: flex-start; gap: 12px; }
.ka-h > div { flex: 1; display: grid; gap: 3px; }
.ka-h b { font-size: 18px; }
.ka-h small, .ka-row small { color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.35; }
.ka-l { font: 600 10.5px var(--ui-font); letter-spacing: .06em; color: rgba(255,255,255,.5); display: flex; justify-content: space-between; margin-bottom: -4px; }
.ka-l i { font-style: normal; letter-spacing: 0; font-weight: 400; color: rgba(255,255,255,.4); }
.ka-chips { display: flex; gap: 4px; }
.ka-chips span { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.75); }
.ka-chips span.on { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
.ka-note { padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 11.5px; color: rgba(255,255,255,.85); }
.ka-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ka-apps span { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; }
.ka-apps span.on { background: rgba(255,255,255,.13); font-weight: 600; }
.ka-apps span i { margin-left: auto; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.ka-apps span.on i { background: #fff; box-shadow: none; }
.ka-row { display: flex; align-items: center; gap: 12px; }
.ka-row > span:first-child { flex: 1; display: grid; gap: 2px; }
.ka-sw { flex: none; width: 38px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.18); position: relative; transition: background .25s; }
.ka-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s; }
.ka-sw.on { background: #30d158; }
.ka-sw.on::after { transform: translateX(16px); }
.ka-sw.sm { width: 30px; height: 18px; }
.ka-sw.sm::after { width: 14px; height: 14px; }
.ka-sw.sm.on::after { transform: translateX(12px); }
.ka-btn { text-align: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.14); font-weight: 600; transition: transform .15s, background .15s; }
.ka-btn.press { transform: scale(.97); background: rgba(255,255,255,.26); }
.ka-run { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.ka-run b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ka-run span { color: rgba(255,255,255,.55); }