/* ============================================================================
 * audit-fixes.css — fixes for the 2026-06-26 visual audit.
 * ADDITIVE & ISOLATED: loaded LAST, after halftone-skin.css, so it does not
 * touch the actively-tuned skin files. Remove the index.html link to revert.
 *
 * Covers: F6 (quiet live-room field), F4 (tiny status/dot text),
 * F5 (small secondary controls), F1 (mobile responsive shell).
 * ========================================================================== */

/* ───────────────────────── F6 · quiet the live-room halftone ──────────────
 * The field competed with faces/labels. Give the room an opaque dark base and
 * dim its injected field; add legibility scrims under the top labels. */
.liveroom { background: #06070b !important; }
.liveroom .vfx-overlay-field { opacity: 0.38 !important; }
.liveroom .lr-main { background: rgba(4, 5, 8, 0.5) !important; }
.liveroom .lr-top {
  background: linear-gradient(180deg, rgba(4, 5, 8, 0.82), rgba(4, 5, 8, 0) 100%) !important;
}
/* keep the chat side fully legible */
.liveroom .lr-chat { background: rgba(8, 9, 13, 0.9) !important; }

/* ───────────────────────── F4 · lift tiny dot-matrix status text ──────────
 * Dot SVGs carry width/height attrs + a viewBox; overriding height (width:auto)
 * scales them up while preserving aspect. Floor decorative chrome at ~9-10px. */
.boost .dm-glyph,
.lr-live .dm-glyph,
.minilive .dm-glyph { height: 10px !important; width: auto !important; }

.page__seclabel .dm-glyph,
.aside-lbl .dm-glyph,
.gl .dm-glyph,
.musec-hero__kicker .dm-glyph,
.lbtab .dm-glyph,
.shop2-tab .dm-glyph,
.dpfm-celllabel .dm-glyph,
.dpfm-mlabel .dm-glyph,
.shop2-sec__h .dm-glyph { height: 11px !important; width: auto !important; }
/* 2026-07-02 audit A2: at 9px the 5x7 dot glyphs alias into mush ("LI+E",
   "DISCOUER") — 11px is the legibility floor for this matrix on 1x screens. */

.hcount .dm-glyph,
.mlist__head .cnt .dm-glyph,
.notif .dot .dm-glyph,
.lvcount .dm-glyph,
.lr-view .dm-glyph { height: 9.5px !important; width: auto !important; }

/* non-dot small status/meta text that the audit flagged at 9-10.5px */
.boost, .lr-live, .minilive { letter-spacing: 0.04em; }

/* ───────────────────────── F5 · raise small secondary controls (desktop) ──
 * Reply/React were 26×26 and easy to miss. Lift to a comfortable 32px and
 * widen the hover target; keep the compact look. */
.msg__actions button,
.cmsg__act,
.dmsg__act { width: 32px !important; height: 32px !important; }
.msg__actions { gap: 4px !important; }

/* search / currency / notification controls were ~38-40px — nudge to 40 min */
.searchbtn, .notif, .iconbtn { min-width: 40px; min-height: 40px; }
.wchip { min-height: 40px; }
/* live-room control buttons were 38px */
.lr-dbtn, .lr-send, .lr-giftbtn { min-width: 40px; min-height: 40px; }

/* ════════════════════════ F1 · MOBILE RESPONSIVE SHELL ════════════════════
 * The desktop rails were squeezing/covering content at phone widths. Below
 * 760px: turn the left rail into a bottom tab bar, hide the friends rail,
 * give every surface one full-width column, and meet 44px touch targets. */
@media (max-width: 760px) {
  /* shell → vertical stack; rail becomes a fixed bottom tab bar */
  .app3 { flex-direction: column; padding-bottom: 60px; }

  .app3 > .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100% !important; height: 60px;
    flex-direction: row; align-items: center; justify-content: space-around;
    gap: 0; padding: 0 4px;
    border-right: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 9, 12, 0.92) !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    z-index: 60;
  }
  /* drop rail furniture that doesn't belong in a bottom bar */
  .app3 > .rail .sqlogo,
  .app3 > .rail .railsep,
  .app3 > .rail .evt,
  .app3 > .rail > div[style*="flex"] { display: none !important; }
  /* nav + profile become evenly-spaced 44px+ tab targets */
  .app3 > .rail .sq {
    width: 46px !important; height: 46px !important;
    border-radius: 12px !important; margin: 0;
  }
  .app3 > .rail .sq::before { display: none !important; }      /* kill the left active pill */
  .app3 > .rail .sq.active { background: rgba(74, 222, 128, 0.14) !important; }

  /* HOME: stack live-strip over chat, hide the friends rail. 52vh fits the event
   * widget + Go Live CTA + ONE full live card (incl. host·category + watching row)
   * across phone widths, while leaving the chat ~48vh. */
  .app3 > .lives {
    width: 100% !important; height: auto; max-height: 52vh;
    border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cvy .lives__body { overflow: hidden !important; padding: 8px 10px 10px !important; display: flex; flex-direction: column; }
  /* compact the event widget + Go Live CTA so a full live card clears the fold */
  .cvy .lives__body .evtw { margin-bottom: 8px; padding: 9px 12px; gap: 5px; }
  .cvy .lives__body .evtw__timer { font-size: 17px; }
  .cvy .lives__body .evtw__icon { width: 22px; height: 22px; }
  .cvy .lives__body .golive-cta { margin-bottom: 10px; padding: 9px 12px; }
  .cvy .lives__body .golive-cta__ic { width: 34px; height: 34px; }
  .cvy .lives__body .golive-cta__txt b { font-size: 15px; }
  /* MOBILE live cards → horizontal snap strip: one full card visible + a peek of
   * the next (signals scrollability); cap the mosaic so the card clears the fold */
  .lives__cards {
    display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-height: 0;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .lives__cards::-webkit-scrollbar { height: 0; }
  .lives__cards > .lvcard { flex: 0 0 84%; width: 84%; margin: 0 !important; scroll-snap-align: start; }
  .lives__cards .mosaic { height: 108px !important; }
  .lives__cards .lvcard--hero .mosaic { height: 108px !important; }
  .app3 .stage { flex-direction: column; padding: 8px; gap: 8px; }
  .app3 .stage .chat { width: 100% !important; }
  /* friends/member rail off-canvas on phones — everywhere it appears
   * (home stage AND the .pcols content pages like Music/Videos) */
  .app3 .mlist { display: none !important; }

  /* PCOLS pages (Music/Shop/Videos/Leaderboard/Posts/Search/Notifs/Settings) */
  .pcols { flex-direction: column; margin: 8px; gap: 8px; }
  .pcol--side, .pcol--nav { display: none !important; }
  .pcols > .pcol--main { width: 100% !important; flex: 1 1 auto !important; }
  .pcol--main { width: 100% !important; }
  .pcol__head { padding: 14px 14px 10px; }
  .pcol__body { padding: 6px 12px 18px; }

  /* LIVE ROOM: video stage on top, chat below — stop chat from eating the screen */
  .liveroom .lr-body { flex-direction: column !important; }
  .liveroom .lr-main { flex: 0 0 auto !important; }
  .liveroom .lr-chat {
    width: 100% !important; flex: 1 1 auto !important;
    border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .liveroom .lr-top { padding: 8px 10px; flex-wrap: wrap; }

  /* 44px touch targets across the mobile UI */
  .msg__actions button,
  .cmsg__act, .dmsg__act,
  .searchbtn, .notif, .iconbtn,
  .lr-dbtn, .lr-send, .lr-giftbtn,
  .lbtab, .shop2-tab,
  .golive, .mgolive,
  .wchip { min-height: 44px !important; }
  .lbtab, .shop2-tab { padding: 0 14px !important; display: inline-flex; align-items: center; }
  .golive { height: 46px !important; }

  /* the floating music/video widgets shouldn't sit under the tab bar */
  .mwidget, .hub-mini { bottom: 70px !important; }

  /* a little more line-height for dense cards on small screens */
  .shop2-tab { font-size: 13px; }
}

/* very small phones: single-column live grid, tighter gutters */
@media (max-width: 420px) {
  .app3 > .lives { max-height: 52vh; }
  .pcols, .app3 .stage { margin: 6px; padding: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * FOLLOW-UP AUDIT (8099 · 2026-06-26) — overflow, label size, controls, noise
 * ════════════════════════════════════════════════════════════════════════ */

/* ───────── P2 · lift functional dot-matrix labels to a readable size ─────── */
.lives__head .dm-glyph,
.chan__title h2 .dm-glyph,
.mlist__head h3 .dm-glyph,
.pcol__head h1 .dm-glyph { height: 13px !important; width: auto !important; }
.page__seclabel .dm-glyph,
.shop2-sec__h .dm-glyph,
.aside-lbl .dm-glyph,
.side__head h3 .dm-glyph,
.lbtab .dm-glyph,
.shop2-tab .dm-glyph { height: 11px !important; width: auto !important; }
/* .dpfm-name/.dpfm-handle glyph rules removed 2026-07-02 — those selectors left
   TEXT_TARGETS (profile name/handle/stats render as plain text now); only the
   still-converted labels keep a size rule. */
.dpfm-celllabel .dm-glyph,
.dpfm-mlabel .dm-glyph { height: 10px !important; width: auto !important; }
.boost .dm-glyph,
.lr-live .dm-glyph,
.minilive .dm-glyph { height: 11px !important; width: auto !important; }

/* ───────── P3 · enlarge the remaining small secondary controls ──────────── */
.react, .stage .react { height: 30px !important; }
.lr-back { width: 40px !important; height: 40px !important; }
.wallet.compact .wchip { width: 44px !important; }

/* ───────── P4 · quiet the live-room background further ───────────────────── */
.liveroom .vfx-overlay-field { opacity: 0.2 !important; }
.liveroom .lr-main { background: rgba(4, 6, 8, 0.62) !important; }
.liveroom .lr-call { background: rgba(7, 10, 9, 0.55) !important; }

/* ════════════════════════ P1 · mobile overflow + grids ═══════════════════ */
@media (max-width: 760px) {
  /* contain every surface to the viewport — no horizontal bleed/scroll */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app3, .pcols, .pcol--main, .pcol__body, .stage, .chat, .musec-view {
    max-width: 100vw; overflow-x: hidden;
  }

  /* MUSIC: the 2-col internal grid (minmax 300px) forced width > 393px */
  .musec-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .plrow { grid-template-columns: repeat(2, 1fr) !important; }

  /* VIDEOS: 3-col grid → 2-col */
  .vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }  /* minmax(0,…): nowrap titles set min-width:auto and blew the tracks past the clipped column */

  /* tab rows + horizontal shelves scroll INSIDE the column, never widen page */
  .lbtabs, .pcol__tabs, .vid-modes { overflow-x: auto !important; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .vid-shelf, .plrow--scroll, .track { max-width: 100% !important; }

  /* LIVE ROOM dock wraps so the viewer-count button never clips off-screen */
  .liveroom .lr-dock { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .liveroom .lr-ctrls, .liveroom .lr-extra { flex-wrap: wrap; justify-content: center; }

  /* G2 · live-room participant grid → clean 2-up, no host mega-span */
  .liveroom .lr-call { padding: 10px; }
  .liveroom .lr-grid.n3, .liveroom .lr-grid.n4,
  .liveroom .lr-grid.n5, .liveroom .lr-grid.n6,
  .liveroom .lr-grid.n7, .liveroom .lr-grid.n8 {
    grid-template-columns: 1fr 1fr !important; grid-auto-rows: minmax(96px, 1fr);
  }
  .liveroom .lr-grid .pcard.host { grid-column: auto !important; grid-row: auto !important; }

  /* bottom tab bar: shrink items a hair so all 7 fit without clipping profile */
  .app3 > .rail { padding: 0 2px !important; overflow: hidden; }
  .app3 > .rail .sq { width: 44px !important; height: 44px !important; }

  /* mobile touch sizes for the controls flagged above */
  .react, .stage .react { height: 36px !important; }
  .lr-back, .lr-dbtn, .lr-views, .lr-giftbtn, .lr-giftopt { min-width: 44px !important; min-height: 44px !important; }
  .wchip { min-width: 44px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * RETEST FIXES (8099 · 2026-06-26) — bottom-nav clip, small controls, text
 * ════════════════════════════════════════════════════════════════════════ */

/* ── R2 · enlarge the remaining small secondary controls (all viewports) ── */
.searchbtn, .notif, .iconbtn { min-width: 44px !important; min-height: 44px !important; }
.lr-cgift, .lr-csend { width: 40px !important; height: 40px !important; }
.lr-chat__composer input { height: 40px !important; }
.shop-btn, .shop-btn--buy, .shop2-buy { min-height: 44px !important; }

/* ── R3 · lift the remaining tiny status text to ≥12px ──────────────────── */
.minilive { font-size: 12px !important; }
.minilive i { width: 5px !important; height: 5px !important; }
.vid-clip__dur { font-size: 12px !important; }
.shop-card__flag { font-size: 12px !important; }

@media (max-width: 760px) {
  /* ── R1 · bottom tab bar: flex-distribute all 7 items so NONE clip, and
   *     shrink the 46px profile avatar to fit inside its tab.
   *     ROOT CAUSE of the ~14px clip: the base .rail carries margin-left:14px
   *     (a desktop gutter) that shifted the whole fixed bar right → reset it. */
  .app3 > .rail { padding: 0 !important; gap: 0 !important; margin: 0 !important; overflow: hidden; }
  .app3 > .rail .sq {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
    max-width: none !important; height: 46px !important;
  }
  .app3 > .rail .sq.prof { padding: 0 !important; }
  .app3 > .rail .sq.prof .av {
    width: 32px !important; height: 32px !important; font-size: 13px !important;
  }
  .app3 > .rail .sq.prof .av .av__dot { width: 9px !important; height: 9px !important; }

  /* R2 · 44px touch targets for the controls flagged in the retest */
  .searchbtn, .notif, .iconbtn,
  .lr-cgift, .lr-csend,
  .shop-btn, .shop-btn--buy, .shop2-buy { min-width: 44px !important; min-height: 44px !important; }
  .lr-chat__composer input { height: 44px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * FULL-AUDIT ROUND (8099 · 2026-06-26) — side-rail glass, mobile profile/
 * search sheets, .lives gutter, leaderboard, P2 text/controls
 * ════════════════════════════════════════════════════════════════════════ */

/* ── A1 · content-page friends/activity rail had NO blur (text fought the
 *    field) — give .pcols > .mlist the same glass as the home chat rail ──── */
.pcols > .mlist {
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  background: linear-gradient(165deg, rgba(12,13,16,0.72), rgba(9,10,13,0.66)) !important;
}
/* the .pcol--side activity panels (leaderboard right column etc.) too */
.pcol--side, .pcols > .pcol--side {
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}

/* ── P2 · lift micro state/label text to >=12px ──────────────────────────── */
.pcard__hosttag { font-size: 12px !important; }
.shop-plus__kick { font-size: 12px !important; }
.shop-plus__trial { font-size: 12px !important; }
.lbrow__tag { font-size: 12px !important; }

/* ── P2 · enlarge the remaining small action controls ────────────────────── */
.searchbox__x { width: 36px !important; height: 36px !important; }
.mlist__min { width: 32px !important; height: 32px !important; }
.ntf-readall { padding: 7px 12px !important; font-size: 13px !important; }

@media (max-width: 760px) {
  /* ── A5 · zero the .lives left gutter (liquid-glass.css:56 sets
   *    margin:14px 0 14px 14px on BOTH .rail and .lives; R1 reset .rail only,
   *    so .lives stayed shifted x=14 → right=407 → clipped) ──────────────── */
  .app3 > .lives { margin: 0 0 8px 0 !important; max-width: 100vw; }

  /* ── A3 · mobile PROFILE = full-width bottom sheet (was pinned left:86px
   *    width:384px → clipped ~77px off-screen). Sub-flows (settings/edit/
   *    viewers) are the SAME .dpf--side, full-screen them on top. ─────────── */
  .dpf-layer { position: fixed !important; inset: 0 !important; z-index: 2000 !important; }
  .dpf.dpf--profilecard,
  .dpf.dpf--side {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    height: 92vh !important; min-height: 0 !important; max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 2001 !important;
  }
  .dpf.dpf--side { z-index: 2002 !important; }
  .dpf--profilecard .dpfm-hero { min-height: 200px; }

  /* ── A4 · mobile SEARCH = full-width top sheet (was a ~4px inline field
   *    crushed in the packed header row) ────────────────────────────────── */
  .searchbox.open {
    position: fixed !important; top: 8px !important; left: 8px !important; right: 8px !important;
    z-index: 1500 !important; height: 46px !important;
    flex: none !important; width: auto !important; box-sizing: border-box;
    padding: 0 6px 0 13px !important; gap: 8px !important;
    background: rgba(10,12,14,0.97) !important; border: 1px solid #3a4140 !important;
    border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .searchbox.open .searchbox__ic { flex: 0 0 auto; }
  .searchbox.open input { flex: 1 1 auto; min-width: 0; width: 100%; font-size: 16px !important; height: 100%; }
  .searchbox.open .searchbox__x { flex: 0 0 auto; width: 40px !important; height: 40px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * NAV POLISH ROUND (8099 · 2026-06-26) — compact rail + profile toggle
 * ════════════════════════════════════════════════════════════════════════ */

/* Persistent rail: fewer always-visible items, tighter footprint, still 44px.
   z-index 50 = BOTTOM of the overlay ladder (rail < .chatdock 60 < popovers
   80/81 < .evtmodal 1380 < .vfab 1400 < .aomodal/.glfs 1500 < .liveroom 1600 <
   .hub-fs 1700 < .vtoast 1800). The old 2200 painted the frosted rail over the
   live room, fullscreen video and every modal scrim — visible but inert ghost
   chrome that collided with the player controls. */
.app3 > .rail {
  position: relative;
  z-index: 50 !important;
  width: 60px !important;
  flex-basis: 60px !important;
  padding: 12px 7px !important;
  gap: 9px !important;
  overflow: visible !important;
}
.app3 > .rail .sqlogo,
.app3 > .rail .sq {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}
.app3 > .rail .sq {
  transition: transform 0.16s var(--ease, ease), background 0.16s var(--ease, ease), color 0.16s var(--ease, ease);
}
.app3 > .rail .sq:active { transform: scale(0.94); }
.app3 > .rail .sq .ic { width: 23px; height: 23px; }
.app3 > .rail .railsep { width: 28px !important; margin: 0 !important; }
.app3 > .rail .evt {
  width: 44px !important;
  height: 44px !important;
}
.app3 > .rail .evt__ring {
  width: 44px !important;
  height: 44px !important;
}
.app3 > .rail .evt__face {
  width: 34px !important;
  height: 34px !important;
}
.app3 > .rail .evt__face .ic {
  width: 18px !important;
  height: 18px !important;
}
.app3 > .rail .sq.prof .av {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}
.app3 > .rail .sq.prof .av .av__dot {
  width: 9px !important;
  height: 9px !important;
}
.app3 > .rail .sq--more.active {
  background: rgba(74, 222, 128, 0.14) !important;
}

.railmore[hidden] { display: none !important; }
.railmore {
  position: absolute;
  left: calc(100% + 12px);
  top: 282px;
  width: 190px;
  display: grid;
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(12, 13, 16, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  animation: railMoreIn 0.16s var(--ease, ease);
}
.railmore__item {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.railmore__item:hover,
.railmore__item.on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.railmore__item.on {
  color: var(--green);
}
.railmore__ic {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.railmore__ic .ic {
  width: 18px;
  height: 18px;
}
@keyframes railMoreIn {
  from { opacity: 0; transform: translateY(5px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .app3 { padding-bottom: 64px !important; }
  .app3 > .rail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    flex-basis: auto !important;
    height: 62px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    z-index: 50 !important;  /* bottom of the overlay ladder — sheets/modals/takeovers (1380+) must cover the bottom nav */
  }
  .app3 > .rail .sq {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 46px !important;
    max-width: none !important;
    border-radius: 12px !important;
  }
  .app3 > .rail .sq .ic {
    width: 22px;
    height: 22px;
  }
  .app3 > .rail .sq.prof .av {
    width: 32px !important;
    height: 32px !important;
  }

  .railmore {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 72px;
    top: auto;
    width: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    z-index: 2210;
  }
  .railmore__item {
    height: 46px;
    justify-content: center;
    padding: 0 8px;
    gap: 7px;
    font-size: 12px;
  }

  /* Keep the profile surface above the rail, while the rail remains tappable. */
  .dpf-layer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 64px !important;
    z-index: 2000 !important;
  }
  .dpf.dpf--profilecard,
  .dpf.dpf--side {
    bottom: 64px !important;
    height: min(82vh, calc(100vh - 76px)) !important;
    max-height: calc(100vh - 76px) !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .dpf--profilecard .dpfm-hero { min-height: 180px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * WS1 · Draggable "Vulu" FAB (secondary actions: Go Live/Leaderboard/Events/
 * Search/Shop). Tabs stay 5 stable destinations; this floats separately.
 * ════════════════════════════════════════════════════════════════════════ */
.vfab { position: fixed; z-index: 1400; display: flex; flex-direction: column; gap: 10px; touch-action: none; }
.vfab--right { align-items: flex-end; }
.vfab--left { align-items: flex-start; }
.vfab__btn {
  width: 56px; height: 56px; border-radius: 18px;
  background: #15211a; border: 1px solid rgba(74,222,128,0.55); color: var(--green);
  display: grid; place-items: center; cursor: grab; touch-action: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5); transition: transform .12s, border-radius .2s, background .15s;
}
.vfab__btn:active { cursor: grabbing; transform: scale(0.95); }
.vfab--open .vfab__btn { border-radius: 50%; background: #1b2a22; }
.vfab__btn .ic { width: 24px; height: 24px; }
.vfab__menu { display: flex; flex-direction: column; gap: 8px; transform-origin: bottom; }
.vfab__menu[hidden] { display: none; }
.vfab__item {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 9px;
  border-radius: 13px; background: rgba(13,13,16,0.94); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45); animation: vfab-pop .16s ease both;
}
.vfab--left .vfab__item { flex-direction: row-reverse; padding: 0 9px 0 16px; }
.vfab__item:hover { background: rgba(22,23,27,0.97); border-color: rgba(255,255,255,0.2); }
.vfab__itemic { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,0.06); color: var(--text); }
.vfab__itemic .ic { width: 18px; height: 18px; }
.vfab__item:first-child .vfab__itemic { background: rgba(74,222,128,0.16); color: var(--green); } /* Go Live accent */
.vfab__itemlbl { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.vfab__scrim { position: fixed; inset: 0; z-index: 1399; background: rgba(3,4,4,0.4); }
@keyframes vfab-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vfab__item { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
 * WS2 · Unified composer (global + live): real + attach menu, mic⇄send,
 * no inert gift/emoji. + live-room gift-tray no longer clips on mobile.
 * ════════════════════════════════════════════════════════════════════════ */
.composer .cbox { position: relative; }
.composer .cbox .gplus { border: 0; padding: 0; cursor: pointer; }
.composer .cbox .gplus:hover { background: rgba(255,255,255,0.09); color: var(--text); }
/* Desktop composer parity (retest 2026-06-27): base was 26/36px — too small next
 * to the input. Bring + / mic / send up to a comfortable size; mobile's 44px rule
 * (in the max-width:760 block) still wins on phones. */
.composer .cbox .gplus { width: 40px; height: 40px; }
.composer .cbox .send, .composer .cbox .cbox__mic { width: 40px; height: 40px; }
.composer .cbox .gplus .ic, .composer .cbox .send .ic { width: 18px; height: 18px; }
.cbox__rec { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }
.cbox__recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: cbox-pulse 1s ease-in-out infinite; }
@keyframes cbox-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cbox__recdot { animation: none; } }
.cbox__attachscrim { position: fixed; inset: 0; z-index: 30; }
.cbox__attach {
  position: absolute; left: 6px; bottom: 56px; z-index: 31;
  display: flex; flex-direction: column; gap: 3px; min-width: 184px; padding: 6px;
  border-radius: 14px; background: rgba(13,13,16,0.96); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.cbox__attach button {
  display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px;
  border: 0; background: none; color: var(--text); border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
}
.cbox__attach button:hover { background: rgba(255,255,255,0.07); }
.cbox__attach .ic { width: 20px; height: 20px; }
.cbox__attachcash { display: grid; place-items: center; color: var(--green); }
.cbox__attachcash .ic { width: 18px; height: 18px; }

/* live-room gift tray: cap height + scroll so its options never run under the
 * bottom nav / off the 393px viewport (audit P1 clip). */
.liveroom .lr-tray { max-height: 46vh; overflow-y: auto; }
.liveroom .lr-gifts { max-height: 36vh; overflow-y: auto; }
@media (max-width: 760px) {
  .liveroom .lr-tray { max-height: 40vh; }
  .liveroom .lr-gifts { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * WS4 · Mobile live card = complete identity (mosaic + LIVE + viewers +
 * title + host·category). Go Live removed from the strip (now in the FAB).
 * ════════════════════════════════════════════════════════════════════════ */
.lvmeta { font-size: 12px; color: var(--text-2); margin: 3px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvcard--hero .lvmeta { font-size: 12.5px; }
.cvy .lives__body { padding-bottom: 12px !important; }   /* golive gone → reclaim the reserved space */
@media (max-width: 760px) {
  .cvy .lives__body { padding-bottom: 12px !important; }
  .lvcard .lvmeta { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * WS5 · Music mobile = phone-native (shorter hero, denser trending rows).
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* compact hero — drop the long blurb, smaller art/title */
  .musec-hero { padding: 14px !important; gap: 14px !important; margin-bottom: 16px !important; }
  .musec-hero__art { width: 88px !important; height: 88px !important; }
  .musec-hero__ti { font-size: 22px !important; line-height: 1.08 !important; }
  .musec-hero__sub { display: none !important; }
  .musec-hero__cta { gap: 10px !important; flex-wrap: wrap !important; }

  /* quick-action buttons (Search/Upload + Liked/Downloaded/etc) → horizontal pills */
  .musec-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .musec-btn { height: 44px !important; padding: 0 16px !important; white-space: nowrap; flex: 0 0 auto; }

  /* trending: phone list rows — no column header, title/artist get the width,
   * compact rank + duration. Stops the aggressive title/artist truncation. */
  .mtbl__head { display: none !important; }
  .mtrow { grid-template-columns: 22px minmax(0,1.8fr) minmax(0,1fr) 40px !important; gap: 9px !important; padding: 8px 6px !important; align-items: center; }
  .mtrow__len { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * 2026-06-27 audit fixes — desktop/mobile nav split, gift-tray sheet,
 * composer touch targets.
 * ════════════════════════════════════════════════════════════════════════ */

/* P0b · desktop shows the secondary actions IN the rail; mobile uses the FAB. */
.rail-sec { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail-sec .sq--sec:first-child, .rail .sq--sec[aria-label="Go Live"] { color: var(--green); }
@media (min-width: 761px) { .vfab { display: none !important; } }            /* no floating FAB on desktop */
@media (max-width: 760px) { .rail-sec, .rail-sec__sep { display: none !important; } } /* secondary lives in the FAB on phone */

/* P1b · composer touch targets → 44px on mobile (icons stay compact). */
@media (max-width: 760px) {
  .composer .cbox .gplus { width: 44px !important; height: 44px !important; }
  .composer .cbox .send, .composer .cbox .cbox__mic { width: 44px !important; height: 44px !important; }
  .composer .cbox .gplus .ic, .composer .cbox .send .ic { width: 19px; height: 19px; }
}

/* P1a · live gift tray = fixed bottom sheet ABOVE the composer (was opening
 * downward off-screen and covering the nav on 393x852). */
.liveroom .lr-tray__scrim { position: fixed; inset: 0; z-index: 89; background: rgba(3,4,4,0.4); }
.liveroom .lr-tray.open {
  position: fixed; left: 8px; right: 8px; bottom: 78px; z-index: 90;
  max-height: 50vh; overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  background: rgba(13,13,16,0.97); box-shadow: 0 -12px 44px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
@media (max-width: 760px) { .liveroom .lr-tray.open { bottom: 72px; max-height: 46vh; } }

/* ============================================================================
 * PERF (2026-06-29): the residual "laggy" feel — even with the animated
 * background OFF — was ~1.2M px of LIVE `backdrop-filter: blur(18px)` on the big
 * always-on panels (chat ≈ 700k, lives ≈ 235k, mlist ≈ 205k, rail ≈ 52k, + the
 * page/pcol containers). index.html bakes these to a non-blur gradient, but
 * halftone-skin.css re-added the blur with `!important` AFTER it, so the bake
 * lost. Live blur on that area re-rasterizes on every scroll / hover / 1s tick,
 * which reads as general sluggishness. This file loads last → same selectors +
 * !important win. Over a solid background (bg off) the blur is a visual no-op
 * anyway (blurring a uniform colour), so this is lossless there; with the field
 * on, the panels stay frosted/translucent and the field still reads at the
 * uncovered margins — only the (barely-visible) blur-through-panels is dropped.
 * ========================================================================== */
/* 2026-07-02: revert of the revert — the user asked for the liquid-glass
 * frost back (containers blur what's behind them; the field stays crisp
 * outside). The halftone-skin.css frost block applies again, at a lighter
 * blur radius than the original 18px to keep the GPU cost down. */

/* P1c · wallet balance popover — compact, anchored near the wallet chips in the
 * chat header. Renamed off the generic `.wsheet` (which hub-player.css defines as
 * a full-screen `position:fixed; inset:0` overlay that was leaking onto the wallet
 * and covering all of Global Chat). Models the Notifications popover (.npop).
 * The element is PORTALED to <body> (the chat panel runs a backdrop-filter, which
 * traps fixed positioning and clips with overflow:hidden); JS sets top/left/width
 * inline and clamps to the viewport, so it can never clip or run off-screen.
 * DESKTOP/TABLET (base): fixed popover positioned by JS at the chip group.
 * PHONE (<=760px): content-sized bottom sheet (never full-screen). */
.wallet-wrap { position: relative; display: inline-flex; }
.wallet-popover-scrim { position: fixed; inset: 0; z-index: 6000; }
.wallet-popover {
  position: fixed; z-index: 6001;
  width: min(360px, calc(100vw - 24px));
  border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
  background: rgba(15,16,20,0.97); box-shadow: 0 22px 60px -18px rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  padding: 14px; display: grid; gap: 12px;
  transform-origin: top right;
  animation: wallet-popover-in 150ms cubic-bezier(.2,.7,.2,1);
}
/* little arrow pointing up at the wallet chip group (left set inline via --wpop-arrow) */
.wallet-popover::before {
  content: ""; position: absolute; top: -6px; left: var(--wpop-arrow, auto); right: 22px;
  width: 11px; height: 11px; margin-left: -5px;
  background: rgba(15,16,20,0.97);
  border-left: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.12);
  transform: rotate(45deg);
}
@keyframes wallet-popover-in { from { transform: translateY(-6px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.wallet-popover__head { display: flex; align-items: center; justify-content: space-between; }
.wallet-popover__head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.wallet-popover__x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 11px;
  background: rgba(255,255,255,0.06); color: var(--muted, #aab); cursor: pointer; }
.wallet-popover__x:hover { background: rgba(255,255,255,0.12); color: #fff; }
.wallet-popover__x svg { width: 18px; height: 18px; }
.wallet-popover__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.wallet-popover__bal { display: grid; gap: 4px; padding: 11px 12px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); }
.wallet-popover__ic { width: 20px; height: 20px; display: inline-grid; place-items: center; }
.wallet-popover__ic svg { width: 20px; height: 20px; }
.wallet-popover__v { font-size: 18px; font-weight: 800; line-height: 1; }
.wallet-popover__k { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #9aa); }
.wallet-popover__recent { display: grid; gap: 6px; padding-top: 2px; }
.wallet-popover__rlabel { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #9aa); }
.wallet-popover__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px;
  padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,0.04); }
.wallet-popover__rd { color: var(--green, #4ade80); font-weight: 700; white-space: nowrap; }
.wallet-popover__add { display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 14px;
  color: #04140a; background: linear-gradient(180deg, #6ef0a0, #34d176); }
.wallet-popover__add svg { width: 17px; height: 17px; }
.wallet-popover__add:hover { filter: brightness(1.06); }

/* PHONE: content-sized bottom sheet, centered, never full-screen. */
@media (max-width: 760px) {
  .wallet-popover-scrim { background: rgba(3,4,4,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .wallet-popover {
    position: fixed; top: auto; right: 12px; left: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: auto; max-width: 420px; margin: 0 auto;
    transform-origin: bottom center;
    animation: wallet-popover-up 190ms cubic-bezier(.2,.7,.2,1);
  }
  .wallet-popover::before { display: none; }
}
@keyframes wallet-popover-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================================
 * 2026-06-27 — desktop rail revert: secondary actions re-homed to where they
 * belong. Go Live + Event widget in the Live Now area, Leaderboard in Friends,
 * Search upgraded on the chat button, Shop in Wallet/Profile. (.rail-sec is gone
 * from the markup; its old rules above are now inert. FAB stays mobile-only.)
 * ========================================================================== */

/* — Go Live: large readable CTA, sits directly above the live rooms — */
.golive-cta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 12px; padding: 14px 16px; cursor: pointer; text-align: left;
  border: 1px solid rgba(74,222,128,0.34); border-radius: 16px; color: var(--text);
  background: linear-gradient(118deg, rgba(74,222,128,0.20), rgba(74,222,128,0.05));
  transition: filter .15s, transform .06s;
}
.golive-cta:hover { filter: brightness(1.08); }
.golive-cta:active { transform: scale(0.99); }
.golive-cta__ic { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 12px; background: rgba(74,222,128,0.22); color: var(--green); }
.golive-cta__ic .ic { width: 22px; height: 22px; }
.golive-cta__txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.golive-cta__txt b { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.golive-cta__txt span { font-size: 12px; color: var(--muted); }
.golive-cta__chev { color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; }
.golive-cta__chev .ic { width: 18px; height: 18px; }

/* — Event widget: a real timer/progress surface (not a button) — */
.evtw {
  display: grid; gap: 8px; width: 100%; margin: 0 0 12px; padding: 12px 14px;
  cursor: pointer; text-align: left; color: var(--text);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  background: linear-gradient(150deg, rgba(199,125,255,0.12), rgba(255,255,255,0.025));
  transition: filter .15s, transform .06s;
}
.evtw:hover { filter: brightness(1.06); }
.evtw:active { transform: scale(0.99); }
.evtw__top { display: flex; align-items: center; gap: 8px; }
.evtw__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(199,125,255,0.2); color: var(--purple); flex: 0 0 auto; }
.evtw__icon .ic { width: 16px; height: 16px; }
.evtw__title { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; flex: 1 1 auto; min-width: 0; }
.evtw__live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; color: #ff5a6a; flex: 0 0 auto; }
.evtw__live i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a6a; animation: evtw-pulse 1.6s infinite; }
@keyframes evtw-pulse { 0%{box-shadow:0 0 0 0 rgba(255,90,106,.5)} 70%{box-shadow:0 0 0 6px rgba(255,90,106,0)} 100%{box-shadow:0 0 0 0 rgba(255,90,106,0)} }
.evtw__timerrow { display: flex; align-items: baseline; justify-content: space-between; }
.evtw__timerlbl { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.evtw__timer { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
.evtw__bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; }
.evtw__bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--purple), var(--green)); }
.evtw__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.evtw__pool { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 700; }
.evtw__pool .ic { width: 14px; height: 14px; }
.evtw__poollbl { color: var(--muted); font-weight: 600; }
.evtw__people { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .evtw__live i { animation: none; } }

/* — Search: single upgraded entry on the chat header (opens contextual Search popover) — */
.search-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.searchbtn--up { width: 44px !important; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0; border-radius: 12px; }
.searchbtn--up .ic { width: 18px; height: 18px; }
.searchbtn__lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.searchbtn--up.on {
  color: var(--text);
  border-color: rgba(72, 156, 255, 0.45);
  background: linear-gradient(180deg, rgba(38, 92, 156, 0.32), rgba(18, 39, 72, 0.78));
  box-shadow: 0 0 0 1px rgba(72,156,255,0.12), 0 8px 24px rgba(0,0,0,0.28);
}
.chat-searchpop-scrim { position: fixed; inset: 0; z-index: 6100; background: transparent; }
.chat-searchpop {
  position: fixed; z-index: 6101;
  max-height: min(620px, calc(100vh - 24px));
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,0.13); border-radius: 18px;
  background: rgba(12, 15, 20, 0.97);
  box-shadow: 0 24px 70px -18px rgba(0,0,0,0.76), 0 0 0 1px rgba(72,156,255,0.10);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  padding: 12px; display: grid; gap: 10px;
  transform-origin: top right;
  animation: wallet-popover-in 150ms cubic-bezier(.2,.7,.2,1);
}
.chat-searchpop::before {
  content: ""; position: absolute; top: -6px; left: var(--spop-arrow, auto);
  width: 11px; height: 11px; margin-left: -5px;
  background: rgba(12, 15, 20, 0.97);
  border-left: 1px solid rgba(255,255,255,0.13); border-top: 1px solid rgba(255,255,255,0.13);
  transform: rotate(45deg);
}
.chat-searchpop__bar {
  height: 44px; display: flex; align-items: center; gap: 9px;
  padding: 0 8px 0 13px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.055);
}
.chat-searchpop__ic { display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.chat-searchpop__ic .ic { width: 17px; height: 17px; }
.chat-searchpop__bar input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px;
}
.chat-searchpop__bar input::placeholder { color: rgba(214,224,224,0.50); }
.chat-searchpop__clear {
  width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto;
  border: 0; border-radius: 10px; color: var(--muted);
  background: transparent; cursor: pointer;
}
.chat-searchpop__clear:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.chat-searchpop__clear .ic { width: 16px; height: 16px; }
.chat-searchpop__tabs {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 1px 0 2px;
}
.chat-searchpop__tabs::-webkit-scrollbar { display: none; }
.chat-searchpop__tab {
  flex: 0 0 auto; min-height: 32px;
  padding: 0 11px; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; background: rgba(255,255,255,0.045);
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.chat-searchpop__tab:hover { color: var(--text); background: rgba(255,255,255,0.075); }
.chat-searchpop__tab.on {
  color: #06100b; border-color: rgba(116, 255, 170, 0.52);
  background: linear-gradient(180deg, rgba(116,255,170,0.95), rgba(72,202,126,0.78));
}
.chat-searchpop__results { display: grid; gap: 10px; }
.chat-searchpop__section { display: grid; gap: 5px; }
.chat-searchpop__label {
  padding: 2px 3px; color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.chat-searchpop__row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 50px; padding: 7px 8px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
}
.chat-searchpop__row:hover, .chat-searchpop__row:focus-visible {
  outline: 0; background: rgba(255,255,255,0.07);
}
.chat-searchpop__avatar {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  color: #dce9ef; background: linear-gradient(152deg, rgba(79,127,148,0.68), rgba(20,38,48,0.94));
  font-size: 14px; font-weight: 800; position: relative;
}
.chat-searchpop__avatar.live::after {
  content: ""; position: absolute; right: 1px; bottom: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2px rgba(12,15,20,0.97);
}
.chat-searchpop__avatar--icon { border-radius: 11px; color: #9bc7ff; }
.chat-searchpop__avatar--icon .ic { width: 18px; height: 18px; }
.chat-searchpop__copy { min-width: 0; display: grid; gap: 2px; }
.chat-searchpop__copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.chat-searchpop__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.chat-searchpop__cta {
  justify-self: end; min-width: 56px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: 999px;
  background: rgba(255,255,255,0.075); color: var(--text-2);
  font-size: 12px; font-weight: 800;
}
.chat-searchpop__row:hover .chat-searchpop__cta { background: rgba(235,80,119,0.95); color: #fff; }
.chat-searchpop__empty {
  padding: 20px 12px; border-radius: 13px;
  background: rgba(255,255,255,0.045); color: var(--muted);
  text-align: center; font-size: 13px;
}
@media (max-width: 760px) {
  .searchbtn--up { width: 44px !important; padding: 0; justify-content: center; }
  .searchbtn__lbl { display: none; }
  .chat-searchpop-scrim {
    background: rgba(3,4,4,0.5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .chat-searchpop {
    left: 12px; right: 12px; top: auto; bottom: max(14px, env(safe-area-inset-bottom));
    width: auto !important; max-height: min(76vh, 620px);
    border-radius: 18px; transform-origin: bottom center;
    animation: wallet-popover-up 190ms cubic-bezier(.2,.7,.2,1);
  }
  .chat-searchpop::before { display: none; }
}

/* — Leaderboard: home in the Friends rail header (compact icon button so it never
 *   crowds the narrow rail; labelled via title + aria-label) — */
.mlist__lb { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  margin-left: auto; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px;
  background: rgba(255,255,255,0.05); color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s; }
.mlist__lb:hover { background: rgba(255,255,255,0.1); }
.mlist__lb .ic { width: 16px; height: 16px; color: var(--gold); }
.mlist__lblbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* — Shop + Rank→Leaderboard in the desktop profile economy surface — */
.dpfm-mcell--btn { cursor: pointer; background: none; border: 0; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dpfm-mcell--btn:hover .dpfm-mval--rank { filter: brightness(1.15); }
.dpfm-mcell--btn .dpfm-mlabel { display: inline-flex; align-items: center; gap: 2px; }
.dpfm-mcell--btn .dpfm-mlabel .ic { width: 12px; height: 12px; opacity: 0.65; }
.dpfm-shop { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0;
  padding: 12px 14px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  background: rgba(255,255,255,0.05); color: var(--text); transition: background .15s; }
.dpfm-shop:hover { background: rgba(255,255,255,0.1); }
.dpfm-shop__ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(199,125,255,0.16); color: var(--purple); flex: 0 0 auto; }
.dpfm-shop__ic .ic { width: 18px; height: 18px; }
.dpfm-shop__txt { flex: 1 1 auto; font-size: 14px; font-weight: 700; text-align: left; }
.dpfm-shop__chev { color: var(--muted); flex: 0 0 auto; }
.dpfm-shop__chev .ic { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════════════
 * MOBILE-WEB PARITY (phone widths only, ≤760) — native VULU mobile home model:
 * top bar → minimal Event → Global Chat pill → Live Now (primary). Desktop is
 * untouched (these selectors are all inside the media query, except the one
 * default-hide of the mobile-only Event mini row).
 * ════════════════════════════════════════════════════════════════════════════ */
.evtw__mini { display: none; }   /* desktop: only the detailed widget shows */

@media (max-width: 760px) {
  /* let the native-style home scroll if it ever exceeds the viewport */
  .app3 { overflow-y: auto; overflow-x: hidden; }

  /* ── Top bar: VULU logo + wallet + search/notif (wallet's home when chat
   *    collapses to a pill) ── */
  .mtopbar { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px; }
  .mtopbar__logo { font-family: 'JetBrains Mono', monospace; font-weight: 800; letter-spacing: 3px; font-size: 15px; color: var(--text); flex: 0 0 auto; }
  .mtopbar__wallet { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mtopbar__wallet::-webkit-scrollbar { height: 0; }
  .mtopbar__wallet .wchip { flex: 0 0 auto; }
  .mtopbar__acts { display: flex; gap: 6px; flex: 0 0 auto; }
  .mtopbar__btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--text-2); cursor: pointer; }
  .mtopbar__btn .ic { width: 20px; height: 20px; }
  .mtopbar__btn:active { background: rgba(255,255,255,0.1); }
  .mtopbar__dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff4458; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }

  /* ── Event: minimal collapsed row (trophy charge + EVENT + status dot) ── */
  .app3 > .evtw { margin: 6px 12px; width: auto; }
  .evtw { padding: 11px 14px !important; gap: 0 !important; display: block !important;
          background: rgba(17,17,19,0.96) !important; border-color: rgba(255,255,255,0.1) !important; }
  .evtw__full { display: none; }
  .evtw__mini { display: flex; align-items: center; gap: 13px; width: 100%; }
  .evtw__mtrophy { position: relative; width: 24px; height: 28px; display: grid; place-items: center; color: var(--green); flex: 0 0 auto; }
  .evtw__mtrophy .ic { width: 22px; height: 22px; }
  .evtw__mcharge { position: absolute; left: -8px; bottom: 1px; width: 4px; height: 24px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; display: flex; align-items: flex-end; }
  .evtw__mcharge > span { display: block; width: 100%; background: var(--green); border-radius: 99px; }
  .evtw__mlbl { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 3px; font-size: 13px; color: var(--text-2); }
  .evtw__mdot { margin-left: auto; width: 8px; height: 8px; border-radius: 99px; background: var(--green); flex: 0 0 auto; }

  /* ── Global Chat: collapsed pill (Saturn + GLOBAL/CHAT + unread) ── */
  .app3 > .gcpill { margin: 4px 12px; width: auto; }
  .gcpill { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px;
            border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: rgba(17,17,19,0.96);
            color: var(--text); cursor: pointer; text-align: left; }
  .gcpill:active { background: rgba(255,255,255,0.04); }
  .gcpill__icon { color: var(--purple); display: grid; place-items: center; flex: 0 0 auto; }
  .gcpill__wm { display: flex; flex-direction: column; line-height: 1; }
  .gcpill__wm b { font-family: 'JetBrains Mono', monospace; font-weight: 800; letter-spacing: 3px; font-size: 15px; color: var(--text); }
  .gcpill__wm span { font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; font-size: 9px; color: var(--muted); margin-top: 3px; }
  .gcpill__badge { margin-left: auto; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(255,68,88,0.92); color: #fff; font-weight: 800; font-size: 11px; display: grid; place-items: center; flex: 0 0 auto; }
  .gcpill__badge--empty { display: none; }

  /* ── Live Now: primary area below the pills (no event widget inside now) ── */
  .app3 > .lives { margin: 6px 0 0 0 !important; max-height: 46vh; }

  /* ── Global Chat = native DRAGGABLE bottom sheet (opens EXPANDED, drag the
   *    grabber to the 50% detent or fling down to dismiss; home shows behind). ── */
  /* sit ABOVE the 60px bottom nav so the composer/text field is fully visible
     and the nav stays bright + usable below the sheet */
  .mchat-scrim { position: fixed; left: 0; right: 0; top: 0; bottom: 62px; z-index: 1448; background: #000; opacity: 0; }
  .mchat {
    position: fixed; left: 0; right: 0; bottom: 62px; top: 100vh;   /* top set inline by drag/snap */
    z-index: 1450; display: flex; flex-direction: column;
    background: #0c0e0d; border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px 22px 0 0; box-shadow: 0 -18px 44px rgba(0,0,0,0.55);
    transition: top .3s cubic-bezier(.2,.7,.2,1); will-change: top;
  }
  .mchat--drag { transition: none; }
  .mchat__drag { flex: 0 0 auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
  .mchat__drag:active { cursor: grabbing; }
  .mchat__handle { display: block; width: 44px; height: 5px; margin: 8px auto 2px; border-radius: 999px; background: rgba(255,255,255,0.5); }
  /* the draggable FAB and bottom nav must not float over an open sheet/modal */
  .app3:has(.mchat) .vfab,
  .app3:has(.glfs) .vfab,
  .app3:has(.evtmodal.open) .vfab { display: none !important; }
  .app3:has(.evtmodal.open) > .rail { display: none !important; }
  .mchat__head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); flex: 0 0 auto; }
  .mchat__icon { color: var(--purple); display: grid; place-items: center; flex: 0 0 auto; }
  .mchat__wm { display: flex; align-items: baseline; gap: 7px; line-height: 1; flex: 1 1 auto; }
  .mchat__wm b { font-family: 'JetBrains Mono', monospace; font-weight: 800; letter-spacing: 3px; font-size: 16px; }
  .mchat__wm span { font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; font-size: 11px; color: var(--muted); }
  .mchat__search { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--text-2); cursor: pointer; flex: 0 0 auto; }
  .mchat__search .ic { width: 18px; height: 18px; }
  .mchat .chat--sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100% !important; background: transparent !important; border: 0 !important; }
  .mchat .chat--sheet .stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .mchat .chat--sheet .composer { flex: 0 0 auto; }

  /* Native phone parity: live cards already sit under a LIVE NOW heading, so
     the tiny red per-card LIVE pill adds noise and was specifically called out. */
  .lives .mosaic > .livetag { display: none !important; }
}

/* ── Event detail modal — native EventExpandedDetails styling (centered card on
 *    desktop, bottom sheet on phones). Overrides the old rail-anchored popover. ── */
/* Default state: the modal mounts but is invisible + non-interactive. The JSX
   adds .open when the event is actually showing. Without .open, the modal
   used to lay out at z-index:1450 with display:flex, leaving its inner X
   close button positioned at 42×42 ready to catch taps even though the
   modal looked hidden. Force pointer-events:none + visibility:hidden so the
   close affordance only exists when the modal is actually visible. */
.evtmodal { position: fixed; inset: 0; z-index: 1380; display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; pointer-events: none; opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }  /* below .vfab (1400) per the overlay ladder; the :has() rule above hides the FAB while open anyway */
.evtmodal.open { visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; }
.evtpop { position: relative; left: auto; bottom: auto; transform-origin: center; width: min(400px, 100%); max-width: 400px;
          padding: 18px; border-radius: 20px; background: rgba(13,14,16,0.98); border: 1px solid rgba(255,255,255,0.1); }
.evtpop::before { display: none !important; }   /* kill the popover arrow */
.evtpop__x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.evtpop__rail { display: flex; align-items: center; justify-content: space-between; padding-right: 34px; }
.evtpop__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 1.4px; color: var(--muted); }
.evtpop__eyebrow .tnum { color: var(--text-2); }
.evtpop__livedot { width: 6px; height: 6px; border-radius: 99px; background: var(--green); }
.evtpop__hero { text-align: center; margin: 16px 0 14px; }
.evtpop__prize { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.evtpop__desc { margin-top: 8px; font-size: 13px; color: var(--muted); }
.evtpop__meter { display: flex; gap: 4px; justify-content: center; margin: 0 0 18px; }
.evtpop__meter span { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.evtpop__meter span.on { background: var(--green); }
.evtpop__stats { display: flex; gap: 8px; margin: 0 0 16px; }
.evtpop__stats .evtstat { flex: 1 1 0; text-align: center; padding: 12px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
.evtpop__stats .evtstat .v { display: block; font-size: 15px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.evtpop__stats .evtstat .k { margin-top: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.evtpop__join { justify-content: center; height: 50px; border-radius: 13px; font-weight: 800; letter-spacing: 0.5px; color: var(--green); background: rgba(74,222,128,0.12); border: 1px solid var(--green); }
.evtpop__join:hover:not(:disabled) { background: rgba(74,222,128,0.18); }
.evtpop__join:disabled { opacity: 0.55; cursor: default; }
.evtpop__done { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 13px; border: 1px solid var(--green); background: rgba(255,255,255,0.03); color: var(--green); font-weight: 700; }
.evtpop__done .ic { width: 18px; height: 18px; }
.evtpop__content { display: flow-root; }
@media (max-width: 760px) {
  .evtmodal { align-items: flex-end; padding: 0; }
  .evtpop { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ── FAB glyph: native 2×2-dots (closed) → X (open), on a green-edged frame ── */
@media (max-width: 760px) {
  .vfab__btn { background: #15211A !important; border: 2px solid rgba(74,222,128,0.55) !important; }
}
.vfabglyph { position: relative; width: 26px; height: 26px; display: block; }
.vfabglyph--grid i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.vfabglyph--grid i:nth-child(1) { top: 2px; left: 2px; }
.vfabglyph--grid i:nth-child(2) { top: 2px; right: 2px; }
.vfabglyph--grid i:nth-child(3) { bottom: 2px; left: 2px; }
.vfabglyph--grid i:nth-child(4) { bottom: 2px; right: 2px; }
.vfabglyph--x i { position: absolute; top: 50%; left: 0; width: 100%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--green); }
.vfabglyph--x i:nth-child(1) { transform: rotate(45deg); }
.vfabglyph--x i:nth-child(2) { transform: rotate(-45deg); }

/* ==========================================================================
 * 2026-06-27 · Native Event + Go Live correction
 * ========================================================================== */

/* The trophy itself is the timer. It fills from the base upward, matching the
   native DotTrophy model instead of using a separate side progress bar. */
.evtrophy {
  position: relative;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--green);
}
.evtrophy .ic { width: 100%; height: 100%; }
.evtrophy__base,
.evtrophy__fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.evtrophy__base { color: rgba(151, 170, 158, 0.34); }
.evtrophy__fill {
  color: var(--green);
  clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0);
}

/* Desktop Event lives in the rail, just above Profile. Same footprint as every
   other rail button, with the progress carried by the button frame. */
.app3 > .rail .evt {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.app3 > .rail .evt__ring {
  display: grid;
  place-items: center;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(var(--green) var(--p, 0%), rgba(255,255,255,0.12) 0);
}
.app3 > .rail .evt__face {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(12, 17, 14, 0.96);
  color: var(--green);
}
.app3 > .rail .evt.active .evt__face,
.app3 > .rail .evt:hover .evt__face {
  background: rgba(74, 222, 128, 0.14);
}
.app3 > .rail .evt .evtrophy { width: 21px; height: 21px; }

/* Desktop Event expands like a rail-attached panel, not a centered modal. */
@media (min-width: 761px) {
  .evtmodal {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 0 86px 74px !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .evtpop {
    width: 360px !important;
    max-width: 360px !important;
    transform-origin: left bottom;
    box-shadow: 0 18px 48px rgba(0,0,0,0.42);
  }
}

/* Restore Go Live as the original red, pinned live-area action. It sits in the
   Live Now container instead of the draggable menu. */
.cvy { position: relative; }
.cvy .lives__body { padding-bottom: 66px !important; }
.cvy .golive {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 8;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #e63d50 !important;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.48);
}
.cvy .golive:hover { background: #ff5365 !important; }
.cvy .golive:active { transform: translateY(1px); }
.golive__dot {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
.golive__dot .ic { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .app3 > .evtw.evtw--inline { margin: 6px 12px; width: auto; }
  .evtw--inline {
    flex: 0 0 auto;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(17,17,19,0.96) !important;
  }
  .evtw__toggle {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .evtw--expanded { border-color: rgba(74,222,128,0.24) !important; }
  .evtw--expanded .evtw__toggle {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .evtw__inline-detail {
    padding: 14px 14px 16px;
    animation: evt-inline-open 0.18s ease-out both;
  }
  .evtpop__content--compact .evtpop__hero { margin: 12px 0 12px; }
  .evtpop__content--compact .evtpop__prize { font-size: 34px; }
  .evtpop__content--compact .evtpop__stats { gap: 7px; margin-bottom: 14px; }
  .evtpop__content--compact .evtstat { padding: 10px 6px; }
  .evtw__mtrophy { width: 24px; height: 28px; }
  .evtw__mtrophy .evtrophy { width: 24px; height: 24px; }
  .evtw__mcharge { display: none !important; }
  @keyframes evt-inline-open {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .evtw__inline-detail { animation: none; }
  }
}

/* ── Native dot-matrix icons/wordmarks (DotSaturn / DotTrophy / DotMatrixText
 *    ports) — replace the JetBrains-Mono pseudo-dot text with the real Ndot SVGs. ── */
.dmw { display: block; flex: 0 0 auto; }
/* GLOBAL (big) + CHAT (small) sit on one baseline-aligned row, like the app */
.gcpill__wm, .mchat__wm { flex-direction: row !important; align-items: flex-end !important; gap: 6px !important; }
.gcpill__wm .dmw:first-child { height: 17px; width: auto; }   /* GLOBAL */
.gcpill__wm .dmw:last-child  { height: 11px; width: auto; }   /* CHAT */
.mchat__wm .dmw:first-child  { height: 16px; width: auto; }
.mchat__wm .dmw:last-child   { height: 10px; width: auto; }
/* EVENT collapsed row: dot trophy + EVENT dot wordmark + status dot */
.evtw__mtrophy { width: auto !important; height: auto !important; background: none !important; }
.evtw__mtrophy .dmw { height: 22px; width: auto; }
.evtw__mlbl { display: flex !important; align-items: center; }
.evtw__mlbl .dmw { height: 12px; width: auto; }
.gcpill__icon, .mchat__icon { background: none !important; }

/* ==========================================================================
 * 2026-06-28 · Whole-web responsive audit pass
 * ========================================================================== */

@media (max-width: 900px) {
  /* Phone + iPad touch pass: all visible controls should meet the 44px floor. */
  .mtopbar__btn,
  .dpfm-herobtn,
  .aopop__x,
  .evtpop__x,
  .hub-upload__x,
  .srchbar__x,
  .mlist__min,
  .lr-back,
  .lr-follow,
  .lr-cgift,
  .lr-csend,
  .vid-play--go,
  .musec-new,
  .glchip,
  .react,
  .lbtab,
  .shop2-tab,
  .shop-pay button,
  .pact,
  .srow__cta,
  .ntf-readall,
  .setnav__item,
  .wchip,
  .golive,
  .dpfm-status,
  .vid-act,
  .hub-close,
  .np__btn,
  .hub-savebtn,
  .hub-paywall__buy,
  .hub-gemplus,
  .cbox .gplus,
  .cbox .send,
  .tagrow,
  .sugg__f {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .mtopbar__btn,
  .dpfm-herobtn,
  .aopop__x,
  .evtpop__x,
  .hub-upload__x,
  .srchbar__x,
  .mlist__min,
  .lr-back,
  .lr-cgift,
  .lr-csend,
  .hub-close,
  .np__btn,
  .cbox .gplus,
  .cbox .send {
    width: 44px !important;
    height: 44px !important;
  }

  .srchbar input,
  .musec-srch input,
  .vid-srch input,
  .glpop__in,
  .hub-upload__in,
  .lr-chat__composer input {
    min-height: 44px !important;
  }

  .cbox input {
    min-height: 44px !important;
  }
}

@media (max-width: 520px) {
  .hub-underbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .hub-savebtn,
  .hub-buyrow,
  .hub-buyrow .hub-paywall__buy,
  .hub-gemplus {
    width: 100% !important;
    justify-content: center !important;
  }
  .hub-buyrow {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .hub-gemplus em {
    margin-left: 4px !important;
  }
}

@media (min-width: 761px) and (max-height: 940px) {
  /* MacBook-height desktop: keep the profile card from showing a clipped last row. */
  .dpf--profilecard {
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 28px) !important;
  }
  .dpf--profilecard .dpfm-hero {
    min-height: 190px !important;
  }
}

/* ============================================================================
 * 2026-06-28 · Tablet portrait + phone polish (audit fixes)
 * Targets the five issues called out in /tmp/vuluweb-responsive-audit-2026-06-28:
 *   1) iPad portrait: chat column squeezed + friend rail auto-minimizes to
 *      "unlabeled avatar strip". Keep desktop architecture, expand chat width,
 *      and force the friend rail to a deliberate compact-but-readable state.
 *   2) Mac/iPad: sticky red Go Live overlays the live-card list. Reserve space
 *      in the scroll container and bound the lives body so it can't extend
 *      underneath the absolute-positioned CTA.
 *   3) iPhone: dot-matrix labels (LIVE wordmark, GO LIVE pill) read as
 *      "L UE" / "GO L IVE" because letter-spacing is too wide at phone size.
 *   4) Touch targets: ensure reply/react, chat search, wallet chips, event
 *      close, etc. meet a 44×44 floor on phone + iPad widths.
 *   5) iPhone empty live state: add a richer empty card so the home doesn't
 *      feel half-built when 0 live rooms.
 * All of these rules are additive and live in audit-fixes.css (loaded last).
 * ========================================================================== */

/* ── 1. Tablet portrait (761–1024px): keep desktop architecture, expand chat ─ */
@media (min-width: 761px) and (max-width: 1024px) {
  /* Narrow the Live Now column so chat gains room on tablets */
  .app3 > .lives { width: 224px !important; }
  .app3 > .lives .lives__cards .mosaic { height: 120px !important; }
  .lvcard--hero .mosaic { height: 156px !important; }
  .lives__head--hero { font-size: 13px !important; }

  /* Give the stage a touch more breathing room without breaking the rail */
  .app3 .stage { gap: 10px !important; padding: 10px !important; }

  /* Friend rail: keep it visible (don't auto-minimize) but compact enough to
   * fit beside chat. Override the JS defaultMin + the MLIST_SMALL_BP collapse
   * so the rail shows name + avatar (not just an avatar strip). */
  .stage .mlist,
  .mlist { width: 200px !important; min-width: 200px !important; padding: 10px 8px !important; }
  .mlist.mlist--min { width: 200px !important; padding: 10px 8px !important; }
  .mlist.mlist--min .mlist__head { justify-content: space-between !important; padding: 0 2px 8px !important; }
  .mlist.mlist--min .mlist__head h3,
  .mlist.mlist--min .mlist__head .cnt { display: inline-flex !important; }
  .mlist.mlist--min .gl { padding: 9px 4px 4px !important; font-size: 10.5px !important; }
  .mlist.mlist--min .frow { padding: 6px 4px !important; gap: 8px !important; justify-content: flex-start !important; }
  .mlist.mlist--min .frow .fnm { display: block !important; font-size: 12px !important; max-width: 110px !important; }

  /* The Live Now rail contains a sticky Go Live CTA: shrink the lives column
   * height proportionally so the rail never forces the page to scroll. */
  .app3 > .lives { min-width: 0 !important; }

  /* 44×44 floor on tablet for the audit's hit-area list */
  .msg__actions button,
  .cmsg__act,
  .dmsg__act,
  .searchbtn,
  .notif,
  .iconbtn,
  .wchip,
  .mlist__lb,
  .mlist__min,
  .srchbar__x,
  .evtpop__x,
  .aopop__x,
  .np__btn,
  .pact,
  .lbtab,
  .shop2-tab,
  .shop-btn,
  .hub-close,
  .hub-savebtn,
  .np__btn--play,
  .cbox .gplus,
  .cbox .send { min-width: 44px !important; min-height: 44px !important; }
  .np__btn--play { width: 48px !important; height: 48px !important; }

  /* chat composer input height */
  .cbox input,
  .lr-chat__composer input { min-height: 44px !important; }
}

/* ── 2. Sticky Go Live: reserve scroll space + cap lives body so cards
 *    never continue behind the absolute-positioned CTA. Applies Mac + iPad. */
.cvy .lives__body {
  /* Reserve bottom space equal to the CTA footprint + a safety margin.
   * 42px CTA + 14px bottom inset + 10px breathing = 66px. */
  padding-bottom: 66px !important;
  /* lives__body already has overflow:hidden, but the lives panel itself is
   * flex column with min-height:0 — bound its growth so it can't extend past
   * the available stage height and visually push cards behind the CTA. */
  min-height: 0;
}
.cvy { display: flex; flex-direction: column; min-height: 0; }
.cvy .lives__body .lives__cards { padding-bottom: 4px; }

/* Belt + braces: even if a screen is short, the CTA never lands on top of the
 * last visible card because the lives body ends 66px before the panel bottom. */
@media (min-width: 761px) {
  .cvy .golive {
    box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, 0.65);
  }
  .cvy .lives__body::after {
    /* Soft fade just above the CTA so cards still feel connected to it */
    content: '';
    position: absolute; left: 0; right: 0; bottom: 56px; height: 16px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11,13,12,0) 0%, rgba(11,13,12,0.85) 100%);
  }
}

/* ── 3. Phone dot-matrix labels: tighten the JetBrains Mono letter-spacing so
 *    "LIVE" stops reading as "L UE" and "GO LIVE" stops reading as "GO L IVE". */
@media (max-width: 760px) {
  .mtopbar__logo {
    /* Was letter-spacing:3px — at phone size that creates an obvious visual
     * gap between every glyph. 1.2px keeps the dot-matrix brand feel while
     * letting adjacent letters fuse correctly. */
    letter-spacing: 1.2px !important;
    font-size: 15px !important;
  }
  .gcpill__wm b {
    letter-spacing: 1.5px !important;
  }
  .gcpill__wm span {
    letter-spacing: 1.2px !important;
  }
  .nmh__golive .dmw {
    /* GO LIVE pill — slight bump on the dot grid + tighter glyph rendering.
     * No letter-spacing here (the SVG is hand-laid), but ensure no-wrap +
     * centered so the pill never wraps between GO and LIVE. */
    display: inline-block !important;
  }
  .nmh__goliveContent {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .nmh__goliveDot {
    flex: 0 0 auto !important;
  }
}

/* ── 4. Phone touch targets: 44×44 floor for every audit-flagged control. */
@media (max-width: 760px) {
  .msg__actions button,
  .cmsg__act,
  .dmsg__act {
    /* Was 32×32 on desktop + 30 on the P3 audit round. Bring up to 44. */
    width: 44px !important; height: 44px !important;
  }
  .searchbtn,
  .notif,
  .iconbtn,
  .mchat__search,
  .srchbar__x,
  .mlist__min,
  .mlist__lb,
  .dpfm-herobtn,
  .aopop__x,
  .evtpop__x,
  .hub-close,
  .hub-savebtn,
  .hub-paywall__buy,
  .hub-gemplus,
  .np__btn,
  .np__btn--play,
  .pact,
  .lbtab,
  .shop2-tab,
  .shop-pay button,
  .wchip,
  .cbox .gplus,
  .cbox .send,
  .cbox .cbox__mic,
  .react,
  .npop__read,
  .musec-new,
  .glchip {
    min-width: 44px !important; min-height: 44px !important;
  }
  /* Specific overrides so they round to a clean 44x44 square */
  .mchat__search { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
  .srchbar__x { width: 40px !important; height: 40px !important; }
  .searchbtn { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
  .notif { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
  .npop__read { padding: 8px 14px !important; min-height: 36px !important; }
  .wchip { height: 44px !important; padding: 0 12px !important; }
  .np__btn { width: 44px !important; height: 44px !important; }
  .np__btn--play { width: 52px !important; height: 52px !important; }
  .cbox .gplus, .cbox .send, .cbox .cbox__mic { width: 44px !important; height: 44px !important; }
  .cbox input { min-height: 44px !important; }
  .lr-chat__composer input { min-height: 44px !important; }
  .mlist__lb { width: 38px !important; height: 38px !important; }
  .mlist__min { width: 38px !important; height: 38px !important; }
}

/* ── 5. Phone empty live state: richer empty card so the home doesn't feel
 *    half-built when there are 0 live rooms. */
@media (max-width: 760px) {
  /* Target the NativeMobileHome empty card via the .nmh__liveEmpty class. */
  .nmh__liveEmpty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 28px 20px 32px !important;
    text-align: center !important;
    background: linear-gradient(165deg, rgba(74,222,128,0.07), rgba(74,222,128,0.015)) !important;
    border: 1px dashed rgba(74,222,128,0.32) !important;
    border-radius: 16px !important;
    color: var(--text, #f5fff7) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .nmh__liveEmpty::before {
    content: '';
    display: block;
    width: 56px; height: 56px;
    border-radius: 16px;
    background:
      radial-gradient(circle, rgba(74,222,128,0.28) 0%, transparent 70%),
      linear-gradient(160deg, rgba(74,222,128,0.18), rgba(74,222,128,0.04));
    box-shadow: inset 0 0 0 1px rgba(74,222,128,0.28);
  }
  .nmh__liveEmpty::after {
    content: 'Be the first to go live — tap the green button below to start streaming.';
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #a5b3aa);
    line-height: 1.45;
    max-width: 28ch;
  }
  /* When the empty card expands, the gap between it and the FAB feels less
   * void. Slightly tighten the section's bottom padding. */
  .nmh__live { padding-bottom: 12px; }
}

/* ==========================================================================
 * FINAL POLISH (2026-06-28) — quiet empty live state + honest iPad drawer
 * ========================================================================== */

@media (max-width: 760px) {
  /* Empty state: match the native app, a quiet gray dashed frame with only
     centered muted text. No icon, no green treatment, no extra copy. */
  .nmh__liveEmpty {
    min-height: 148px !important;
    padding: 0 20px !important;
    gap: 0 !important;
    background: rgba(255,255,255,0.006) !important;
    border: 1px dashed rgba(245,248,244,0.16) !important;
    border-radius: 18px !important;
    color: rgba(245,248,244,0.44) !important;
  }
  .nmh__liveEmpty::before,
  .nmh__liveEmpty::after {
    content: none !important;
    display: none !important;
  }
  .nmh__liveEmptyBadge,
  .nmh__liveEmptyIcon,
  .nmh__liveEmptySub {
    display: none !important;
  }
  .nmh__liveEmptyTitle {
    color: rgba(245,248,244,0.48) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    opacity: 0;
    animation: nmh-empty-fade .24s ease-out .04s forwards;
  }
  @keyframes nmh-empty-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nmh__liveEmptyTitle {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  /* The compact friends rail is useful on iPad, but the chevron must not be a
     fake control. When expanded, turn it into an overlay drawer so Global Chat
     keeps its >=430px usable width. */
  .app3 .stage {
    position: relative !important;
  }
  .app3 .stage .mlist:not(.mlist--min) {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: 220px !important;
    min-width: 220px !important;
    height: auto !important;
    padding: 10px 8px !important;
    z-index: 70 !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.42) !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .mlist__head {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 4px 4px 10px !important;
    margin-bottom: 2px !important;
    gap: 8px !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .mlist__head h3,
  .app3 .stage .mlist:not(.mlist--min) .mlist__head .cnt {
    display: inline-flex !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .mlist__head .mlist__min {
    display: inline-grid !important;
    margin-left: auto !important;
    width: 44px !important;
    height: 44px !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .mlist__lb {
    display: inline-grid !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .gl {
    display: block !important;
    padding: 10px 4px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .frow {
    justify-content: flex-start !important;
    padding: 6px 4px !important;
    gap: 9px !important;
  }
  .app3 .stage .mlist:not(.mlist--min) .frow .fnm {
    display: block !important;
    max-width: 132px !important;
    font-size: 12px !important;
  }
}

/* The "L UVE" and "GO L IVE" rendering is also visible inside the desktop
 * shell — the LIVE wordmark in the rail Event button, and the EVENT pill.
 * Same fix: tighten kerning on the JetBrains Mono dot-wordmarks globally. */
@media (max-width: 760px) {
  .evt__face,
  .evtw__mlbl,
  .mtopbar__logo,
  .dpf-handle,
  .dpf-name {
    /* Dot-wordmarks render as monospace text in some places; trim letter-spacing
     * so they don't read with phantom gaps between glyphs. */
    letter-spacing: 1px !important;
  }
}

/* ============================================================================
 * 2026-06-28 · Round 2 audit fixes (verification report at :8113)
 *
 * 1) iPhone Global Chat sheet must overlay the bottom nav (not sit above it)
 *    and the composer must remain usable above the safe area.
 * 2) iPad portrait Global Chat must be at least ~430px wide. Keep desktop
 *    architecture. Friend rail becomes an intentionally compact drawer-style
 *    rail that can expand when tapped.
 * 3) Mac/iPad Live Now: convert Go Live from absolute overlay to a real flex
 *    footer (sibling of the scroll region) so cards never intersect it.
 * 4) iPhone Event expanded state: hide Go Live slab, FAB, and bottom nav
 *    while the inline event detail is in view (via .app3--evt-expanded).
 * 5) Event close target: enforce 44×44 hit area on .evtpop__x across phone
 *    and tablet breakpoints (was 42px).
 * 6) iPhone empty live state: real DOM copy (.nmh__liveEmptyTitle +
 *    .nmh__liveEmptySub) replaces the CSS ::after subtitle.
 * ========================================================================== */

/* ── 1. Mobile chat sheet must overlay the bottom nav ─────────────────── */
@media (max-width: 760px) {
  /* The Global Chat sheet is a true overlay. Extend both the scrim and the
     sheet to bottom:0 so the bottom-nav tab buttons stop being interactive
     while the sheet is open. Safe-area-inset padding keeps the composer
     above the home indicator on devices that have one. */
  .mchat-scrim {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0 !important;
    z-index: 1448;
    background: #000;
    opacity: 0;
  }
  .mchat {
    position: fixed;
    left: 0; right: 0;
    bottom: 0 !important;            /* was bottom:62px → exposed the nav */
    top: 100vh;                      /* animated to FULL detent on open */
    z-index: 1450;
    display: flex; flex-direction: column;
    background: #0c0e0d;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 44px rgba(0,0,0,0.55);
    transition: top .3s cubic-bezier(.2,.7,.2,1);
    will-change: top;
  }
  /* The composer (.composer inside .mchat) needs safe-area bottom padding so
     the input + send button are visible above the home indicator. */
  .mchat .composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  /* While the sheet is mounted, hide the floating actions that the audit
     flagged as stacked on top of the sheet. The :has selector reaches the
     parent's children without a JS body-class hack. */
  .app3:has(.mchat) .vfab { display: none !important; }
  .app3:has(.mchat) .nmh__tabs { display: none !important; }
  /* Docked DM windows (opened from Leaderboard/Friends rows) sit flush at
     bottom:0 by default and visually cover the persistent bottom tab bar
     (2026-07-03 re-verify). Clear the tab bar's footprint (68px + 10px inset). */
  .chatdock { bottom: 88px; }
  /* Belt + braces: the bottom-nav container is a position:fixed bar; if a
     browser ignores :has, we still collapse its visible footprint by hiding
     it via the .mchat sibling rule. */
  .app3 > .nmh__tabs { transition: opacity .15s; }
  .app3:has(.mchat) > .nmh__tabs {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* ── 2. iPad portrait chat width — friend rail collapses to a compact
 *    avatar-only drawer by default; expands on tap. ───────────────────── */
@media (min-width: 761px) and (max-width: 1024px) {
  /* Narrow Live Now to 200px so chat gains room */
  .app3 > .lives { width: 200px !important; }
  .app3 > .lives .lives__cards .mosaic { height: 116px !important; }
  .lvcard--hero .mosaic { height: 148px !important; }
  .lives__head--hero { font-size: 13px !important; }

  /* Tighten the stage padding/gap */
  .app3 .stage { gap: 8px !important; padding: 8px !important; }

  /* Friend rail becomes a 56px avatar-only strip by default. Avatar + ring
     are visible; the names/headings/counts are hidden so it functions as a
     drawer handle. Tap the strip's expand button to widen it to 220px and
     reveal names. Default-open on tablet? No — drawer pattern: collapsed
     until tapped. */
  .stage .mlist,
  .mlist {
    width: 56px !important;
    min-width: 56px !important;
    padding: 10px 6px !important;
  }
  .stage .mlist .mlist__head,
  .mlist .mlist__head {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 10px !important;
    margin-bottom: 4px !important;
    gap: 8px !important;
  }
  .mlist__head h3,
  .mlist__head .cnt,
  .mlist__lb { display: none !important; }
  .mlist__head .mlist__min { display: inline-grid !important; }
  .mlist .gl { display: none !important; }   /* group labels hidden when collapsed */
  .mlist .frow { justify-content: center !important; padding: 6px 0 !important; gap: 0 !important; }
  .mlist .frow .fnm { display: none !important; }

  /* Expand state — applies when the MemberList's internal min state is off
     (default). JS already exposes .mlist--min for collapsed. We add the
     inverse .mlist--expanded helper if/when we wire it, but the default
     collapsed-by-CSS state is enough to deliver the width gain. */

  /* Live Now rail cards: ensure the title/host fits the narrower column */
  .lvcard .ti { font-size: 13.5px !important; }
  .lvcard--hero .ti { font-size: 15px !important; }

  /* chat header keeps breathing room */
  .chan { padding: 0 14px !important; gap: 10px !important; }
  .chan__title h2 { font-size: 16px !important; }
  .chan .acts { gap: 6px !important; }

  /* 44px hit targets across the tablet UI */
  .searchbtn,
  .notif,
  .iconbtn,
  .wchip,
  .msg__actions button,
  .cmsg__act,
  .dmsg__act,
  .srchbar__x,
  .evtpop__x,
  .aopop__x,
  .mlist__min,
  .mlist__lb,
  .hub-close,
  .hub-savebtn,
  .np__btn,
  .np__btn--play,
  .pact,
  .lbtab,
  .shop2-tab,
  .shop-pay button,
  .hub-paywall__buy,
  .hub-gemplus,
  .cbox .gplus,
  .cbox .send,
  .cbox .cbox__mic,
  .react {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .np__btn--play { width: 48px !important; height: 48px !important; }
  .evtpop__x { width: 44px !important; height: 44px !important; }
  .mlist__min { width: 40px !important; height: 40px !important; }
  .cbox input,
  .lr-chat__composer input,
  .srchbar input { min-height: 44px !important; }
}

/* ── 3. Mac/iPad Live Now: convert the Go Live CTA from absolute overlay
 *    to a flex footer in the column. Only the cards list scrolls above it. */
.app3 > .lives {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
}
.app3 > .lives .lives__head { flex: 0 0 auto !important; }
.app3 > .lives .lives__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 10px !important;        /* drop the 66px absolute-CTA reserve */
  position: relative !important;
}
.app3 > .lives .lives__cards { padding-bottom: 4px; }
/* Remove the absolute positioning from the Go Live footer; it is now a real
   sibling of the scroll region. */
.cvy .golive {
  position: relative !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  z-index: 1 !important;
}
/* Drop the soft fade — no longer needed when there's no overlap. */
.cvy .lives__body::after { display: none !important; }
/* Defensive: bound the column so a tall live list can't push past the stage
   height and reach the bottom of the viewport. */
.app3 > .lives { max-height: 100%; }

/* ── 4. iPhone Event expanded: hide floating Go Live slab, quick-action
 *    FAB, and bottom nav while the inline event detail is open. ──────── */
@media (max-width: 760px) {
  .app3--evt-expanded .nmh__golive { display: none !important; }
  .app3--evt-expanded .vfab { display: none !important; }
  .app3--evt-expanded .nmh__tabs { display: none !important; }
  /* Body still scrolls while event is open so the detail reads naturally */
  .app3--evt-expanded .nmh__body {
    padding-bottom: 16px !important;
  }
  /* When the event expands, give it a generous inline spacing so it reads
     as a focused detail surface. */
  .evtw--inline.evtw--expanded {
    margin: 8px 12px 12px !important;
  }
  .evtw__inline-detail {
    animation: evt-inline-open 0.18s ease-out both;
  }
  @keyframes evt-inline-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* The collapsed event pill should also have a touch-friendly height. */
  .evtw__toggle { min-height: 52px !important; }
}

/* ── 5. Event close target 44×44 on phone + tablet ──────────────────── */
@media (max-width: 1024px) {
  .evtpop__x {
    width: 44px !important;
    height: 44px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,0.06) !important;
  }
  .evtpop__x .ic { width: 18px !important; height: 18px !important; }
  /* Live-room back/share buttons get the same treatment so every event-area
     close affordance meets the floor. */
  .lr-back,
  .lr-cgift,
  .lr-csend {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── 6. Real DOM copy for iPhone empty live state ─────────────────────
 * The decorative badge stays ::before. The headline and subtitle are now
 * real children of .nmh__liveEmpty (set in app/chat-shared.jsx). */
@media (max-width: 760px) {
  .nmh__liveEmpty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 28px 20px 32px !important;
    text-align: center !important;
    background: linear-gradient(165deg, rgba(74,222,128,0.07), rgba(74,222,128,0.015)) !important;
    border: 1px dashed rgba(74,222,128,0.32) !important;
    border-radius: 16px !important;
    color: var(--text, #f5fff7) !important;
  }
  .nmh__liveEmptyBadge {
    display: block;
    width: 56px; height: 56px;
    border-radius: 16px;
    background:
      radial-gradient(circle, rgba(74,222,128,0.28) 0%, transparent 70%),
      linear-gradient(160deg, rgba(74,222,128,0.18), rgba(74,222,128,0.04));
    box-shadow: inset 0 0 0 1px rgba(74,222,128,0.28);
    flex: 0 0 auto;
  }
  .nmh__liveEmptyTitle {
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
  }
  .nmh__liveEmptySub {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #a5b3aa);
    line-height: 1.45;
    max-width: 28ch;
  }
  /* Drop the old ::after subtitle (real DOM replaces it) */
  .nmh__liveEmpty::after { content: none !important; display: none !important; }
  .nmh__live { padding-bottom: 12px; }
}

/* Final native parity override: keep the iPhone empty live state as a quiet
   gray framed message, matching the mobile app reference. This intentionally
   lives after all older audit blocks so no green treatment wins the cascade. */
@media (max-width: 760px) {
  .nmh__liveEmpty {
    min-height: 148px !important;
    padding: 0 20px !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(255,255,255,0.006) !important;
    border: 1px dashed rgba(245,248,244,0.16) !important;
    border-radius: 18px !important;
    color: rgba(245,248,244,0.44) !important;
  }
  .nmh__liveEmpty::before,
  .nmh__liveEmpty::after {
    content: none !important;
    display: none !important;
  }
  .nmh__liveEmptyBadge,
  .nmh__liveEmptyIcon,
  .nmh__liveEmptySub {
    display: none !important;
  }
  .nmh__liveEmptyTitle {
    display: block !important;
    color: rgba(245,248,244,0.48) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
}

/* ==========================================================================
 * 2026-06-29 · Responsive transition finish
 *
 * Phone stays the native mobile shell. Tablet/desktop stay the original Vulu web
 * shell. This block only cleans the awkward first desktop widths where the shell
 * fits but feels squeezed.
 * ========================================================================== */

@media (max-width: 760px) {
  /* The native reference reads as "LIVE NOW", not a fused "LIVENOW". Keep the
     same DOM text and add enough word spacing for the uppercase transform. */
  .nmh__liveTitle {
    letter-spacing: 0.01em !important;
    word-spacing: 0.24em !important;
    white-space: nowrap !important;
  }

  /* Keep the empty live state dead simple: gray dashed frame, one muted line. */
  .nmh__liveEmpty {
    min-height: 148px !important;
    padding: 0 20px !important;
    gap: 0 !important;
    background: rgba(255,255,255,0.006) !important;
    border: 1px dashed rgba(245,248,244,0.16) !important;
    border-radius: 18px !important;
    color: rgba(245,248,244,0.44) !important;
  }
  .nmh__liveEmptyBadge,
  .nmh__liveEmptyIcon,
  .nmh__liveEmptySub,
  .nmh__liveEmpty::before,
  .nmh__liveEmpty::after {
    content: none !important;
    display: none !important;
  }
  .nmh__liveEmptyTitle {
    display: block !important;
    color: rgba(245,248,244,0.48) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 880px) {
  /* First desktop width after phone: keep the architecture, but make it feel
     intentional inside DevTools/iPad-width panes instead of just squeezed. */
  .app3 > .rail {
    margin: 10px 0 10px 10px !important;
    width: 56px !important;
    flex-basis: 56px !important;
    padding: 10px 0 !important;
  }
  .app3 > .rail .sqlogo,
  .app3 > .rail .sq,
  .app3 > .rail .evt {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }
  .app3 > .rail .evt__ring {
    width: 42px !important;
    height: 42px !important;
  }

  .app3 > .lives {
    width: 180px !important;
    flex-basis: 180px !important;
    margin: 10px 0 10px 8px !important;
  }
  .app3 > .lives .lives__head {
    height: 48px !important;
    padding: 0 10px 0 12px !important;
  }
  .app3 > .lives .lives__body {
    padding: 8px 8px 8px !important;
  }
  .app3 > .lives .lives__cards .mosaic {
    height: 104px !important;
  }
  .app3 > .lives .lvcard--hero .mosaic {
    height: 128px !important;
  }
  .lvcard {
    padding: 7px !important;
    margin-bottom: 10px !important;
  }
  .lvcard .ti {
    font-size: 13px !important;
    margin-top: 8px !important;
  }
  .lvcard .lvmeta {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .lvcard .boost {
    display: none !important;
  }
  .lvcard .lvrow {
    margin-top: 5px !important;
  }
  .cvy .golive {
    min-height: 44px !important;
    height: 44px !important;
  }

  .app3 .stage {
    padding: 8px 8px 8px 6px !important;
    gap: 8px !important;
  }
  .stage .chat {
    min-width: 0 !important;
  }
  .stage .mlist,
  .mlist {
    width: 52px !important;
    min-width: 52px !important;
    padding: 8px 5px !important;
  }
  .mlist__min {
    width: 40px !important;
    height: 40px !important;
  }
  .chan {
    min-height: 54px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }
  .chan__title h2 {
    font-size: 15px !important;
  }
  .chan .acts {
    gap: 6px !important;
  }
  .searchbtn__lbl {
    display: none !important;
  }
}

@media (min-width: 881px) and (max-width: 1024px) {
  /* iPad portrait gets the original tablet shell with a little less compression
     than the 761px bridge range. */
  .app3 > .lives {
    width: 208px !important;
    flex-basis: 208px !important;
  }
  .app3 .stage {
    padding: 10px !important;
  }
  .stage .chat {
    min-width: 0 !important;
  }
}

/* ==========================================================================
 * 2026-06-29 · Tablet desktop-source correction
 *
 * Product decision: Mac and iPad use the existing VULU desktop web design.
 * Phone widths use the native-style mobile shell. The prior tablet audit
 * collapsed Friends into an unlabeled avatar strip; that read like a different
 * product, so keep a labeled compact Friends rail on tablet instead.
 * ========================================================================== */

@media (min-width: 761px) and (max-width: 880px) {
  .stage .mlist,
  .mlist,
  .mlist.mlist--min {
    width: 136px !important;
    min-width: 136px !important;
    padding: 8px 7px !important;
  }

  .stage .mlist .mlist__head,
  .mlist .mlist__head,
  .mlist.mlist--min .mlist__head {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 2px 2px 8px !important;
    margin-bottom: 2px !important;
  }

  .mlist__head h3,
  .mlist.mlist--min .mlist__head h3 {
    display: inline-flex !important;
    font-size: 12px !important;
    max-width: 58px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mlist__head .cnt,
  .mlist__lb {
    display: none !important;
  }

  .mlist__head .mlist__min,
  .mlist.mlist--min .mlist__head .mlist__min {
    display: inline-grid !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin-left: auto !important;
  }

  .mlist .gl,
  .mlist.mlist--min .gl {
    display: block !important;
    padding: 8px 3px 4px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    height: auto !important;
    background: transparent !important;
  }

  .mlist .frow,
  .mlist.mlist--min .frow {
    justify-content: flex-start !important;
    padding: 5px 3px !important;
    gap: 7px !important;
  }

  .mlist .frow .fnm,
  .mlist.mlist--min .frow .fnm {
    display: block !important;
    max-width: 72px !important;
    font-size: 11.5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 881px) and (max-width: 1024px) {
  .stage .mlist,
  .mlist,
  .mlist.mlist--min {
    width: 176px !important;
    min-width: 176px !important;
    padding: 10px 8px !important;
  }

  .stage .mlist .mlist__head,
  .mlist .mlist__head,
  .mlist.mlist--min .mlist__head {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 4px 4px 10px !important;
    margin-bottom: 2px !important;
  }

  .mlist__head h3,
  .mlist__head .cnt,
  .mlist.mlist--min .mlist__head h3,
  .mlist.mlist--min .mlist__head .cnt {
    display: inline-flex !important;
  }

  .mlist__head h3,
  .mlist.mlist--min .mlist__head h3 {
    font-size: 13px !important;
  }

  .mlist__lb {
    display: none !important;
  }

  .mlist__head .mlist__min,
  .mlist.mlist--min .mlist__head .mlist__min {
    display: inline-grid !important;
    margin-left: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .mlist .gl,
  .mlist.mlist--min .gl {
    display: block !important;
    padding: 9px 4px 5px !important;
    font-size: 10px !important;
    height: auto !important;
    background: transparent !important;
  }

  .mlist .frow,
  .mlist.mlist--min .frow {
    justify-content: flex-start !important;
    padding: 6px 4px !important;
    gap: 8px !important;
  }

  .mlist .frow .fnm,
  .mlist.mlist--min .frow .fnm {
    display: block !important;
    max-width: 108px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
 * 2026-06-29 · Desktop/iPad source-lock follow-up
 *
 * Mac and iPad should never use the phone shell or an overlay drawer for the
 * home desktop. Keep Friends in normal flex flow so Global Chat has a real
 * reserved column instead of being covered by the rail.
 * ========================================================================== */

@media (min-width: 761px) and (max-width: 1024px) {
  .app3 .stage .chat {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .app3 .stage .mlist,
  .app3 .stage .mlist:not(.mlist--min) {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 0 0 1px rgba(255,255,255,0.045),
      0 26px 64px -24px rgba(0,0,0,0.72) !important;
  }
}

@media (min-width: 761px) and (max-width: 880px) {
  .app3 .stage .mlist,
  .app3 .stage .mlist:not(.mlist--min) {
    flex: 0 0 136px !important;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
  }
}

@media (min-width: 881px) and (max-width: 1024px) {
  .app3 .stage .mlist,
  .app3 .stage .mlist:not(.mlist--min) {
    flex: 0 0 176px !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
  }
}

/* Desktop rail Event button — clean UPRIGHT solid dot-trophy (replaces the old
 * rotated conic-ring + progress-split blob). Reads + hovers like the other rail
 * icons: dim by default, green when active/hovered. */
.app3 > .rail .evt { color: var(--text-2, #A6B0AA); }
.app3 > .rail .evt.active,
.app3 > .rail .evt:hover { color: var(--green); }
.app3 > .rail .evt .evt__ico { display: grid; place-items: center; line-height: 0; }
.app3 > .rail .evt .evt__ico .dmw { height: 26px; width: auto; }

/* ── Wallet popover: more compact / simpler / smaller (user request 2026-06-27).
 *    Width tightened on desktop only (mobile keeps its full-width bottom sheet);
 *    internals tightened everywhere. Loaded last → wins. ── */
@media (min-width: 761px) {
  .wallet-popover { width: min(288px, calc(100vw - 24px)) !important; }
}
.wallet-popover { padding: 11px !important; gap: 8px !important; border-radius: 16px !important; }
.wallet-popover__head h3 { font-size: 13.5px !important; }
.wallet-popover__x { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
.wallet-popover__x svg { width: 15px !important; height: 15px !important; }
.wallet-popover__grid { gap: 6px !important; }
.wallet-popover__bal { padding: 8px 9px !important; gap: 2px !important; border-radius: 10px !important; }
.wallet-popover__ic { width: 17px !important; height: 17px !important; }
.wallet-popover__ic svg { width: 17px !important; height: 17px !important; }
.wallet-popover__v { font-size: 15px !important; }
.wallet-popover__k { font-size: 9px !important; }
.wallet-popover__recent { gap: 4px !important; padding-top: 0 !important; }
.wallet-popover__rlabel { font-size: 9px !important; }
.wallet-popover__row { padding: 7px 9px !important; font-size: 11px !important; border-radius: 9px !important; }
.wallet-popover__rd { font-size: 11px !important; }
.wallet-popover__add { height: 33px !important; font-size: 12.5px !important; border-radius: 9px !important; gap: 6px !important; }
.wallet-popover__add svg { width: 14px !important; height: 14px !important; }

/* ── Wallet header chips (compact, desktop): hover a currency → a little bubble
 *    with the amount drops under it. Reuses the chip's (clipped) .wv value —
 *    CSS only, scoped to .wallet.compact so mobile's inline values are untouched. ── */
.wallet.compact { overflow: visible !important; }
.wallet.compact .wchip { position: relative; overflow: visible !important; }
.wallet.compact .wchip .wv {
  display: block !important; position: absolute; top: calc(100% + 8px); left: 50%;
  max-width: none !important; overflow: visible !important;   /* compact hides the value via max-width:0 — undo it for the bubble */
  transform: translateX(-50%) translateY(-4px) scale(0.96);
  margin: 0; padding: 4px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 800; line-height: 1.15; color: #fff; white-space: nowrap;
  background: rgba(22,24,28,0.98); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; z-index: 7000;
  transition: opacity .12s ease, transform .12s ease;
}
.wallet.compact .wchip .wv::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px; background: rgba(22,24,28,0.98);
  border-left: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.12);
}
.wallet.compact .wchip:hover .wv,
.wallet.compact .wchip:focus-visible .wv {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}
/* let the bubble escape the chat header */
.chat .chan, .chat .acts { overflow: visible !important; }


/* ── 2026-07-02 audit fixes ─────────────────────────────────────────────── */
/* A4: live-card meta is plain text again (9px dot numerals were unreadable) */
.lvcount { font-size: 11px !important; color: #A8B0AC; letter-spacing: .02em; }
.boost { color: #FF6B7C !important; }
/* A6: "@" and the name are separate text nodes; keep the handle on one line */
.dpfm-handle { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* A6: profile-panel gem/cash values joined the 11px legibility floor */
.dpfm-mval .dm-glyph { height: 11px !important; width: auto !important; }

/* ════════════════════════════════════════════════════════════════════════
 * 2026-07-02 · LAYOUT / Z-INDEX AUDIT (w1b) — responsive clipping fixes
 * ════════════════════════════════════════════════════════════════════════ */

/* ── [6] 761–900px: the Global Chat header (dot title + 4 wallet chips +
 *    search + bell) is wider than the chat column, and .chat{overflow:hidden}
 *    clipped the trailing bell clean off — notifications unreachable at
 *    tablet widths. Native tablet parity: keep the two primary chips (cash +
 *    fuel, the native home pair); gems/robux stay one tap away inside the
 *    wallet popover every chip opens. Frees ~88px so search + bell fit. ── */
@media (min-width: 761px) and (max-width: 900px) {
  .chan .acts .wallet.compact .w--gems,
  .chan .acts .wallet.compact .w--robux { display: none !important; }
  .chan .chan__title { min-width: 0; overflow: hidden; }
  .chan .acts { flex: 0 0 auto; }
}

/* ── [7][29] members-panel header: the fixed-width dot wordmark SVGs pushed
 *    the minimize/leaderboard buttons past the panel's overflow:hidden edge
 *    (761–767px, 1024x600) or got hard-cut mid-glyph ('FRIEN'). The glyphs
 *    carry width/height attrs + a viewBox, so max-width scales them
 *    proportionally (xMidYMid meet) instead of clipping; the trailing
 *    buttons are pinned unshrinkable so they always stay visible. ── */
.mlist__head { min-width: 0; }
.mlist__head h3 { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mlist__head .mlist__lb, .mlist__head .mlist__min { flex-shrink: 0; }
.mlist__head h3 .dmw, .mlist .gl .dmw { max-width: 100%; min-width: 0; }
.mlist__head h3 .dm-glyph, .mlist .gl .dm-glyph { max-width: 100%; }

/* ── [21] 3 open DM windows (343px each) buried the Go Live slab at 1280px —
 *    only an unlabeled sliver stayed clickable. Windows slim down below
 *    1366px so the dock's left edge stays clear of the CTA (right edge
 *    ~357px at 1280): 3×283+gaps ⇒ dock starts ~391px. ── */
@media (max-width: 1366px) {
  .chatdock .cwin { width: clamp(232px, calc((100vw - 430px) / 3), 320px); }
}

/* ── [28] Music page, 761–900px: the trending tab row and the two-column
 *    quick-access/playlists grid overflow the main column's overflow:hidden
 *    edge (CATEGOR…, clipped New button). Chips wrap; the starved 2-col
 *    grid stacks. ── */
@media (min-width: 761px) and (max-width: 900px) {
  .musec-sechead { flex-wrap: wrap; row-gap: 8px; }
  .musec-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── [33] ≤360px: the Refuel Station header (label + 44px Gems/Cash toggle)
 *    exceeds the clipped content column — most of 'Cash' untappable at
 *    320px. Let the toggle wrap under the label (margin-left:auto keeps it
 *    right-aligned on its own row). ── */
@media (max-width: 360px) {
  .shop2-sec__h--fuel { flex-wrap: wrap; row-gap: 8px; }
}

/* ── [7] cont. — the stale 761–1024 overlay-drawer pass (further up: ~L1599)
 *    revives .mlist__lb / .cnt with .app3 .stage .mlist:not(.mlist--min) …
 *    { display:inline-… !important } selectors that OUTGUN the 2026-06-29
 *    tablet correction hiding them, so the header's min-content (icon + glyph
 *    + count + 44px trophy + 44px minimize) exceeded the 136/176px panel and
 *    pushed the minimize button past the overflow:hidden edge. Re-assert the
 *    correction with matching specificity, last in file. ── */
@media (min-width: 761px) and (max-width: 1024px) {
  .app3 .stage .mlist:not(.mlist--min) .mlist__head .mlist__lb { display: none !important; }
}
@media (min-width: 761px) and (max-width: 880px) {
  .app3 .stage .mlist:not(.mlist--min) .mlist__head .cnt { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * 2026-07-03 · Current 8099 audit remediation
 * Fixes: initial chat crop, tablet squeeze, live rail bottom crop,
 * mobile live-data mismatch, and search/list bottom breathing room.
 * ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 761px) {
  /* Global Chat should begin below the toolbar on first paint; new messages
     still auto-scroll after mount from useChatThread. */
  .stage .chat .stream {
    padding-top: 18px !important;
    scroll-padding-top: 18px;
  }
  .stage .welcome {
    padding-top: 16px !important;
  }

  /* Go Live is a real footer now. Add an intentional gap and fade the live list
     bottom so the next room never looks chopped by the CTA edge. */
  .cvy .golive {
    margin: 8px 14px 14px !important;
  }
  .app3 > .lives .lives__body {
    padding-bottom: 16px !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.06) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.06) 100%);
  }

  .pcol__body {
    padding-bottom: 58px !important;
    scroll-padding-bottom: 58px;
  }
}

@media (max-width: 760px) {
  .pcol__body {
    /* clear the fixed tab bar AND the resting quick-menu FAB (bottom 92 + 56
       tall) so scroll-end content is never covered (2026-07-03 audit F3) */
    padding-bottom: 160px !important;
    scroll-padding-bottom: 160px;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* Tablet portrait gets a two-column working surface: live rooms + chat.
     The friends rail is still available from navigation, but not squeezed into
     the first viewport. */
  .app3 > .lives {
    width: 180px !important;
    flex-basis: 180px !important;
  }
  .app3 .stage {
    padding: 10px !important;
    gap: 0 !important;
  }
  .app3 .stage .mlist {
    display: none !important;
  }
  .stage .chat {
    width: 100% !important;
  }
  .app3 > .lives .lives__cards .mosaic {
    height: 104px !important;
  }
  .app3 > .lives .lvcard--hero .mosaic {
    height: 132px !important;
  }
}

@media (max-width: 760px) {
  .nmh__body {
    gap: 12px !important;
    padding-bottom: 168px !important;
  }
  .nmh__live {
    margin-top: 8px !important;
    padding-bottom: 0 !important;
  }
  .nmh__rooms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .nmh__room {
    min-width: 0;
    min-height: 132px;
    padding: 8px;
    border: 1px solid rgba(245,248,244,0.11);
    border-radius: 18px;
    background: rgba(255,255,255,0.025);
    color: var(--text, #f5f8f4);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  .nmh__room:active {
    background: rgba(255,255,255,0.055);
  }
  .nmh__roomMosaic {
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
  }
  .nmh__roomMosaic .mosaic,
  .nmh__roomMosaic .lvcard--hero .mosaic {
    height: 68px !important;
    border-radius: 12px !important;
  }
  .nmh__simpleMosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
  }
  .nmh__simpleMosaic span {
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, rgba(74,222,128,0.20), rgba(255,68,88,0.12));
    color: rgba(245,248,244,0.72);
    font-size: 13px;
    font-weight: 800;
  }
  .nmh__roomMosaic .mtile .ini {
    font-size: 13px !important;
  }
  .nmh__roomMosaic .mtile .more {
    font-size: 13px !important;
  }
  .nmh__roomMeta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nmh__roomTitle {
    color: var(--text, #f5f8f4);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nmh__roomSub {
    color: rgba(245,248,244,0.58);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * 2026-07-03 · UI audit remediation, round 2 (claude.ai artifact + :8162 report)
 * ════════════════════════════════════════════════════════════════════════ */

/* F5 · "Your Playlists" horizontal strip: the last card was hard-sliced by the
   panel edge with no cue that the row scrolls. Fade the clipped edge + keep a
   right gutter so a cut card reads as "more content →". */
.plrow--scroll {
  padding-right: 18px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), rgba(0,0,0,0.08) 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), rgba(0,0,0,0.08) 100%);
}

/* Music (Mac scrolled): hero title glyphs sheared abruptly at the scroll-container
   top edge. A short top fade makes mid-scroll cuts read as intentional. */
.pcol__body {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0, #000 12px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0, #000 12px);
}

/* Music (iPhone): the tab row clipped "NEW RELEASES" mid-word with no scroll
   affordance — same fade treatment on the scrollable tab strips. */
@media (max-width: 760px) {
  .pcol__tabs, .lbtabs {
    padding-right: 14px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), rgba(0,0,0,0.1) 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), rgba(0,0,0,0.1) 100%);
  }
}

/* F7 · Desktop/iPad profile: the card was pinned to the bottom-left corner
   (left:86 bottom:14) over whatever page was open — it read as unfinished next
   to the app's page pattern. Present it as a centered modal instead; the
   edit/settings/viewers side panel docks beside it. (Phones keep their
   full-width bottom sheet from the A3 block.) */
@media (min-width: 761px) {
  .dpf-layer {
    position: fixed !important; inset: 0 !important; z-index: 2000 !important;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: rgba(3, 4, 4, 0.45);
  }
  .dpf.dpf--profilecard,
  .dpf.dpf--side {
    position: static !important;
    flex: 0 0 auto;
  }
}

/* 2026-07-03 · requested behavior: desktop profile opens from the rail avatar,
   close to the bottom-left trigger, instead of as a centered modal. */
@media (min-width: 761px) {
  .dpf-layer {
    display: block !important;
    background: rgba(3, 4, 4, 0.20) !important;
  }
  .dpf-layer .dpf.dpf--profilecard {
    position: fixed !important;
    left: 76px !important;
    right: auto !important;
    top: auto !important;
    bottom: 14px !important;
    width: min(340px, calc(100vw - 96px)) !important;
    max-width: calc(100vw - 96px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
    transform: none !important;
    z-index: 2001 !important;
  }
  .dpf-layer .dpf.dpf--side {
    position: fixed !important;
    left: min(430px, calc(100vw - 356px)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 14px !important;
    width: min(340px, calc(100vw - 444px)) !important;
    max-width: calc(100vw - 96px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
    z-index: 2002 !important;
  }
}

/* Posts: mock media blocks were flat color rectangles that read as broken
   images. Layer the app's dot-grid texture + a soft vignette over the seeded
   gradient so they read as designed placeholders (2026-07-03 audit). */
.ybpcard__img { position: relative; overflow: hidden; }
.ybpcard__img::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(0,0,0,0.35)),
              radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.7px);
  background-size: auto, 15px 15px;
}

/* Videos/Search/etc: dotted section labels + inactive tab/filter chips sat at
   --muted and read near-invisible as dot-matrix glyphs on the dark field —
   lift them to a clearly readable gray (2026-07-03 audit, 3 viewports). */
.page__seclabel, .aside-lbl, .side__head h3 { color: #B9C2BB !important; }
.lbtab:not(.on), .glchip:not(.on) { color: #AEB8B1; }

/* Hub iPad: the compact friends rail (136px) truncated "Watching Now" names
   mid-word ("Rae · B..."). Drop the show-title suffix there — the name + the
   progress bar carry the meaning (2026-07-03 audit). */
@media (min-width: 761px) and (max-width: 1024px) {
  .mlist .wcard__ti { display: none; }
}

/* Hub iPhone: an odd card count left a one-card row with a dead right column.
   Let the trailing odd card span the row as a wide feature tile. */
@media (max-width: 760px) {
  .vid-grid > .vid-clip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Friends rail: offline rows at opacity .4-.5 read as broken/disabled rather
   than offline — the section header already says OFFLINE, so keep the rows
   clearly legible and only slightly muted (2026-07-03 audit). */
.frow.off { opacity: 0.68; }
.mem.off { opacity: 0.6; }

/* Event mini card: prize + countdown teaser next to the (brighter) EVENT label */
.evtw__mini .evtw__mteaser { margin-left: auto; font-size: 12px; font-weight: 700; color: #B9C2BB; letter-spacing: 0.02em; }

/* Onboarding: the terms line sat at ~#69736E on near-black — lift toward the
   secondary text tone (2026-07-03 audit, iPhone). */
.ob-terms { color: #A2ACA6; }
.ob2--welcome .ob-terms { color: rgba(238, 244, 239, 0.8); }

/* Header bell: badge poked 6px above the button and could kiss the panel's top
   edge at tablet widths — pull it in slightly (2026-07-03 audit). */
.notif .dot { top: -4px; }

/* Settings: rows had margin:0 auto with intrinsic widths — cards floated at
   odd offsets in the empty panel. Full-width rows inside a left-aligned group;
   groups stack with section labels (2026-07-03 audit). */
.setsec { margin-bottom: 26px; }
.setsec .page__seclabel { margin-top: 0; }
.setsec .setrow { margin: 0; width: 100%; }

/* Appearance theme: Monochrome.
   Neutralizes decorative chrome while preserving semantic status colors:
   red alerts/live badges, green online/live presence, blue watching-live rings. */
html.vtheme-mono {
  --purple: #d2d6da;
  --gold: #c6c9ce;
  --fuel: #b7bbc1;
  --green-tint: rgba(255,255,255,0.12);
  --green-line: rgba(255,255,255,0.32);
}
html.vtheme-mono,
html.vtheme-mono body {
  background: #050505 !important;
}
html.vtheme-mono #vfx-halftone,
html.vtheme-mono .vfx-overlay-field {
  filter: saturate(0) contrast(1.06);
}
html.vtheme-mono .app3 > .rail,
html.vtheme-mono .app3 > .lives,
html.vtheme-mono .app3 .stage .chat,
html.vtheme-mono .app3 .stage .mlist,
html.vtheme-mono .pcol,
html.vtheme-mono .page,
html.vtheme-mono .vid-hero,
html.vtheme-mono .musec-hero {
  background: rgba(10, 10, 11, 0.62) !important;
  border-color: rgba(255,255,255,0.11) !important;
}
html.vtheme-mono .dpf,
html.vtheme-mono .dpf--profilecard,
html.vtheme-mono .ctxmenu,
html.vtheme-mono .musec-pop,
html.vtheme-mono .mqpanel,
html.vtheme-mono .vtoast,
html.vtheme-mono .shop-modal__card,
html.vtheme-mono .aopop,
html.vtheme-mono .glpop,
html.vtheme-mono .wsheet__card,
html.vtheme-mono .hub-upload__card,
html.vtheme-mono .cwin-cashmodal,
html.vtheme-mono .evtpop,
html.vtheme-mono .npop,
html.vtheme-mono .cwin {
  background: rgba(12,12,13,0.88) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html.vtheme-mono .rail .sq--btn.active,
html.vtheme-mono .app3 .rail .sq--btn.active .dm-glyph,
html.vtheme-mono .app3 .rail .sq--btn.active .dmw-icon,
html.vtheme-mono .m3 .tb.on {
  color: #f4f5f6 !important;
}
html.vtheme-mono .lbtab.on,
html.vtheme-mono .shop2-tab.on,
html.vtheme-mono .glchip.on,
html.vtheme-mono .musec-tab.on,
html.vtheme-mono .vid-typechips .glchip.on,
html.vtheme-mono .pmk-opt--on {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.38) !important;
  color: #f5f6f7 !important;
}
html.vtheme-mono .lbtab.on .dm-glyph,
html.vtheme-mono .shop2-tab.on .dm-glyph,
html.vtheme-mono .glchip.on .dm-glyph,
html.vtheme-mono .dmw-num {
  color: #d8dbe0 !important;
}
html.vtheme-mono .pmk-switch--on {
  background: #f1f3f5;
  border-color: #f1f3f5;
}
html.vtheme-mono .pmk-switch--on .pmk-switch__knob {
  background: #080808;
}
html.vtheme-mono .dpf-input:focus,
html.vtheme-mono .dpfe__finput:focus {
  border-color: #d8dbe0;
}
html.vtheme-mono :focus-visible {
  outline-color: #f4f5f6;
}
html.vtheme-mono .w--cash .wic,
html.vtheme-mono .w--gems .wic,
html.vtheme-mono .w--fuel .wic,
html.vtheme-mono .w--robux .wic,
html.vtheme-mono .dpfm-mval--cash,
html.vtheme-mono .dpfm-mval--gems .ic,
html.vtheme-mono .dpfm-mval--rank,
html.vtheme-mono .pmk-wellchip--cash,
html.vtheme-mono .pmk-wellchip--gems,
html.vtheme-mono .pmk-wellchip--fuel,
html.vtheme-mono .pmk-rankchip,
html.vtheme-mono .pmk-rankval {
  color: #d7dbe0 !important;
}
html.vtheme-mono .wallet .wic svg [fill]:not([fill="none"]),
html.vtheme-mono .dpfm-mval svg [fill]:not([fill="none"]),
html.vtheme-mono .pmk-wellchip svg [fill]:not([fill="none"]),
html.vtheme-mono .pmk-rankchip svg [fill]:not([fill="none"]),
html.vtheme-mono .shop2-chip svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}
html.vtheme-mono .wallet .wic svg [stroke]:not([stroke="none"]),
html.vtheme-mono .dpfm-mval svg [stroke]:not([stroke="none"]),
html.vtheme-mono .pmk-wellchip svg [stroke]:not([stroke="none"]),
html.vtheme-mono .pmk-rankchip svg [stroke]:not([stroke="none"]),
html.vtheme-mono .shop2-chip svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}
html.vtheme-mono .dpfm-herobtn--gear.on,
html.vtheme-mono .dpfm-edit.on,
html.vtheme-mono .dpfm-viewed.on,
html.vtheme-mono .dpfm-vfollow.on {
  background: rgba(255,255,255,0.13) !important;
  color: #f4f5f6 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24) !important;
}
html.vtheme-mono .notif .dot,
html.vtheme-mono .m3 .top .reddot,
html.vtheme-mono .m3 .tb .tdot,
html.vtheme-mono .m3 .tb .tbadge,
html.vtheme-mono .m3 .tb .bd {
  background: var(--red) !important;
  color: #fff !important;
}
html.vtheme-mono .pmk-dot--online,
html.vtheme-mono .dot-online,
html.vtheme-mono .avatar__dot--online,
html.vtheme-mono .pf-dot--online,
html.vtheme-mono .wpf-pdot--online,
html.vtheme-mono .wds-status--online i {
  background-color: var(--green) !important;
}
html.vtheme-mono .av--live .avbg {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 4px var(--red) !important;
}
html.vtheme-mono .av--watch .avbg {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 4px var(--blue) !important;
}
html.vtheme-mono .av--ring .avbg {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 4px var(--green) !important;
}
html.vtheme-mono .lr-live,
html.vtheme-mono .minilive,
html.vtheme-mono .factions button.join .ic {
  color: var(--red) !important;
}
html.vtheme-mono .watching {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* Appearance theme: Pink.
   Tints decorative chrome and the halftone field while leaving semantic
   red alerts, green live/online, and blue watching-live signals unchanged. */
html.vtheme-pink {
  --purple: #ff9bd5;
  --gold: #ffc0dc;
  --fuel: #f08ac1;
}
html.vtheme-pink,
html.vtheme-pink body {
  background: #080507 !important;
}
html.vtheme-pink #vfx-halftone,
html.vtheme-pink .vfx-overlay-field {
  filter: saturate(1.08) contrast(1.03);
}
html.vtheme-pink .app3 > .rail,
html.vtheme-pink .app3 > .lives,
html.vtheme-pink .app3 .stage .chat,
html.vtheme-pink .app3 .stage .mlist,
html.vtheme-pink .pcol,
html.vtheme-pink .page,
html.vtheme-pink .vid-hero,
html.vtheme-pink .musec-hero {
  background: rgba(14, 7, 12, 0.64) !important;
  border-color: rgba(255,154,203,0.13) !important;
}
html.vtheme-pink .dpf,
html.vtheme-pink .dpf--profilecard,
html.vtheme-pink .ctxmenu,
html.vtheme-pink .musec-pop,
html.vtheme-pink .mqpanel,
html.vtheme-pink .vtoast,
html.vtheme-pink .shop-modal__card,
html.vtheme-pink .aopop,
html.vtheme-pink .glpop,
html.vtheme-pink .wsheet__card,
html.vtheme-pink .hub-upload__card,
html.vtheme-pink .cwin-cashmodal,
html.vtheme-pink .evtpop,
html.vtheme-pink .npop,
html.vtheme-pink .cwin {
  background: rgba(17,8,14,0.88) !important;
  border-color: rgba(255,154,203,0.17) !important;
}
html.vtheme-pink .rail .sq--btn.active,
html.vtheme-pink .app3 .rail .sq--btn.active .dm-glyph,
html.vtheme-pink .app3 .rail .sq--btn.active .dmw-icon,
html.vtheme-pink .m3 .tb.on,
html.vtheme-pink .dpf-theme__check,
html.vtheme-pink .dpfe__save,
html.vtheme-pink .mp-reordering,
html.vtheme-pink .mp-tip svg {
  color: #ffc4e2 !important;
}
html.vtheme-pink .lbtab.on,
html.vtheme-pink .shop2-tab.on,
html.vtheme-pink .glchip.on,
html.vtheme-pink .musec-tab.on,
html.vtheme-pink .vid-typechips .glchip.on,
html.vtheme-pink .pmk-opt--on,
html.vtheme-pink .dpf-theme.on {
  background: rgba(244,114,182,0.13) !important;
  border-color: rgba(255,154,203,0.42) !important;
  color: #ffe5f3 !important;
}
html.vtheme-pink .lbtab.on .dm-glyph,
html.vtheme-pink .shop2-tab.on .dm-glyph,
html.vtheme-pink .glchip.on .dm-glyph {
  color: #ff9acb !important;
}
html.vtheme-pink .hcount,
html.vtheme-pink .hcount .dmw-num,
html.vtheme-pink .hcount .dm-glyph,
html.vtheme-pink .mlist__head .cnt,
html.vtheme-pink .mlist__head .cnt .dmw-num,
html.vtheme-pink .mlist__head .cnt .dm-glyph {
  color: #ff9acb !important;
}
html.vtheme-pink .pmk-switch--on {
  background: #ff9acb;
  border-color: #ff9acb;
}
html.vtheme-pink .pmk-switch--on .pmk-switch__knob {
  background: #090609;
}
html.vtheme-pink .dpf-input:focus,
html.vtheme-pink .dpfe__finput:focus {
  border-color: #ff9acb;
}
html.vtheme-pink :focus-visible {
  outline-color: #ffc4e2;
}
html.vtheme-pink .dpfm-herobtn--gear.on,
html.vtheme-pink .dpfm-edit.on,
html.vtheme-pink .dpfm-viewed.on,
html.vtheme-pink .dpfm-vfollow.on {
  background: rgba(244,114,182,0.13) !important;
  color: #ffe5f3 !important;
  box-shadow: inset 0 0 0 1px rgba(255,154,203,0.26) !important;
}
html.vtheme-pink .crop__zoomrow input[type="range"] {
  accent-color: #ff9acb;
}
html.vtheme-pink .crop__spin {
  border-top-color: #ff9acb;
}