/* Jarvis (Joey's coach). 1900-ui: sleek HUD look (navy/charcoal, thin cyan lines, warm amber core) with a faint topo texture.
   Visual only: every id / data-act the JS uses is unchanged. Previous theme: style.css.bak-1900-ui */
:root {
  --bg0: #070d16; --bg1: #0c1626; --bg2: #12223a; --panel: rgba(16, 30, 50, .72); --panel2: rgba(22, 40, 66, .78);
  --line: rgba(127, 211, 255, .18); --line2: rgba(127, 211, 255, .34); --cyan: #7fd3ff; --amber: #ffb15c; --amber2: #ff8a1f;
  --ink: #e9f1fb; --dim: #9fb3c8; --ok: #4ade80; --warn: #ffb86b; --bad: #ef4444;
  --font: "Avenir Next", "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); overflow: hidden; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%237fd3ff' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M-20 120c80-40 160 30 240 0s150-70 230-30 120 40 170 10'/%3E%3Cpath d='M-20 170c90-35 150 40 240 8s160-60 240-20 110 36 160 6'/%3E%3Cpath d='M-20 230c100-30 140 50 250 16s170-50 240-12 90 30 150 4'/%3E%3Cpath d='M-20 380c70 30 170-40 260-6s140 70 220 36 110-30 160-10'/%3E%3Cpath d='M-20 430c80 26 160-36 250-4s150 60 230 28 100-24 160-6'/%3E%3Cpath d='M-20 490c90 20 150-30 240 0s160 50 240 20 90-20 160-4'/%3E%3Cellipse cx='420' cy='300' rx='70' ry='40'/%3E%3Cellipse cx='420' cy='300' rx='120' ry='72'/%3E%3Cellipse cx='130' cy='300' rx='50' ry='28'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(90% 60% at 50% 32%, #16304f 0%, var(--bg1) 55%, var(--bg0) 100%);
  background-size: 600px 600px, cover; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- top bar ---------- */
#top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px 6px; }
#brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#brand .mark { width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(255,177,92,.6)); }
#robotName { font-weight: 600; font-size: 16px; letter-spacing: 5px; text-transform: uppercase; }
#clock { font-size: 14px; color: var(--dim); letter-spacing: 1px; font-variant-numeric: tabular-nums; padding-left: 10px; border-left: 1px solid var(--line2); white-space: nowrap; }
#topBtns { display: flex; gap: 8px; align-items: center; }
#topBtns > button { height: 44px; min-width: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; backdrop-filter: blur(8px); }
#btnVol, #btnMute { width: 44px; padding: 0 !important; }
#btnMomChk { position: relative; color: var(--dim); font-size: 14px !important; }
#btnMomChk .ic { width: 18px; height: 18px; }
#btnMomChk b { font-weight: 600; letter-spacing: .3px; }
#btnMomChk .badge { min-width: 22px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.1); color: var(--ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
#btnMomChk.hot { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 14px rgba(255,177,92,.35); }
#btnMomChk.hot .badge { background: var(--amber); color: #1a1206; }
#menuDot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--bg1); }
#btnMute.off { background: #e8455f !important; border-color: #fff !important; box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,111,134,.8); }
#btnMute.live { background: rgba(74,222,128,.18) !important; border-color: rgba(74,222,128,.6) !important; box-shadow: 0 0 0 calc(2px + var(--lvl, 0) * 12px) rgba(74,222,128,.45); transition: box-shadow .12s linear; }
#btnMute.nomic { background: var(--warn) !important; color: #1a1206; }
#volPop { position: fixed; top: 64px; right: 16px; z-index: 30; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 14px 36px rgba(0,0,0,.5); }
#volPop button { border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 10px; padding: 7px 10px; }
#volPop input { accent-color: var(--amber); width: 140px; }
#volPct { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 14px; min-width: 40px; }

/* ---------- stage + core ---------- */
#stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 18px; }
#coreWrap { position: relative; display: flex; justify-content: center; }
#bot { width: min(62vw, 38vh, 420px); height: auto; overflow: visible; cursor: pointer; filter: drop-shadow(0 0 30px rgba(255,150,60,.22)); }
#bot .cTicks, #bot .cRing1, #bot .cRing2, #bot .cSpokes, #bot .cCoreGlow, #bot .cHalo, #bot .cCore, #bot .cListen, #bot .cThink { transform-box: view-box; transform-origin: 200px 200px; }
#bot .cTicks { animation: spin 90s linear infinite; }
#bot .cRing1 { animation: spin 26s linear infinite; }
#bot .cRing2 { animation: spin 40s linear infinite reverse; }
#bot .cSpokes { animation: spin 60s linear infinite; }
#bot .cCoreGlow { animation: pulse 3.6s ease-in-out infinite; }
#bot .cHalo, #bot .cCore, #bot .cListen, #bot #smile, #bot .cThink { transition: opacity .35s ease, transform .35s ease, stroke .35s ease; }
#bot .cThink { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .75; } }
body.talking #bot .cRing1 { animation-duration: 6s; }
body.talking #bot .cRing2 { animation-duration: 9s; }
body.talking #bot .cHalo { opacity: .6; }
body.listening #bot .cListen { opacity: .9; animation: listen 1.4s ease-in-out infinite; }
@keyframes listen { 50% { transform: scale(1.06); opacity: .35; } }
body.thinking #bot .cThink { opacity: 1; animation: spin 1.4s linear infinite; }
body.thinking #bot .cRing2 { animation-duration: 4s; }
body.happy #bot .cHalo { opacity: .9; }
body.happy #bot .cCore { transform: scale(1.15); }
body[data-phase="sleep"] #bot { filter: none; }
body[data-phase="sleep"] #bot .cRing1, body[data-phase="sleep"] #bot .cRing2, body[data-phase="sleep"] #bot .cSpokes, body[data-phase="sleep"] #bot .cTicks { animation-play-state: paused; }
body[data-phase="sleep"] #bot .cHalo { opacity: .12; }
body[data-phase="sleep"] #bot .cCoreGlow { animation: breathe 5s ease-in-out infinite; }
body[data-phase="sleep"] #bot .cCore, body[data-phase="sleep"] #bot #smile { opacity: .45 !important; }
@keyframes breathe { 50% { opacity: .35; transform: scale(.92); } }
body.muted #bot { filter: grayscale(.85) brightness(.75); }

#caption { font-size: 21px; line-height: 1.35; text-align: center; min-height: 2.7em; max-width: 680px; font-weight: 500; letter-spacing: .2px; margin-top: 4px; }
#heard { font-size: 14px; color: var(--dim); min-height: 1.2em; text-align: center; font-style: italic; }
#hint { font-size: 13px; color: var(--dim); min-height: 1em; }
#errLine { font-size: 13px; color: #ffb3c1; }
#classPill { margin-top: 4px; font-size: 14px; font-weight: 600; border: 1px solid var(--line2); background: rgba(127,211,255,.08); border-radius: 999px; padding: 6px 14px; }
#classPill.live { background: var(--bad); border-color: var(--bad); }
#micPill { margin-top: 6px; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; font-size: 15px; background: #e8455f; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#micPill.warn { background: var(--warn); color: #1a1206; }

/* Up next */
#nowCard { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 620px; margin-top: 8px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); backdrop-filter: blur(8px); }
#nowCard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
#nowCard .em { font-size: 22px; }
#nowCard .lab { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
#nowCard .lab small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--amber); margin-bottom: 1px; }
#nowCard button { border: 0; border-radius: 12px; padding: 10px 14px; background: linear-gradient(135deg, #ffbf6b, var(--amber2)); color: #1a1206; font-weight: 700; font-size: 14px; white-space: nowrap; }
#nowCard button.cam { background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--ink); padding: 10px 12px; }
#nowCard .chip { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: var(--warn); color: #1a1206; }

/* ---------- feature tiles (always visible) ---------- */
#dock { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#feat { width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ft { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; min-height: 96px; padding: 12px 14px; text-align: left;
  border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(26,46,74,.85), rgba(12,22,38,.85)); backdrop-filter: blur(8px); transition: transform .12s ease, border-color .2s ease; overflow: hidden; }
