@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   chat.css — OpenTalk random chat
   - Light/dark via CSS vars (theme switch is instant)
   - Top bar carries brand (left) + online count + theme toggle (right)
   - Bottom bar is slim (mode pill) only on the chat page
   - Video tiles have a FIXED aspect ratio + max size — they DO NOT
     stretch to the user's webcam resolution
   - Mobile-first responsive
   ============================================================ */

:root {
  --bg:        #f4f5f8;
  --panel:     #ffffff;
  --panel-2:   #f7f8fb;
  --text:      #0e1116;
  --text-2:    #4b5563;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --primary:   #228891;
  --primary-2: #006c74;
  --primary-fg:#ffffff;
  --accent:      #ff5470;
  --surface-alt: #e8f5f6;
  --danger:    #c0392b;
  --success:   #4CAF50;
  --tile-bg:   #d9dde3;
  --shadow:    0 6px 22px rgba(15,23,42,.08);
  --radius:    14px;
  --topbar-h:  60px;
}
:root[data-theme="dark"] {
  --bg:        #0e1116;
  --panel:     #161b22;
  --panel-2:   #1d242d;
  --text:      #e6e9ef;
  --text-2:    #c9d1d9;
  --muted:     #8b95a3;
  --border:    #232a33;
  --primary:   #4ab3bd;
  --primary-2: #228891;
  --primary-fg:#0e1116;
  --tile-bg:   #1d242d;
  --surface-alt: #0e2226;
  --shadow:    0 6px 22px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Nunito", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ==================== TOP BAR ==================== */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 18px; min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky; top: 0; z-index: 50;
}
.topbar-center {
  display: flex; justify-content: center;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 22px; color: var(--text);
  letter-spacing: -0.01em;
}
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.topbar-right {
  display: flex; align-items: center; gap: 14px;
  justify-self: end;
}
.online {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--primary);
  font-size: 14px; white-space: nowrap;
}
.online .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(76,175,80,.18);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(76,175,80,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(76,175,80,0);   }
  100% { box-shadow: 0 0 0 0   rgba(76,175,80,0);   }
}

/* Theme toggle (circular icon button — sun/moon SVG) */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel-2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle:active { transform: scale(.88); }
.theme-toggle-spinning { transform: rotate(180deg) scale(0.8) !important; }

/* ── Hamburger menu ──────────────────────────────────────────────────────── */
.ham-wrap { position: relative; flex-shrink: 0; }
.ham-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel-2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ham-btn:hover { background: var(--border); }
.ham-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  min-width: 210px;
  z-index: 200;
  overflow: hidden;
  transform-origin: top right;
  animation: hamIn .15s ease;
}
@keyframes hamIn {
  from { opacity: 0; transform: scale(.94) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.ham-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background .1s;
}
.ham-item:hover { background: var(--panel-2); text-decoration: none; }
.ham-sep { height: 1px; background: var(--border); margin: 2px 0; }
.ham-store {
  display: flex; align-items: center; gap: 10px;
  margin: 6px;
  border-radius: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-fg) !important;
  text-decoration: none;
  transition: opacity .15s;
}
.ham-store:hover { opacity: .88; text-decoration: none; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.ham-store strong { display: block; font-size: 13px; font-weight: 800; }
.ham-store span   { display: block; font-size: 11px; opacity: .82; margin-top: 1px; }

/* ── App Feature Hint — contextual, non-ad pattern ────────────────────────
   Looks like a product feature note, NOT an advertisement.
   No stats grid. No marketing copy. No prominent banner.
   Single-row: icon · feature name · "App only" tag · sub · CTA button.
   .cp-compact = tighter padding while chatting (just hides subtitle line).
   ─────────────────────────────────────────────────────────────────────── */
.chat-promo {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  /* very subtle primary tint — matches the product palette, not an ad insert */
  background: color-mix(in srgb, var(--primary) 7%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px 10px 12px;
  margin-bottom: 2px;
  transition: padding .18s;
}
.chat-promo.cp-hidden { display: none; }

/* ── App icon ── */
.cp-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── Text block ── */
.cp-body { flex: 1; min-width: 0; }
.cp-title {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.cp-tag {
  /* "App only" badge — small product label, not a marketing badge */
  background: var(--primary); color: var(--primary-fg);
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 4px;
  text-transform: uppercase; flex-shrink: 0;
}
.cp-sub {
  display: block; font-size: 11px;
  color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Inline CTA — small pill, no "GET IT ON" theatrics ── */
.cp-get {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  background: #01875f; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .01em;
  padding: 6px 11px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(1,135,95,.28);
  transition: background .12s, transform .1s, box-shadow .1s;
  margin-right: 26px; /* leave space for ×  */
}
.cp-get:hover {
  background: #016d4c; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1,135,95,.38);
  text-decoration: none; color: #fff;
}
.cp-get svg { flex-shrink: 0; }

/* ── Close button ── */
.cp-close {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: transparent; border: none;
  color: var(--muted); font-size: 14px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  padding: 0;
}
.cp-close:hover { background: var(--border); color: var(--text); }

/* ── Compact (while chatting) — just hide subtitle ── */
.chat-promo.cp-compact { padding: 6px 14px 6px 12px; }
.chat-promo.cp-compact .cp-sub { display: none; }
.chat-promo.cp-compact .cp-icon { width: 24px; height: 24px; border-radius: 6px; }
.chat-promo.cp-compact .cp-title { font-size: 11.5px; }
.chat-promo.cp-compact .cp-get { font-size: 10px; padding: 4px 9px; }

/* ── Gender icon pills — ♀ pink / ♂ blue circles before "Filter by gender" ── */
.cp-genders {
  display: inline-flex; gap: 3px; align-items: center;
  margin-right: 3px; vertical-align: middle; flex-shrink: 0;
}
.cp-gf, .cp-gm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 900; line-height: 1;
}
.cp-gf { background: #f48fb1; color: #fff; }
.cp-gm { background: #81d4fa; color: #01579b; }
.chat-promo.cp-compact .cp-gf,
.chat-promo.cp-compact .cp-gm { width: 15px; height: 15px; font-size: 9px; }

/* ==================== LANDING (index.html) ==================== */
.hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 56px 18px 40px;
  background:
    radial-gradient(ellipse at top, rgba(34,136,145,.18), transparent 60%),
    var(--bg);
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); max-width: 800px;
}
.hero h1 .accent { color: var(--primary); }
.hero p.lead {
  font-size: clamp(15px, 2vw, 18px); color: var(--text-2);
  max-width: 620px; margin: 0 auto 26px; line-height: 1.55;
  text-align: center;
}
.hero .cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: var(--primary-fg);
  border: none; cursor: pointer;
  font-size: 18px; font-weight: 800;
  padding: 16px 36px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(34,136,145,.45);
  transition: transform .1s, box-shadow .15s;
}
.hero .cta:hover { transform: translateY(-2px); text-decoration: none; }
.hero .cta small { font-size: 12px; opacity: .85; font-weight: 600; }
.hero .cta .ico-svg { display: inline-block; vertical-align: middle; }
.hero .cta-alt {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
.hero .cta-row {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.hero .age-line {
  margin-top: 18px; color: var(--muted); font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero .age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #c0392b; color: #fff; font-size: 11px; font-weight: 800;
}

.hero-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; max-width: 720px; width: 100%; margin: 36px auto 0;
}
.hero-grid .card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: left;
  box-shadow: var(--shadow);
}
.hero-grid .card .ico { font-size: 22px; margin-bottom: 6px; }
.hero-grid .card h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.hero-grid .card p  { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ==================== APP STAGE (random/index.html) ==================== */
/* Two-column stage: video column on the left, chat on the right.
   Video column contains two PORTRAIT (9:16) tiles side-by-side at the top
   (peer left, self right) and an action-row below with Start/Stop + gender
   filter pills. Each tile is sized so both tiles plus the action row
   exactly fit the stage height (no scroll, no wasted space). */
.app {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  max-width: 1480px; width: 100%; margin: 0 auto;
  --stage-h:    calc(100dvh - var(--topbar-h) - 30px);
  --action-h:   90px;                                      /* height of action row below tiles */
  --tile-h:     calc(var(--stage-h) - var(--action-h) - 12px); /* tiles fill remaining height */
  --tile-w:     var(--tile-h);                              /* square 1:1 width */
  min-height: var(--stage-h);
}
@media (min-width: 980px) {
  /* Each tile, the chat column all have the same width (ratio 1:1:1). */
  .app {
    grid-template-columns: 3fr 1fr;
    align-items: stretch;
  }
  body[data-mode="text"] .app,
  .app:has(.video-col[style*="display: none"]) {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }
}
@media (min-width: 1280px) {
  body[data-mode="text"] .app,
  .app:has(.video-col[style*="display: none"]) {
    grid-template-columns: minmax(0, 860px);
  }
}

/* ---- Video column ---- vertical: tiles row on top, action row below. */
.video-col {
  position: relative;
  height: var(--stage-h);
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
}
.video-col .tiles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 0;
  align-items: stretch;
}
@media (min-width: 980px) {
  .video-col .tile.partner,
  .video-col .tile.self {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;              /* square */
    max-height: var(--tile-h);
    justify-self: center;
  }
}

/* ---- Action row (Start/Stop + filter pills) below the tiles ---- */
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--action-h);
  padding: 0 4px;
  flex-wrap: wrap;
}
.action-row .start-btn {
  flex: 1;
  height: 72px;
  padding: 0 20px;
  font-size: 17px;
  min-width: 0;
  justify-content: center;
}
.action-row .filter-row {
  display: flex;
  gap: 8px;
  padding: 0;
  flex: 1;
  flex-wrap: nowrap;
}
.action-row .filter-pill {
  height: 72px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.tile {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--tile-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  min-height: 0; min-width: 0;
}
/* Mobile (<980px): umingle-style — big partner tile with a small self PiP
   overlay in the TOP-RIGHT corner, then chat below.
   Scoped to body:not(.m-on) so these rules cannot bleed into the mobile
   stage — the mobile UI owns <=979px when body.m-on is set. */
@media (max-width: 979px) {
  body:not(.m-on) .video-col {
    display: block;
    height: auto;
    gap: 0;
  }
  body:not(.m-on) .video-col .tile.partner {
    position: relative;
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
  }
  body:not(.m-on) .video-col .tile.self {
    position: absolute;
    top: 10px; right: 10px;
    left: auto; bottom: auto;
    width: clamp(80px, 22vw, 110px);
    height: auto;
    aspect-ratio: 3 / 4;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
    z-index: 4;
  }
  body:not(.m-on) .video-col .tile.self .tile-tag,
  body:not(.m-on) .video-col .tile.self .tile-status,
  body:not(.m-on) .video-col .tile.self .tile-volume,
  body:not(.m-on) .video-col .tile.self .tile-flag,
  body:not(.m-on) .video-col .tile.self .tile-brand,
  body:not(.m-on) .video-col .tile.self .tile-controls,
  body:not(.m-on) .video-col .tile.self .device-menu { display: none !important; }
}
.video-col[data-vlayout="pip"] { display: block; }
.video-col[data-vlayout="pip"] .tile.self {
  position: absolute;
  right: 14px; bottom: 14px;
  width: clamp(120px, 22%, 220px);
  height: auto;
  aspect-ratio: 4 / 3;
  z-index: 4;
  border: 2px solid var(--panel);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border-radius: 12px;
}
.tile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* Tile is sized to stream aspect (—partner-ar), so cover fills with no crop. */
  background: var(--tile-bg);   /* Matches spinner/placeholder tile color — no harsh black flash on load. */
}
.tile.self video { transform: scaleX(-1); }
.tile.self.no-mirror video { transform: none; }
/* Stranger video mirrored for natural selfie feel. */
.tile.partner video { transform: scaleX(-1); }
.tile.partner.no-mirror video { transform: none; }

