/* ==========================================================================
   BuildMog: build progress bar, Live view layouts, pointer overlay (docs/12).
   Reads only src/tokens.css variables. Loaded after app.css.
   ========================================================================== */

/* ---------- progress bar (replaces the step dots) ---------- */
.progress { display: grid; gap: 2px; flex: none; }
.progress-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 500 12px/1.3 var(--font-mono); color: var(--text-2); flex-wrap: wrap; }
.progress-line b { font-weight: 700; color: var(--text); }
.progress-line .back-to { border: 0; background: var(--accent-soft); color: var(--text); font: 600 12px/1 var(--font-ui); min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; }
/* a 44 px band for thumbs; the drawn bar is 8 px in the middle of it */
.segbar { position: relative; display: flex; gap: 3px; height: 44px; align-items: center; touch-action: none; }
.segment { position: relative; display: block; height: 44px; min-width: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.segment::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 4px; background: var(--meter-track); transition: background var(--dur-fast), top var(--dur-fast), height var(--dur-fast); }
.segment.todo::before { top: 20px; height: 4px; }
.segment.done::before { background: var(--accent); }
.segment.verified::before { background: var(--live); }
.segment.current::before { background: var(--surface-solid); box-shadow: inset 0 0 0 2px var(--accent); }
.segment.current.behind::before { background: color-mix(in srgb, var(--accent) 45%, var(--surface-solid)); }
.segment.current.ahead::before { background: var(--surface-solid); box-shadow: inset 0 0 0 2px var(--text-3); }
.segment .tick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 9px/1 var(--font-ui); color: #fff; pointer-events: none; }
.segment.current .tick { color: var(--live); }
.segment.hover::before { top: 12px; height: 20px; filter: brightness(1.05); }
.segment:hover::before { filter: brightness(1.08); }
.segment:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; border-radius: 8px; }
.seg-tip { position: absolute; bottom: 42px; transform: translateX(-50%); max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 12px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 13px/1.2 var(--font-ui); box-shadow: var(--shadow-2); pointer-events: none; z-index: 5; }
/* above twenty steps the bar reads as one line with ticks; taps are matched to the nearest step */
.segbar.many { gap: 1px; }
.segbar.many .segment { min-width: 2px; }
.segbar.many .segment::before { border-radius: 2px; }
.progress.compact .segbar { height: 24px; }
.progress.compact .segment { height: 24px; }
.progress.compact .segment::before { top: 9px; height: 6px; }
.titlepill .pct { color: var(--text); font-weight: 700; }
.hud-title .eyebrow { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the co-pilot's face: Mog and Meg (src/app/avatar.js, docs/13) ---------- */
.avatar { display: block; overflow: visible; flex: none; }
/* the illustrated clip (avatar.js CLIPS): the transparent WebP inside the same round frame, on the surface colour */
.avatar.avatar-clip { display: inline-block; overflow: hidden; border-radius: 50%; background: var(--surface-solid); }
.avatar.avatar-clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar .head { transform-origin: 60px 64px; animation: av-breathe 3.4s ease-in-out infinite; }
.avatar .eye { animation: av-blink 4.8s ease-in-out infinite; }
.avatar .who-meg .eye { animation-delay: 1.3s; }
.avatar .eye.closed { display: none; }
.avatar .mouth { transition: transform 120ms; }
.avatar.mood-talking .mouth { animation: av-talk 150ms ease-in-out infinite alternate; }
.avatar.mood-happy .head { animation: av-bounce 640ms ease-in-out infinite; }
.avatar.mood-concerned .head { animation: av-shake 1.2s ease-in-out 2; }
.avatar.mood-thinking .head { animation: av-tilt 2.6s ease-in-out infinite; }
.avatar.mood-sleeping .head { animation: av-doze 4.2s ease-in-out infinite; }
.avatar.mood-sleeping .zzz { animation: av-zzz 2.2s ease-in-out infinite; transform-origin: 100px 26px; }
.avatar.mood-pointing .head { animation: av-lean 1.4s ease-in-out infinite alternate; }
@keyframes av-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes av-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes av-talk { from { transform: scaleY(0.5); } to { transform: scaleY(1.05); } }
@keyframes av-bounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes av-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes av-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg) translateY(-1px); } }
@keyframes av-doze { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(6deg) translateY(2px); } }
@keyframes av-zzz { 0% { opacity: 0; transform: translateY(4px) scale(0.8); } 40%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scale(1.1); } }
@keyframes av-lean { from { transform: rotate(0); } to { transform: rotate(5deg) translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .avatar .head, .avatar .eye, .avatar .mouth, .avatar .zzz { animation: none !important; } }
/* a ring lights up while the character speaks */
.avatar-ring { display: inline-grid; place-items: center; border-radius: 50%; padding: 2px; background: var(--surface-solid); box-shadow: 0 0 0 1.5px var(--border); transition: box-shadow var(--dur-fast); flex: none; }
.avatar-ring.speaking { box-shadow: 0 0 0 2.5px var(--accent), 0 0 18px var(--glow); }
/* The face follows the voice (2026-10-22, docs/19 section 7). While the Gemini voice is live the Face (live-ui.js)
   carries .follows-voice and --bm-voice, a level from 0 to 1 written about 12 times a second on this element (never
   through the store). Mog's voice opens the mouth and lights the ring with it; the person's voice (data-heard="you")
   widens a soft ring. Demo mode (the browser's voice) has no level and keeps the 150 ms flap above. */
/* the illustrated clip (avatar.js CLIPS) has no mouth node: the whole face breathes with the level instead; the ring reacts as before */
.avatar-ring.follows-voice .avatar-clip.mood-talking img { transform: scale(calc(1 + var(--bm-voice, 0.5) * 0.08)); transform-origin: 50% 70%; transition: transform 70ms linear; }
.avatar-ring.follows-voice .avatar.mood-talking .mouth { animation: none; transform: scaleY(calc(0.45 + var(--bm-voice, 0.5) * 0.6)); transition: transform var(--dur-fast) var(--ease-out); }
.avatar-ring.follows-voice.speaking { box-shadow: 0 0 0 calc(1.5px + var(--bm-voice, 0.5) * 2px) var(--accent), 0 0 calc(4px + var(--bm-voice, 0.5) * 18px) var(--glow); }
.avatar-ring.follows-voice[data-heard="you"]:not(.speaking) { box-shadow: 0 0 0 1.5px var(--border), 0 0 0 calc(1.5px + var(--bm-voice, 0) * 4px) var(--accent-soft); }
/* reduced motion keeps today's on/off look: the still talking mouth, the ring on while the voice plays */
@media (prefers-reduced-motion: reduce) {
  .avatar-ring.follows-voice .avatar.mood-talking .mouth { transform: none; transition: none; }
  .avatar-ring.follows-voice .avatar-clip.mood-talking img { transform: none; transition: none; }
  .avatar-ring.follows-voice.speaking { box-shadow: 0 0 0 2.5px var(--accent), 0 0 18px var(--glow); }
  .avatar-ring.follows-voice[data-heard="you"]:not(.speaking) { box-shadow: 0 0 0 1.5px var(--border); }
}
.live-cam .avatar-ring { position: absolute; left: 12px; top: calc(100px + env(safe-area-inset-top)); z-index: 3; background: rgba(255,255,255,0.88); }
/* the picker: two faces, one chosen */
.copilot-pick { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.copilot-pick button { display: grid; justify-items: center; gap: 4px; padding: 14px 12px 12px; width: 168px; max-width: 100%; border-radius: 20px; border: 2px solid var(--border); background: var(--surface-solid); color: var(--text); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); }
.copilot-pick button:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.copilot-pick button.on { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.copilot-pick b { font: 400 20px/1.1 var(--font-display); }
.copilot-pick small { color: var(--text-2); font-size: 12px; }
.copilot-pick .hear { font: 600 10.5px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; max-width: 120px; text-align: center; white-space: normal; }
.copilot-pick button.on .hear { color: var(--text); }
.copilot-pick .hear { min-height: 28px; } /* "Chosen · tap to hear" wraps to two lines; the cards stay the same height */
.onboard .art-wide { width: min(92vw, 440px); aspect-ratio: auto; }
.mog-fab .avatar-ring { background: var(--bg); }

/* ---------- the character in the step card's margin (docs/13 section 7) ---------- */
/* Most builds run without Live, so the face stays in the step card: 40 px at the top right of the
   head, reacting on its own. The title keeps clear of it (the head's right padding), a tap opens
   free typed help, and on a warning step a speech pill under it offers Live once. */
.step-card.has-face .head { padding-right: 50px; }
.step-card.has-face .head h2 { overflow-wrap: break-word; }
.margin-face { position: absolute; top: 6px; right: 8px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.margin-face .avatar-ring { transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.margin-face:hover .avatar-ring { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--glow); }
.margin-face:active .avatar-ring { transform: scale(0.94); }
/* the offer: a speech pill under the face, its tail pointing up at it; it folds away when it ends */
.face-pill { display: grid; grid-template-rows: 1fr; flex: none; }
.face-pill > div { display: flex; justify-content: flex-end; min-height: 0; padding-top: 6px; }
.face-pill .bubble { position: relative; display: inline-flex; align-items: center; max-width: 100%; border-radius: 22px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 6px 16px -8px var(--glow); transform-origin: calc(100% - 18px) 0; animation: face-pill-in 320ms var(--ease-spring) both; }
.face-pill .bubble::before { content: ''; position: absolute; right: 13px; top: -6px; width: 10px; height: 10px; background: inherit; border: inherit; border-right: 0; border-bottom: 0; border-radius: 2px 0 0 0; transform: rotate(45deg); pointer-events: none; }
.face-pill .say { min-height: 40px; padding: 6px 2px 6px 14px; border: 0; border-radius: 20px; background: transparent; color: var(--text); font: 600 13.5px/1.25 var(--font-ui); text-align: left; cursor: pointer; }
.face-pill .no { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.face-pill .no:hover { color: var(--text); }
.face-pill.out { animation: face-pill-out 240ms var(--ease-out) both; }
.face-pill.out > div { overflow: hidden; }
@keyframes face-pill-in { from { opacity: 0; transform: translateY(-4px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes face-pill-out { from { grid-template-rows: 1fr; opacity: 1; margin-bottom: 0; } to { grid-template-rows: 0fr; opacity: 0; margin-bottom: -8px; } }
@media (prefers-reduced-motion: reduce) { .face-pill .bubble, .face-pill.out { animation: none; } .margin-face .avatar-ring { transition: none; } }

/* ---------- Mog's face (the mascot art crop, still used by the big picture) ---------- */
.mog-face { display: inline-block; flex: none; border-radius: 50%; background-position: 26% 28%; background-size: 240%; background-repeat: no-repeat; background-color: var(--accent-soft); box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3px var(--border); vertical-align: middle; transition: box-shadow var(--dur-fast); }
.mog-face.speaking { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--accent), 0 0 18px var(--glow); animation: mog-talk 640ms ease-in-out infinite; }
@keyframes mog-talk { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.live-cam .mog-face { position: absolute; left: 12px; top: calc(100px + env(safe-area-inset-top)); z-index: 3; box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 2px 10px rgba(0,0,0,0.35); }
.live-cam .mog-face.speaking { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 5px var(--accent), 0 0 22px var(--glow); }
@media (prefers-reduced-motion: reduce) { .mog-face.speaking { animation: none; } }

/* ---------- glass for anything written over the camera picture ---------- */
.live-cam .off span { display: inline-block; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.26); color: #fff; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
/* the panel's tile is warm when there is no picture: the face, then one plain line */
.copilot .cam .off span { display: inline-block; padding: 5px 8px; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--border); color: var(--text); font-weight: 600; line-height: 1.25; }
/* a phone's 72 px tile holds the face only: the badge and the first line already say the camera is off */
@media (max-width: 899px) { .copilot .cam .off span { display: none; } }
.live-cam .rec, .copilot .cam .rec { background: rgba(20,17,13,0.42); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- pointer on the camera picture ---------- */
.pointer { position: absolute; width: 0; height: 0; z-index: 4; pointer-events: none; }
.pointer .ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 0 3px rgba(255,138,31,0.35), 0 2px 10px rgba(0,0,0,0.35); animation: point-in 500ms var(--ease-spring) both, point-breathe 1.6s ease-in-out 500ms infinite; }
/* a request is a still dashed box: "hold it here"; a spinning ring would read as loading */
.pointer.kind-prompt .ring { left: -60px; top: -44px; width: 120px; height: 88px; border-radius: 16px; border-style: dashed; animation: point-in 500ms var(--ease-spring) both; }
.pointer .pill { position: absolute; left: 28px; top: -14px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface-solid) 72%, transparent); color: var(--text); border: 1px solid rgba(255,255,255,0.5); font: 600 12px/1.2 var(--font-ui); box-shadow: var(--shadow-1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pointer.kind-prompt .pill { left: -60px; top: 50px; }
.pointer.below .pill { top: 26px; left: -10px; }
.pointer.flip .pill { left: auto; right: 28px; }
.pointer.kind-prompt.flip .pill { right: -60px; }
.copilot .cam .pointer .ring { left: -14px; top: -14px; width: 28px; height: 28px; border-width: 2px; }
.copilot .cam .pointer.kind-prompt .ring { left: -30px; top: -22px; width: 60px; height: 44px; border-radius: 8px; }
.copilot .cam .pointer .pill { display: none; }
@keyframes point-in { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes point-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .pointer .ring { animation: none; } }

/* ---------- the safety gate before a repair ---------- */
.safety-gate { place-content: start center; overflow: auto; padding-top: max(24px, 6vh); animation: none; } /* a safety screen is never mid-fade */
.safety-gate .gate-list { width: min(560px, 100%); text-align: left; margin: 6px 0 4px; }
.safety-gate .gate-list li { background: var(--surface-solid); border: 1px solid var(--border); margin-bottom: 6px; }
.safety-gate .gate-list li.on { border-color: var(--live); }
.safety-gate p { max-width: 44ch; }
/* on a phone the gate is the whole screen and its button stays in reach while the list scrolls */
@media (max-width: 899px) {
  .safety-gate { position: fixed; inset: 0; z-index: 20; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: calc(20px + env(safe-area-inset-top)); }
  .safety-gate .row { position: sticky; bottom: 0; width: 100%; margin: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 35%); }
}
/* callouts never float over the gate or the finish line, and never under the Big camera card */
.player:has(.safety-gate) .bm-callouts, .player:has(.done-overlay:not(.recording)) .bm-callouts { visibility: hidden; }
.player.live-camera .bm-callouts { display: none; }

/* ---------- Live layouts ---------- */
/* .player gets live-<layout> while the co-pilot panel is open and the camera has a picture. The
   3D canvas lives in .stage3d; the big camera box is .live-cam; both are absolutely placed inside
   .stage so the HUD stays on top. */
.stage3d { position: absolute; inset: 0; z-index: 1; }
.live-cam { position: absolute; display: none; z-index: 2; background: #0e0c0a; overflow: hidden; }
.live-cam video { width: 100%; height: 100%; object-fit: cover; }
.live-cam.mirrored video, .copilot .cam.mirrored video { transform: scaleX(-1); }
.live-cam .off { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #f7f1e4; font-size: 13px; padding: 16px; max-width: 100%; }
/* the badge sits under the HUD's back button, not behind it */
.live-cam .rec { position: absolute; top: calc(66px + env(safe-area-inset-top)); left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; font: 600 10px var(--font-mono); z-index: 3; }
.live-cam .rec i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d4d; }
.live-cam .rec.clock-off i { background: #9a968e; }
/* RECONNECTING: the socket is being replaced and the person's words are held (docs/19 section 7): amber, not the live dot */
.live-cam .rec.reconnecting, .copilot .cam .rec.reconnecting { border-color: var(--warn); }
.live-cam .rec.reconnecting i, .copilot .cam .rec.reconnecting i { background: var(--warn); }
/* a phone's 72 px tile: the word is 99 px at 10 px (measured 2026-10-22), so it shrinks and drops the dot; the amber border stays */
@media (max-width: 899px) {
  .copilot .cam .rec.reconnecting { left: 3px; padding: 3px 4px; gap: 0; font-size: 8px; letter-spacing: -0.02em; }
  .copilot .cam .rec.reconnecting i { display: none; }
}
/* Steps only: the 56 px circle shows the amber dot alone; the badge's word stays for screen readers, the chat line says it */
.player.live-voice .copilot .cam .rec.reconnecting { font-size: 0; gap: 0; padding: 4px; }
.player.live-voice .copilot .cam .rec.reconnecting i { display: block; }
.live-cam.paused video { opacity: 0.45; }
.layout-btn { gap: 6px; white-space: nowrap; }
.flip-btn { gap: 4px; }

/* half and half: camera and 3D share the stage; side by side when wide, stacked in portrait */
.player.live-split .live-cam { display: block; left: 0; top: 0; bottom: 0; width: 44%; border-right: 1px solid rgba(255,255,255,0.08); }
.player.live-split .stage3d { left: 44%; }
@media (max-width: 899px) and (orientation: portrait) {
  .player.live-split .live-cam { width: auto; right: 0; bottom: auto; height: 46%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .player.live-split .stage3d { left: 0; top: 46%; }
}
/* a phone on its side: the dock is a right-hand column and the stage keeps the full height */
@media (orientation: landscape) and (max-height: 500px) {
  .player { flex-direction: row; }
  .dock { width: 300px; max-height: none; border-top: 0; border-left: 1px solid var(--border); overflow: auto; }
  .player .stage { min-height: 0; }
}
/* big camera: the camera has the stage, the 3D is a small card under the HUD */
.player.live-camera .live-cam { display: block; inset: 0; }
.player.live-camera .stage3d { left: auto; top: calc(74px + env(safe-area-inset-top)); right: 12px; bottom: auto; width: 180px; height: 135px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--border); z-index: 3; background: var(--stage-bg); }
.player.live-camera .side-tools { display: none; }
.player.live-camera .diagram-card { display: none; }
@media (min-width: 900px) { .player.live-camera .stage3d { width: 280px; height: 200px; } }
/* the hologram card in camera mode is tappable: it swaps back to the small camera */
.stage3d-swap { display: none; position: absolute; top: calc(74px + env(safe-area-inset-top)); right: 12px; width: 180px; height: 135px; border: 0; border-radius: 14px; background: transparent; z-index: 4; cursor: pointer; }
.stage3d-swap::after { content: 'Tap for 3D'; position: absolute; left: 10px; bottom: 8px; padding: 3px 7px; border-radius: 999px; background: var(--surface-solid); font: 600 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.player.live-camera .stage3d-swap { display: block; }
@media (min-width: 900px) { .stage3d-swap { width: 280px; height: 200px; } }
/* steps only: the picture shrinks to a live circle so the person can see Mog is still watching */
.player.live-voice .copilot { grid-template-columns: 56px 1fr; }
.player.live-voice .copilot .cam { width: 56px; height: 56px; border-radius: 50%; align-self: start; }
.player.live-voice .copilot .cam .off span { display: none; }
.player.live-voice .copilot .cam .off { padding: 0; }
.player.live-voice .copilot .cam .rec { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); padding: 2px 5px; font-size: 9px; }
.player.live-voice .copilot .cam .pointer { display: none; }
/* in half and half and big camera the panel is a strip: the last line, the chips and the input.
   The layout and flip buttons then sit on the big camera box instead of the hidden tile. */
.player.live-split .copilot .lines, .player.live-camera .copilot .lines, .player.live-voice .copilot .lines { max-height: 48px; }
.player.live-split .copilot .cam, .player.live-camera .copilot .cam { display: none; }
.player.live-split .copilot, .player.live-camera .copilot { grid-template-columns: 1fr; }
.live-cam .cam-tools { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 4; }
.live-cam .cam-tools .btn-icon { background: rgba(20,17,13,0.45); color: #fff; border-color: rgba(255,255,255,0.25); }
/* big camera: under the 3D card, where neither the HUD nor the panel reaches */
.player.live-camera .live-cam .cam-tools { left: auto; right: 12px; bottom: auto; top: calc(221px + env(safe-area-inset-top)); }
@media (min-width: 900px) { .player.live-camera .live-cam .cam-tools { top: calc(286px + env(safe-area-inset-top)); } }
.player.live-voice .copilot .cam .cam-tools { display: none; }
@media (max-width: 899px) {
  /* a phone has no room for chips when half the stage is the camera: one line and the input */
  .player.live-split .copilot .quick, .player.live-camera .copilot .quick { display: none; }
  .player.live-split .copilot .lines, .player.live-camera .copilot .lines { max-height: 38px; }
  .progress-line { font-size: 11.5px; }
}