/* ============ Base & Layout ============ */
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background:#0b0f16; color:#e9eef7;
}
.device-frame {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px;
}
.mobile-container {
  width: 420px; max-width: 96vw; height: 820px; max-height: 96vh;
  background:#0f1520; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}

/* Header */
.app-header {
  display:flex; align-items:center; justify-content:center; position:relative;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06);
}
.logo-left { position:absolute; left:16px; height:28px; }
.header-title { margin:0; font-size:18px; font-weight:800; letter-spacing:.3px; }
.header-timer { position:absolute; right:16px; background:#0a1929; padding:6px 10px; border-radius:10px; font-weight:700; }

/* Screens */
.screen { flex:1; overflow:auto; padding:16px 16px 90px; }
.screen-title { margin:12px 0 2px; font-weight:800; font-size:18px; }
.screen-sub { margin:0 0 12px; opacity:.75; }

/* Cards / panels */
.card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  backdrop-filter: blur(8px);
}
.panel { margin-top:8px; }
.panel-body { padding:12px; }
.input-card { padding:10px; }
.text-input {
  width:100%; padding:12px 14px; font-size:16px;
  border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#0d1522; color:#fff;
}

/* Buttons */
.primary-btn, .secondary-btn, .pill-btn {
  border:0; border-radius:28px; padding:12px 18px; font-weight:700; cursor:pointer;
}
.primary-btn { background:#1d8f5a; color:#fff; }
.primary-btn:disabled { opacity:.4; cursor:not-allowed; }
.secondary-btn { background:#1b2a3a; color:#d7e4f5; }
.pill-btn { background:#1b2a3a; color:#fff; margin:6px 8px 0 0; }
.pill-btn.yes { background:#1d8f5a; }
.pill-btn.no  { background:#b43a3a; }
.pill-btn.primary { background:#1d8f5a; }

/* CTAs at bottom (default center) */
.cta-dock {
  position:absolute; left:0; right:0; bottom:16px;
  display:flex; justify-content:center; gap:12px;
}
.cta-row.top {
  position:absolute; left:0; right:0; top:8px;
  display:flex; justify-content:space-between; padding:0 16px; gap:8px;
}

/* Language grid */
.lang-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;
}
.lang-card {
  padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  cursor:pointer; transition:.15s transform ease;
}
.lang-card:hover { transform: translateY(-2px); }
.lang-card .native { font-weight:800; font-size:16px; }
.lang-card .english { font-size:12px; opacity:.7; margin-top:2px; }
.lang-card.selected { outline:2px solid #1d8f5a; }

/* Checklist */
.checklist { margin:10px 0 0 18px; }
.checklist li { margin:6px 0; }

/* Step pill */
.step-pill {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#112237; border:1px solid rgba(255,255,255,.07); font-size:12px; font-weight:700;
}

/* ============ Screen 3: Camera & Mic Test ============ */
.video-test { padding:12px; display:flex; flex-direction:column; gap:10px; }
#s3 .video-test video{
  width:100%;
  height:40vh;           /* smaller to avoid scroll */
  max-height:40vh;
  background:#000; object-fit:cover; border-radius:12px;
}
.device-status {
  display:flex; gap:10px; flex-wrap:wrap;
}
.status-badge {
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:#2a3545; color:#dde9f8;
}
.status-badge.ok { background:#1d8f5a; color:#fff; }
.status-badge.warn{ background:#6a4d1b; color:#ffebb0; }

.mic-meter { width:100%; height:8px; background:#1a2332; border-radius:6px; overflow:hidden; }
.mic-bar { height:100%; width:2%; background:#22c55e; transition:width .08s linear; }

.mic-hint {
  font-size:12px; opacity:.8; line-height:1.4; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06); padding:8px 10px; border-radius:10px;
}

/* Error */
.ephemeral {
  margin-top:6px; color:#ffb4b4; font-size:13px;
}

/* --- Step 3 bottom buttons override (Retry left, Proceed right) --- */
#s3 .cta-dock {
  position:absolute; left:0; right:0; bottom:16px;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:0 16px;
  z-index: 5;
}
#s3 .cta-dock .secondary-btn { margin-left:4px; }  /* bottom-left */
#s3 .cta-dock .primary-btn   { margin-right:4px; } /* bottom-right */

/* ============ Recording Screen ============ */
.video-area { position:relative; height:100%; }
.video-frame { position:relative; height:100%; }
#livePreview {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
}

/* ✅ Face guide circle (ensure it sits over video) */
.face-guide{
  position:absolute;
  width:60%; aspect-ratio:1/1;
  left:50%; top:53%; transform:translate(-50%,-50%);
  border:3px solid rgba(255,255,255,.35);
  border-radius:999px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.18) inset;
  pointer-events:none;
  z-index: 2;              /* <-- added to ensure visibility */
}

/* Overlay card (question/summary/actions) */
.overlay-card{
  position:absolute; left:50%; bottom:10%; top:auto; transform:translate(-50%,0);
width:min(94%, 360px);
  background:rgba(15,20,30,.42);
  border:1px solid rgba(255,255,255,.08);
  padding:14px 14px 10px; border-radius:16px; color:#edf3ff;
  backdrop-filter: blur(8px);
  z-index: 3;              /* stays above face-guide */
}
.overlay-card.summary{ background:rgba(15,20,30,.32); top:10%; bottom:auto; }

/* Text centered horizontally, at top vertically */
.overlay-text{
  white-space:pre-wrap; line-height:1.35; font-size:14px;
  text-align:center;
}
.overlay-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; justify-content:center; }

/* Interstitial centered (tick / uploading text) */
.interstitial{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:10px; z-index:4;
}
.green-ring{
  width:72px; height:72px; border-radius:999px;
  border:6px solid rgba(34,197,94,.35);
  box-shadow:0 0 16px rgba(34,197,94,.25) inset;
  animation: ringPulse 1s ease-in-out infinite alternate;
}
.tick{
  position:absolute; font-size:36px; font-weight:800; color:#22c55e;
}
.cross{
  position:absolute; font-size:36px; font-weight:800; color:#e84b4b;
}
.uploading-text{ margin-top:86px; font-size:13px; opacity:.95; text-align:center; }

/* ===== Final screen centered (ONLY final) ===== */
#final.screen{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 16px 90px;
}
#final .final-pane {
  margin:0;
  width:min(92%, 360px);
  text-align:center;
  padding:18px;
  background:#d52b1e;
  color:#ffffff;
  border-radius:16px;
}
#final .tick { display:inline-block; font-size:46px; color:#22c55e; position:static; }
#final .cross{ display:inline-block; font-size:46px; color:#e84b4b; position:static; }
#final .done-msg { margin-top:10px; }
#final .final-pane .done-msg { color:#ffffff; }

/* Footer home button */
#homeBtnDock{ position:absolute; left:50%; transform:translateX(-50%); bottom:16px; }

/* Little animation */
@keyframes ringPulse {
  0% { transform: scale(0.96); }
  100% { transform: scale(1.04); }
}

/* Scrollbar minimal */
.screen::-webkit-scrollbar{ width:8px; }
.screen::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:8px; }