/* ── Face-gate: partner video is hidden until first face is detected ──────── */
/* CSS blur applied while face detection runs (~100-200 ms after connect).
   Smooth unblur via transition once face confirmed. Prevents NSFW content
   from being visible in the brief pre-detection window. */
.tile.partner video,
#mPartner video {
  filter: blur(0px);
  transition: filter 0.5s ease;
}
.tile.partner video.face-checking,
#mPartner video.face-checking {
  filter: blur(22px);
}
/* POST-CONFIRM blur overlay (face disappeared after first confirm). */
.face-blur-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  font-size: 14px; font-weight: 600;
  text-align: center;
  z-index: 5;
  pointer-events: auto;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.face-blur-overlay.visible { opacity: 1; }
.face-blur-overlay .fbo-icon { font-size: 28px; line-height: 1; }
.face-blur-overlay .fbo-msg  { font-size: 13px; opacity: 0.9; padding: 0 16px; }
.face-blur-overlay .fbo-bypass-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.face-blur-overlay .fbo-bypass-label:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); }
.face-blur-overlay .fbo-bypass-chk {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent;
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.face-blur-overlay .fbo-bypass-chk:checked {
  background: #228891;
  border-color: #228891;
}
.face-blur-overlay .fbo-bypass-chk:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.face-blur-overlay .fbo-bypass-note {
  opacity: 0.6;
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
}

.tile .tile-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  pointer-events: none; z-index: 2;
}
/* Omegle-style watermark on the partner tile: "OpenTalk" big + ".club" small,
   bottom-left, white text with a black stroke outline (like the screenshot). */
.tile .tile-brand {
  position: absolute; left: 18px; bottom: 16px;
  color: #fff;
  font-size: 0; /* hide the literal text node, glyphs come via ::before / ::after */
  pointer-events: none; z-index: 2;
  line-height: 1;
}
.tile .tile-brand::before {
  content: "OpenTalk";
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.5);
  font-family: inherit;
}
.tile .tile-brand::after {
  content: ".club";
  font-size: 18px; font-weight: 500;
  margin-left: 1px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
@media (max-width: 640px) {
  .tile .tile-brand { left: 12px; bottom: 12px; }
  .tile .tile-brand::before,
  .tile .tile-brand::after { font-size: 14px; }
}
/* Report flag: bottom-right, big plain grey flag, no pill background */
.tile .tile-flag {
  position: absolute; right: 14px; bottom: 12px;
  width: 52px; height: 52px;
  background: transparent; border: none; cursor: pointer; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(220,220,220,.85);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition: color .15s, transform .1s;
  padding: 0;
}
.tile .tile-flag:hover { color: #fff; transform: scale(1.08); }
.tile .tile-flag svg { display: block; width: 30px; height: 30px; }
@media (max-width: 640px) {
  .tile .tile-flag { width: 44px; height: 44px; right: 10px; bottom: 10px; }
  .tile .tile-flag svg { width: 26px; height: 26px; }
}
/* Volume slider on the partner tile (top centre, on hover) */
.tile .tile-volume {
  position: absolute; left: 50%; top: 12px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; z-index: 6;
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
.tile:hover .tile-volume,
.tile:focus-within .tile-volume,
.tile .tile-volume:hover { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .tile .tile-volume { opacity: 1; pointer-events: auto; }
}
.tile .tile-volume input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 4px; background: rgba(255,255,255,.35);
  border-radius: 999px; outline: none; cursor: pointer; margin: 0;
}
.tile .tile-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
}
.tile .tile-volume input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
}
.tile.placeholder { color: var(--muted); font-size: 14px; }
/* Brand stays visible on placeholder; only flag + volume slider hide. */
.tile.placeholder .tile-flag,
.tile.placeholder .tile-volume { display: none; }
/* Force [hidden] to win over inline-flex on input-row buttons. */
.input-row [hidden] { display: none !important; }
/* Fade tile-status out smoothly when a real partner video is attached.
   opacity+visibility lets the video show through during the 0.3 s fade
   instead of snapping to display:none and leaving a blank tile. */
.tile:not(.placeholder) .tile-status { opacity: 0; visibility: hidden; }
.tile .tile-status {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; pointer-events: none;
  color: var(--muted); font-size: 14px; text-align: center; padding: 12px;
  transition: opacity 0.3s ease, visibility 0.3s;
}
/* Play Store CTA shown in the idle partner tile, below the status text */
.tile-status-cta {
  pointer-events: auto;
}
/* Hide Play Store badge when searching/connecting (spinner is shown) */
.tile-spinner:not([hidden]) ~ .tile-status-cta { display: none; }

/* Google Play badge — shared by tile CTA and gender panel */
.gplay-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 8px 16px;
  text-decoration: none !important;
  transition: opacity .15s;
  cursor: pointer;
}
.gplay-badge:hover { opacity: .82; }
.gplay-ic { flex-shrink: 0; display: block; }
.gplay-text { display: flex; flex-direction: column; gap: 0; }
.gplay-getit { font-size: 10px; font-weight: 400; letter-spacing: .06em; line-height: 1.2; color: #fff; }
.gplay-store { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; color: #fff; }
.tile-spinner {
  width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(
    rgba(255,255,255,0)  0deg,
    rgba(255,255,255,.9) 270deg,
    rgba(255,255,255,0)  270deg
  );
  /* Soft inner edge: tail appears as hairline, head reveals full 12 px stroke */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), black 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 12px), black 100%);
  animation: tileSpin 1.1s linear infinite;
}
@keyframes tileSpin { to { transform: rotate(360deg); } }

/* ── Blurred partner preview shown during LiveKit ICE handshake ─────────────
   Injected as <img class="partner-preview"> behind the tile-status overlay
   (z-index:0) so the spinner stays visible on top (tile-status z-index:1).
   Scale(1.15) hides the blur fringe at tile edges.                           */
.partner-preview {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Natural upscale blur: 160×90 JPEG stretched to full tile — no extra filter needed.
     Mirror matches how partner video is displayed (.tile.partner video scaleX(-1)). */
  filter: brightness(0.7) saturate(0.7);
  transform: scaleX(-1);
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}
.partner-preview.partner-preview-fade { opacity: 0; }
/* Single consistent spinner speed throughout searching → connecting → video visible */

/* ---- Chat column ---- */
.chat-col {
  display: flex; flex-direction: column;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  height: var(--stage-h);
  min-height: 0;
}
.chat-msgs {
  flex: 1; overflow-y: auto;
  padding: 50px 18px 8px; /* extra top so first-msg action bar isn't clipped */
  display: flex; flex-direction: column; gap: 8px;
}
.video-age-note {
  align-self: center;
  width: 100%;
  max-width: 520px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.welcome { padding: 4px 2px 12px; }
.welcome h2 {
  font-size: 22px; margin: 0 0 14px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
}
.welcome .age-line {
  color: var(--primary); font-weight: 800; margin: 6px 0 8px;
  display: flex; align-items: center; gap: 8px; font-size: 16px;
}
.welcome .age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #c0392b; color: #fff; font-size: 11px; font-weight: 800;
}
.welcome ul { margin: 0; padding-left: 0; list-style: none; color: var(--text-2); }
.welcome ul li { padding: 3px 0; font-size: 15px; }

.msg {
  max-width: 78%; padding: 8px 12px; border-radius: 14px;
  font-size: 14px; line-height: 1.4; word-wrap: break-word;
}
.msg.me   { align-self: flex-end;  background: var(--primary); color: var(--primary-fg); border-bottom-right-radius: 4px; }
.msg.them { align-self: flex-start; background: var(--panel-2); color: var(--text); border-bottom-left-radius: 4px; }
.msg.sys  { align-self: center; background: transparent; color: var(--muted); font-size: 12px; font-style: italic; }

/* ---- Input row: only input + send button. ---- */
.input-row {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  align-items: center;
}
.start-btn {
  flex: 0 0 auto;
  background: var(--primary); color: var(--primary-fg);
  border: none; border-radius: 14px;
  padding: 24px 36px;
  min-width: 130px;            /* prevent width jump between Skip and Really? */
  font-size: 18px; font-weight: 800;
  cursor: pointer;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(34,136,145,.35);
  transition: transform .08s, box-shadow .12s, opacity .12s, background-color .12s;
}
.start-btn small { font-size: 12px; opacity: .65; font-weight: 600; }
.start-btn:hover { transform: translateY(-1px); }
.start-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.start-btn.stop  { background: var(--danger); box-shadow: 0 6px 14px rgba(192,57,43,.35); }
.start-btn.stop-btn { background: var(--danger); box-shadow: 0 6px 14px rgba(192,57,43,.35); }
.start-btn.next  { background: var(--success); box-shadow: 0 6px 14px rgba(76,175,80,.35); }
/* Stack label + sub-text vertically for Skip/(Esc) and Really?/tap again */
.start-btn.next,
.start-btn.confirm {
  flex-direction: column;
  gap: 2px;
}
.start-btn.next small,
.start-btn.confirm small {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1;
}

.text-input {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  height: 56px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px; outline: none;
  min-width: 0;
}
.text-input:focus { border-color: var(--primary); }
.send-btn {
  flex: 0 0 auto;
  background: var(--primary); border: none; cursor: pointer;
  color: var(--primary-fg);
  width: 56px; height: 56px;
  border-radius: 14px;
  font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(34,136,145,.35);
  transition: transform .08s, opacity .12s, background-color .12s;
}
.send-btn:hover { transform: translateY(-1px); }
.send-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--panel-2); color: var(--muted); box-shadow: none; transform: none; }

/* ---- Gender filter row (legacy styles — actual placement is now inside .action-row above) ---- */
.filter-row {
  display: flex; gap: 6px; padding: 8px 12px 0;
}
.filter-pill {
  flex: 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.filter-pill:not(.active):hover {
  border-color: var(--primary);
  color: var(--text);
}

/* ---- Filter panels (country picker / gender coming-soon) ---- */
.action-row { position: relative; overflow: visible; }
.fpanel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 340px;
}
.fpanel[hidden] { display: none; }
.fpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fpanel-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  transition: color .1s;
}
.fpanel-close:hover { color: var(--text); }
.fpanel-search {
  padding: 9px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  width: 100%;
  flex-shrink: 0;
}
.fpanel-search::placeholder { color: var(--muted); }
.fpanel-list { overflow-y: auto; flex: 1; }
.fpanel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .1s;
  user-select: none;
}
.fpanel-item:hover { background: var(--panel-2); }
.fpanel-item.selected { color: var(--primary); background: var(--surface-alt); }
.fpanel-item-flag { font-size: 22px; flex-shrink: 0; line-height: 1; }
.fpanel-item-name { flex: 1; }
.fpanel-item-check { color: var(--primary); font-weight: 700; margin-left: auto; opacity: 0; }
.fpanel-item.selected .fpanel-item-check { opacity: 1; }
/* Gender coming-soon variant */
.fpanel--gender { width: 320px; }
.fpanel-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 24px;
}
.fpanel-cs-icon { font-size: 40px; line-height: 1; }
.fpanel-coming-soon strong { font-size: 15px; color: var(--text); }
.fpanel-coming-soon p { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.5; }
.fpanel-cs-btn {
  margin-top: 6px;
  align-self: center;
}
.fpanel-cs-btn:hover { opacity: .85; }

