*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#0b0e13; --bg2:#161c28; --border:#222b3d; --text:#e8ecf3; --muted:#8a94a8;
  --accent:#4f8ef7; --accent2:#7fd1ff; --green:#5fb85f; --red:#f0524b; --violet:#a78bfa;
  --font:'Space Grotesk','Sora',system-ui,sans-serif; --display:'Space Grotesk',sans-serif; --mono:'Space Grotesk','Sora',system-ui,sans-serif;
}
html,body { height:100%; background:#05070b; font-family:var(--font); color:var(--text); overflow:hidden; }
body { position:relative; container-type:inline-size; container-name:stagebox; }

/* ── 16:9 capture stage ──
   Authored at a fixed 1280x720 canvas, then uniformly scaled to fit whatever
   size the embedding iframe actually renders at (mobile included) via a
   container-query-driven transform. This keeps every fixed-px child (avatars,
   captions, the product overlay, etc.) in correct proportion at any size,
   instead of overlapping/clipping like raw vw/vh sizing did on small embeds. */
.stage {
  position:absolute; top:0; left:0; width:1280px; height:720px;
  transform-origin:top left; transform:scale(calc(100cqw / 1280px));
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 90% 70% at 50% 0%, #11162400, #05070b);
}
.meet {
  position:relative; width:100%; height:100%;
  background:linear-gradient(180deg,#0c111b,#0a0d14); display:flex; flex-direction:column;
  overflow:hidden;
}

/* ── top bar ── */
.meet-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; font-size:14px; flex-shrink:0;
  background:rgba(8,11,17,.7); border-bottom:1px solid var(--border);
}
.meet-title { font-family:var(--display); font-weight:600; display:flex; align-items:center; gap:14px; }
.rec { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
  color:var(--red); letter-spacing:1px; }
.rec i { width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.meet-meta { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:12.5px; }
.meet-time { font-family:var(--mono); }

/* ── stage ── */
.meet-stage { position:relative; flex:1; padding:26px; display:flex; }

/* tiles */
.tile { position:relative; border-radius:16px; overflow:hidden; background:#0e1420;
  border:1px solid var(--border); }
/* video+poster show immediately; only the broken-video case falls back to the avatar */
.tile-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.tile-video.failed { display:none; }
.tile-fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #1b2740, #0d1320 70%); }
.tile-video.failed ~ .tile-fallback { display:flex; }

.tile-main { flex:1; }
.tile-main .tile-fallback { background:
  radial-gradient(circle at 50% 38%, #243457, #0d1320 72%); }

.avatar { font-family:var(--display); font-weight:700; color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 30px rgba(255,255,255,.06); }
.avatar-sarah { width:148px; height:148px; font-size:46px;
  background:linear-gradient(140deg,#5b7cff,#9a6bff); }
.avatar-you { width:54px; height:54px; font-size:17px; background:linear-gradient(140deg,#2f9e6f,#3aa3c9); }
.avatar-marcus { width:54px; height:54px; font-size:17px; background:linear-gradient(140deg,#c2683a,#b14a8f); }

/* active speaker glow ring */
.tile-glow { position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 0 0 0 transparent; transition:box-shadow .3s; }
.tile.speaking .tile-glow { box-shadow:inset 0 0 0 2px var(--green), 0 0 40px rgba(95,184,95,.25); }

.tile-name { position:absolute; left:14px; bottom:12px; font-size:13px; font-weight:500;
  background:rgba(8,11,17,.7); backdrop-filter:blur(6px); padding:5px 11px; border-radius:8px;
  display:flex; align-items:center; gap:7px; }
.tile-name.sm { font-size:10.5px; left:8px; bottom:8px; padding:3px 7px; }
.name-dot { width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green); }
.tile-mic { position:absolute; top:8px; right:8px; font-size:12px; opacity:.85; }
.tile-mic.off { filter:grayscale(1) brightness(.6); }

/* speaking waveform */
.waveform { position:absolute; left:50%; bottom:58px; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:4px; height:26px; opacity:0; transition:opacity .3s; }
.tile.speaking .waveform { opacity:1; }
.waveform span { width:4px; background:linear-gradient(180deg,var(--accent2),var(--accent));
  border-radius:2px; height:8px; animation:wave 1s ease-in-out infinite; }
.waveform span:nth-child(2){ animation-delay:.1s } .waveform span:nth-child(3){ animation-delay:.2s }
.waveform span:nth-child(4){ animation-delay:.3s } .waveform span:nth-child(5){ animation-delay:.15s }
.waveform span:nth-child(6){ animation-delay:.25s } .waveform span:nth-child(7){ animation-delay:.05s }
@keyframes wave { 0%,100%{height:7px} 50%{height:24px} }

/* filmstrip */
.filmstrip { position:absolute; top:26px; right:26px; display:flex; flex-direction:column; gap:12px; width:200px; }
.tile-sm { height:118px; }

/* captions / live subtitles — persistent bottom track */
.captions { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:6;
  width:74%; max-width:820px; min-height:54px; background:rgba(5,7,11,.86); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:14px; padding:11px 20px 13px;
  font-size:19px; line-height:1.45; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:baseline;
  opacity:0; transition:opacity .3s; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.captions.show { opacity:1; }
/* CC / live badge — full width line above the text */
.cap-badge { flex-basis:100%; display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--accent2);
  text-transform:uppercase; opacity:.85; margin-bottom:1px; }
.cap-badge i { width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 8px var(--red); animation:blink 1.4s infinite; }
.cap-spk { color:var(--accent2); font-weight:600; font-family:var(--display); font-size:15px; white-space:nowrap; }
.cap-text { color:#fff; font-weight:500; }
.captions.speaking .cap-text::after { content:"▋"; color:var(--accent2); margin-left:1px; animation:caret 1s step-end infinite; }
@keyframes caret { 50%{opacity:0} }

/* ── NATIVELY overlay ── */
.natively {
  position:absolute; top:26px; left:26px; width:340px;
  background:linear-gradient(180deg, rgba(14,17,23,.97), rgba(10,13,20,.97));
  border:1px solid #223; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(127,209,255,.08), 0 0 50px rgba(79,142,247,.15);
  z-index:5;
}
.nat-top { display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid #1b2334; }
.nat-dot { width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite; }
.nat-dot.answering { background:var(--accent2); box-shadow:0 0 8px var(--accent2); }
.nat-dot.transcribing { background:var(--accent2); box-shadow:0 0 8px var(--accent2); animation:pulse .7s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.nat-status { font-size:12px; font-family:var(--mono); color:var(--green); }
.nat-status.answering, .nat-status.transcribing { color:var(--accent2); }
.nat-spacer { flex:1; }
.nat-logo { width:13px; height:13px; border-radius:4px; flex-shrink:0;
  background:conic-gradient(from 140deg, var(--accent2), #fff, var(--green), var(--accent2));
  box-shadow:0 0 10px rgba(127,209,255,.7), inset 0 0 4px rgba(255,255,255,.45);
  animation:natLogoSpin 6s linear infinite; }
@keyframes natLogoSpin { to { transform:rotate(360deg); } }
.nat-pill { font-size:11px; font-family:var(--display); color:var(--muted);
  border:1px solid var(--border); border-radius:20px; padding:2px 9px; }
.nat-brand { font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.02em;
  background:linear-gradient(120deg,#fff,var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.nat-tx { padding:9px 13px; font-family:var(--mono); font-size:11.5px; color:var(--accent2);
  border-bottom:1px solid rgba(255,255,255,.04); min-height:34px; line-height:1.55; }
.nat-ph { color:#46506a; font-style:italic; font-family:var(--font); }
/* live voice-to-text */
.nat-tx .tx-spk { color:var(--muted); font-weight:700; }
.nat-tx .tx-final { color:var(--accent2); }
.nat-tx .tx-interim { color:#566180; }                 /* in-progress word, dimmed */
.nat-tx .tx-cur { color:var(--accent2); animation:caret 1s step-end infinite; }
.nat-tx.question .tx-final { color:#fff; }             /* recognized question pops white */
@keyframes caret { 50%{opacity:0} }

.nat-ans-wrap { padding:10px 13px; }
.nat-ans-label { display:flex; align-items:center; gap:10px; margin-bottom:6px;
  font-size:9px; font-family:var(--display); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.nat-conf { display:flex; align-items:center; gap:3px; }
.nat-conf i { width:11px; height:5px; border-radius:2px; background:#222b3d; transition:background .3s; }
.nat-conf b { font-size:9px; color:var(--muted); margin-left:3px; font-family:var(--mono); font-weight:400; }
.nat-ans { font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--text);
  max-height:150px; overflow:hidden; }
.nat-ans.streaming::after { content:"▋"; color:var(--accent2); animation:caret 1s step-end infinite; }

.nat-ask { display:flex; align-items:center; gap:8px; padding:9px 13px; border-top:1px solid #1b2334; }
.nat-ask-input { flex:1; background:#0c1119; border:1px solid var(--border); border-radius:7px;
  color:var(--text); font-family:var(--font); font-style:italic; font-size:11.5px;
  padding:7px 10px; outline:none; }
.nat-ask-input::placeholder { color:#566180; font-style:italic; }
.nat-ask-btn { font-size:10.5px; font-family:var(--display); font-weight:600; color:#4a5572;
  border:1px solid var(--border); border-radius:7px; padding:7px 12px; }

.nat-actions { display:flex; align-items:center; gap:8px; padding:8px 13px; border-top:1px solid #1b2334; }
.nat-actions-3, .nat-actions-2 { padding-top:0; border-top:none; }
.nat-btn { font-size:10.5px; font-family:var(--display); color:var(--muted);
  border:1px solid var(--border); border-radius:6px; padding:3px 8px; }
.nat-btn-sq { padding:3px 6px; }
.nat-seg { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.nat-seg-btn { font-size:9.5px; font-family:var(--display); color:var(--muted); padding:3px 7px; }
.nat-seg-btn.active { background:var(--accent2); color:#06121c; font-weight:700; }
.nat-hint { font-size:9.5px; color:#3a4460; font-family:var(--mono); }
.nat-opacity-label { font-size:9.5px; color:var(--muted); font-family:var(--display); }
.nat-opacity-track { position:relative; width:60px; height:3px; border-radius:2px; background:#222b3d; }
.nat-opacity-fill { position:absolute; left:0; top:0; bottom:0; width:92%; border-radius:2px; background:var(--accent2); }
.nat-opacity-knob { position:absolute; left:92%; top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%; background:var(--accent2); box-shadow:0 0 6px var(--accent2); }

/* ── controls ── */
.meet-controls { display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px; background:rgba(8,11,17,.8); border-top:1px solid var(--border); flex-shrink:0; }
.ctrl { display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; color:var(--muted); min-width:62px; padding:6px 8px; border-radius:10px;
  font-family:var(--font); }
.ctrl-ic { font-size:18px; }
.ctrl-leave { background:var(--red); color:#fff; font-weight:600; justify-content:center;
  font-family:var(--display); padding:12px 22px; border-radius:24px; min-width:auto; }

/* record-mode countdown */
.rec-countdown {
  position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:160px; color:#fff;
  background:rgba(5,7,11,.55); backdrop-filter:blur(4px);
  text-shadow:0 0 50px rgba(79,142,247,.7);
}
.rec-countdown.tick { animation:countPop .85s ease-out; }
@keyframes countPop { 0%{transform:scale(.6);opacity:0} 25%{transform:scale(1);opacity:1} 100%{transform:scale(1.15);opacity:.15} }

/* replay */
.replay { position:absolute; bottom:14px; right:14px; z-index:20;
  background:rgba(22,28,40,.9); color:var(--muted); border:1px solid var(--border);
  border-radius:8px; padding:7px 13px; font-size:12px; font-family:var(--display); cursor:pointer;
  opacity:0; transition:opacity .25s; }
.stage:hover .replay { opacity:.85; }
.replay:hover { color:#fff; border-color:var(--accent); opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .rec i, .nat-dot, .waveform span, .cap-text::after, .nat-ans.streaming::after { animation:none; }
}