/* Full-window takeover: lock the page behind the fixed Stage shell so iOS/Android
   can't scroll into white space or rubber-band. Classes added by meetgle-stage.js. */
html.meetgle-stage-html,
html.meetgle-stage-html body.meetgle-stage-active {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

#meetgle-video-container.meetgle-stage-shell {
  --ink: #0b0b0d;
  --text: #ffffff;
  --text-dim: rgba(255,255,255,.62);
  --glass: rgba(16,16,20,.55);
  --glass-line: rgba(255,255,255,.12);
  --accent: var(--button-color, var(--theme-button-primary, #ff2e68));
  --accent-hover: var(--button-hover-color, var(--theme-button-primary-hover, #ff4c7f));
  --accent-active: var(--button-active-color, var(--theme-button-primary-active, #e8275d));
  --accent-gradient: var(--theme-gradient-primary, var(--accent));
  --accent-glow: var(--theme-glow-color-1, rgba(255,46,104,.6));
  --accent-contrast: #fff;
  --danger: #f43f4e;
  --live: #2ee38b;
  --gold: #ffc83d;
  --flame: #ff8a4c;  /* streak flame (fixed brand color, like --gold/--live) — single source */
  --r: 26px;
  --pill: 999px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /* Override the base #meetgle-video-container clamps (width/min-height:100vh/
     min-width/max-width:100vw) which otherwise force the shell to the full,
     behind-the-browser-bar viewport regardless of the heights below. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100vh;                              /* ancient fallback */
  height: 100svh;                             /* small viewport — fits above browser chrome */
  height: var(--meetgle-app-height, 100svh);  /* JS-measured visible height (wins) */
  min-height: 0;
  max-height: var(--meetgle-app-height, 100svh);
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: "Sora", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
}

#meetgle-video-container.meetgle-stage-shell *,
#meetgle-video-container.meetgle-stage-shell *::before,
#meetgle-video-container.meetgle-stage-shell *::after {
  box-sizing: border-box;
}

#meetgle-video-container.meetgle-stage-shell button {
  font: inherit;
}

#meetgle-video-container.meetgle-stage-shell svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-bg {
  position: absolute;
  inset: -12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  z-index: 0;
  filter: brightness(.34) saturate(.45) blur(4px);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(820px 460px at 50% 40%, rgba(11,11,13,.72), rgba(11,11,13,.2) 62%, transparent),
    linear-gradient(to bottom, rgba(11,11,13,.92), rgba(11,11,13,.38) 20%, rgba(11,11,13,.38) 46%, var(--ink) 72%);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-topbar {
  position: relative;
  z-index: 50;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 14px 16px 0;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand::before {
  content: "M";
  width: 27px;
  height: 27px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  flex: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand.has-logo::before {
  display: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand img {
  max-width: 156px;
  max-height: 27px;
  object-fit: contain;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-energy,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-icon,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-avatar,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-filter,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--pill);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg button.is-wide {
  width: auto;
  padding: 0 11px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg button.is-wide svg {
  color: var(--flame);
  /* The flame is drawn high in its viewBox; nudge it down to optical center.
     The number sits correctly at pure flex-center, so it gets no nudge. */
  transform: translateY(2px);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg button.is-wide span {
  display: inline-block;
  line-height: 1;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-energy {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: var(--pill);
  border-color: var(--glass-line);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-streak-mobile {
  display: none;
  color: var(--flame);
}

/* Match the seg flame exactly: flame nudged to optical centre, number stays put. */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-streak-mobile svg {
  transform: translateY(2px);
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-streak-mobile span {
  transform: translateY(1px);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.16);
  margin: 0 4px;
  flex: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg svg,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-energy svg,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-icon svg {
  width: 18px;
  height: 18px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg button:hover,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-energy:hover,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-icon:hover,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-filter:hover {
  background: rgba(255,255,255,.16);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sparks svg {
  stroke: var(--gold);
  fill: var(--gold);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pill);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-avatar {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--pill);
  overflow: hidden;
  cursor: pointer;
  flex: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Unread count badge — a real number pill (not a tiny dot) so a new message /
   notification is unmissable. Sits on the top-right corner of the 38px icon. */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 9px;
  background: var(--accent);
  border: 2px solid #0e0e12;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  box-shadow: 0 2px 8px var(--accent-glow);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-center {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 20px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-online {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 15px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-online b {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  transition: transform .24s ease, opacity .24s ease;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-online b.is-changing {
  transform: translateY(-2px);
  opacity: .82;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-pulse,
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-green-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  animation: meetgleStagePulse 1.8s infinite;
  flex: none;
}

@keyframes meetgleStagePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,227,139,.45); }
  50% { box-shadow: 0 0 0 7px rgba(46,227,139,0); }
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-center h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-center h1 span {
  color: var(--text-dim);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-cta {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  padding: 16px 30px 16px 16px;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent-gradient);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  /* Tight, low-spread bloom — roughly a third of the old wide glow, just enough
     to lift the pill off the dark background without a halo. */
  box-shadow: 0 5px 16px -8px var(--accent-glow);
  transition: transform .14s, box-shadow .14s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px -8px var(--accent-glow);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stack {
  display: flex;
  align-items: center;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stack img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stack img + img {
  margin-left: -11px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-filter {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-filter svg {
  width: 22px;
  height: 22px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo {
  position: relative;
  z-index: 5;
  flex: none;
  width: calc(100% - 32px);
  max-width: 620px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 11px 12px;
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(255,200,61,.16), rgba(16,16,20,.55) 45%);
  border: 1px solid rgba(255,200,61,.38);
  color: #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px -12px rgba(255,200,61,.25);
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo:hover {
  transform: translateY(-2px);
  border-color: rgba(255,200,61,.6);
  box-shadow: 0 14px 40px -12px rgba(255,200,61,.4);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,235,180,.10) 45%, rgba(255,235,180,.16) 50%, rgba(255,235,180,.10) 55%, transparent);
  animation: meetgleStageSheen 6.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes meetgleStageSheen {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stackwrap {
  position: relative;
  flex: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo .meetgle-stage-stack img {
  width: 34px;
  height: 34px;
  border-color: #2a2415;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-vcheck {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--live);
  border: 2px solid #1a1812;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-vcheck svg {
  width: 8px;
  height: 8px;
  color: #06281a;
  stroke-width: 3;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-title {
  color: #ffe9b8;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-sub b {
  color: #fff;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-short {
  display: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-go {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 18px;
  border-radius: var(--pill);
  background: var(--gold);
  color: #221a00;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 18px -6px rgba(255,200,61,.55);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-arrow {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

/* Creator earnings widget — premium home. Premium creators don't browse the
   live shelf (it's hidden for them), so this richer panel takes that space: a
   headline balance, three at-a-glance stat tiles (today / this month / chat
   time, fed live by the premium-dashboard AJAX + meetgleSparksEarned) and a row
   of quick actions. Glassy gold-tinted surface to read as "premium". */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator {
  position: relative;
  z-index: 5;
  flex: none;
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 0 auto 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  border-radius: 22px;
  background: #17171b;
  border: 1px solid rgba(255,200,61,.3);
  color: #fff;
}
/* Headline row: coin · balance · today pill */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-top {
  display: flex;
  align-items: center;
  gap: 13px;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-badge {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 26%, #ffe08a, #ffc83d 78%);
  box-shadow: 0 4px 14px -4px rgba(255,200,61,.6);
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-badge svg {
  width: 22px;
  height: 22px;
  stroke: #4a3000 !important;
  fill: #4a3000 !important;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-dim);
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-figs {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-bal {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-usd {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-today {
  flex: none;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--live);
  background: rgba(46,227,139,.14);
  border-radius: var(--pill);
  padding: 5px 10px;
  white-space: nowrap;
}
/* Stat tiles */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat-val {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat-usd {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat-key {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Quick-action row: equal-width pills */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links {
  display: flex;
  gap: 8px;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--pill);
  border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button:hover {
  background: rgba(255,255,255,.16);
}

/* Premium creators don't need the live-crowd shelf — hide it and let the
   earnings widget breathe in the freed space. */
#meetgle-video-container.meetgle-stage-shell.is-premium .meetgle-stage-shelf {
  display: none !important;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf {
  position: relative;
  z-index: 5;
  flex: none;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 9px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf-head .meetgle-stage-pulse {
  width: 7px;
  height: 7px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf-head button {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  cursor: pointer;
  box-shadow: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf-head svg {
  width: 14px;
  height: 14px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-rail {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-rail::-webkit-scrollbar {
  display: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-card {
  position: relative;
  flex: none;
  width: 150px;
  aspect-ratio: 3 / 4.3;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #16161a;
  color: #fff;
  scroll-snap-align: start;
  cursor: default;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-card::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(to top, rgba(8,8,10,.92), transparent);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-online-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(8,8,10,.55);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-meta {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-flag {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 12px;
  padding: 0 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-age {
  color: var(--text-dim);
  font-size: 11px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock {
  position: relative;
  z-index: 5;
  flex: none;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 42px;
  margin: 0 16px 10px;
  padding: 2px 0 calc(2px + env(safe-area-inset-bottom));
  border-radius: 22px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock button.active {
  color: var(--accent);
  font-weight: 700;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock svg {
  width: 23px;
  height: 23px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock-msgbadge {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(4px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  place-items: center;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet {
  position: fixed;
  z-index: 95;
  top: 64px;
  right: 18px;
  width: 340px;
  max-height: calc(100dvh - 64px - 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #141417;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s, transform .18s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-grab {
  display: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-head img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

/* The head avatar IS the "view profile" trigger (replaces the old button):
   gold ring + a light eye overlay signal it's clickable. */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-avatar {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-avatar.is-clickable {
  cursor: pointer;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-avatar.is-clickable img {
  border: 2px solid var(--gold);
  box-sizing: border-box;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-avatar-eye {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  transition: background .15s;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-avatar-eye svg {
  width: 17px;
  height: 17px;
  stroke: rgba(255,255,255,.92);
  fill: none;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-avatar.is-clickable:hover .meetgle-stage-sheet-avatar-eye {
  background: rgba(0,0,0,.46);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-head strong {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-head small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 1px;
  color: var(--text-dim);
  font-size: 12px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-vbadge {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-vbadge.is-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-vbadge.is-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-edit {
  margin-left: auto;
  flex: none;
  height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pill);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item .ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item svg {
  width: 17px;
  height: 17px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item .chev {
  margin-left: auto;
  color: var(--text-dim);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item .chev svg {
  width: 15px;
  height: 15px;
}

/* Anchor items (e.g. Log out) sit flush with the button items. */
#meetgle-video-container.meetgle-stage-shell a.meetgle-stage-sheet-item {
  text-decoration: none;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item:last-of-type {
  border-bottom: 0;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item.is-danger {
  color: #ff6b6b;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-item.is-danger .ic {
  background: rgba(255,107,107,.12);
}

/* Guest auth block — Log in / Create account buttons in the profile sheet. */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 8px;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-auth-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s, filter .15s;
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-auth-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-auth-btn:active {
  transform: translateY(1px);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-auth-btn.is-primary {
  border-color: transparent;
  background: var(--accent-gradient);
  box-shadow: 0 12px 32px -12px var(--accent-glow);
}

#meetgle-video-container.meetgle-stage-shell .meetgle-stage-auth-btn.is-primary:hover {
  background: var(--accent-gradient);
  filter: brightness(1.05);
}

/* Gender picker is lifted into the hero center (see meetgle-stage.js) and shown
   inline in place of the headline/CTA while picking. The `is-picking` state on
   the shell hides the hero copy so only the gender flow shows. */
/* Shared .meetgle-drawer-* classes live in meetgle-videochat.css (always loaded,
   used by both the match-prefs drawer and the gender drawer). Gender-specific
   content styling follows here. */
/* Header — left-aligned icon/back + per-step title + step count + close
   (mirrors the match-preferences drawer header). Full-width on every size:
   no centered island, the sheet itself is the shared full-width drawer. */
.meetgle-gender-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.meetgle-gender-head-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
}
.meetgle-gender-head-ic svg { width: 15px; height: 15px; }

.meetgle-gender-back {
  flex: none;
  width: 30px;
  height: 30px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: none;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, color .15s;
}
.meetgle-gender-back:hover { background: rgba(255,255,255,.12); color: #fff; }
.meetgle-gender-back svg { width: 16px; height: 16px; }

.meetgle-gender-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: left;        /* override inherited text-align:center from #meetgle-video-container */
  color: rgba(255,255,255,.85);
}
.meetgle-gender-count {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05);
  padding: 4px 9px;
  border-radius: 999px;
}

/* Step state is a single class (.gp-step2) toggled on #genderPickerContainer;
   CSS drives the title/count swap, progress fill, back button and which step
   panel shows — JS only flips the class. */
.meetgle-gender-title .gp-t2,
.meetgle-gender-count .gp-c2 { display: none; }
#genderPickerContainer.gp-step2 .meetgle-gender-title .gp-t1,
#genderPickerContainer.gp-step2 .meetgle-gender-count .gp-c1 { display: none; }
#genderPickerContainer.gp-step2 .meetgle-gender-title .gp-t2,
#genderPickerContainer.gp-step2 .meetgle-gender-count .gp-c2 { display: inline; }
#genderPickerContainer.gp-step2 .meetgle-gender-head-ic { display: none; }
#genderPickerContainer.gp-step2 .meetgle-gender-back { display: grid; }

.meetgle-gender-progress { display: flex; gap: 6px; margin-bottom: 6px; }
.meetgle-gender-progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); transition: background .3s; }
.meetgle-gender-progress .gp-seg1 { background: var(--accent); }
#genderPickerContainer.gp-step2 .meetgle-gender-progress .gp-seg2 { background: var(--accent); }

#genderStep2 { display: none; }
#genderPickerContainer.gp-step2 #genderStep1 { display: none; }
#genderPickerContainer.gp-step2 #genderStep2 { display: block; animation: meetgleGenderStepIn .28s cubic-bezier(.32,.72,0,1); }
@keyframes meetgleGenderStepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.meetgle-gender-caption {
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
  text-align: left;        /* override inherited text-align:center from #meetgle-video-container */
  margin: 14px 2px 8px;
}

.meetgle-gender-options { display: flex; flex-direction: column; }

.meetgle-gender-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.meetgle-gender-row:last-child { border-bottom: 0; }
.meetgle-gender-row:hover { background: rgba(255,255,255,.04); }
.meetgle-gender-row.is-selected { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px var(--accent); }
.meetgle-gender-row.is-locked { cursor: default; }
.meetgle-gender-row.is-locked:hover { background: transparent; }
.meetgle-gender-row.is-locked .meetgle-gender-ic,
.meetgle-gender-row.is-locked .meetgle-gender-row-main > span { opacity: .55; }

.meetgle-gender-ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
}
.meetgle-gender-ic svg { width: 21px; height: 21px; }
.meetgle-gender-ic.is-male { color: #60a5fa; background: rgba(96,165,250,.14); }
.meetgle-gender-ic.is-female { color: #f472b6; background: rgba(236,72,153,.14); }
.meetgle-gender-ic.is-everyone { color: #c084fc; background: rgba(168,85,247,.14); }

.meetgle-gender-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meetgle-gender-row-main > span { font-size: 15px; font-weight: 600; color: #fff; }
.meetgle-gender-row-main small { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 500; }

.meetgle-gender-chev { flex: none; color: rgba(255,255,255,.35); display: flex; }
.meetgle-gender-chev svg { width: 18px; height: 18px; }
.meetgle-gender-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px var(--accent-glow);
}
.meetgle-gender-go svg { width: 12px; height: 12px; }
.meetgle-gender-price {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.meetgle-gender-price svg { width: 13px; height: 13px; }

#meetgle-video-container.meetgle-stage-shell.is-idle .video-chat-layout {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: none !important;
  background: transparent !important;
  pointer-events: none;
}

#meetgle-video-container.meetgle-stage-shell.is-idle .video-section {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

#meetgle-video-container.meetgle-stage-shell.is-idle .controls-and-chat,
#meetgle-video-container.meetgle-stage-shell.is-idle #preStartControls,
#meetgle-video-container.meetgle-stage-shell.is-idle #bg-swirl,
#meetgle-video-container.meetgle-stage-shell.is-idle #remoteLogo,
#meetgle-video-container.meetgle-stage-shell.is-idle #remoteVideo,
#meetgle-video-container.meetgle-stage-shell.is-idle .remote-video-report,
#meetgle-video-container.meetgle-stage-shell.is-idle .meetgle-extra-btn-wrap,
#meetgle-video-container.meetgle-stage-shell.is-idle #premiumSessionBar,
#meetgle-video-container.meetgle-stage-shell.is-idle .spark-ad-card {
  display: none !important;
}

#meetgle-video-container.meetgle-stage-shell.is-idle #genderPickerContainer {
  pointer-events: auto;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-bg,
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-shade,
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-center,
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-shelf,
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-creator,
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-dock {
  display: none !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .video-chat-layout {
  position: relative !important;
  /* z-index:auto (NOT a number) so this does NOT form a stacking context — else
     it traps the controls/popovers below the floating banner (z-index:70). With
     auto, .controls-and-chat (z:80) and the popups inside it can paint above the
     banner. */
  z-index: auto !important;
  flex: 1;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  gap: 14px;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  background: transparent !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .video-section,
#meetgle-video-container.meetgle-stage-shell.is-chatting .controls-and-chat {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r);
  background: #101013;
}

/* !important is REQUIRED here: meetgle-videochat.css forces the legacy mobile
   layout with `.video-wrapper.remote-video/.local-video { height:50vh !important }`
   — without !important that wins (important beats specificity), collapsing the
   Stage video to half its frame. */
#meetgle-video-container.meetgle-stage-shell.is-chatting .video-wrapper.remote-video,
#meetgle-video-container.meetgle-stage-shell.is-chatting .video-wrapper.local-video {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: inherit;
  overflow: hidden;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting #remoteVideo,
#meetgle-video-container.meetgle-stage-shell.is-chatting #localVideo {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .top-controls,
#meetgle-video-container.meetgle-stage-shell.is-chatting .live-counter-background,
#meetgle-video-container.meetgle-stage-shell.is-chatting #profile-showcase {
  display: none !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting #remoteUserInfoPill {
  top: 14px !important;
  left: 14px !important;
  border-radius: var(--pill) !important;
  background: var(--glass) !important;
  border: 1px solid var(--glass-line) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Flag avatar: a square box inside the rounded pill looks off — make it a soft
   circle that echoes the pill's rounding. */
#meetgle-video-container.meetgle-stage-shell #remoteUserInfoPill #remoteUserAvatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  font-size: 20px !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .remote-video-report {
  top: 14px !important;
  right: 14px !important;
  z-index: 60 !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting #reportBtn {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--pill) !important;
  background: var(--glass) !important;
  border: 1px solid var(--glass-line) !important;
  color: var(--text-dim) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  width: auto !important;
  bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: var(--pill);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  transform: translateX(-50%) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.6);
}

#meetgle-video-container.meetgle-stage-shell.is-chatting .ctrl-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: var(--pill) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting #stopChatBtn {
  width: 54px !important;
  height: 54px !important;
  background: var(--danger) !important;
  box-shadow: 0 8px 26px -8px rgba(244,63,78,.6);
}

#meetgle-video-container.meetgle-stage-shell.is-chatting #nextChatBtn {
  width: auto !important;
  min-width: 112px;
  height: 54px !important;
  padding: 0 24px !important;
  gap: 8px !important;
  background: #fff !important;
  color: #16161a !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

#meetgle-video-container.meetgle-stage-shell.is-chatting #nextChatBtn svg {
  color: #16161a !important;
}

/* "Next" label is hidden everywhere except the Stage in-call Next pill */
.meetgle-next-label {
  display: none;
}
#meetgle-video-container.meetgle-stage-shell.is-chatting #nextChatBtn .meetgle-next-label {
  display: inline;
  letter-spacing: -0.01em;
}

/* The shell turns ALL svgs into outline (fill:none; stroke:currentColor). Stop &
   Next should read as SOLID, so re-fill them. */
#meetgle-video-container.meetgle-stage-shell.is-chatting #stopChatBtn svg,
#meetgle-video-container.meetgle-stage-shell.is-chatting #nextChatBtn svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* Remove the legacy "NEW" pill on the chat-message button. */
#meetgle-video-container.meetgle-stage-shell #chatMsgNewPill {
  display: none !important;
}

/* Settings dot: a no-number sibling of the topbar count badges — same accent,
   same dark ring + pink glow — just a compact dot (it has no count to show). */
#meetgle-video-container.meetgle-stage-shell.is-chatting .btn-settings .indicator {
  width: 10px !important;
  height: 10px !important;
  top: 6px !important;
  right: 6px !important;
  background: var(--accent) !important;
  border: 2px solid #0e0e12 !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}

/* Anonymous in-stream ad: the gradient fills all the way to the bottom of the
   (now tall) remote area, while the text/CTA are pushed up with padding-bottom
   so they clear the dock + banner. */
#meetgle-video-container.meetgle-stage-shell.is-chatting .anon-instream-ad__overlay {
  bottom: 0 !important;
  padding-bottom: 100px !important;
  background: linear-gradient(to top, rgba(120,0,10,.92), rgba(120,0,10,.55) 55%, rgba(0,0,0,.18) 85%, transparent) !important;
}

/* ============================================================================
   Unified in-call popovers — settings / spark tip / chat message all share ONE
   design language that matches the Stage drawers: a solid #141417 surface (no
   blur, like the drawer sheet), a hairline border, the same radius, padding,
   row geometry, fonts and hover. Accent colours stay per-function (spark = gold,
   send = Stage accent).
   ============================================================================ */
#meetgle-video-container.meetgle-stage-shell .settings-popover,
#meetgle-video-container.meetgle-stage-shell .spark-popup,
#meetgle-video-container.meetgle-stage-shell .chatmsg-popover {
  background: #141417 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.6) !important;
  padding: 8px !important;
  gap: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Drawers have no pointer arrow — drop them for the same clean look */
#meetgle-video-container.meetgle-stage-shell .settings-popover::after,
#meetgle-video-container.meetgle-stage-shell .spark-popup::after,
#meetgle-video-container.meetgle-stage-shell .chatmsg-popover::after {
  display: none !important;
}
/* Rows + options: identical padding / radius / hover */
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row,
#meetgle-video-container.meetgle-stage-shell .spark-popup .sp-opt {
  padding: 11px 12px !important;
  border-radius: 12px !important;
  transition: background .15s !important;
}
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row:hover {
  background: rgba(255,255,255,.06) !important;
}
/* Spark amounts: neutral white text (matches settings rows) + gold hover tint */
#meetgle-video-container.meetgle-stage-shell .spark-popup .sp-opt {
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#meetgle-video-container.meetgle-stage-shell .spark-popup .sp-opt:hover {
  background: rgba(245,166,35,.15) !important;
}
/* Settings labels + icon tiles tuned to the same palette */
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row .label {
  font-size: 14px !important;
  color: rgba(255,255,255,.9) !important;
}
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row .icon-circle {
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
}
/* Keep the label column shrinkable + a guaranteed gap so the text never runs
   under the checkbox / toggle on the right. */
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row {
  gap: 12px !important;
}
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row .left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row .left > div {
  min-width: 0 !important;
}
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row .label,
#meetgle-video-container.meetgle-stage-shell .settings-popover .setting-row .sublabel {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#meetgle-video-container.meetgle-stage-shell .settings-popover .ctrl-checkbox,
#meetgle-video-container.meetgle-stage-shell .settings-popover .ctrl-toggle {
  flex-shrink: 0 !important;
}
/* Chat input + send: same radius / padding / palette as the others */
#meetgle-video-container.meetgle-stage-shell #chatMsgInput {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  color: #fff !important;
  font-size: 16px !important; /* keep ≥16 so iOS doesn't zoom on focus */
}
#meetgle-video-container.meetgle-stage-shell #chatMsgSendBtn {
  background: var(--accent) !important;
  border-radius: 12px !important;
  color: var(--accent-contrast) !important;
}
#meetgle-video-container.meetgle-stage-shell #chatMsgSendBtn svg {
  stroke: var(--accent-contrast) !important;
  fill: none !important;
}

/* Report flag: desktop keeps the legacy icon-buttons nudge (translate 1px,4px);
   mobile resets it to centered in the bigger rail chip — see the @media block. */

#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-extra-btn-wrap {
  display: none !important;
}

/* In-call earnings HUD (premium): the legacy #premiumSessionBar is a bottom bar
   that gets covered by the dock. Re-anchor it as a Stage glass pill, centered
   just above the dock (the slot that's free for premium — no "Only Girls" promo).
   It mirrors the control pill's WIDTH (measured into --meetgle-dock-w by
   stage.js) so the two read as a tidy stacked pair, with a clear gap between. */
#meetgle-video-container.meetgle-stage-shell.is-chatting #premiumSessionBar {
  position: fixed !important;
  top: auto !important;
  bottom: calc(128px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  z-index: 70 !important;
  border-radius: var(--pill);
}
#meetgle-video-container.meetgle-stage-shell.is-chatting #premiumSessionBar > div {
  width: var(--meetgle-dock-w, auto);
  box-sizing: border-box;
  background: var(--glass) !important;
  border: 1px solid var(--glass-line);
  border-radius: var(--pill);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.6);
  padding: 9px 18px !important;
  gap: 16px;
  justify-content: center !important;
}

/* The Stage topbar already carries mail/bell/avatar, so the second copy that
   user-avatar.php renders inside the partner frame is redundant. Hide every
   child of .remote-video-report except the report button (the node stays in
   the DOM so its badge/balance polling script keeps running). */
#meetgle-video-container.meetgle-stage-shell .remote-video-report > *:not(#reportBtn) {
  display: none !important;
}

/* In-call "Only Girls" banner — the SAME .meetgle-stage-promo element used on
   the home, floated bottom-left of the partner card (desktop). The centered
   control dock is ~430px wide, so the banner's max-width is tied to the space
   left of it (calc(50vw - 280px)) — this keeps a constant gap from the dock at
   every width instead of colliding on narrower desktops. */
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-promo {
  display: flex !important;
  position: fixed !important;
  left: 34px !important;          /* card left edge is 18px → ~16px inset inside it */
  right: auto !important;
  bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: min(400px, calc(50vw - 280px));
  margin: 0 !important;
  z-index: 70 !important;
}

/* In-call the banner stays compact — use the short "N online" subtitle at every
   size (the long "verified girls online now" is for the wide home band). */
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-promo .meetgle-stage-long {
  display: none !important;
}
#meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-promo .meetgle-stage-short {
  display: inline !important;
}

/* Narrowing desktop: drop the avatar stack first (buys ~80px so the banner stays
   readable beside the dock), then hide the banner entirely when there's truly no
   room — the dock takes priority. Mobile (<861px) has its own full-width layout. */
@media (min-width: 861px) and (max-width: 1200px) {
  #meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-promo .meetgle-stage-stackwrap {
    display: none !important;
  }
}
@media (min-width: 861px) and (max-width: 900px) {
  #meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-promo {
    display: none !important;
  }
}

@media (max-width: 860px) {
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-bg {
    grid-template-columns: repeat(3, 1fr);
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-shade {
    background:
      radial-gradient(420px 300px at 50% 34%, rgba(11,11,13,.7), rgba(11,11,13,.2) 62%, transparent),
      linear-gradient(to bottom, rgba(11,11,13,.92), rgba(11,11,13,.45) 18%, rgba(11,11,13,.45) 46%, var(--ink) 76%);
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-topbar {
    gap: 6px;
    padding: 12px 14px 0;
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  /* Topbar item VISIBILITY is handled by the tiered breakpoints below
     (1024 / 768 / 430), not here — this block only sets mobile sizing. */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-energy {
    height: 36px;
    padding: 0 11px;
    font-size: 12px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-icon,
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-avatar {
    width: 36px;
    height: 36px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-overlay {
    background: rgba(0,0,0,.5);
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-center {
    gap: 13px;
    padding: 0 18px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-center h1 {
    font-size: 23px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-online {
    font-size: 14px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-cta {
    min-height: 57px;
    padding: 14px 24px 14px 14px;
    font-size: 16px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-stack img {
    width: 29px;
    height: 29px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-filter {
    width: 54px;
    height: 54px;
  }

  /* Promo scales fluidly with viewport width so it never overflows or clips on
     small phones: avatars + "Try it now" button stay fixed (always fully shown),
     the text column shrinks and truncates, everything else uses clamp(). */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo {
    width: calc(100% - 28px);
    max-width: 560px;          /* contained, centered pill (not edge-to-edge) */
    margin: 0 auto 10px;       /* always centered on the page */
    padding: clamp(8px, 2.6vw, 11px);
    gap: clamp(7px, 2.4vw, 11px);
    border-radius: 18px;
  }

  /* Creator widget: contained/centered on mobile, slightly tighter padding */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator {
    width: calc(100% - 28px);
    max-width: 560px;
    margin: 0 auto 10px;
    gap: 11px;
    padding: 13px;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-badge {
    width: 40px;
    height: 40px;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-bal {
    font-size: 21px;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-stats {
    gap: 7px;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat {
    padding: 9px 10px;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat-val {
    font-size: 15px;
  }
  /* Four actions on a narrow card → icon-only pills so they don't crowd */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button {
    padding: 10px 0;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button span {
    display: none;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-creator-links button svg {
    width: 17px;
    height: 17px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo .meetgle-stage-stack img {
    width: clamp(25px, 7.4vw, 30px);
    height: clamp(25px, 7.4vw, 30px);
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-vcheck {
    width: 14px;
    height: 14px;
    right: -2px;
    bottom: -2px;
  }

  /* Text column is the flexible part — shrinks and truncates before the button */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-copy {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-title {
    font-size: clamp(12px, 3.6vw, 14px);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-sub {
    gap: 5px;
    font-size: clamp(9.5px, 2.9vw, 11px);
    max-width: 100%;
    overflow: hidden;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-long {
    display: none;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-short {
    display: inline;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-promo-go {
    flex: none;
    padding: clamp(7px, 2.4vw, 10px) clamp(11px, 3.8vw, 16px);
    font-size: clamp(11px, 3.2vw, 13px);
  }

  /* "Live now / Discover" header is hidden on mobile (the card rail below speaks
     for itself); Discover is still reachable from the bottom dock. */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-shelf-head {
    display: none !important;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-rail {
    gap: 8px;
    padding: 2px 14px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-person-card {
    width: clamp(112px, 29vw, 136px);
    border-radius: 16px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-dock {
    display: flex;
    gap: 36px;
    margin: 0 12px 10px;
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    opacity: 1;
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.32,.72,.25,1);
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-grab {
    display: block;
    width: 38px;
    height: 4px;
    margin: 2px auto 14px;
    border-radius: var(--pill);
    background: rgba(255,255,255,.18);
  }

  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet.is-open {
    transform: translateY(0);
  }

  /* Mobile in-call is one full-bleed partner video with the self camera as a
     small PiP. The legacy two-panel flex layout collapses unpredictably here,
     so pin both panels with position:fixed against the viewport — deterministic
     regardless of the legacy cascade. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .video-chat-layout {
    display: block !important;
    padding: 0 !important;
  }

  /* Partner = full-bleed, just below the header, above the floating controls */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .video-section {
    position: fixed !important;
    inset: auto !important;
    top: calc(56px + env(safe-area-inset-top)) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    /* defeat the legacy mobile `.video-section { min/max-height:50vh !important }`
       in meetgle-videochat.css, which otherwise clamps this to half the screen */
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 18px !important;
    z-index: 1 !important;
  }

  /* Self camera = fixed PiP, top-right. Explicit size (don't rely on
     aspect-ratio + inner content, which stretches the box). */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .controls-and-chat {
    position: fixed !important;
    inset: auto !important;
    /* 14px inside the partner frame (frame is top:56/right:8) so the inset
       matches the remote info pill exactly (pill is top:14/left:14 in-frame). */
    top: calc(70px + env(safe-area-inset-top)) !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    width: 90px !important;
    height: 126px !important;
    /* defeat the legacy `.controls-and-chat { min/max-height:50vh !important }` —
       min-height:50vh would otherwise win over height:146 and stretch the PiP */
    min-height: 0 !important;
    max-height: none !important;
    z-index: 80 !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    overflow: hidden !important;
  }

  /* Inside the PiP show only the local video — hide the top controls */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .controls-and-chat .top-controls {
    display: none !important;
  }

  /* Chat bubbles (#chatMessages IS .chat-msg-overlay) live inside the tiny PiP,
     so lift them out as a fixed overlay over the lower partner video — above the
     banner, clear of the right-hand rail. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting #chatMessages {
    display: flex !important;
    position: fixed !important;
    left: 22px !important;
    right: 80px !important;
    bottom: calc(168px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    max-height: 32vh !important;
    z-index: 60 !important;
  }

  /* Report flag is centered in the bigger mobile rail chip (no legacy nudge). */
  #meetgle-video-container.meetgle-stage-shell.is-chatting #reportBtn svg {
    transform: none !important;
  }

  /* In-stream ad: gradient to the bottom, content pushed up to clear the banner
     + dock, and inset on the sides so the wrapping text never runs under the rail. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .anon-instream-ad__overlay {
    bottom: 0 !important;
    padding: 16px 64px calc(178px + env(safe-area-inset-bottom)) !important;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting .anon-instream-ad__message {
    font-size: 17px !important;
  }

  /* Matchmaking status text ("Looking for…", "matched", "partner left"): a touch
     smaller on mobile and narrowed so it never runs behind the right-hand rail. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting #statusOutput {
    font-size: 12px !important;
    max-width: calc(100% - 120px) !important;
    line-height: 1.4 !important;
  }

  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls {
    left: 22px !important;
    right: 22px !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    gap: 10px;
    padding: 8px !important;
    /* CRITICAL: backdrop-filter establishes a containing block for position:fixed
       descendants. The rail chips live inside .bottom-controls, so its blur was
       pinning them to the dock box (inset 22px) instead of the viewport — making
       them sit too far from the edge AND misaligned with the report (which lives
       in .video-section and IS viewport-relative). Drop the blur on mobile so all
       five chips share the viewport as their containing block and line up. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(16,16,20,.8) !important;
  }

  /* Secondary controls + report form a vertical glass rail on the right edge
     (proposal: report on top, then settings, like, spark, chat). They're
     position:fixed so they leave the dock flow — the dock keeps only stop+next.
     IDs are untouched, so every meetgle-videochat.js listener still binds. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .remote-video-report,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls .settings-wrap,
  #meetgle-video-container.meetgle-stage-shell.is-chatting #heartBtn,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls .spark-wrap,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls .chatmsg-wrap {
    position: fixed !important;
    right: 22px !important;            /* aligns with the PiP / banner / dock right edge */
    left: auto !important;
    top: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;          /* center the icon regardless of inner markup */
    place-items: center !important;
    z-index: 85 !important;
  }
  /* Vertical rhythm: 52px pitch (42 chip + 10 gap), lowest chip clears the banner.
     Order bottom→top: chat, spark, like, settings, report. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls .chatmsg-wrap {
    bottom: calc(172px + env(safe-area-inset-bottom)) !important;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls .spark-wrap {
    bottom: calc(224px + env(safe-area-inset-bottom)) !important;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting #heartBtn {
    bottom: calc(276px + env(safe-area-inset-bottom)) !important;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting .bottom-controls .settings-wrap {
    bottom: calc(328px + env(safe-area-inset-bottom)) !important;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting .remote-video-report {
    bottom: calc(380px + env(safe-area-inset-bottom)) !important;
    flex: none !important;
    gap: 0 !important;
  }
  /* Rail chips: uniform 42px glass buttons */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .remote-video-report #reportBtn,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .settings-wrap #settingsBtn,
  #meetgle-video-container.meetgle-stage-shell.is-chatting #heartBtn,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .spark-wrap #sparkBtn,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .chatmsg-wrap #chatMsgBtn {
    width: 42px !important;
    height: 42px !important;
    /* #reportBtn is .icon-btn (40px, own box) while the rest are .ctrl-btn —
       normalize every chip to the same box so they line up perfectly. */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: var(--glass) !important;
    border: 1px solid var(--glass-line) !important;
    color: #fff !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  /* Rail popovers (settings / spark tip / chat input) all fly out to the LEFT of
     their chip, vertically centred on it — consistent, and never off-screen the
     way the legacy upward/right anchoring was. Width-capped to the viewport. */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .settings-wrap .settings-popover,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .spark-wrap .spark-popup,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .chatmsg-wrap .chatmsg-popover {
    position: absolute !important;
    right: calc(100% + 12px) !important;
    left: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: calc(100vw - 80px) !important;
  }
  /* The little pointer arrows assume an upward popover — hide them for the side flyout */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .settings-wrap .settings-popover::after,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .spark-wrap .spark-popup::after,
  #meetgle-video-container.meetgle-stage-shell.is-chatting .chatmsg-wrap .chatmsg-popover::after {
    display: none !important;
  }

  /* In-call promo: same width as the dock (left/right:22), lifted above it with
     a clean gap (dock is ~68px tall at bottom:20 → top ≈ 88; banner bottom:100
     leaves ~12px between them). */
  #meetgle-video-container.meetgle-stage-shell.is-chatting .meetgle-stage-promo {
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  }

  /* In-call earnings HUD on mobile: full-width to match the control dock exactly
     (same left/right:22 as .bottom-controls), lifted clear of it (dock top ≈ 88px
     → ~16px gap), compact (icons + values, verbose labels hidden). */
  #meetgle-video-container.meetgle-stage-shell.is-chatting #premiumSessionBar {
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting #premiumSessionBar > div {
    width: 100%;
    padding: 8px 14px !important;
    gap: 12px;
  }
  #meetgle-video-container.meetgle-stage-shell.is-chatting #premiumSessionBar span:not([id]) {
    display: none !important;
  }

  #meetgle-video-container.meetgle-stage-shell.is-chatting #stopChatBtn {
    width: 52px !important;
    height: 52px !important;
    flex: none;
  }

  #meetgle-video-container.meetgle-stage-shell.is-chatting #nextChatBtn {
    flex: 1;
    height: 52px !important;
    justify-content: center;
  }
}

/* ============================================================================
   TOPBAR RESPONSIVE TIERS
   Priority (drops last = highest): Avatar/sheet > Sparks > Bell > Mail > Streak
   > seg group. Anything dropped stays reachable in the avatar sheet (streak is
   shown by the username there) and, for Messages, the bottom dock. The tiers
   apply in both home and in-call, so desktop (≥1024) keeps the full set during
   a call too. Order matters: smaller-max queries come last so they win.
   ============================================================================ */
/* ≤1023 (tablet & down): drop the rewards seg group + divider; show the
   standalone streak pill in their place. */
@media (max-width: 1023px) {
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-seg,
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-divider {
    display: none !important;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-streak-mobile {
    display: flex !important;
  }
}
/* ≤767 (phones): drop Messages from the topbar — it lives in the bottom dock
   (home) and the avatar sheet. */
@media (max-width: 767px) {
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-mail {
    display: none !important;
  }
}
/* ≤429 (small phones): irreducible core = brand mark · Sparks(number) · Bell ·
   Avatar. Streak moves to the sheet (by the username); the ⚡ glyph is dropped
   (the number is what matters); the wordmark collapses to the site-icon mark. */
@media (max-width: 429px) {
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-streak-mobile {
    display: none !important;
  }
  /* Creator widget on tiny screens: drop the per-tile USD sub-line so each tile's
     number stays legible (the headline still shows total balance + USD). */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-stat-usd {
    display: none;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-sparks svg {
    display: none !important;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-sparks {
    gap: 0 !important;
  }
  /* Brand → compact site-icon mark when one is configured; otherwise the
     wordmark/logo just shrinks. */
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand.has-mark img:not(.meetgle-stage-brand-mark),
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand.has-mark span,
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand.has-mark::before {
    display: none !important;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand.has-mark .meetgle-stage-brand-mark {
    display: block;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand:not(.has-mark) img {
    max-width: 104px;
  }
  #meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand:not(.has-mark) span {
    font-size: 15px;
  }
}

/* Compact brand mark (WP site icon), only shown at ≤429 via the rule above. */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-brand-mark {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}

/* Streak chip by the username in the profile sheet — the home for the streak
   when it's dropped from the topbar on small screens. */
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: rgba(255,138,76,.15);
  color: var(--flame);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}
#meetgle-video-container.meetgle-stage-shell .meetgle-stage-sheet-streak svg {
  width: 13px;
  height: 13px;
  stroke: var(--flame);
  fill: none;
  transform: translateY(1px); /* same optical-centre nudge as the topbar flame */
}

@media (prefers-reduced-motion: reduce) {
  #meetgle-video-container.meetgle-stage-shell *,
  #meetgle-video-container.meetgle-stage-shell *::before,
  #meetgle-video-container.meetgle-stage-shell *::after {
    animation: none !important;
    transition: none !important;
  }
}