/* ==================== BOTTOM MODE PILL (chat page) ==================== */
.modebar {
  display: flex; justify-content: center;
  padding: 8px 12px;
  background: transparent;
}
.mode-pill {
  display: inline-flex; background: var(--panel);
  border-radius: 999px; padding: 4px; gap: 2px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.mode-pill button {
  border: none; background: transparent; color: var(--muted);
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.mode-pill button.active { background: var(--primary); color: var(--primary-fg); }

/* ==================== INTEREST INPUT ==================== */
.interest-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.interest-bar .label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.interest-bar input {
  flex: 1; min-width: 120px; background: transparent; border: none;
  color: var(--text); padding: 4px 6px; font-size: 13px; outline: none;
}
.chip {
  background: var(--primary); color: var(--primary-fg);
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.chip button { background: none; border: none; color: var(--primary-fg); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }

/* ==================== 18+ inline gate ==================== */
.gate-inline {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* ==================== REPORT MODAL ==================== */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none;
  align-items: center; justify-content: center; z-index: 900; padding: 20px;
}
.modal.active { display: flex; }
.modal-card {
  background: var(--panel); color: var(--text);
  border-radius: 14px; padding: 22px; max-width: 400px; width: 100%;
  box-shadow: var(--shadow);
}
.modal-card h3 { margin: 0 0 14px; }
.modal-card label { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--text-2); font-size: 14px; }
.modal-card .actions { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }
.modal-card .actions button {
  border: none; padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer;
}
.modal-card .send { background: var(--danger); color: #fff; }
.modal-card .cancel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }

/* ==================== TOAST ==================== */
.toast {
  position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 10px;
  font-size: 14px; z-index: 1100; display: none;
  box-shadow: var(--shadow);
}
.toast.active { display: block; }

/* ==================== SEO SECTIONS ==================== */
.seo {
  background: var(--panel-2);
  padding: 40px 18px;
  border-top: 1px solid var(--border);
}
.seo .wrap { max-width: 980px; margin: 0 auto; }
.seo h2 { font-size: clamp(22px, 3.5vw, 28px); color: var(--text); margin: 0 0 16px; text-align: center; }
.seo p, .seo li { color: var(--text-2); line-height: 1.55; font-size: 15px; }
.seo strong { color: var(--text); }
.seo aside, .seo [style*="surface-alt"] { color: var(--text); }
.seo-intro { padding-top: 16px; padding-bottom: 16px; }
.seo-intro .wrap { max-width: 720px; text-align: center; }
.seo-intro p { font-size: 16px; }
.faq details { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--text); }
.faq p { margin: 8px 0 0; }
.compare-tbl { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; font-size: 14px; }
.compare-tbl th, .compare-tbl td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.compare-tbl th { background: var(--panel-2); color: var(--text); }
.compare-tbl td.yes { color: var(--success); font-weight: 700; }
.compare-tbl td.no  { color: var(--danger);  font-weight: 700; }

/* ==================== SITE FOOTER ==================== */
footer.site-foot {
  text-align: center; padding: 22px 16px; color: var(--muted); font-size: 13px;
  border-top: 1px solid var(--border); background: var(--panel);
}
footer.site-foot .links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin-bottom: 10px;
}
footer.site-foot .links a { color: var(--muted); }

/* ==================== MOBILE TWEAKS ==================== */
@media (max-width: 640px) {
  .topbar { padding: 8px 12px; min-height: 52px; }
  :root { --topbar-h: 52px; }
  .brand { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  .topbar-right { gap: 10px; }
  .online { font-size: 13px; }

  .hero { padding: 36px 16px 28px; }
  .hero .cta { padding: 14px 28px; font-size: 16px; }

  .app {
    padding: 8px; gap: 8px;
    /* On mobile we let the page scroll naturally so the chat input is
       always reachable above the on-screen keyboard. */
    --stage-h: auto;
    min-height: 0;
  }
  .video-col {
    height: auto;
    grid-template-rows: auto;
    display: block;
    position: relative;
  }
  .tile { height: auto; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; }
  .tile.self {
    position: absolute; right: 8px; bottom: 8px;
    width: 38%; max-width: 160px; height: auto;
    z-index: 3; border: 2px solid var(--panel);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
  }
  .chat-col { height: auto; min-height: 320px; max-height: none; }
  .chat-msgs { padding: 14px; }
  .welcome h2 { font-size: 18px; }
  .input-row { padding: 10px; gap: 8px; }
  .start-btn { padding: 20px 22px; font-size: 16px; min-width: 110px; }
  .text-input { padding: 11px 12px; font-size: 14px; }
}

/* ============================================================
   Additions: typing indicator, hover tile controls, device menu,
   theme-toggle sun/moon icons
   ============================================================ */

/* Typing indicator (bouncing dots in a "them" bubble) */
.msg.typing {
  display: inline-flex; gap: 4px;
  padding: 10px 12px; align-items: center;
}
.msg.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.msg.typing .dot:nth-child(2) { animation-delay: .15s; }
.msg.typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: .4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* Hover controls on the self tile (camera/mic selectors) */
.tile-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 6px; justify-content: center;
  padding: 6px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
  z-index: 5;
}
.tile.self:hover .tile-controls,
.tile.self:focus-within .tile-controls,
.tile-controls:hover { opacity: 1; pointer-events: auto; }
/* Always show on touch devices (no hover). */
@media (hover: none) {
  .tile-controls { opacity: 1; pointer-events: auto; background: rgba(0,0,0,.4); }
}
.tile-ctrl {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.95); color: #111;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .1s;
}
.tile-ctrl:hover { transform: scale(1.08); }

/* Popup menu listing devices */
.device-menu {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 4px; min-width: 180px; max-width: 240px;
  z-index: 10;
}
.device-menu .menu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  padding: 8px 10px; font-size: 13px; border-radius: 6px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.device-menu .menu-item:hover { background: var(--panel-2); }
.device-menu .menu-item.active { background: var(--primary); color: var(--primary-fg); }
.device-menu .menu-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* Theme toggle: sun/moon glyphs, knob slides between */
/* Landing brand sizing — bigger and bolder, shrinks on scroll */
.brand.brand-lg { font-size: 38px; font-weight: 900; gap: 16px; transition: font-size .28s, gap .28s; }
.brand.brand-lg img { width: 60px; height: 60px; border-radius: 14px; transition: width .28s, height .28s, border-radius .28s; }
.brand .brand-text { letter-spacing: -0.025em; }

/* Landing topbar: panel bg always, border/shadow revealed on scroll */
.topbar-landing {
  border-bottom-color: transparent;
  box-shadow: none;
  transition: border-color .28s, box-shadow .28s;
}
.topbar-landing.topbar-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.topbar-landing.topbar-scrolled .brand.brand-lg { font-size: 22px; gap: 10px; }
.topbar-landing.topbar-scrolled .brand.brand-lg img { width: 36px; height: 36px; border-radius: 10px; }
.topbar-landing .online { font-size: 16px; font-weight: 800; }
.topbar-landing .online .dot { width: 11px; height: 11px; }
@media (max-width: 640px) {
  .brand.brand-lg { font-size: 28px; gap: 12px; }
  .brand.brand-lg img { width: 46px; height: 46px; }
  .topbar-landing .online { font-size: 14px; }
}

/* ==================== LANGUAGE PICKER ==================== */
.lang-picker { position: relative; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 10px;
  border: 1.5px solid var(--border);
  background: transparent; cursor: pointer;
  color: var(--text); font-size: 13px; font-weight: 700;
  font-family: inherit; white-space: nowrap; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn:hover,
.lang-btn:focus-visible {
  background: var(--panel-2); border-color: var(--primary);
  color: var(--primary); outline: none;
}
.lang-btn[aria-expanded="true"] {
  background: var(--panel-2); border-color: var(--primary); color: var(--primary);
}
.lgi { opacity: .75; flex-shrink: 0; }
.lgc { opacity: .6; flex-shrink: 0; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .lgc { transform: rotate(180deg); }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 178px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.16);
  list-style: none; margin: 0; padding: 5px;
  z-index: 300; display: none;
  transform-origin: top right;
}
.lang-menu.open {
  display: block;
  animation: lgIn .16s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lgIn {
  from { opacity: 0; transform: scale(.95) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.lang-menu li { margin: 0; padding: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--text); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .1s, color .1s;
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: var(--panel-2); color: var(--primary);
  outline: none; text-decoration: none;
}
.lang-menu a.active { color: var(--primary); background: var(--panel-2); }
.lang-menu a.active::after { content: "✓"; margin-left: auto; font-weight: 900; font-size: 13px; }
.lf { font-size: 18px; line-height: 1.1; flex-shrink: 0; }

/* RTL: open to left side */
[dir="rtl"] .lang-menu { right: auto; left: 0; transform-origin: top left; }

@media (max-width: 500px) {
  .lang-btn { padding: 6px 8px; gap: 4px; }
  #langCode, .lgc { display: none; }
}

/* Welcome screen: small lead line under the greeting */
.welcome .welcome-lead {
  margin: 6px 0 14px; font-size: 15px; color: var(--text-2);
}
.welcome h2 { font-size: 24px; margin: 0 0 6px; }

/* Modern SVG icons inside hero CTAs */
.hero .cta { gap: 10px; }
.hero .cta .ico-svg { width: 22px; height: 22px; }
.hero-grid .card .ico svg { display: block; color: var(--primary); }

/* ============ "Less is more" landing tweaks ============ */
/* Tighter hero copy */
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 8px; }
.hero p.lead { font-size: 15px; margin-bottom: 22px; max-width: 480px; text-align: center; margin-left: auto; margin-right: auto; }

/* Minimal feature cards: icon top-centre, single title, no subtitle */
.hero-grid.hero-grid-min .card {
  text-align: center;
  padding: 18px 14px;
}
.hero-grid.hero-grid-min .card .ico {
  display: flex; justify-content: center;
  margin: 0 0 8px;
}
.hero-grid.hero-grid-min .card .ico svg {
  color: var(--primary);
}
.hero-grid.hero-grid-min .card h3 {
  margin: 0; font-size: 15px; font-weight: 700;
}
.hero-grid.hero-grid-min .card p { display: none; }

/* Tighter SEO + FAQ blocks */
.seo { padding: 28px 18px; }
.seo h2 { font-size: clamp(20px, 3vw, 24px); margin-bottom: 12px; }
.faq details { padding: 10px 14px; }
.faq summary { font-size: 14px; }
.faq p { font-size: 14px; }
.compare-tbl { font-size: 13px; }
.compare-tbl th, .compare-tbl td { padding: 8px 10px; }

/* ============ Landing umingle-style card ============ */
.hero-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(15,23,42,.10), 0 0 0 1px rgba(34,136,145,.06);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 44px 44px;
  text-align: center;
}
.hero-card h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 900;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hero-card .accent { color: var(--primary); }
.hero-card .lead {
  font-size: 15px; color: var(--text-2);
  max-width: 520px; margin: 0 auto 28px;
  line-height: 1.55; text-align: center;
}
.start-block { margin-top: 8px; }
.start-block .start-label {
  font-weight: 800; color: var(--text); margin-bottom: 14px; font-size: 18px;
}
.cta-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.cta.cta-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-fg);
  border: none; cursor: pointer;
  font-size: 22px; font-weight: 800;
  padding: 16px 48px; border-radius: 14px;
  text-decoration: none; min-width: 150px;
  box-shadow: 0 10px 24px rgba(34,136,145,.30);
  transition: transform .12s, box-shadow .15s;
}
.cta.cta-pill:hover { transform: translateY(-2px); text-decoration: none; }
.cta-or {
  font-size: 14px; color: var(--text-2); font-weight: 600;
}
.interest-block { margin-top: 32px; }
.interest-block .interest-label {
  display: block; font-weight: 700; color: var(--text);
  margin-bottom: 10px; font-size: 15px;
}
.interest-block .interest-input {
  width: 100%; max-width: 440px;
  padding: 14px 18px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.interest-block .interest-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(34,136,145,.18);
}
.mod-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding: 10px 18px;
  background: rgba(34,136,145,.10);
  color: var(--primary); border-radius: 999px;
  font-weight: 700; font-size: 14px;
}
.mod-pill svg { color: var(--primary); }