.ft::after { content: ""; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-top: 1.5px solid var(--line2); border-right: 1.5px solid var(--line2); border-radius: 0 4px 0 0; }
.ft .ic { color: var(--amber); margin-bottom: auto; filter: drop-shadow(0 0 6px rgba(255,177,92,.35)); }
.ft b { font-size: 15px; font-weight: 600; letter-spacing: .2px; margin-top: 8px; }
.ft small { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ft:active, .ut:active { transform: scale(.97); border-color: var(--amber); }
.ft[data-act="talk"] { border-color: rgba(255,177,92,.45); background: linear-gradient(160deg, rgba(90,52,18,.55), rgba(20,22,32,.85)); }
#utility { width: 100%; max-width: 900px; display: flex; gap: 10px; justify-content: center; }
.ut { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); font-size: 14px; font-weight: 600; }
.ut .ic { width: 18px; height: 18px; }
.ut.sos { color: #ffc2c2; border-color: rgba(239,68,68,.45); }
body[data-phase="sleep"] #caption, body[data-phase="sleep"] #top, body[data-phase="sleep"] #dock, body[data-phase="sleep"] #nowCard, body[data-phase="sleep"] #heard { visibility: hidden; }

/* ---------- sheets (My Day) ---------- */
.sheet { position: fixed; inset: 0; z-index: 35; background: rgba(3,8,15,.66); backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .18s ease-out; }
.sheetCard { width: min(100%, 860px); max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, var(--bg2), var(--bg1)); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.5); animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
@keyframes fadeIn { from { opacity: 0; } }
.sheetTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.back { border: 1px solid var(--line); border-radius: 14px; padding: 11px 16px; background: rgba(255,255,255,.06); font-weight: 600; font-size: 15px; }
.sheetH { margin: 6px 2px 8px; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--amber); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px; background: var(--panel); font-size: 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 100px; justify-content: center; }
.tile b { font-size: 14px; font-weight: 600; }
#progress { font-size: 13px; color: var(--dim); }
.block { margin: 12px 0 4px; }
.block h3 { margin: 6px 2px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); display: flex; justify-content: space-between; }
.block h3 em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--dim); letter-spacing: .5px; text-transform: none; }
.block.later { opacity: .55; }
.step { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 6px 0; }
.step .em { font-size: 20px; width: 28px; text-align: center; }
.step .lab { flex: 1; font-size: 15px; }
.step .lab small { display: block; color: var(--dim); font-size: 12px; }
.step .chip { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 10px; background: rgba(255,255,255,.1); white-space: nowrap; }
.step.ready .chip { background: var(--warn); color: #1a1206; }
.step.done .chip { background: var(--ok); color: #06240f; }
.step.notneeded .chip { background: #7d78a6; }
.step.done .lab, .step.notneeded .lab { opacity: .6; text-decoration: line-through; }
.step.cur { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.step .acts { display: flex; gap: 6px; }
.step .acts button { border: 0; border-radius: 12px; padding: 8px 12px; background: linear-gradient(135deg, #ffbf6b, var(--amber2)); color: #1a1206; font-weight: 700; font-size: 14px; }
.step .acts button.cam { background: rgba(255,255,255,.1); color: var(--ink); }
.addRow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.addRow input { flex: 1; min-width: 160px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: var(--ink); font: inherit; font-size: 16px; }
.addRow input[type=date] { flex: 0 1 170px; color-scheme: dark; }
#breakLine { font-size: 13px; color: var(--dim); margin: 12px 2px; }

/* ---------- wake ---------- */
#wake { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(12vh + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(5,10,18,0) 30%, rgba(5,10,18,.88) 78%); }
.wakeCard { text-align: center; }
.wakeK { font-size: 11px; letter-spacing: 5px; color: var(--cyan); opacity: .75; margin-bottom: 10px; }
.wakeT { font-size: 34px; font-weight: 300; letter-spacing: 1px; margin-bottom: 18px; }
#btnWake { border: 1px solid var(--amber); border-radius: 999px; padding: 16px 38px; font-size: 18px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #1a1206; background: linear-gradient(135deg, #ffc77a, var(--amber2)); box-shadow: 0 0 0 6px rgba(255,177,92,.12), 0 0 34px rgba(255,138,31,.45); animation: wakeGlow 2.6s ease-in-out infinite; }
@keyframes wakeGlow { 50% { box-shadow: 0 0 0 12px rgba(255,177,92,.05), 0 0 44px rgba(255,138,31,.6); } }
.wakeSub { margin-top: 16px; color: var(--dim); font-size: 13px; letter-spacing: 1px; }

/* ---------- timer, mute banner ---------- */
#timerPill { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 34; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; background: var(--bg2); border: 1px solid var(--amber); color: var(--amber); box-shadow: 0 0 18px rgba(255,177,92,.3); }
#muteBanner { position: fixed; left: 50%; top: 66px; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 14px; width: min(92vw, 620px); border: 2px solid #fff; border-radius: 18px; padding: 14px 20px; background: #e8455f; color: #fff; font-size: 17px; font-weight: 700; text-align: left; box-shadow: 0 10px 34px rgba(0,0,0,.45); animation: mbPulse 1.6s ease-in-out infinite; touch-action: manipulation; }
#muteBanner .mbIco { font-size: 34px; line-height: 1; }
#muteBanner b { display: block; font-size: 22px; font-weight: 800; letter-spacing: 3px; }
@keyframes mbPulse { 50% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 10px rgba(232,69,95,.35); } }

/* ---------- panels (modal) ---------- */
#modal { position: fixed; inset: 0; z-index: 40; background: rgba(3,8,15,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .15s ease-out; }
#modalCard { --pq-accent: #ffb15c; --pq-accent-ink: #1a1206; --pq-card: rgba(255,255,255,.04); --pq-line: rgba(127,211,255,.2); --pq-ok: #4ade80; --pq-miss: #ffb86b;
  position: relative; width: min(100%, 760px); max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 20px; border-radius: 22px;
  background: linear-gradient(180deg, #13243b, #0c1727); border: 1px solid var(--line2); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,177,92,.05) inset; font-size: 16px; line-height: 1.45; }
#modalCard::before { content: ""; position: sticky; display: block; top: -18px; height: 2px; margin: -18px -20px 16px; background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--cyan) 70%, transparent); opacity: .7; z-index: 1; }
#modalCard h2 { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: .3px; }
#modalCard h3 { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }
#modalCard h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); font-size: 12px; opacity: 1; }
#modalCard p { margin: 8px 0; }
#modalCard ul { padding-left: 20px; } #modalCard li::marker { color: var(--amber); }
#modalCard .x { flex: none; border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 50%; width: 40px; height: 40px; font-size: 16px; color: var(--ink); padding: 0; }
#modalCard .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
#modalCard .row .lab { flex: 1; min-width: 180px; }
#modalCard .row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
#modalCard button:not(.x) { border: 0; border-radius: 12px; padding: 10px 14px; min-height: 42px; background: linear-gradient(135deg, #ffbf6b, var(--amber2)); color: #1a1206; font-weight: 700; font-size: 15px; }
#modalCard button.l { background: rgba(255,255,255,.06); color: var(--ink); border: 1px solid var(--line2); font-weight: 600; }
#modalCard button:disabled { opacity: .55; }
#modalCard button.ok { background: var(--ok); color: #06240f; }
#modalCard button.nn { background: #7d78a6; color: #fff; }
#modalCard .big { display: block; width: 100%; margin-top: 14px; padding: 14px; font-size: 17px; }
#modalCard a { color: var(--cyan); }
#modalCard input, #modalCard select, #modalCard textarea { font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 11px; min-height: 42px; color-scheme: dark; }
#modalCard input:focus, #modalCard select:focus, #modalCard textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,177,92,.18); }
#modalCard input[type=checkbox] { min-height: 0; accent-color: var(--amber); width: 18px; height: 18px; vertical-align: middle; }
#modalCard textarea { width: 100%; margin: 4px 0 10px; }
#modalCard label { display: block; font-size: 13px; color: var(--dim); margin-top: 10px; }
#modalCard .row label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); }
#modalCard audio { width: 100%; margin: 6px 0; }
.muted { color: var(--dim); font-size: 13px; }
.note { position: relative; background: rgba(127,211,255,.06); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber2), var(--amber)); box-shadow: 0 0 8px rgba(255,177,92,.6); }
.score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
.score div { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 14px; padding: 10px 4px; font-size: 12px; color: var(--dim); letter-spacing: .5px; text-transform: uppercase; }
.score b { display: block; font-size: 22px; font-weight: 600; color: var(--amber); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
#modalCard .ideas button.l { border-radius: 999px; }
#modalCard .ideas button:not(.l) { border-radius: 999px; }
.script { white-space: pre-wrap; line-height: 1.6; font-size: 16px; margin-top: 12px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); max-height: 52vh; overflow-y: auto; }
.calm { text-align: center; }
.ball { width: 90px; height: 90px; border-radius: 50%; margin: 34px auto; background: radial-gradient(circle, #ffe0b0, var(--amber2)); box-shadow: 0 0 40px rgba(255,138,31,.5); transition: transform 4s ease-in-out; }
.ball.big { transform: scale(1.9); }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; margin: 12px 0; }
#modalCard .keypad button { height: 62px; font-size: 22px !important; background: rgba(255,255,255,.06); color: var(--ink); border: 1px solid var(--line2); }
#modalCard .keypad button[data-n="ok"] { background: linear-gradient(135deg, #ffbf6b, var(--amber2)); color: #1a1206; }
.dots { text-align: center; font-size: 30px; min-height: 38px; letter-spacing: 8px; color: var(--amber); }

/* ---------- layouts ---------- */
@media (orientation: landscape) and (min-width: 900px) {
  #feat { grid-template-columns: repeat(8, 1fr); max-width: 1180px; }
  .ft { min-height: 92px; padding: 10px 12px; }
  .ft small { display: none; }
  #bot { width: min(40vw, 36vh, 360px); }
}
@media (max-width: 600px) {
  #top { padding: 10px 12px 4px; }
  #robotName { font-size: 14px; letter-spacing: 4px; }
  #clock { font-size: 13px; padding-left: 8px; }
  #btnMomChk b { display: none; }
  #btnMomChk { padding: 0 10px !important; }
  #topBtns { gap: 6px; }
  #stage { padding: 0 12px; }
  #bot { width: min(58vw, 30vh); }
  #caption { font-size: 18px; min-height: 2.6em; }
  #dock { padding: 6px 10px 10px; gap: 8px; }
  #feat { gap: 8px; }
  .ft { min-height: 74px; padding: 9px 6px 8px; align-items: center; text-align: center; border-radius: 14px; }
  .ft .ic { width: 24px; height: 24px; margin: 2px auto auto; }
  .ft b { font-size: 12px; margin-top: 6px; line-height: 1.15; }
  .ft small, .ft::after { display: none; }
  .ut { height: 40px; padding: 0 12px; font-size: 13px; gap: 6px; }
  #utility { gap: 8px; flex-wrap: wrap; }
  #nowCard { padding: 8px 8px 8px 14px; }
  #nowCard .lab { font-size: 15px; }
  #modal { padding: 8px; }
  #modalCard { padding: 14px 14px 18px; max-height: 94vh; }
  #modalCard::before { top: -14px; margin: -14px -14px 14px; }
  .score { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  #modalCard .row .lab { min-width: 100%; }
}
@media (max-height: 700px) { #bot { width: min(50vw, 26vh); } #caption { min-height: 2.4em; } }
/* 1900-fill: podcast tap-to-fill chips inside the Jarvis theme */
#modalCard .pqCard .pqChips button { background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--line2); border-radius: 999px; font-weight: 600; }
#modalCard .pqCard .pqChips button.on { background: linear-gradient(135deg, #ffbf6b, var(--amber2)); color: #1a1206; border-color: transparent; }
#modalCard .pqCard button.pqSkip { background: transparent; color: var(--dim); min-height: 0; font-weight: 500; }

/* 2000-brief: drill briefings + Drill Library */
#modalCard .brNote { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: rgba(127,211,255,.07); border: 1px solid rgba(127,211,255,.25); font-size: 15px; line-height: 1.45; }
#modalCard .brNote button.brReplay { width: auto; display: inline-block; margin: 0 0 0 6px; padding: 6px 12px; min-height: 0; font-size: 14px; }
#modalCard .drillGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 6px; }
#modalCard button.drillTile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; width: 100%; margin: 0; padding: 12px; min-height: 86px; border-radius: 14px; background: linear-gradient(160deg, rgba(127,211,255,.10), rgba(255,177,92,.05)); border: 1px solid rgba(127,211,255,.28); color: inherit; font-weight: 600; }
#modalCard button.drillTile b { font-size: 16px; color: var(--cyan, #7fd3ff); letter-spacing: .3px; }
#modalCard button.drillTile span { font-size: 12.5px; opacity: .75; font-weight: 500; }
#modalCard button.drillTile i { font-style: normal; font-size: 12px; margin-top: auto; opacity: .85; }
#modalCard button.drillTile.heard { border-color: rgba(61,220,151,.45); }
#modalCard button.drillTile.heard i { color: #3ddc97; }
#modalCard .brSub { margin: 2px 0 8px; font-size: 14px; opacity: .78; }
#modalCard .brWait { margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,177,92,.10); border: 1px dashed rgba(255,177,92,.45); font-size: 15px; }
#modalCard .brWait button { width: auto; display: inline-block; margin: 0 0 0 6px; padding: 6px 12px; min-height: 0; }
#modalCard .brBar { position: sticky; bottom: -1px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 0 4px; margin-top: 10px; background: linear-gradient(180deg, transparent, var(--bg1, #0c1626) 30%); }
#modalCard .brBar .muted { text-align: center; font-size: 13px; }
#modalCard button.brGo { font-size: 19px; letter-spacing: .5px; }
#modalCard button.brAlt { width: 100%; margin-top: 10px; }
#modalCard .brSkip { display: flex; gap: 14px; align-items: center; margin: 10px 0 14px; padding: 14px; border-radius: 14px; background: rgba(61,220,151,.08); border: 1px solid rgba(61,220,151,.35); }
#modalCard .brSkip p { margin: 0; line-height: 1.5; }
#modalCard .brTick { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #3ddc97; border: 2px solid #3ddc97; box-shadow: 0 0 14px rgba(61,220,151,.35); }
@media (max-width: 600px) { #modalCard .drillGrid { grid-template-columns: repeat(2, 1fr); gap: 8px; } #modalCard button.drillTile { min-height: 78px; padding: 10px; } }

/* 2210-pods: nothing ever sits on top of panel text.
   While any panel is open the main-screen tiles/dock and floating cards are hidden (iPad Safari can paint composited tiles over a fixed panel),
   the panel fits the real visible height (dvh, minus the Safari toolbar / home bar), and the briefing's sticky Start bar slides away while
   he scrolls down and comes back on scroll up or at the end. */
body.modalOpen #dock, body.modalOpen #caption, body.modalOpen #nowCard, body.modalOpen #heard { visibility: hidden !important; pointer-events: none; }
body:has(#modal:not([hidden])) #dock, body:has(#modal:not([hidden])) #caption, body:has(#modal:not([hidden])) #nowCard, body:has(#modal:not([hidden])) #heard { visibility: hidden; pointer-events: none; }
#modal { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
@supports (height: 100dvh) { #modalCard { max-height: min(90vh, calc(100dvh - 32px - env(safe-area-inset-bottom))); } }
#modalCard { padding-bottom: calc(24px + env(safe-area-inset-bottom)); scroll-padding-bottom: 96px; }
#modalCard .brBar { transition: transform .25s ease, opacity .25s ease; z-index: 2; }
#modalCard .brBar.brAway { transform: translateY(130%); opacity: 0; pointer-events: none; }
#modalCard .row.upNext { border: 1px solid rgba(255,177,92,.45); background: rgba(255,177,92,.08); }
@media (max-width: 600px) { @supports (height: 100dvh) { #modalCard { max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); } } }

/* 0800-caption: Jarvis's live caption lives in a bounded box between the core and the Up Next card. It never runs behind the card or the
   tiles: the stage clips, the caption shrinks/scrolls first, newest words stay in view (auto-follow, teleprompter style) with a soft fade at
   the top, he can scroll back by hand, and the core shrinks while a long reply is on screen. Panels use dvh + safe-area padding, and the
   briefing Start bar is back in normal flow so no text can sit behind it. */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
#stage { overflow: hidden; justify-content: center; }
#coreWrap { flex: 0 0 auto; transition: transform .35s ease; }
#bot { transition: width .35s ease; }
#caption { flex: 0 1 auto; min-height: 2.7em; max-height: 9.6em; width: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0 6px; box-sizing: border-box; scrollbar-width: none; }
#caption::-webkit-scrollbar { display: none; }
#caption.capScrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em); mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em); }
#caption.capPaused { box-shadow: inset 0 -2px 0 rgba(127,211,255,.35); }
#heard { flex: 0 0 auto; max-width: 680px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hint { flex: 0 0 auto; }
#nowCard { flex: 0 0 auto; }
#dock { flex: 0 0 auto; position: relative; z-index: 3; }
body.capLong #bot { width: min(44vw, 24vh, 300px); }
@media (max-width: 600px) { #caption { max-height: 7.8em; } body.capLong #bot { width: min(40vw, 18vh); } }
@media (max-height: 700px) { #caption { max-height: 6.8em; } body.capLong #bot { width: min(36vw, 18vh); } }
@media (min-width: 900px) and (max-height: 900px) { #caption { max-height: 7.2em; } body.capLong #bot { width: min(30vw, 24vh, 260px); } }
#modalCard .brBar { position: static; background: none; }
#modalCard .brBar.brAway { transform: none; opacity: 1; pointer-events: auto; }
.sheetCard { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
@supports (height: 100dvh) { .sheetCard { max-height: calc(92dvh - env(safe-area-inset-top)); } }