@media (max-width: 640px) {
  .hero-card { padding: 32px 20px 28px; border-radius: 18px; }
  .cta.cta-pill { font-size: 18px; padding: 14px 32px; min-width: 110px; }
}

/* Stop button: white card style, sits next to Skip */
.start-btn.stop-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800;
}
.start-btn.stop-btn .sb-ico {
  display: inline-flex; width: 14px; height: 14px;
  background: var(--text);
  border-radius: 2px;
}
.start-btn.stop-btn:hover { background: var(--panel-2); }

/* Bold "you're now connected" banner above chat messages */
.chat-connected-bar {
  padding: 10px 14px; margin: 0;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.chat-connected-bar strong { color: var(--primary); font-weight: 800; }
.chat-connected-bar .cb-flag { font-size: 22px; vertical-align: middle; margin-left: 4px; line-height: 1; }

/* Skip-confirm state on the primary button */
.start-btn.confirm,
.start-btn.next.confirm,
.start-btn.stop.confirm {
  background: #c0392b !important;
  color: #fff !important;
  border-color: #c0392b !important;
  box-shadow: 0 6px 14px rgba(192,57,43,.35) !important;
}
.start-btn.confirm small { display: block; color: rgba(255,255,255,.85); }

/* Mobile-specific UI tweaks (umingle-style polish) */
@media (max-width: 979px) {
  /* Hide mode pill in topbar — page is already /video/ */
  .topbar-center { display: none; }
  .topbar { grid-template-columns: 1fr auto; padding: 6px 12px; }
  /* Tighter app padding on mobile */
  .app { padding: 8px; gap: 8px; --stage-h: auto; min-height: 0; }
  .chat-col { height: auto; min-height: 180px; }
  .chat-msgs { padding: 14px 14px 6px; }
  /* Hide overlay controls on mobile (volume, self-tile tag) */
  .tile .tile-volume { display: none !important; }
  .video-col .tile.self .tile-tag { display: none; }
  /* Compact Stop button → small square next to Skip, icon only */
  .input-row { padding: 10px; gap: 8px; }
  .start-btn { min-width: 120px; padding: 22px 26px; font-size: 17px; }
  .start-btn small { display: none; }
  .start-btn.stop-btn {
    min-width: 0; width: 64px; padding: 0;
    aspect-ratio: 1 / 1;
    justify-content: center;
    font-size: 0;          /* hide the "Stop" text node */
  }
  .start-btn.stop-btn .sb-ico { width: 16px; height: 16px; font-size: 0; }
  .text-input { padding: 10px 12px; font-size: 16px; border-radius: 10px; }
}

/* ============================================================
   APP DOWNLOAD UI — Smart App Banner + Play Store badge
   Used across all SEO landing pages and blog posts to drive
   Play Store installs (boosts both web ranking and ASO).
   ============================================================ */

/* Smart app banner — sticky thin bar, mobile-only */
.smart-app-banner {
  display: none;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  position: relative;
  z-index: 60;
}
.smart-app-banner img {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 auto;
}
.smart-app-banner .sab-text { flex: 1; line-height: 1.2; }
.smart-app-banner .sab-text strong { display: block; font-weight: 800; }
.smart-app-banner .sab-text span { color: var(--muted); font-size: 11px; }
.smart-app-banner .sab-cta {
  background: var(--primary); color: var(--primary-fg);
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
  text-decoration: none;
}
.smart-app-banner .sab-close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
}
@media (max-width: 720px) {
  .smart-app-banner { display: flex; }
  .smart-app-banner.is-hidden { display: none; }
}

/* Play Store badge (inline, used in heroes, blog footers, etc.) */
.play-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 12px;
  text-decoration: none; font-weight: 700;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.play-badge:hover {
  transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.play-badge svg { flex: 0 0 auto; }
.play-badge .pb-text { display: flex; flex-direction: column; line-height: 1.05; }
.play-badge .pb-small { font-size: 10px; opacity: .8; font-weight: 600; }
.play-badge .pb-big { font-size: 15px; font-weight: 800; letter-spacing: .01em; }

/* App callout — bigger banner block for blog post bodies */
.app-callout {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-fg);
  border-radius: 14px; padding: 18px 22px; margin: 28px 0;
}
.app-callout .ac-icon {
  width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
}
.app-callout .ac-icon img { width: 40px; height: 40px; border-radius: 10px; }
.app-callout .ac-body { flex: 1 1 240px; }
.app-callout .ac-body strong { display: block; font-size: 17px; margin-bottom: 4px; }
.app-callout .ac-body p { margin: 0; opacity: .92; font-size: 14px; line-height: 1.4; }
.app-callout .play-badge { background: #fff; color: #111; }

/* AI-friendly TL;DR answer block (top of long-form posts) */
.tldr {
  background: var(--panel-2);
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 18px 0 24px;
  font-size: 15px; line-height: 1.55; color: var(--text);
}
.tldr strong { color: var(--primary); display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* ==========================================================================
   v2 — May 2026 — Full hero overhaul: animation, live count, CTA hierarchy,
   trust bar, FAQ chevrons, footer grid, comparison table enhancements.
   ========================================================================== */

/* ── Custom property additions ── */
:root        { --warn: #d97706; }
:root[data-theme="dark"] { --warn: #fbbf24; }

/* ── 1. Hero connection animation ── */
/* ═══════════════════════════════════════════
   Logo spinner — replaces two-person anim
   Outer rings spin at different speeds with
   a comet-tail gradient effect. Core pulses.
   ═══════════════════════════════════════════ */
.logo-spinner {
  position: relative;
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px;
}
.logo-spinner::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  border: 1.5px solid rgba(34,136,145,.22);
  background: rgba(34,136,145,.05);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .logo-spinner::before {
  border-color: rgba(74,179,189,.2);
  background: rgba(74,179,189,.04);
}
/* Three concentric spinning rings */
.ls-ring {
  position: absolute; border-radius: 50%;
  border: 3px solid transparent;
}
.ls-ring-a {
  inset: 0;
  border-top-color: var(--primary);
  border-right-color: rgba(34,136,145,.35);
  animation: lsSpin 2.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(34,136,145,.55));
}
.ls-ring-b {
  inset: 9px;
  border-bottom-color: rgba(34,136,145,.28);
  border-left-color: rgba(74,179,189,.18);
  animation: lsSpin 3.8s linear infinite reverse;
}
.ls-ring-c {
  inset: 18px;
  border-top-color: rgba(34,136,145,.15);
  border-right-color: rgba(34,136,145,.08);
  animation: lsSpin 6s linear infinite;
}
/* Inner teal core — pulsing glow */
.ls-core {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  animation: lsGlow 2.1s ease-in-out infinite;
}
.ls-text {
  font-family: "Nunito", sans-serif;
  font-size: 16px; font-weight: 900;
  color: #fff; letter-spacing: -.03em; line-height: 1;
  user-select: none;
}
@keyframes lsSpin {
  to { transform: rotate(360deg); }
}
@keyframes lsGlow {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(34,136,145,.55), 0 4px 18px rgba(34,136,145,.28);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(34,136,145,0), 0 8px 30px rgba(34,136,145,.52);
    transform: scale(1.07);
  }
}

/* ═══════════════════════════════════════════
   Mode animations (Text / Voice / Video)
   One eye-catching micro-illustration per
   chat mode. Only the .active one is shown,
   swapped in sync with the mode selector.
   ═══════════════════════════════════════════ */
.mode-anim-stage {
  position: relative;
  width: 100%;
  height: 130px;
  margin: 0 auto 52px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.m-anim {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.94) translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.m-anim.active {
  opacity: 1; transform: none;
}

/* ── TEXT animation: stacked chat bubbles popping in alternately ── */
.m-anim-text {
  flex-direction: column; gap: 6px; padding: 4px 0;
}
.ma-text-row {
  width: 100%; display: flex;
  opacity: 0; transform: translateY(8px) scale(.92);
  animation: maTextPop 4.2s ease-in-out infinite;
}
.ma-text-l { justify-content: flex-start; padding-left: 18%; }
.ma-text-r { justify-content: flex-end;   padding-right: 18%; }
.m-anim-text .ma-text-row:nth-child(1) { animation-delay: 0s; }
.m-anim-text .ma-text-row:nth-child(2) { animation-delay: .7s; }
.m-anim-text .ma-text-row:nth-child(3) { animation-delay: 1.4s; }
.ma-bubble {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 14px;
  max-width: 70%; line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.ma-bubble-l {
  background: rgba(34,136,145,.12);
  color: var(--primary);
  border-bottom-left-radius: 4px;
}
.ma-bubble-r {
  background: var(--primary);
  color: var(--primary-fg);
  border-bottom-right-radius: 4px;
}
.ma-typing { gap: 3px; padding: 9px 12px; }
.ma-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: maTypeDot 1.2s ease-in-out infinite;
}
.ma-typing i:nth-child(2) { animation-delay: .18s; }
.ma-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes maTextPop {
  0%, 8%   { opacity: 0; transform: translateY(8px) scale(.92); }
  16%, 70% { opacity: 1; transform: translateY(0)   scale(1); }
  88%,100% { opacity: 0; transform: translateY(-4px) scale(.96); }
}
@keyframes maTypeDot {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}
:root[data-theme="dark"] .ma-bubble-l {
  background: rgba(74,179,189,.18); color: var(--primary-2);
}

/* ── VOICE animation: mic + sonar rings + equalizer ── */
.m-anim-voice { gap: 18px; }
.ma-mic-wrap {
  position: relative; width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ma-mic {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: var(--primary-fg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(34,136,145,.32);
  animation: maMicBob 1.6s ease-in-out infinite;
  position: relative; z-index: 2;
}
.ma-mic svg { width: 26px; height: 26px; }
.ma-ring {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: maSonar 2.2s ease-out infinite;
}
.ma-ring-2 { animation-delay: .55s; }
.ma-ring-3 { animation-delay: 1.1s; }
@keyframes maMicBob {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%      { transform: translateY(-3px) scale(1.04); }
}
@keyframes maSonar {
  0%   { opacity: .6; transform: scale(.7); }
  80%  { opacity: 0;  transform: scale(2.1); }
  100% { opacity: 0;  transform: scale(2.1); }
}
.ma-eq {
  display: flex; align-items: center; gap: 4px;
  height: 60px;
}
.ma-eq span {
  display: block; width: 4px;
  background: var(--primary); border-radius: 2px;
  opacity: .85;
  animation: maEqBar 1.1s ease-in-out infinite;
}
.ma-eq-l span:nth-child(1) { height: 10px; animation-delay: .00s; }
.ma-eq-l span:nth-child(2) { height: 22px; animation-delay: .12s; }
.ma-eq-l span:nth-child(3) { height: 34px; animation-delay: .24s; }
.ma-eq-l span:nth-child(4) { height: 22px; animation-delay: .36s; }
.ma-eq-l span:nth-child(5) { height: 12px; animation-delay: .48s; }
.ma-eq-r span:nth-child(1) { height: 12px; animation-delay: .55s; }
.ma-eq-r span:nth-child(2) { height: 24px; animation-delay: .67s; }
.ma-eq-r span:nth-child(3) { height: 36px; animation-delay: .79s; }
.ma-eq-r span:nth-child(4) { height: 22px; animation-delay: .91s; }
.ma-eq-r span:nth-child(5) { height: 10px; animation-delay: 1.03s; }
@keyframes maEqBar {
  0%, 100% { transform: scaleY(.35); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

/* ── VIDEO animation: two tiles + connection beam ── */
.m-anim-video { gap: 6px; }
.ma-tile {
  position: relative;
  width: 80px; height: 100px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(34,136,145,.18), rgba(34,136,145,.05));
  border: 1.5px solid rgba(34,136,145,.25);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  box-shadow: 0 8px 22px rgba(34,136,145,.18);
}
.ma-tile-a { animation: maTileFloatA 3.4s ease-in-out infinite; }
.ma-tile-b { animation: maTileFloatB 3.4s ease-in-out infinite; }
.ma-avatar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.ma-avatar svg { width: 70%; height: 70%; }
.ma-avatar-a svg { fill: var(--primary); }
.ma-avatar-b svg { fill: var(--primary-2); }
.ma-rec {
  position: absolute; top: 8px; left: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.55);
  animation: maRecPulse 1.6s ease-out infinite;
}
.ma-cam {
  position: absolute; top: 7px; right: 7px;
  color: var(--primary-fg);
  background: var(--primary);
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.ma-cam svg { width: 13px; height: 13px; }
.ma-beam {
  position: relative;
  width: 44px; height: 3px;
  background: linear-gradient(90deg,
    rgba(34,136,145,.0)  0%,
    rgba(34,136,145,.55) 50%,
    rgba(34,136,145,.0)  100%);
  border-radius: 3px;
  overflow: hidden;
}
.ma-beam-pulse {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; margin-top: -7px; margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary) 0%, rgba(34,136,145,0) 70%);
  animation: maBeamMove 1.6s ease-in-out infinite;
}
@keyframes maTileFloatA {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(-2.5deg); }
}
@keyframes maTileFloatB {
  0%, 100% { transform: translateY(-2px) rotate(1.5deg); }
  50%      { transform: translateY(2px)  rotate(2.5deg); }
}
@keyframes maRecPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);   }
}
@keyframes maBeamMove {
  0%   { left: 0%;   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Below-card grouped block: trust pills + lead text as a tight column */
.hero-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  max-width: 560px;
  padding: 0 16px;
  text-align: center;
}
.trust-bar-below {
  margin: 0;
  justify-content: center;
}
.hero-below .lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  opacity: .8;
}

@media (max-width: 640px) {
  .mode-anim-stage { height: 110px; margin-bottom: 52px; }
  .ma-mic-wrap { width: 64px; height: 64px; }
  .ma-mic { width: 46px; height: 46px; }
  .ma-mic svg { width: 22px; height: 22px; }
  .ma-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .ma-eq { height: 50px; }
  .ma-tile { width: 66px; height: 86px; border-radius: 12px; }
  .ma-beam { width: 32px; }
  .ma-bubble { font-size: 11.5px; padding: 6px 10px; }
  .ma-text-l { padding-left: 8%; }
  .ma-text-r { padding-right: 8%; }
}

/* ── 2. Hero live count ── */
.hero-live {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,136,145,.08); border: 1px solid rgba(34,136,145,.2);
  border-radius: 999px; padding: 6px 16px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin-bottom: 16px; cursor: default; user-select: none;
}
:root[data-theme="dark"] .hero-live {
  background: rgba(74,179,189,.1); border-color: rgba(74,179,189,.25);
}
.hero-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  animation: heroDotPulse 2s ease-in-out infinite;
}
@keyframes heroDotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.65); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0);   }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);   }
}

/* ── 3. Hierarchical CTAs ── */
.cta-stack {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 340px; margin: 0 auto;
}
.cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--primary); color: var(--primary-fg);
  border: 2.5px solid var(--primary);
  padding: 17px 0; border-radius: 14px;
  font-size: 19px; font-weight: 900; font-family: inherit; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none; width: 100%;
  box-shadow: 0 10px 30px rgba(34,136,145,.28);
  transition: transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-primary:hover {
  transform: translateY(-2px); box-shadow: 0 16px 40px rgba(34,136,145,.42);
  text-decoration: none; color: var(--primary-fg);
}
.cta-primary:active { transform: translateY(0); }
.cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--text-2);
  border: 2px solid var(--border);
  padding: 11px 28px; border-radius: 12px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-secondary:hover {
  border-color: var(--primary); color: var(--primary);
  background: rgba(34,136,145,.06); text-decoration: none;
}
.btn-lbl { pointer-events: none; }

/* ── 4. Inline trust bar ── */
.trust-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 10px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  opacity: .8; margin-top: 14px;
}
.trust-bar span:not(.tb-sep) { white-space: nowrap; }
.tb-sep { opacity: .3; }

/* ── 5. Play wrap ── */
.play-wrap { margin-top: 20px; display: flex; justify-content: center; }

/* ── 6. Mod pill at bottom of hero card ── */
.hero-card .mod-pill { margin-top: 16px; }

/* ── 7. FAQ — animated chevron + open state highlight ── */
.faq details {
  background: var(--panel); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 8px;
  border: 1px solid var(--border); transition: border-color .18s, background .18s;
}
.faq details[open] { border-color: var(--primary); background: var(--panel-2); }
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--text);
  font-size: 15px; line-height: 1.4;
  padding-right: 28px; position: relative;
  list-style: none; user-select: none; transition: color .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--text-2); border-bottom: 2.5px solid var(--text-2);
  transform: translateY(-72%) rotate(45deg);
  transition: transform .22s, border-color .15s; border-radius: 1px;
}
.faq details[open] summary { color: var(--primary); }
.faq details[open] summary::after {
  transform: translateY(-22%) rotate(-135deg); border-color: var(--primary);
}
.faq p { margin: 10px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.65; }

/* ── 8. Comparison table partial/warn class ── */
.compare-tbl td.partial { color: var(--warn); font-weight: 700; }
.compare-tbl tr:last-child td { border-bottom: none; }
.compare-note {
  font-size: 13px; color: var(--text-2);
  margin-top: 10px; text-align: center;
}
.compare-note a { color: var(--primary); font-weight: 700; }

/* ── 9. Footer grid ── */
footer.site-foot {
  background: var(--panel-2); border-top: 1px solid var(--border);
  padding: 52px 24px 32px; margin-top: 64px; text-align: center;
}
.foot-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px 36px; max-width: 920px;
  margin: 0 auto 40px; text-align: left;
}
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-head {
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); margin: 0 0 5px;
}
.foot-col a {
  font-size: 13px; color: var(--text-2); text-decoration: none;
  transition: color .12s; line-height: 1.35;
}
.foot-col a:hover { color: var(--primary); text-decoration: none; }
.foot-bottom {
  border-top: 1px solid var(--border); padding-top: 22px;
  font-size: 13px; color: var(--text-2);
}
.foot-bottom p { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.foot-bottom small { font-size: 11px; color: var(--muted); line-height: 1.55; display: block; }

@media (max-width: 700px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  footer.site-foot { padding: 36px 16px 28px; margin-top: 48px; }
}

/* ── 10. Hero card mobile: tighter so primary CTA is above fold ── */
@media (max-width: 640px) {
  .hero-card { padding: 28px 18px 26px; border-radius: 22px; }
  .hero-anim { margin-bottom: 14px; }
  .ha-face { width: 44px; height: 44px; }
  .ha-line { padding: 0 10px; gap: 5px; }
  .ha-dot { width: 7px; height: 7px; }
  .cta-primary { font-size: 17px; padding: 15px 0; }
  .cta-secondary { font-size: 14px; padding: 10px 20px; }
  .hero-live { font-size: 12px; padding: 5px 12px; margin-bottom: 12px; }
  .trust-bar { font-size: 11px; }
  .play-wrap { margin-top: 16px; }
}

/* ── 11. Mode selector: segmented control + gradient Start CTA ── */

@keyframes mode-activate {
  from { transform: scale(0.88); opacity: 0.5; }
  to   { transform: scale(1);    opacity: 1;   }
}

/* ── Segmented control: full-width to match CTA button ── */
.mode-select {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin: 0 auto 14px;
  width: 100%; max-width: 340px;
}

/* ── Each button: flex-1 so all fill equal space, taller to match CTA ── */
.mode-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 18px 10px; border-radius: 10px;
  border: none; background: transparent;
  color: var(--muted); font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; line-height: 1;
  transition: background .2s cubic-bezier(.4,0,.2,1), color .18s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.mode-btn svg { flex-shrink: 0; transition: stroke .18s; }
.mode-btn:hover:not(.active) {
  background: rgba(34,136,145,.09); color: var(--primary);
}
.mode-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 3px 10px rgba(34,136,145,.32);
  animation: mode-activate .22s cubic-bezier(.34,1.56,.64,1) both;
}
.mode-btn.active svg { stroke: #fff; }

/* ── Big gradient Start Chatting button ── */
.cta-start {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 380px; margin: 0 auto;
  padding: 26px 52px; border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 22px; font-weight: 900;
  font-family: inherit; letter-spacing: -.02em; text-decoration: none;
  box-shadow: 0 12px 36px rgba(34,136,145,.46);
  transition: opacity .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-start:hover {
  opacity: .93; transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(34,136,145,.55);
  text-decoration: none; color: #fff;
}
.cta-start:active { transform: translateY(0); }

@media (max-width: 640px) {
  .mode-select { max-width: 100%; }
  .mode-btn { padding: 20px 6px; font-size: 14px; gap: 5px; }
  .mode-btn svg { width: 16px; height: 16px; }
  .cta-start { font-size: 18px; padding: 22px 0; max-width: 100%; border-radius: 14px; }
}

/* ══════════════════════════════════════════════════════════
   12. Hero product preview — two phone frames in the card
   ══════════════════════════════════════════════════════════ */
.hero-preview {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 22px auto 0; width: 100%; max-width: 320px;
}
.hp-frame {
  position: relative; width: 110px;
  background: var(--panel); border: 1.5px solid var(--border);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  flex-shrink: 0;
}
.hp-frame-b { transform: translateX(-8px); z-index: 0; opacity: .82; }
.hp-frame-a { z-index: 1; }
.hp-status-bar {
  display: flex; gap: 4px; padding: 8px 10px 4px;
  justify-content: flex-end;
}
.hp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border);
}
.hp-video {
  height: 120px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hp-video-a {
  background: linear-gradient(135deg, #1a6b74 0%, #228891 50%, #2ab0bd 100%);
}
.hp-video-b {
  background: linear-gradient(135deg, #1a3a74 0%, #22558c 50%, #4285f4 100%);
}
.hp-avatar-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.hp-label {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-2); padding: 5px 0 8px;
}
/* pulsing connection dots between frames */
.hp-connect-pulse {
  display: flex; flex-direction: column; gap: 4px; z-index: 2;
  margin: 0 -4px;
}
.hp-connect-pulse span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  animation: hpPulse 1.4s ease-in-out infinite;
}
.hp-connect-pulse span:nth-child(2) { animation-delay: .2s; }
.hp-connect-pulse span:nth-child(3) { animation-delay: .4s; }
@keyframes hpPulse {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════
   13. App promo section — English story + Google Play
   ══════════════════════════════════════════════════════════ */
.app-promo {
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
}
.ap-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 60px;
}
.ap-text { flex: 1; min-width: 0; }
.ap-stat {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px;
}
.ap-num {
  font-size: 52px; font-weight: 900; line-height: 1;
  color: var(--primary);
}
.ap-label {
  font-size: 18px; font-weight: 700; color: var(--text-2);
}
.ap-heading {
  font-size: 28px; font-weight: 900; line-height: 1.25;
  color: var(--text); margin: 0 0 14px;
}
.ap-body {
  font-size: 16px; color: var(--text-2); line-height: 1.65;
  margin: 0 0 28px; max-width: 440px;
}
.ap-play-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #01875f; color: #fff;
  border-radius: 12px; padding: 12px 22px;
  text-decoration: none; font-family: inherit;
  box-shadow: 0 4px 14px rgba(1,135,95,.32);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.ap-play-btn:hover { background: #016d4c; transform: translateY(-1px); text-decoration: none; color: #fff;
  box-shadow: 0 8px 22px rgba(1,135,95,.42); }
.ap-play-btn .pb-text { display: flex; flex-direction: column; line-height: 1.15; }
.ap-play-btn .pb-small { font-size: 10px; font-weight: 600; opacity: .75; letter-spacing: .05em; }
.ap-play-btn .pb-big { font-size: 16px; font-weight: 900; }

/* ── Two overlapping phone mockups ── */
.ap-phones {
  flex-shrink: 0; position: relative; width: 220px; height: 340px;
}
.ap-phone {
  position: absolute; bottom: 0;
  width: 155px; border-radius: 26px; overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  background: var(--panel-2);
}
.ap-phone-back {
  right: 0; top: 40px; transform: rotate(4deg);
  z-index: 0; opacity: .78;
}
.ap-phone-front {
  left: 0; bottom: 0; z-index: 1;
}
.ap-ph-notch {
  width: 60px; height: 10px; background: var(--border);
  border-radius: 0 0 8px 8px; margin: 0 auto;
}
.ap-ph-screen { padding: 8px 10px 12px; }
/* front phone: video frame */
.ap-ph-video-frame {
  height: 160px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #1a6b74 0%, #228891 50%, #2ab0bd 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; position: relative;
}
.ap-ph-av {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.ap-ph-self-cam {
  width: 44px; height: 56px; border-radius: 10px;
  background: linear-gradient(135deg, #1a3a74, #4285f4);
  position: absolute; bottom: 8px; right: 8px;
  border: 1.5px solid rgba(255,255,255,.3);
}
.ap-ph-controls {
  display: flex; gap: 8px; justify-content: center; padding-top: 4px;
}
.ap-ph-ctrl {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.ap-ph-red { background: #ff4757; color: #fff; }
.ap-ph-teal { background: var(--primary); color: #fff; }
/* back phone: chat bubbles */
.ap-ph-chat {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 0;
}
.ap-ph-bubble {
  max-width: 85%; font-size: 11px; font-weight: 600;
  padding: 7px 10px; border-radius: 12px; line-height: 1.4;
}
.ap-ph-r {
  background: var(--primary); color: #fff;
  border-bottom-right-radius: 3px; align-self: flex-end;
}
.ap-ph-l {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px; align-self: flex-start;
}

@media (max-width: 860px) {
  .ap-inner { gap: 32px; }
  .ap-num { font-size: 42px; }
  .ap-heading { font-size: 22px; }
}
@media (max-width: 640px) {
  .app-promo { padding: 48px 20px; }
  .ap-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  /* On mobile: side-by-side phones in a fixed-size container */
  .ap-phones {
    width: 260px; height: 310px; margin: 0 auto;
  }
  .ap-phone { width: 140px; }
  .ap-phone-back { top: 30px; right: 0; }
  .ap-phone-front { left: 0; bottom: 0; }
  .ap-speak-screen { padding: 6px 8px 10px; gap: 0; }
  .ap-speak-icon-wrap { width: 46px; height: 46px; margin-bottom: 7px; }
  .ap-speak-title { font-size: 13px; }
  .ap-speak-sub { font-size: 8.5px; margin-bottom: 8px; }
  .ap-gf-pill { font-size: 8.5px; padding: 5px 2px; }
  .ap-start-call-ui { font-size: 10px; padding: 8px 6px; }
  .ap-num { font-size: 40px; }
  .ap-heading { font-size: 20px; }
  /* hero preview: smaller on mobile */
  .hero-preview { max-width: 240px; }
  .hp-frame { width: 86px; }
  .hp-video { height: 90px; }
}


/* ══════════════════════════════════════════════════════════
   14. Video page splash preview (vc-splash)
   ══════════════════════════════════════════════════════════ */
.vc-splash {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  background: var(--bg);
  transition: opacity .35s ease, transform .35s ease;
}
.vc-splash.vc-splash-out {
  opacity: 0; transform: scale(.97); pointer-events: none;
}
.vc-splash-frames {
  display: flex; gap: 12px; align-items: flex-end;
}
.vc-sf {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.vc-sf-a { width: 220px; height: 165px; }
.vc-sf-b { width: 160px; height: 120px; transform: translateY(10px); }
.vc-sf-blur {
  position: absolute; inset: 0;
  filter: blur(28px) brightness(.6);
  transform: scale(1.15);
}
.vc-sf-a .vc-sf-blur {
  background: linear-gradient(135deg, #1a6b74 0%, #228891 55%, #2ab0bd 100%);
}
.vc-sf-b .vc-sf-blur {
  background: linear-gradient(135deg, #1a3a74 0%, #22558c 55%, #4285f4 100%);
}
.vc-sf-av {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
}
.vc-sf-av svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.vc-sf-tag {
  position: absolute; bottom: 8px; left: 10px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); border-radius: 6px; padding: 2px 7px;
}
.vc-splash-cta {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.vc-splash-hint {
  font-size: 13px; color: var(--muted); margin: 0;
}
.vc-splash-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 32px; border-radius: 14px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 17px; font-weight: 900;
  font-family: inherit; letter-spacing: -.01em;
  box-shadow: 0 8px 28px rgba(34,136,145,.42);
  transition: opacity .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.vc-splash-btn:hover {
  opacity: .91; transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(34,136,145,.55);
}
.vc-splash-btn:active { transform: translateY(0); }
/* The splash must be inside a positioned parent */
.app { position: relative; }

/* ══════════════════════════════════════════════════════════
   15. Accurate "Speak Freely" phone mockups (ap-phones)
   ══════════════════════════════════════════════════════════ */
.ap-ph-light {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.10) !important;
}
.ap-ph-dark {
  background: #152227 !important;
  border-color: #253840 !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.40) !important;
}
.ap-ph-notch {
  width: 54px; height: 10px; border-radius: 0 0 8px 8px;
  margin: 0 auto;
}
.ap-ph-notch-light { background: #e5e7eb; }
.ap-ph-notch-dark  { background: #253840; }

.ap-speak-screen {
  padding: 8px 10px 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; height: calc(100% - 20px);
}
.ap-online-badge {
  align-self: flex-end;
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; margin-bottom: 10px;
}
.ap-online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4CAF50; flex-shrink: 0;
}
.ap-online-light { color: #228891; }
.ap-online-teal  { color: #4ab3bd; }

.ap-speak-icon-wrap {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.ap-icon-light { background: rgba(34,136,145,.10); }
.ap-icon-dark  { background: rgba(74,179,189,.12); }

.ap-speak-title {
  font-size: 15px; font-weight: 900; margin: 0 0 5px; text-align: center;
}
.ap-speak-dark-text  { color: #0e1116; }
.ap-speak-light-text { color: #e6e9ef; }

.ap-speak-sub {
  font-size: 9.5px; text-align: center; line-height: 1.5;
  margin: 0 0 12px;
}
.ap-sub-dark  { color: rgba(0,0,0,.5); }
.ap-sub-light { color: rgba(255,255,255,.55); }

.ap-connect-label {
  font-size: 10px; font-weight: 700; align-self: flex-start;
  margin-bottom: 6px;
}
.ap-cl-dark  { color: rgba(0,0,0,.45); }
.ap-cl-light { color: rgba(255,255,255,.45); }

.ap-gender-row {
  display: flex; gap: 5px; width: 100%; margin-bottom: 10px;
}
.ap-gf-pill {
  flex: 1; text-align: center; font-size: 9.5px; font-weight: 800;
  padding: 7px 4px; border-radius: 9px; cursor: default;
}
.ap-gf-active { background: #228891; color: #fff; }
.ap-gf-light  { border: 1.5px solid rgba(0,0,0,.15); color: rgba(0,0,0,.6); }
.ap-gf-dark   { border: 1.5px solid rgba(255,255,255,.18); color: rgba(255,255,255,.65); }

.ap-start-call-ui {
  width: 100%; padding: 10px 8px; border-radius: 13px;
  background: #228891; color: #fff;
  font-size: 11.5px; font-weight: 900;
  text-align: center; letter-spacing: .01em;
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════
   16. Speak Freely story section
   ══════════════════════════════════════════════════════════ */
.speak-story {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
}
.ss-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 60px;
}
.ss-text { flex: 1; min-width: 0; }
.ss-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,136,145,.1); color: var(--primary);
  border: 1px solid rgba(34,136,145,.25);
  border-radius: 999px; padding: 5px 14px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 14px;
}
.ss-heading {
  font-size: 28px; font-weight: 900; line-height: 1.25;
  color: var(--text); margin: 0 0 14px;
}
.ss-body {
  font-size: 16px; color: var(--text-2); line-height: 1.65;
  margin: 0 0 20px; max-width: 440px;
}
.ss-features {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ss-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--text-2); font-weight: 600;
}
.ss-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34,136,145,.15); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.ss-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 26px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 15px; font-weight: 800;
  font-family: inherit; text-decoration: none;
  box-shadow: 0 6px 20px rgba(34,136,145,.32);
  transition: opacity .15s, transform .12s;
}
.ss-cta:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; color: #fff; }
/* 4-stat grid */
.ss-visual {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; width: 280px;
}
.ss-stat-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  text-align: center;
}
.ss-sc-num {
  font-size: 30px; font-weight: 900; color: var(--primary);
  line-height: 1; margin-bottom: 5px;
}
.ss-sc-label {
  font-size: 11px; font-weight: 700; color: var(--text-2);
  line-height: 1.4;
}
@media (max-width: 860px) {
  .ss-inner { gap: 32px; }
  .ss-heading { font-size: 22px; }
  .ss-visual { width: 220px; gap: 10px; }
  .ss-sc-num { font-size: 24px; }
}
@media (max-width: 640px) {
  .speak-story { padding: 48px 20px; }
  .ss-inner { flex-direction: column; }
  .ss-visual { width: 100%; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ss-stat-card { padding: 14px 10px; }
  .ss-sc-num { font-size: 20px; }
  .ss-sc-label { font-size: 9px; }
  .ss-heading { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════
   VIDEO CHAT STORY — image left, text right
   ══════════════════════════════════════════════════════════ */
.vidchat-story {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
}
.vcs-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 60px;
}

/* ── Left: browser mockup ── */
.vcs-preview-wrap {
  flex-shrink: 0; width: 400px;
}
.vcs-browser {
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
  background: var(--panel);
}
.vcs-chrome {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.vcs-dots { display: flex; gap: 5px; flex-shrink: 0; }
.vcs-dots span { width: 11px; height: 11px; border-radius: 50%; }
.vcs-dots span:nth-child(1) { background: #ff5f57; }
.vcs-dots span:nth-child(2) { background: #ffbd2e; }
.vcs-dots span:nth-child(3) { background: #28ca41; }
.vcs-url {
  flex: 1; text-align: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 12px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
.vcs-screen {
  background: #0e1116;
  padding: 14px 14px 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}

/* ── App-layout mock (actual /video chat UI) ── */
.vcs-app-mock {
  display: flex; overflow: hidden;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255,255,255,.07);
  border-bottom: none;
  min-height: 190px;
}
.vcs-vm-vcol {
  width: 38%; flex-shrink: 0; background: #0a0d11;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px;
}
.vcs-vm-tile {
  position: relative; flex: 1; border-radius: 8px; overflow: hidden;
}
.vcs-vm-self { flex: 0 0 36%; }
.vcs-vm-ccol {
  flex: 1; background: #0d1117;
  border-left: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
}
.vcs-vm-msgs {
  flex: 1; padding: 8px 10px; overflow: hidden;
}
.vcs-vm-promo {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; background: rgba(255,255,255,.04);
  border-radius: 8px;
}
.vcs-vm-promo-orb { width: 18px !important; height: 18px !important; font-size: 6px !important; flex-shrink: 0; }
.vcs-vm-promo-name { font-size: 8px; font-weight: 800; color: #fff; }
.vcs-vm-promo-sub { font-size: 7px; color: rgba(255,255,255,.45); margin-top: 1px; }
.vcs-vm-irow {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 7px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.vcs-vm-start {
  background: #228891; color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 5px 10px; border-radius: 6px; flex-shrink: 0; white-space: nowrap;
}
.vcs-vm-input {
  flex: 1; height: 20px; display: block;
  background: rgba(255,255,255,.07); border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
}
.vcs-vm-send {
  width: 22px; height: 22px; border-radius: 50%;
  background: #228891; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; flex-shrink: 0;
}
.vcs-topbar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.vcs-tb-logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; color: #fff;
}
.vcs-tb-orb {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #228891, #006c74);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #fff; letter-spacing: -.03em;
}
.vcs-tb-mode {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.07);
  border-radius: 999px; padding: 3px;
  font-size: 11px; font-weight: 700;
}
.vcs-tb-mode span { padding: 4px 12px; border-radius: 999px; color: rgba(255,255,255,.45); }
.vcs-tp-active { background: #228891; color: #fff !important; }

/* The two overlapping video frames */
.vcs-frames {
  display: flex; align-items: flex-end; gap: 10px;
  width: 100%; justify-content: center;
}
.vcs-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  flex-shrink: 0;
}
.vcs-fa { width: 50%; padding-top: 37%; }
.vcs-fb { width: 36%; padding-top: 27%; transform: translateY(10px); }
.vcs-blur {
  position: absolute; inset: -10%; border-radius: 14px;
  filter: blur(20px);
}
.vcs-blur-a {
  background: linear-gradient(135deg, #1a6b74 0%, #228891 50%, #2ab0bd 100%);
}
.vcs-blur-b {
  background: linear-gradient(135deg, #1a2e74 0%, #22558c 50%, #4285f4 100%);
}
.vcs-av {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.vcs-tag {
  position: absolute; bottom: 7px; left: 9px;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.36); border-radius: 5px; padding: 2px 7px;
}
.vcs-hint {
  font-size: 11.5px; color: rgba(255,255,255,.42); text-align: center;
}
.vcs-start-mock {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #228891, #006c74);
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 11px 28px; border-radius: 10px;
  box-shadow: 0 6px 22px rgba(34,136,145,.45);
  letter-spacing: -.01em;
}

/* ── Right: story text ── */
.vcs-text { flex: 1; min-width: 0; }
.vcs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,136,145,.1); color: var(--primary);
  border: 1px solid rgba(34,136,145,.22);
  border-radius: 999px; padding: 5px 14px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 14px;
}
.vcs-heading {
  font-size: 28px; font-weight: 900; line-height: 1.25;
  color: var(--text); margin: 0 0 14px;
}
.vcs-body {
  font-size: 16px; color: var(--text-2); line-height: 1.65;
  margin: 0 0 22px;
}
.vcs-features {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.vcs-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--text-2); font-weight: 600;
}
.vcs-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(34,136,145,.12); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; margin-top: 1px;
}
.vcs-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 28px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 16px; font-weight: 800;
  font-family: inherit; text-decoration: none;
  box-shadow: 0 6px 22px rgba(34,136,145,.32);
  transition: opacity .15s, transform .12s;
}
.vcs-cta:hover {
  opacity: .9; transform: translateY(-2px);
  text-decoration: none; color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .vcs-inner { gap: 36px; }
  .vcs-preview-wrap { width: 310px; }
  .vcs-heading { font-size: 23px; }
}
@media (max-width: 640px) {
  .vidchat-story { padding: 48px 20px; }
  .vcs-inner { flex-direction: column; }
  .vcs-preview-wrap { width: 100%; }
  .vcs-heading { font-size: 20px; }
  .vcs-body { font-size: 15px; }
  .vcs-cta { width: 100%; justify-content: center; }
}

/* ── Logo spinner mobile ── */
@media (max-width: 640px) {
  .logo-spinner { width: 76px; height: 76px; }
  .ls-core { width: 44px; height: 44px; }
  .ls-text { font-size: 14px; }
}

/* ============================================================
   MESSAGE INTERACTIONS — Reply + Emoji Reactions
   Industry-standard patterns: iMessage / Telegram / WhatsApp UX.
   ============================================================ */

/* ── Message row wrapper ─────────────────────────────────── */
.msg-row {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  position: relative;
  /* gap between reply-quote + bubble */
}
.msg-row.me   { align-self: flex-end;  align-items: flex-end; }
.msg-row.them { align-self: flex-start; align-items: flex-start; }
.msg-row.sys  { align-self: center; max-width: 100%; }

/* ── Update existing .msg to live inside .msg-row ── */
.msg-row .msg {
  align-self: unset;  /* row handles alignment */
  max-width: 100%;    /* bubble fills row width */
  position: relative;
}

/* ── Reply quote block (inside the bubble) ────────────────── */
.msg-reply-quote {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 6px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
  transition: opacity .15s;
}
.msg-reply-quote:hover { opacity: .82; }
.msg-reply-quote .rq-bar {
  width: 3px;
  flex-shrink: 0;
  background: rgba(255,255,255,.55);
  border-radius: 2px 0 0 2px;
}
.msg-row.them .msg-reply-quote .rq-bar {
  background: var(--primary);
}
.msg-reply-quote .rq-body {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,.18);
  padding: 5px 9px;
  border-radius: 0 8px 8px 0;
}
.msg-row.them .msg-reply-quote .rq-body {
  background: rgba(34,136,145,.1);
}
.rq-who {
  font-size: 10.5px; font-weight: 800; margin-bottom: 2px;
  color: rgba(255,255,255,.85);
}
.msg-row.them .rq-who {
  color: var(--primary);
}
.rq-text {
  font-size: 11.5px; color: rgba(255,255,255,.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-row.them .rq-text { color: var(--text-2); }

/* ── Hover action bar ─────────────────────────────────────── */
/* Positioned ABOVE the bubble so it never overflows the horizontal bounds
   of .chat-msgs (which has overflow-y:auto that also clips on X). */
.msg-actions {
  position: absolute;
  bottom: calc(100% + 4px); /* float above bubble */
  top: auto;
  transform: none;
  display: flex; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index: 10;
  opacity: 0; pointer-events: none;
  transition: opacity .14s;
  white-space: nowrap;
}
/* Bridge the 4px gap between the action bar bottom edge and the bubble top.
   Without this, the mouse briefly leaves both elements while crossing the gap
   and the action bar disappears before the cursor reaches it. */
.msg-actions::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px;
  top: 100%;
  height: 12px; /* covers the 4px gap + 8px of bubble overlap */
}
/* Align to the same edge as the bubble */
.msg-row.me   .msg-actions { right: 0; left: auto; }
.msg-row.them .msg-actions { left: 0; right: auto; }

.msg-row:hover .msg-actions,
.msg-row:focus-within .msg-actions {
  opacity: 1; pointer-events: auto;
}
/* Touch: show on tap via .actions-open class toggled by JS */
.msg-row.actions-open .msg-actions {
  opacity: 1; pointer-events: auto;
}

.msg-action-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2);
  font-size: 15px; line-height: 1;
  transition: background .12s, color .12s, transform .1s;
  padding: 0;
}
.msg-action-btn:hover {
  background: var(--panel-2); color: var(--primary);
  transform: scale(1.1);
}
.msg-action-btn svg { display: block; width: 14px; height: 14px; }

/* ── Emoji picker popup ───────────────────────────────────── */
/* position:fixed is set by JS so the picker is never clipped by
   any overflow:auto ancestor. The CSS just controls appearance. */
.emoji-picker-popup {
  position: fixed; /* JS overrides top/left/transform */
  z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  padding: 8px 10px;
  display: flex; gap: 4px;
  animation: emojiPickerIn .16s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes emojiPickerIn {
  from { opacity: 0; transform: scale(.82) translateY(6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.ep-emoji-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent;
  font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s;
  padding: 0;
}
.ep-emoji-btn:hover {
  background: var(--panel-2); transform: scale(1.18);
}

/* ── Reactions strip below bubble ─────────────────────────── */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.msg-reaction-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .1s;
  user-select: none;
}
.msg-reaction-badge.mine {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--panel-2));
}
.msg-reaction-badge:hover { transform: scale(1.08); }
.msg-reaction-badge .rc-count {
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.msg-reaction-badge.mine .rc-count { color: var(--primary); }

/* ── Reply preview bar (above the input) ─────────────────── */
.reply-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-2));
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  animation: replyBarIn .18s ease both;
}
@keyframes replyBarIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reply-preview-bar .rp-content { flex: 1; min-width: 0; }
.reply-preview-bar .rp-label {
  font-size: 11px; font-weight: 800; color: var(--primary);
  margin-bottom: 2px;
}
.reply-preview-bar .rp-text {
  font-size: 12px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-preview-bar .rp-cancel {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.reply-preview-bar .rp-cancel:hover {
  background: var(--border); color: var(--text);
}

/* ── Mobile: persistent quick-react button + tap-toggle action bar ── */
/* A small emoji button is always visible at the corner of each bubble
   so users don't need to discover long-press. */
.msg-quick-react {
  display: none; /* desktop: hidden (hover action bar is used) */
}
@media (hover: none) {
  /* On touch devices hover never fires — rely on tap-toggle only. */
  .msg-row:hover .msg-actions { opacity: 0; pointer-events: none; }
  .msg-row.actions-open .msg-actions { opacity: 1; pointer-events: auto; }
  .msg-action-btn { width: 34px; height: 34px; font-size: 18px; }
  .ep-emoji-btn   { width: 40px; height: 40px; font-size: 22px; }

  /* Always-visible quick-react button sits below the bubble, same side */
  .msg-quick-react {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    margin-top: 3px;
    transition: background .12s, transform .1s;
    flex-shrink: 0;
    /* position it inline under the bubble so it doesn't overflow */
  }
  .msg-quick-react:active { transform: scale(.9); }
  /* Place it on the message's own side */
  .msg-row.me   .msg-quick-react { align-self: flex-end; }
  .msg-row.them .msg-quick-react { align-self: flex-start; }
}

/* Emoji picker on mobile: bottom-anchored — handled by JS (position:fixed) */


/* =========================================================================
 * Phase 4 — Button tap animations
 * ========================================================================= */
@keyframes btn-tap {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.93); }
    100% { transform: scale(1); }
}
.start-btn:active,
.stop-btn:active,
.send-btn:active,
.next-btn:active {
    animation: btn-tap 0.18s ease;
}
.send-btn:active { filter: brightness(1.15); }
.filter-pill.safe-mode-pill:active { animation: btn-tap 0.18s ease; }

/* =========================================================================
 * Phase 1 — Safe Mode (NSFW) toggle button + warning modal
 * ========================================================================= */
.filter-pill.safe-mode-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer; user-select: none;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.filter-pill.safe-mode-pill svg { width: 14px; height: 14px; }
.filter-pill.safe-mode-pill.safe-on {
    background: linear-gradient(135deg, #1ea7a3, #228891);
    color: #fff; border-color: rgba(255,255,255,0.18);
    box-shadow: 0 2px 10px rgba(34,136,145,0.35);
}
.filter-pill.safe-mode-pill.safe-on:hover { filter: brightness(1.08); }
.filter-pill.safe-mode-pill.safe-off {
    background: rgba(160,160,160,0.18); color: #999;
    border-color: rgba(255,255,255,0.10);
    text-decoration: line-through;
}
.filter-pill.safe-mode-pill.safe-off svg { opacity: 0.55; }

.safe-mode-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.62);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: sm-fade-in 0.18s ease;
}
.safe-mode-modal {
    background: #181c22; color: #eaeaea;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
    padding: 24px 22px 18px; max-width: 380px; width: calc(100% - 32px);
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    animation: sm-pop-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.safe-mode-modal .sm-warn-icon { font-size: 36px; margin-bottom: 6px; }
.safe-mode-modal h3 { margin: 4px 0 10px; font-size: 18px; font-weight: 800; color: #fff; }
.safe-mode-modal p { margin: 6px 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.78); }
.safe-mode-modal .sm-warn-age { color: #ffb86b; margin-top: 8px; }
.safe-mode-modal .sm-actions { display: flex; gap: 10px; margin-top: 18px; }
.safe-mode-modal .sm-btn {
    flex: 1; padding: 11px 14px; border-radius: 10px;
    font-weight: 700; font-size: 13px; cursor: pointer; border: none;
    transition: background 0.15s, transform 0.1s;
}
.safe-mode-modal .sm-cancel { background: #228891; color: #fff; }
.safe-mode-modal .sm-cancel:hover { background: #1ea7a3; }
.safe-mode-modal .sm-confirm { background: rgba(255,255,255,0.08); color: #ff8a8a; }
.safe-mode-modal .sm-confirm:hover { background: rgba(255,138,138,0.12); }
.safe-mode-modal .sm-btn:active { transform: scale(0.97); }

@keyframes sm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-pop-in {
    0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ============================================================
   v2 Safety + Premium overhaul
   - .tile-nsfw: NSFW 18+ toggle in TOP-RIGHT of partner tile.
     Mirrors .tile-volume hover-only pattern; touch devices show always.
   - .premium-modal: 3-plan paywall (₹ in India, $ everywhere else)
   - .filter-pill locked state — gender + country are now premium
   - .fpanel-gender-options: gender selector inside genderPanel
   ============================================================ */
/* ---------- Top-right NSFW pill (hover-only on hover-capable devices) ---------- */
.tile .tile-nsfw {
  position: absolute; top: 12px; right: 14px;
  width: auto; height: auto; min-height: 28px;
  bottom: auto;            /* override .tile-flag base */
  padding: 4px 10px 4px 8px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); color: rgba(220,220,220,.95);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  z-index: 6;
  opacity: 0; transition: opacity .18s, color .15s, transform .1s, background .15s;
  pointer-events: none;
  filter: none;
}
.tile .tile-nsfw .nsfw-label { line-height: 1; }
.tile .tile-nsfw svg { width: 16px; height: 16px; }
.tile:hover .tile-nsfw,
.tile:focus-within .tile-nsfw,
.tile .tile-nsfw:hover { opacity: 1; pointer-events: auto; }
.tile .tile-nsfw:hover { color: #fff; transform: scale(1.04); background: rgba(0,0,0,.7); }
.tile .tile-nsfw[aria-pressed="true"] {
  background: linear-gradient(135deg, #2a9aa5, #228891);
  color: #fff; border-color: rgba(255,255,255,.35);
}
.tile .tile-nsfw[aria-pressed="true"]:hover { background: linear-gradient(135deg, #34abb6, #1f7e87); }
.tile .tile-nsfw[aria-pressed="false"] {
  /* aria-pressed=false => filter is OFF, allowing 18+. Warning red. */
  background: linear-gradient(135deg, #ff4d6d, #c1144d);
  color: #fff; border-color: rgba(255,255,255,.35);
}
.tile .tile-nsfw[aria-pressed="false"]:hover { background: linear-gradient(135deg, #ff5d7c, #d8154f); }
/* Shield-tick = ON, shield-X = OFF */
.tile .tile-nsfw .nsfw-tick { display: inline; }
.tile .tile-nsfw .nsfw-x { display: none; }
.tile .tile-nsfw[aria-pressed="false"] .nsfw-tick { display: none; }
.tile .tile-nsfw[aria-pressed="false"] .nsfw-x { display: inline; }
.tile .tile-nsfw .nsfw-state { margin-left: 3px; font-weight: 900; letter-spacing: .06em; }
/* Touch / no-hover devices: always show */
@media (hover: none) {
  .tile .tile-nsfw { opacity: 1; pointer-events: auto; }
}
/* Hide on the self-tile and placeholder (only relevant on the live partner stream) */
.tile.self .tile-nsfw,
.tile.placeholder .tile-nsfw { display: none; }

/* ---------- Locked filter pill (premium upsell) ---------- */
.filter-pill .pill-lock {
  display: inline-block; margin-left: 4px; font-size: 11px;
  opacity: .85; transform: translateY(-1px);
}
.filter-pill.is-locked {
  position: relative;
  background: rgba(255,255,255,.06);
  color: rgba(230,230,230,.85);
  border-color: rgba(255,255,255,.12);
}
.filter-pill.is-locked:hover {
  background: linear-gradient(135deg, rgba(34,136,145,.18), rgba(26,107,115,.18));
  border-color: rgba(42,154,165,.6);
  color: #fff;
}

/* ---------- Gender filter options (premium-gated) ---------- */
.fpanel--gender { padding: 14px; }
.fpanel-gender-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 4px;
}
.gender-opt {
  background: rgba(255,255,255,.04); color: #fff;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 14px 6px 10px; cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.gender-opt:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.gender-opt[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(34,136,145,.28), rgba(26,107,115,.28));
  border-color: rgba(42,154,165,.75);
  color: #fff;
}
.gender-opt .go-emoji { font-size: 22px; line-height: 1; }
.gender-opt .go-label { font-size: 12px; }
.fpanel-premium-hint {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(34,136,145,.18), rgba(26,107,115,.18));
  border: 1px dashed rgba(42,154,165,.55);
  color: #fff; font-size: 12px; text-align: center;
}
.fpanel-premium-hint .fp-lock { margin-right: 6px; }

/* ---------- Premium modal (paywall) ---------- */
.modal.premium-modal { display: none; }
.modal.premium-modal.open {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 2147483646;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: sm-fade-in .18s ease;
}
.premium-card {
  position: relative;
  max-width: 460px; width: 92%;
  background: linear-gradient(170deg, #0c2226, #0f2d33 55%, #0a1c20);
  color: #fff; border: 1px solid rgba(42,154,165,.45);
  border-radius: 18px; padding: 26px 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 80px rgba(34,136,145,.22);
  animation: sm-pop-in .22s ease;
}
.premium-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; color: #fff;
  font-size: 20px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.premium-close:hover { background: rgba(255,255,255,.16); }
.premium-head { text-align: center; margin-bottom: 14px; }
.premium-crown { font-size: 34px; margin-bottom: 4px; }
.premium-head h3 {
  margin: 0 0 6px; font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, #ffb86b, #228891);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.premium-feature-name { background: inherit; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; }
.premium-sub { margin: 0; font-size: 13px; color: rgba(255,255,255,.75); }
.premium-perks {
  list-style: none; padding: 0; margin: 14px 0 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  font-size: 12.5px; color: rgba(255,255,255,.88);
}
.premium-perks li { display: flex; align-items: center; gap: 6px; }
.premium-perks .pk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 13px;
}
.premium-plans {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin: 4px 0 14px;
}
.plan-card {
  position: relative;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 14px 8px 12px;
  text-align: center; cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.plan-card:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); border-color: rgba(42,154,165,.55); }
.plan-card.featured {
  background: linear-gradient(160deg, rgba(34,136,145,.22), rgba(26,107,115,.30));
  border-color: rgba(42,154,165,.7);
  transform: scale(1.04);
}
.plan-card.featured:hover { transform: scale(1.06) translateY(-2px); }
.plan-card .plan-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ffb86b, #228891);
  color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
  white-space: nowrap;
}
.plan-card .plan-label { font-size: 13px; font-weight: 700; color: #fff; }
.plan-card .plan-price {
  font-size: 22px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #ffb86b, #228891);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-card .plan-tagline { font-size: 10.5px; color: rgba(255,255,255,.65); }
.plan-card .plan-buy {
  margin-top: 6px;
  background: #fff; color: #15616d;
  border: none; border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all .15s;
  width: 100%;
}
.plan-card.featured .plan-buy {
  background: linear-gradient(135deg, #ffb86b, #228891); color: #fff;
}
.plan-card .plan-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.3); }

.premium-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; font-size: 11.5px; color: rgba(255,255,255,.6);
}
.premium-restore {
  background: none; border: none; color: #6ad0d8; cursor: pointer;
  font-size: 12px; padding: 4px 0; text-decoration: underline;
}
.premium-secure { font-size: 11px; }

.premium-restore-panel {
  margin-top: 12px; padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.premium-restore-panel p { margin: 0 0 8px; font-size: 12px; color: rgba(255,255,255,.85); }
.premium-restore-panel input {
  width: 100%; padding: 9px 12px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 13px; outline: none;
}
.premium-restore-panel input:focus { border-color: #228891; }
.prp-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
.prp-cancel, .prp-submit {
  border: none; border-radius: 8px; padding: 7px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.prp-cancel { background: rgba(255,255,255,.1); color: #fff; }
.prp-submit { background: linear-gradient(135deg, #ffb86b, #228891); color: #fff; }

/* Premium-active badge replaces filter pill labels when entitled */
.premium-badge-active {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(255,184,107,.22), rgba(34,136,145,.22));
  border: 1px solid rgba(42,154,165,.55);
  color: #ffd58a; font-weight: 700; font-size: 11px;
  padding: 3px 8px; border-radius: 999px;
  margin-left: 6px;
}

/* Mobile: paywall as bottom-sheet */
@media (max-width: 640px) {
  .modal.premium-modal.open { align-items: flex-end; }
  .premium-card {
    width: 100%; max-width: none;
    border-radius: 22px 22px 0 0;
    padding: 22px 16px 18px;
    animation: sm-fade-in .22s ease;
  }
  .premium-plans { grid-template-columns: 1fr; gap: 8px; }
  .plan-card { flex-direction: row; justify-content: space-between; text-align: left; padding: 12px 14px; }
  .plan-card.featured { transform: none; }
  .plan-card .plan-buy { width: auto; margin-top: 0; }
  .premium-perks { grid-template-columns: 1fr; }
  .tile .tile-nsfw { top: 8px; right: 10px; padding: 4px 9px; font-size: 10.5px; }
}

/* Hint line that replaced the old "See Anyway" checkbox under the
   face-blur overlay. Kept tiny and faded so it doesn't compete with
   the partner's video when the face check passes. */
.face-blur-overlay .fbo-hint {
    font-size: 11px;
    opacity: 0.75;
    padding: 4px 16px 0;
    text-align: center;
    color: rgba(255,255,255,.9);
    max-width: 280px;
}

/* ============================================================
   Premium modal — smooth transition-based open / close
   Overrides the older one-shot @keyframes (sm-fade-in / sm-pop-in)
   which only animated on entry. Now both enter and exit feel
   like a single buttery slide-up + scale, mobile or desktop.
   ============================================================ */
.modal.premium-modal {
    display: none;
    opacity: 0;
    transition: opacity .26s ease;
    /* GPU hint for the backdrop blur, so close doesn't stutter on mid-range Androids. */
    will-change: opacity;
}
.modal.premium-modal.showing,
.modal.premium-modal.open,
.modal.premium-modal.closing {
    display: flex;
}
.modal.premium-modal.showing { opacity: 0; pointer-events: none; animation: none; }
.modal.premium-modal.open    { opacity: 1; animation: none; }
.modal.premium-modal.closing { opacity: 0; pointer-events: none; }

.premium-card {
    /* override the inherited keyframe animation so transitions can drive both directions */
    animation: none !important;
    opacity: 0;
    transform: translateY(28px) scale(.96);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
    will-change: transform, opacity;
}
.modal.premium-modal.open .premium-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.modal.premium-modal.closing .premium-card {
    opacity: 0;
    transform: translateY(28px) scale(.96);
}

/* Mobile bottom-sheet: slide all the way up from offscreen / down on close. */
@media (max-width: 640px) {
    .premium-card {
        transform: translateY(110%);
    }
    .modal.premium-modal.closing .premium-card {
        transform: translateY(110%);
    }
}

/* Disable the implicit user-select-on-tap that makes scrolling jank
   inside the plans list. */
.premium-card * { -webkit-tap-highlight-color: transparent; }