/* ═══════════════════════════════════════════════════════════════════
   Toolbar SVG icons (2026-05-02b)
   tools.js now ships inline SVGs for Profile/DMs/Notes/Keyboard so the
   bottom toolbar can never fall back to "PR/DM/NT/KB" letters when this
   stylesheet fails to load. These rules:
     • restore an icon stroke color (the older pseudo-element painter
       used `color: transparent !important` to hide the letter labels —
       which would also hide our currentColor SVG strokes);
     • hide the legacy ::before/::after silhouettes when an <svg> exists
       so we don't get a doubled icon;
     • size the SVG inside the icon slot consistently with the previous
       glyph footprint.
   ─────────────────────────────────────────────────────────────────── */
.bb-tk-tab .bb-ic {
  /* Override the older `color: transparent !important` so SVG strokes
     using currentColor render as a soft white that picks up the active
     accent. Letters are still hidden via font-size:0. */
  color: rgba(244,238,248,.82) !important;
}
.bb-tk-tab .bb-ic > svg {
  width: 22px;
  height: 22px;
  display: block;
  color: inherit;
  pointer-events: none;
}
.bb-tk-tab .bb-ic:has(> svg)::before,
.bb-tk-tab .bb-ic:has(> svg)::after {
  display: none !important;
  content: none !important;
}
.bb-tk-tab.active .bb-ic > svg { color: var(--accent, #ffd76b); }

.tk-tab .tk-tab-ic {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: rgba(244,238,248,.82);
  font-size: 0; /* hide any letter fallback */
}
.tk-tab .tk-tab-ic > svg {
  width: 20px;
  height: 20px;
  display: block;
  color: inherit;
}
.tk-tab.active .tk-tab-ic { color: var(--accent, #ffd76b); }

/* ═══════════════════════════════════════════════════════════════════
   Site-wide darker scrollbars (2026-05-02b)
   D asked for the visible scrollbars to be darker so they stop reading
   as bright white tracks against the dark theme. Applied broadly via
   :root so every page (room chat, drawers, library, music page, etc.)
   inherits without per-component overrides.
   ─────────────────────────────────────────────────────────────────── */
:root {
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.55);
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(0,0,0,.55);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,.55);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.28);
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════
   Splash cinematic → menu fade sequence (2026-05-02c)
   D's ask: "the splash page shows a video which is cool but it should
   then fade to show the splash menu that lets user decide to play or
   go to que." Keep the cinematic intro reading clean (just mark +
   title + video for ~2.4s) and then fade in the steps + actions over
   it. home.js adds `.splash-revealed` after the reveal timer (or on
   first user tap, whichever comes first).
   ─────────────────────────────────────────────────────────────────── */
.ls-splash:not(.splash-revealed) .ls-splash-reel,
.ls-splash:not(.splash-revealed) .ls-splash-steps,
.ls-splash:not(.splash-revealed) .ls-splash-actions,
.ls-splash:not(.splash-revealed) .ls-splash-audio-control,
.ls-splash:not(.splash-revealed) .ls-splash-foot {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .65s ease, transform .65s ease;
}
.ls-splash.splash-revealed .ls-splash-reel,
.ls-splash.splash-revealed .ls-splash-steps,
.ls-splash.splash-revealed .ls-splash-actions,
.ls-splash.splash-revealed .ls-splash-audio-control,
.ls-splash.splash-revealed .ls-splash-foot {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Stagger so the menu reveals in a graceful cascade, not all at once. */
  animation: none;
  transition: opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
}
.ls-splash.splash-revealed .ls-splash-reel        { transition-delay: 0s; }
.ls-splash.splash-revealed .ls-splash-steps       { transition-delay: .12s; }
.ls-splash.splash-revealed .ls-splash-actions     { transition-delay: .24s; }
.ls-splash.splash-revealed .ls-splash-audio-control { transition-delay: .34s; }
.ls-splash.splash-revealed .ls-splash-foot        { transition-delay: .42s; }
/* Pulse the primary "Enter & Join" button briefly when the menu lands
   so D's eye is drawn to it. */
.ls-splash.splash-revealed .ls-splash-go {
  animation: splashGoPulse 1.4s ease-out .42s 1;
}
@keyframes splashGoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(120,216,255,.55); }
  60%  { box-shadow: 0 0 0 16px rgba(120,216,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(120,216,255,0); }
}

/* ═══════════════════════════════════════════════════════════════════
   Bottombar Profile avatar + status dot (2026-05-02c)
   D asked to see their avatar + away status straight from the user
   toolbar (not just inside the open drawer), plus a DM notification
   badge if they get a message.

   Layout: when a user has signed in, the Profile tab shows their live
   avatar (image / emoji / initials) instead of the generic silhouette.
   A small status dot sits at the bottom-right of the avatar — green
   for Active, amber for Away. The DM tab already paints `.bb-tab-badge`
   (id `bb-dm-badge`) — these rules just nudge it to be more visible.
   ─────────────────────────────────────────────────────────────────── */
.bb-tk-tab .bb-prof-avatar {
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 auto 1px;
  display: inline-grid;
  place-items: center;
}
.bb-tk-tab .bb-prof-avatar-art {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06) center/cover no-repeat;
  color: var(--text, #f0eaf6);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  text-transform: uppercase;
  line-height: 1;
}
.bb-tk-tab .bb-prof-avatar-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #15101a;
  background: #5fe27d;
  box-shadow: 0 0 6px rgba(95,226,125,.6);
}
.bb-tk-tab .bb-prof-avatar-status[data-status="away"] {
  background: #f0a050;
  box-shadow: 0 0 6px rgba(240,160,80,.55);
}
.bb-tk-tab.active .bb-prof-avatar-art {
  border-color: var(--accent, #ffd76b);
}
/* DM count badge: tiny pill anchored to the top-right of the DM tab.
   The element already exists in markup as `bb-tab-badge`; this only
   makes sure it pops visually against the dark bottombar so D notices
   incoming DMs at a glance. */
/* ═══════════════════════════════════════════════════════════════════
   Toolbar SVG icons (2026-05-02b)
   tools.js now ships inline SVGs for Profile/DMs/Notes/Keyboard so the
   bottom toolbar can never fall back to "PR/DM/NT/KB" letters when this
   stylesheet fails to load. These rules:
     • restore an icon stroke color (the older pseudo-element painter
       used `color: transparent !important` to hide the letter labels —
       which would also hide our currentColor SVG strokes);
     • hide the legacy ::before/::after silhouettes when an <svg> exists
       so we don't get a doubled icon;
     • size the SVG inside the icon slot consistently with the previous
       glyph footprint.
   ─────────────────────────────────────────────────────────────────── */
.bb-tk-tab .bb-ic {
  /* Override the older `color: transparent !important` so SVG strokes
     using currentColor render as a soft white that picks up the active
     accent. Letters are still hidden via font-size:0. */
  color: rgba(244,238,248,.82) !important;
}
.bb-tk-tab .bb-ic > svg {
  width: 22px;
  height: 22px;
  display: block;
  color: inherit;
  pointer-events: none;
}
.bb-tk-tab .bb-ic:has(> svg)::before,
.bb-tk-tab .bb-ic:has(> svg)::after {
  display: none !important;
  content: none !important;
}
.bb-tk-tab.active .bb-ic > svg { color: var(--accent, #ffd76b); }

.tk-tab .tk-tab-ic {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: rgba(244,238,248,.82);
  font-size: 0; /* hide any letter fallback */
}
.tk-tab .tk-tab-ic > svg {
  width: 20px;
  height: 20px;
  display: block;
  color: inherit;
}
.tk-tab.active .tk-tab-ic { color: var(--accent, #ffd76b); }

/* ═══════════════════════════════════════════════════════════════════
   Site-wide darker scrollbars (2026-05-02b)
   D asked for the visible scrollbars to be darker so they stop reading
   as bright white tracks against the dark theme. Applied broadly via
   :root so every page (room chat, drawers, library, music page, etc.)
   inherits without per-component overrides.
   ─────────────────────────────────────────────────────────────────── */
:root {
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.55);
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(0,0,0,.55);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,.55);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.28);
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════
   Splash cinematic → menu fade sequence (2026-05-02c)
   D's ask: "the splash page shows a video which is cool but it should
   then fade to show the splash menu that lets user decide to play or
   go to que." Keep the cinematic intro reading clean (just mark +
   title + video for ~2.4s) and then fade in the steps + actions over
   it. home.js adds `.splash-revealed` after the reveal timer (or on
   first user tap, whichever comes first).
   ─────────────────────────────────────────────────────────────────── */
.ls-splash:not(.splash-revealed) .ls-splash-reel,
.ls-splash:not(.splash-revealed) .ls-splash-steps,
.ls-splash:not(.splash-revealed) .ls-splash-actions,
.ls-splash:not(.splash-revealed) .ls-splash-audio-control,
.ls-splash:not(.splash-revealed) .ls-splash-foot {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .65s ease, transform .65s ease;
}
.ls-splash.splash-revealed .ls-splash-reel,
.ls-splash.splash-revealed .ls-splash-steps,
.ls-splash.splash-revealed .ls-splash-actions,
.ls-splash.splash-revealed .ls-splash-audio-control,
.ls-splash.splash-revealed .ls-splash-foot {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Stagger so the menu reveals in a graceful cascade, not all at once. */
  animation: none;
  transition: opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
}
.ls-splash.splash-revealed .ls-splash-reel        { transition-delay: 0s; }
.ls-splash.splash-revealed .ls-splash-steps       { transition-delay: .12s; }
.ls-splash.splash-revealed .ls-splash-actions     { transition-delay: .24s; }
.ls-splash.splash-revealed .ls-splash-audio-control { transition-delay: .34s; }
.ls-splash.splash-revealed .ls-splash-foot        { transition-delay: .42s; }
/* Pulse the primary "Enter & Join" button briefly when the menu lands
   so D's eye is drawn to it. */
.ls-splash.splash-revealed .ls-splash-go {
  animation: splashGoPulse 1.4s ease-out .42s 1;
}
@keyframes splashGoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(120,216,255,.55); }
  60%  { box-shadow: 0 0 0 16px rgba(120,216,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(120,216,255,0); }
}

/* ═══════════════════════════════════════════════════════════════════
   Bottombar Profile avatar + status dot (2026-05-02c)
   D asked to see their avatar + away status straight from the user
   toolbar (not just inside the open drawer), plus a DM notification
   badge if they get a message.

   Layout: when a user has signed in, the Profile tab shows their live
   avatar (image / emoji / initials) instead of the generic silhouette.
   A small status dot sits at the bottom-right of the avatar — green
   for Active, amber for Away. The DM tab already paints `.bb-tab-badge`
   (id `bb-dm-badge`) — these rules just nudge it to be more visible.
   ─────────────────────────────────────────────────────────────────── */
.bb-tk-tab .bb-prof-avatar {
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 auto 1px;
  display: inline-grid;
  place-items: center;
}
.bb-tk-tab .bb-prof-avatar-art {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06) center/cover no-repeat;
  color: var(--text, #f0eaf6);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  text-transform: uppercase;
  line-height: 1;
}
.bb-tk-tab .bb-prof-avatar-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #15101a;
  background: #5fe27d;
  box-shadow: 0 0 6px rgba(95,226,125,.6);
}
.bb-tk-tab .bb-prof-avatar-status[data-status="away"] {
  background: #f0a050;
  box-shadow: 0 0 6px rgba(240,160,80,.55);
}
.bb-tk-tab.active .bb-prof-avatar-art {
  border-color: var(--accent, #ffd76b);
}
/* DM count badge: tiny pill anchored to the top-right of the DM tab.
   The element already exists in markup as `bb-tab-badge`; this only
   makes sure it pops visually against the dark bottombar so D notices
   incoming DMs at a glance. */
.bb-tk-tab .bb-tab-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5577, #ff3863);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(255,56,99,.45);
  border: 1.5px solid #15101a;
}
.bb-tk-tab .bb-tab-badge[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Inline rename-room editor (2026-05-02b)
   Replaces the OS prompt() dialog with an in-page editable field that
   matches the dark site theme. Sits where the h1#room-name normally
   shows so the layout doesn't jump.
   ─────────────────────────────────────────────────────────────────── */
.room-name-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.room-name-editor .room-name-input {
  flex: 1 1 220px;
  min-width: 0;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: var(--text, #f0eaf6);
  padding: 8px 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.room-name-editor .room-name-input:focus {
  outline: none;
  border-color: var(--accent, #f0a050);
  box-shadow: 0 0 0 3px rgba(240,160,80,.18);
}

/* ═══════════════════════════════════════════════════════════════════
   Hide ENTER VR buttons in top nav (2026-05-02b)
   D wants the link gone for now while VR isn't ready, but the vr/
   folder + pages stay reachable directly. Hide via CSS so we don't have
   to edit every page; un-hiding later is a 1-line revert.
   ─────────────────────────────────────────────────────────────────── */
.ls-topnav-right .ls-enter-vr-btn,
.ls-topnav .ls-enter-vr-btn { display: none !important; }

/* 2026-05-02 hotfix: after the clean-branch merge the legacy top-nav helper
   buttons made a second row of mystery icons on the lobby. Keep the useful
   global controls injected by chrome.js (site mute, music, keyboard, help,
   minimize/menu), but hide the old feed / VR-scale / theme-cycle controls
   until they have a clearer home. */
.ls-topnav-right #feed-drawer-toggle,
.ls-topnav-right #vr-mode-toggle,
.ls-topnav-right #theme-cycle {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Hide Chat & Canvas top-nav link (2026-05-02d)
   D's call: "Can take the chat and canvas out of the top menu cause
   they are with the rest in the lobby." The /chat.html page itself
   stays — only the nav link goes. Done with a CSS rule rather than
   HTML edits across 11 pages so re-enabling is a 1-line revert.
   ─────────────────────────────────────────────────────────────────── */
.ls-topnav-links a[href="chat.html"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Hide Reddit Feed (FD) top-nav button (2026-05-02d)
   D wants the Reddit feed treated as a future room type rather than a
   global side drawer. Hide the FD toggle button until the room-type
   version is built. Drawer code stays so we can re-enable it as a
   room feature later. */
.ls-topnav-right #feed-drawer-toggle { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Hide FreQBoard link in music page (2026-05-02d)
   D wants FreQBoard unlinked from the music page until it's ready.
   Targets the inline link on music.html via attribute selector so we
   don't have to touch the HTML. */
a[href="freqboard.html"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Music + Karaoke room scroll fix (2026-05-02d)
   D's complaint: "the music room wont scroll and should also be able
   to fit on one page". `body.ls-page-room` is `height: 100vh; overflow:
   hidden` for chat-style rooms, but the music room's feature pane has
   the YouTube player + Add-to-queue + Library + Suggestions + queue
   list that overflow on small screens. Allow vertical scroll inside
   the feature pane only when the room type is music or karaoke (the
   ls-room-music / ls-room-karaoke body class is added by room.js when
   the room loads). Chat rail to the right keeps its existing layout.
   ─────────────────────────────────────────────────────────────────── */
body.ls-room-music .room-feature,
body.ls-room-karaoke .room-feature {
  overflow-y: auto !important;
}
body.ls-room-music .room-pane[data-pane="youtube"],
body.ls-room-karaoke .room-pane[data-pane="youtube"] {
  overflow-y: auto;
  padding-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 20 — away-message presets row (2026-05-02e)
   The "Active" pill alone wasn't a clear discoverable UI for setting an
   away message. New row of one-tap preset chips beneath the away input
   gives first-time users an obvious "I can change my status" affordance
   and lets repeat users skip typing. "Clear" resets to Active.
   ─────────────────────────────────────────────────────────────────── */
.tk-prof-away-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0;
  padding-left: 0;
}
.tk-prof-away-presets button {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(244,238,248,.78);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .02em;
  padding: 3px 9px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tk-prof-away-presets button:hover {
  border-color: var(--accent, #f0a050);
  color: var(--text, #f0eaf6);
  background: rgba(240,160,80,.10);
}
.tk-prof-away-presets button[data-away-preset=""] {
  border-style: dashed;
  color: rgba(244,238,248,.6);
}
/* Always-visible away input (was hidden until toggled). Phase 20. */
.tk-prof-status-row-v2 {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tk-prof-status-row-v2 input {
  flex: 1 1 auto;
  min-width: 0;
}
/* Phase 20 visible away-message hint — D: "remember to be able to set
   away messages" — discovery cue for first-time profile users. */
.tk-prof-away-hint {
  margin: 4px 0 4px;
  font-size: .72rem;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════
   Profile modal compaction (2026-05-02e — Phase 20 follow-up)
   D: "The make your profile should be more compact in the sense it shows
   more on one screen without as much scrolling — don't need the 'make
   your profile' or 'saved on this device' etc that just takes up space."
   We dropped the header block in markup and replace it with a tiny
   corner X close button. Cards/buttons shrink across the modal so the
   live preview + tabs + avatar grid all fit one mobile viewport.
   ─────────────────────────────────────────────────────────────────── */
.id-modal-close-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.55);
  color: rgba(244,238,248,.86);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.id-modal-close-x:hover {
  background: rgba(0,0,0,.78);
  border-color: var(--accent, #f0a050);
}
#id-modal .id-card {
  padding-top: 8px;
  max-height: 92dvh;
  overflow: hidden;
}
#id-modal .id-body {
  gap: 9px;
  padding: 10px 14px 16px;
  max-height: calc(92dvh - 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#id-modal .id-live-card {
  padding: 10px 12px;
  gap: 8px;
}
#id-modal .id-body label,
#id-modal .id-body summary {
  font-size: .72rem;
}
#id-modal .id-body input,
#id-modal .id-body textarea {
  padding: 7px 9px;
}
#id-modal .id-source-tabs button,
#id-modal .id-tabs button {
  font-size: .82rem;
  padding: 6px 12px;
  min-height: 36px;
}
#id-modal .id-enter,
#id-modal .id-randomize {
  min-height: 38px;
  font-size: .92rem;
  padding: 8px 16px;
}
#id-modal .id-colors button {
  width: 28px;
  height: 28px;
}
#id-modal .id-profile-builder .lsid-avatar-grid {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
}
#id-modal .id-profile-builder .lsid-avatar-choice {
  padding: 4px;
}
#id-modal .id-profile-builder .lsid-avatar-choice img {
  width: 44px;
  height: 44px;
}
@media (max-width: 540px) {
  #id-modal .id-card {
    width: 96vw;
    max-height: 94dvh;
  }
  #id-modal .id-body {
    padding: 8px 12px 12px;
    gap: 7px;
    max-height: calc(94dvh - 16px);
  }
  #id-modal .id-live-card { padding: 8px 10px; gap: 6px; }
  #id-modal .id-profile-builder .lsid-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #id-modal .id-profile-builder .lsid-avatar-choice img {
    width: 40px;
    height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Splash — mobile-first fit-on-one-screen (2026-05-02e)
   D: "make sure the splash screen fits on one screen is mobile and
   touch friendly". The cinematic intro + reel + steps + actions list
   was overflowing on phones. Constrain the inner column height, scale
   reels + step cards down on narrow viewports, and ensure all action
   buttons sit above the safe-area inset on iOS. */
@media (max-width: 540px) {
  .ls-splash {
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    justify-content: center;
    overflow-y: auto;
  }
  .ls-splash-mark img { width: 64px; height: 64px; border-radius: 18px; }
  .ls-splash-title { font-size: clamp(2rem, 11vw, 3rem); margin-top: 6px; }
  .ls-splash-sub   { font-size: .68rem; margin-top: 4px; letter-spacing: .14em; }
  .ls-splash-reel  { margin-top: 10px; gap: 6px; }
  .ls-splash-clip  { min-height: 56px; aspect-ratio: 16 / 8; border-radius: 6px; }
  .ls-splash-clip b { font-size: .62rem; left: 6px; bottom: 5px; letter-spacing: .04em; }
  .ls-splash-steps { margin-top: 8px; grid-template-columns: 1fr; gap: 6px; }
  .ls-splash-step  { padding: 8px 12px; }
  .ls-splash-step-h { font-size: .8rem; }
  .ls-splash-step-p { font-size: .68rem; }
  .ls-splash-actions { margin-top: 10px; gap: 8px; flex-direction: row; }
  .ls-splash-go,
  .ls-splash-queue { min-height: 46px; padding: 10px 18px; font-size: .96rem; flex: 1 1 0; min-width: 0; }
  .ls-splash-go-arrow { display: inline; }
  .ls-splash-queue-sub { font-size: .56rem; }
  .ls-splash-audio-control { margin-top: 6px; min-height: 30px; }
  .ls-splash-foot { margin-top: 6px; font-size: .62rem; }
}
@media (max-height: 720px) and (max-width: 540px) {
  .ls-splash-reel { display: none; }
  .ls-splash-steps { display: none; }
  .ls-splash-foot { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DM thread — partner away pill (2026-05-02e)
   D: "should show the other users away message" — pill in the thread
   header so the user can see "Hey, this person is AFK" without having
   to inspect their profile.
   ─────────────────────────────────────────────────────────────────── */
.tk-dm-thread-away {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(240,160,80,.16);
  border: 1px solid rgba(240,160,80,.4);
  color: #ffd2a8;
  font-size: .65rem;
  letter-spacing: .04em;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════
   DM pane compaction (2026-05-02e)
   D: "People are going to want to be using their DM's and still able
   to see the room they are in so needs to be more compact". Shrink
   the DM list/thread internal padding + cap the pane height so the
   drawer doesn't slam over the entire room. The drawer's mini state
   (existing) keeps the pane shorter; this just trims the contents.
   ─────────────────────────────────────────────────────────────────── */
.tk-pane[data-tk-pane="dms"] { padding: 8px 10px !important; }
.tk-dm-listhead {
  padding: 4px 6px 6px !important;
  gap: 6px !important;
}
.tk-dm-new {
  font-size: .82rem !important;
  padding: 5px 10px !important;
  min-height: 32px !important;
}
.tk-dm-list .tk-dm-item {
  padding: 5px 8px !important;
  min-height: 38px !important;
}
.tk-dm-thread-head {
  padding: 5px 8px !important;
  gap: 8px !important;
  align-items: center !important;
}
.tk-dm-thread-pic {
  width: 28px !important;
  height: 28px !important;
}
.tk-dm-thread-form input {
  font-size: .88rem !important;
  padding: 6px 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Toolbar id-strip — surface the away message + more accent colour
   2026-05-02e. The away text already exists below the name (see
   paintIdStrip in tools.js) — these rules just give it more visual
   weight so D notices it (and remembers others see it on their end). */
.tk-id-status.is-away {
  color: #ffd2a8;
  background: rgba(240,160,80,.12);
  border: 1px solid rgba(240,160,80,.3);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  letter-spacing: .04em;
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════
   Que page — design polish (2026-05-02e)
   D: "give the Que some love — design wise with video backgrounds and
   better design and make sure working right." Layer in subtle motion,
   a slow ken-burns on the bg video, more glass on the panels, animated
   gradient on the join button so the room feels alive while waiting.
   The HTML side already has video bg + panels + queue list/chat (from
   the round-2 codex pass). This is purely visual polish.
   ─────────────────────────────────────────────────────────────────── */
.ls-page-queue .que-bg video {
  animation: queKenBurns 32s ease-in-out infinite alternate;
}
@keyframes queKenBurns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.4%, -1.0%); }
}
.ls-page-queue .que-bg-glass {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,196,87,.16) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(102,215,255,.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(7,4,10,.38), rgba(7,4,10,.88));
}
.ls-page-queue .que-card,
.ls-page-queue .que-panel {
  backdrop-filter: blur(22px) saturate(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 24px 80px -20px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04);
}
.ls-page-queue #que-join {
  background: linear-gradient(120deg, var(--accent, #f0a050), #ff7e5f, var(--accent2, #7cc7ff), var(--accent, #f0a050));
  background-size: 240% 100%;
  animation: queJoinShimmer 6s ease-in-out infinite;
  border: 0;
  color: #0e0915;
  font-weight: 800;
}
@keyframes queJoinShimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.ls-page-queue .que-clock strong {
  background: linear-gradient(90deg, var(--accent, #f0a050), var(--accent2, #7cc7ff));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .02em;
}
.ls-page-queue .que-section-head h2 {
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.ls-page-queue .que-line li {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  margin: 4px 0;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ls-page-queue .que-line li.is-self {
  border-color: var(--accent, #f0a050);
  background: rgba(240,160,80,.10);
  box-shadow: 0 0 0 1px rgba(240,160,80,.18);
}
.ls-page-queue .que-chat-form input {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text, #f0eaf6);
}
.ls-page-queue .que-enter-link {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,.14);
  color: rgba(244,238,248,.78);
  text-decoration: none;
  font-size: .82rem;
}
.ls-page-queue .que-enter-link:hover {
  border-color: var(--accent, #f0a050);
  color: var(--text, #f0eaf6);
}

/* ═══════════════════════════════════════════════════════════════════
   OSK action row — Select All / Copy / Cut / Paste / Undo / Clear
   2026-05-02e. D's brief: "give select all copy and paste buttons on it
   like they are keys". Sits beneath the standard letter rows + space row.
   Uses a different tint so they read as commands, not characters.
   ─────────────────────────────────────────────────────────────────── */
.ls-osk-row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 3px;
}
.ls-osk-key.act {
  flex: 1 0 0;
  font-size: .68rem;
  letter-spacing: .04em;
  min-height: 26px;
  background: rgba(255,255,255,.04);
  color: rgba(244,238,248,.8);
  border-color: rgba(255,255,255,.08);
}
.ls-osk-key.act:hover {
  background: rgba(120,216,255,.10);
  border-color: rgba(120,216,255,.32);
  color: var(--text, #f0eaf6);
}
body.vr-mode .ls-osk-key.act { font-size: .9rem; min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   Drawing toolbar — subtler / more cohesive (2026-05-02d)
   D's complaint: "the pen selector in the drawing room should be more
   subtle and in the bottom menu / or can expand above the bottom menu
   / or left side with toggle to show hide". The toolbar already lives
   above the bottombar and toggles on the Draw button — but it's huge
   (52x52 buttons, 1.5rem icons, wide color swatches) and dominates the
   canvas. Shrink to ~36px buttons, 1rem icons, tighter colors so the
   canvas reads as the focal point and the toolbar reads as a strip.
   ─────────────────────────────────────────────────────────────────── */
.cc-toolbar {
  padding: 6px 10px !important;
  gap: 4px !important;
  border-radius: 14px 14px 0 0 !important;
  background: rgba(20,12,18,.84) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.cc-tool {
  min-width: 36px !important;
  min-height: 36px !important;
  font-size: 1rem !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
}
.cc-color {
  width: 22px !important;
  height: 22px !important;
}
.cc-color-row { gap: 3px !important; }
.cc-tool-sep { height: 18px !important; margin: 0 3px !important; }
@media (max-width: 540px) {
  .cc-tool { min-width: 32px !important; min-height: 32px !important; font-size: .95rem !important; }
  .cc-color { width: 20px !important; height: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Lazy River polish (2026-05-02d) — first-pass GUI cleanup.
   D wants the river to feel cinematic: hide the camera-frame overlay
   that was framing the river itself (the [PHOTO TARGET] viewfinder
   dominated the scene), let the chat rail and the river breathe, and
   keep the Photo button visible. Bigger raft + smaller avatars is a
   river.js change (still pending); this is the chrome side.
   ─────────────────────────────────────────────────────────────────── */
body.ls-room-river .river-photo-frame,
body.ls-room-river .river-target-frame,
body.ls-room-river .river-camera-frame {
  display: none !important;
}
/* If the photo target shows up as a small pill instead of the giant
   center-of-screen frame, allow it. */
body.ls-room-river .river-photo-pill,
body.ls-room-river .photo-target {
  position: absolute;
  left: 14px;
  top: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: .78rem;
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
}
/* Hide the row of room mode chips (Photos / Branches / Zones) on the
   lazy river — D wants the GUI freed up. */
body.ls-room-river .river-mode-tabs,
body.ls-room-river .river-tabs,
body.ls-room-river .river-mode-row {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 15.5 (2026-05-02f) — retire inline rail composers when the
   toolbar Chat tab is canonical. tools.js sets `body.ls-chat-via-toolbar`
   when LSToolkit.registerChatSurface() lands. We hide the inline rails
   visually but keep them in the DOM for backward-compat so any code
   that still references their inputs / forms keeps working.
   ─────────────────────────────────────────────────────────────────── */
body.ls-chat-via-toolbar #room-chat-form,
body.ls-chat-via-toolbar #ls-room-saybar,
body.ls-chat-via-toolbar .ls-saybar,
body.ls-chat-via-toolbar .lobby-say-bar,
body.ls-chat-via-toolbar #ls-say-form,
body.ls-chat-via-toolbar .lobby-saybar {
  /* Visually retire — keep keyboard-focusable for any hidden flow that
     dispatches a synthetic submit, but remove from the layout so the
     room body / lobby canvas reads clean. */
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* 2026-05-04 — Lobby slide-out chat panel compose form is NOT a toolbar
   rail — always keep it visible regardless of ls-chat-via-toolbar state. */
.lobby-chat-panel .lobby-chat-compose {
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
/* Retire the global lib-saybar bottom dock too (the lobby's old
   floating Say bar was the same element). Same off-screen approach. */
body.ls-chat-via-toolbar .lib-saybar,
body.ls-chat-via-toolbar .ls-saybar-mount {
  display: none !important;
}

/* 2026-05-02h — Chat is now part of the user toolbar. Keyboard is
   contextual beside inputs, so the big bottom Keyboard tab is retired. */
.bb-tk-tab[data-tk-tab="keyboard"],
.tk-tab[data-tk-tab="keyboard"] {
  display: none !important;
}
/* 2026-05-04 — Settings moved to top-right nav menu. Remove from bottom bar. */
.bb-tk-tab[data-tk-tab="settings"],
.tk-tab[data-tk-tab="settings"] {
  display: none !important;
}
.bb-tk-tab[data-tk-tab="chat"] .bb-ic > svg {
  width: 24px;
  height: 24px;
  color: var(--bb-line, rgba(244,238,248,.72));
}
.tk-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.tk-chat-target {
  min-width: 0;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-chat-mode {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .72rem;
  color: rgba(255,255,255,.68);
}
.tk-chat-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 8px;
}
.tk-chat-channels[hidden] {
  display: none !important;
}
.tk-chat-channel {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.76);
  padding: 6px 12px;
  font-weight: 850;
}
.tk-chat-channel.active {
  border-color: rgba(115, 229, 209, .55);
  background: rgba(115, 229, 209, .16);
  color: #bffbf2;
}
.tk-chat-recent {
  display: grid;
  gap: 5px;
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 8px;
}
.tk-chat-recent-row {
  display: grid;
  grid-template-columns: minmax(56px, .32fr) minmax(0, 1fr);
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}
.tk-chat-recent-name {
  min-width: 0;
  color: var(--accent, #ffd76b);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-chat-recent-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-chat-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(10,7,17,.72);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 34px rgba(0,0,0,.26);
}
.tk-chat-composer input {
  min-width: 0;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 0 14px;
}
.tk-chat-mode-btn,
.tk-chat-dictate,
.tk-chat-voice,
.tk-chat-kb,
.tk-dm-kb,
.tk-note-kb,
.tk-qnote-kb {
  min-width: 42px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 850;
}
.tk-chat-mode-btn[aria-pressed="true"],
.tk-chat-voice.active,
.tk-note-kb:hover,
.tk-qnote-kb:hover,
.tk-dm-kb:hover,
.tk-chat-kb:hover {
  border-color: var(--accent, #ffd76b);
  color: var(--accent, #ffd76b);
}
.tk-chat-send {
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 16px;
}
.tk-pane-pad {
  position: relative;
}
.tk-note-kb {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.tk-qnote-inputrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.tk-dm-thread-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
@media (max-width: 620px) {
  .tk-chat-composer {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .tk-chat-dictate,
  .tk-chat-voice {
    font-size: 0;
    min-width: 40px;
  }
  .tk-chat-dictate::before { content: 'Mic'; font-size: .72rem; }
  .tk-chat-voice::before { content: 'Vo'; font-size: .72rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 21 (2026-05-02f) — New DM picker as a polished window
   D's brief: "when entering it it's a cool window with default options
   for easy selection and can leave custom as well". The picker already
   lists online users; this pass styles it as a real modal-feeling card,
   shows mascot avatars at usable size, adds an online-now header with
   count, polishes the search field, and adds a "type a name to invite"
   custom row at the bottom for cases where the partner isn't online yet.
   ─────────────────────────────────────────────────────────────────── */
.tk-dm-picker {
  position: absolute;
  inset: 8px;
  z-index: 4;
  background:
    linear-gradient(160deg, rgba(28,18,38,.96), rgba(14,10,22,.96)),
    radial-gradient(circle at 90% 0%, rgba(120,216,255,.16), transparent 60%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  backdrop-filter: blur(18px);
}
.tk-dm-picker.hidden { display: none; }
.tk-dm-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tk-dm-picker-head strong {
  font-size: .98rem;
  letter-spacing: -.01em;
}
.tk-dm-picker-head strong::before {
  content: '✏️ ';
  margin-right: 4px;
}
.tk-dm-picker-head + #tk-dm-picker-search,
.tk-dm-picker > input[type="search"] {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.55);
  color: var(--text, #f0eaf6);
  font-size: .92rem;
  width: 100%;
  box-sizing: border-box;
}
.tk-dm-picker > input[type="search"]:focus {
  outline: none;
  border-color: var(--accent, #f0a050);
  box-shadow: 0 0 0 3px rgba(240,160,80,.22);
}
.tk-dm-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  overflow-y: auto;
  max-height: calc(100% - 110px);
}
.tk-dm-picker-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 8px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
  position: relative;
  align-items: center;
  text-align: center;
}
.tk-dm-picker-item:hover {
  border-color: var(--accent, #f0a050);
  background: rgba(240,160,80,.08);
  transform: translateY(-1px);
}
.tk-dm-picker-item.is-blocked,
.tk-dm-picker-item.is-muted {
  opacity: .55;
}
.tk-dm-picker-item .tk-dm-pic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.14);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  color: rgba(255,255,255,.86);
}
.tk-dm-picker-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.tk-dm-picker-meta .tk-dm-name-btn {
  background: transparent;
  border: 0;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: -.01em;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tk-dm-picker-meta span:not(.tk-dm-name-btn) {
  font-size: .64rem;
  color: rgba(244,238,248,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tk-dm-picker-item .tk-dm-start {
  background: linear-gradient(135deg, var(--accent, #f0a050), #ff7e5f);
  border: 0;
  color: #0e0915;
  font-weight: 800;
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tk-dm-picker-item .tk-dm-more {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
}
.tk-dm-picker-item .tk-dm-more:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
}
.tk-dm-picker-empty {
  text-align: center;
  padding: 12px 4px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 10px;
  color: rgba(244,238,248,.6);
}
@media (max-width: 540px) {
  .tk-dm-picker { inset: 6px; padding: 10px; gap: 6px; }
  .tk-dm-picker-list { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
  .tk-dm-picker-item .tk-dm-pic { width: 48px; height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 14 (2026-05-02f) — Karaoke / Music room polish
   D: "Karaoke rooms are going to be popular so get that one right" +
   "the music room player should be bigger" + "compact 'Add to queue'
   library bar". Big YT embed, slimmer composer row, more inviting
   Library button, polished suggestion chips, queue list as scrollable
   cards. Keeps the existing markup; pure CSS.
   ─────────────────────────────────────────────────────────────────── */
body.ls-room-karaoke .yt-player-wrap,
body.ls-room-music .yt-player-wrap,
body.ls-room-theater .yt-player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: min(1100px, 100%);
  margin: 0 auto 10px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
body.ls-room-karaoke #yt-player,
body.ls-room-music #yt-player,
body.ls-room-theater #yt-player,
body.ls-room-karaoke .yt-player,
body.ls-room-music .yt-player,
body.ls-room-theater .yt-player {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
body.ls-room-karaoke .yt-empty,
body.ls-room-music .yt-empty,
body.ls-room-theater .yt-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: rgba(255,255,255,.6);
  font-size: 1rem;
}
body.ls-room-karaoke .yt-now-row,
body.ls-room-music .yt-now-row,
body.ls-room-theater .yt-now-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  font-size: .82rem;
  margin-bottom: 8px;
}
body.ls-room-karaoke .yt-now-row #yt-now-title,
body.ls-room-music .yt-now-row #yt-now-title,
body.ls-room-theater .yt-now-row #yt-now-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Compact Add-to-queue composer */
body.ls-room-karaoke .yt-add-row,
body.ls-room-music .yt-add-row,
body.ls-room-theater .yt-add-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  background: rgba(255,255,255,.02);
  padding: 6px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
}
body.ls-room-karaoke .yt-add-row #yt-input,
body.ls-room-music .yt-add-row #yt-input,
body.ls-room-theater .yt-add-row #yt-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .88rem;
  color: var(--text, #f0eaf6);
}
body.ls-room-karaoke .yt-add-row button,
body.ls-room-music .yt-add-row button,
body.ls-room-theater .yt-add-row button {
  padding: 6px 12px;
  font-size: .82rem;
  white-space: nowrap;
}
body.ls-room-karaoke #yt-lib-btn,
body.ls-room-music #yt-lib-btn,
body.ls-room-theater #yt-lib-btn {
  background: linear-gradient(135deg, var(--accent2, #7cc7ff), var(--accent, #f0a050));
  color: #0e0915;
  font-weight: 800;
  border: 0;
}
/* Suggestion chips */
body.ls-room-karaoke .yt-search-presets,
body.ls-room-music .yt-search-presets,
body.ls-room-theater .yt-search-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .76rem;
}
body.ls-room-karaoke .yt-search-presets a,
body.ls-room-music .yt-search-presets a,
body.ls-room-theater .yt-search-presets a {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(244,238,248,.86);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
body.ls-room-karaoke .yt-search-presets a:hover,
body.ls-room-music .yt-search-presets a:hover,
body.ls-room-theater .yt-search-presets a:hover {
  border-color: var(--accent, #f0a050);
  background: rgba(240,160,80,.10);
}
/* Queue list cards */
body.ls-room-karaoke .yt-queue,
body.ls-room-music .yt-queue,
body.ls-room-theater .yt-queue {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 36dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.ls-room-karaoke .yt-queue li,
body.ls-room-music .yt-queue li,
body.ls-room-theater .yt-queue li {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 540px) {
  body.ls-room-karaoke .yt-add-row,
  body.ls-room-music .yt-add-row,
  body.ls-room-theater .yt-add-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-wrap: nowrap;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body.ls-room-karaoke .yt-add-row #yt-input,
  body.ls-room-music .yt-add-row #yt-input,
  body.ls-room-theater .yt-add-row #yt-input {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.ls-room-karaoke .yt-add-row button,
  body.ls-room-music .yt-add-row button,
  body.ls-room-theater .yt-add-row button {
    width: 100% !important;
  }
  body.ls-room-karaoke .yt-wrap,
  body.ls-room-music .yt-wrap,
  body.ls-room-theater .yt-wrap,
  body.ls-room-karaoke .room-pane[data-pane="youtube"],
  body.ls-room-music .room-pane[data-pane="youtube"],
  body.ls-room-theater .room-pane[data-pane="youtube"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  body.ls-room-karaoke .yt-search-presets,
  body.ls-room-music .yt-search-presets,
  body.ls-room-theater .yt-search-presets {
    font-size: .72rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 12 (2026-05-02f) — lib-room-stage scaffold styling
   The shared lobby-style stage component (lib-room-stage.js) renders
   draggable avatars over a backdrop canvas. These rules cover the
   default appearance; rooms that want a custom backdrop set
   .ls-room-stage[data-mode="..."] body class via room.js.
   ─────────────────────────────────────────────────────────────────── */
.ls-room-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(120,60,160,.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255,140,80,.14), transparent 70%),
    linear-gradient(180deg, #14101c 0%, #0d0a14 60%, #050308 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.ls-room-stage-floor {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px);
  opacity: .35;
  pointer-events: none;
}
.ls-room-stage-avatar {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.45) center/cover no-repeat;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  cursor: grab;
  transition: transform .22s cubic-bezier(.2,.9,.25,1), border-color .12s;
  user-select: none;
  z-index: 1;
}
.ls-room-stage-avatar.is-self { border-color: var(--accent, #f0a050); box-shadow: 0 0 0 2px rgba(240,160,80,.22); }
.ls-room-stage-avatar:active { cursor: grabbing; transform: scale(1.04); }
.ls-room-stage-avatar .ls-room-stage-name {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .64rem;
  white-space: nowrap;
  background: rgba(0,0,0,.7);
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  pointer-events: none;
}
.ls-room-stage-avatar .ls-room-stage-bubble {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,14,28,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: .76rem;
  color: var(--text, #f0eaf6);
  white-space: nowrap;
  max-width: 260px;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.ls-room-stage-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.ls-room-stage-actions button {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(244,238,248,.86);
  border-radius: 999px;
  font-size: .72rem;
  padding: 4px 10px;
  cursor: pointer;
}
.ls-room-stage-actions button:hover { border-color: var(--accent, #f0a050); }
.ls-room-stage-actions button.is-on {
  background: var(--accent, #f0a050);
  color: #0e0915;
  border-color: var(--accent, #f0a050);
  font-weight: 800;
}

/* LittleScreen header logo image (2026-05-02g). */
.ls-logo {
  gap: 9px;
}
.ls-logo-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-block;
  border-radius: 11px;
  background: url("media/littlescreen-logo.png") center / cover no-repeat;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 8px 22px rgba(0,0,0,.24);
}
@media (max-width: 760px) {
  .ls-logo-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Home tile emoji icons (2026-05-02g)
   D's complaint: "Lobby has weird grey icons in upper left corner of
   the nodes". The old `.has-token` styling painted every tile's icon
   as a generic grey gradient square. home.js now adds `.is-emoji` and
   sets the room's actual emoji (🏛️, 🎤, 🛶, …) as textContent. These
   rules drop the gradient + ::before/::after silhouettes when the
   icon slot is in emoji mode and let the emoji read naturally.
   ─────────────────────────────────────────────────────────────────── */
.home-tile-icon.is-emoji {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 1.1rem !important;
  color: var(--text, #f0eaf6) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  isolation: auto;
}
.home-tile-icon.is-emoji::before,
.home-tile-icon.is-emoji::after {
  content: none !important;
  display: none !important;
}
.home-tile.has-art .home-tile-icon.is-emoji {
  background: rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

/* ═══════════════════════════════════════════════════════════════════
   Home page — fit-all-categories pass (2026-05-02g)
   D: "try to fit all the nodes on the same screen for the home so
   don't have to scroll". Aggressive shrink of strip, lobby card, and
   section spacing so on a desktop viewport (≈1080×900+) every
   category (Lobby + Chat + Debate + Sing + Play + Other) is above
   the fold. Mobile keeps normal scroll.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) and (min-height: 720px) {
  body.ls-page-home-v2 {
    padding-top: 50px;
    padding-bottom: 56px;
  }
  .home-main {
    gap: 6px !important;
    padding: 4px clamp(10px, 2vw, 18px) !important;
  }
  .home-strip {
    padding: 6px 12px !important;
    gap: 8px 12px !important;
  }
  .home-strip-clock strong {
    font-size: 1rem !important;
  }
  .home-feature .home-tile.featured {
    min-height: 78px !important;
    padding: 9px 12px !important;
  }
  .home-feature .home-tile.featured .home-tile-name {
    font-size: 1rem !important;
  }
  .home-feature .home-tile.featured .home-tile-desc {
    font-size: .72rem !important;
    -webkit-line-clamp: 1 !important;
  }
  .home-section {
    gap: 3px !important;
  }
  .home-sec-head h2 {
    font-size: .82rem !important;
  }
  .home-sec-head .home-sec-ic {
    width: 22px !important;
    height: 22px !important;
  }
  .home-sec-head p {
    font-size: .64rem !important;
  }
  .home-tile {
    min-height: 80px !important;
    padding: 7px 10px !important;
    gap: 3px !important;
  }
  .home-tile-name { font-size: .86rem !important; }
  .home-tile-desc {
    font-size: .66rem !important;
    -webkit-line-clamp: 1 !important;
    line-height: 1.22 !important;
  }
  .home-tile-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .home-sec-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 5px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Home — flat unified grid (2026-05-02g)
   D: "they don't have to be divided into categories if that isn't going
   to allow them to grid/fill up the page equally so they fit on one
   page". Drop the per-category Chat / Debate / Sing / Play / Other
   section headers and let every tile share ONE auto-fill grid so the
   page reads as a balanced wall of room cards. The Lobby featured card
   spans the full row at the top; the strip stays at the very top.

   Implementation note: home.js still renders rooms into the per-category
   `.home-sec-grid` containers — using `display: contents` lets those
   sub-grids participate transparently in the parent .home-main grid.
   No JS changes needed; pure CSS rearrangement.
   ─────────────────────────────────────────────────────────────────── */
body.ls-page-home-v2 .home-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  align-content: start;
}
body.ls-page-home-v2 .home-strip,
body.ls-page-home-v2 .home-feature,
body.ls-page-home-v2 .home-action-section {
  grid-column: 1 / -1;
}
/* 2026-05-25 — Without this, the 5 action cards (Watch/Sing/Debate/Host/
   Safety) got crammed into ONE 190px grid cell, stacked vertically as a
   skinny column on the left while the right of the page sat empty. */
body.ls-page-home-v2 .home-section,
body.ls-page-home-v2 .home-sec-grid {
  display: contents;
}
body.ls-page-home-v2 .home-sec-head {
  display: none !important;
}
/* Tile styling tweaks for the flat grid: every tile is the same height
   so the wall reads tidy. Hub tiles (Chat / Debate / Sing / Play hubs)
   keep their existing accent. */
body.ls-page-home-v2 .home-tile {
  min-height: 110px !important;
  padding: 9px 11px !important;
}
body.ls-page-home-v2 .home-tile-name { font-size: .92rem !important; }
body.ls-page-home-v2 .home-tile-desc { font-size: .7rem !important; -webkit-line-clamp: 2 !important; }

/* On dense desktop viewports, push grid harder + shrink tiles to fit
   every room above the fold. Mobile keeps a friendlier 2-col grid. */
@media (min-width: 900px) and (min-height: 720px) {
  body.ls-page-home-v2 .home-main {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 6px;
    padding: 4px clamp(10px, 2vw, 18px);
  }
  body.ls-page-home-v2 .home-tile {
    min-height: 90px !important;
    padding: 7px 10px !important;
  }
  body.ls-page-home-v2 .home-tile-desc {
    -webkit-line-clamp: 1 !important;
    font-size: .66rem !important;
  }
  body.ls-page-home-v2 .home-feature .home-tile.featured {
    min-height: 70px !important;
    padding: 8px 12px !important;
  }
}
@media (max-width: 540px) {
  body.ls-page-home-v2 .home-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  body.ls-page-home-v2 .home-tile {
    min-height: 96px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Top-nav clock + date pill (2026-05-02h)
   D's brief: "can put the time and date up in the top menu next to the
   little screen label/icon". chrome.js injects the pill on every page.
   These rules style it as a subtle accent next to the logo and let the
   home page hide its now-redundant `.home-strip` card.
   ─────────────────────────────────────────────────────────────────── */
.ls-topnav-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin-left: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  color: rgba(244,238,248,.86);
}
.ls-topnav-clock-time {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text, #f0eaf6);
}
.ls-topnav-clock-date {
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(244,238,248,.6);
}
@media (max-width: 760px) {
  .ls-topnav-clock { padding: 3px 8px; gap: 6px; }
  .ls-topnav-clock-time { font-size: .76rem; }
  .ls-topnav-clock-date { display: none; }
}

/* The home page is now a real front door again: keep the compact intro
   visible and rely on home.css for one-screen tuning. */
body.ls-page-home-v2 .home-strip { display: grid !important; }

/* Shrink the Lobby featured card so it stops dominating the grid.
   Still spans full width (grid-column: 1/-1) but reads as a tighter
   row that matches the other tiles' visual weight. */
body.ls-page-home-v2 .home-feature .home-tile.featured {
  min-height: 64px !important;
  padding: 8px 14px !important;
}
body.ls-page-home-v2 .home-feature .home-tile.featured .home-tile-name {
  font-size: 1rem !important;
}
body.ls-page-home-v2 .home-feature .home-tile.featured .home-tile-desc {
  font-size: .7rem !important;
  -webkit-line-clamp: 1 !important;
}

@media (max-width: 760px) {
  body.ls-page-home-v2 .home-side {
    display: none !important;
  }
  body.ls-page-home-v2 .home-main {
    padding-bottom: 76px;
  }
  body.ls-page-home-v2 .home-strip {
    gap: 8px !important;
    padding: 9px 10px !important;
  }
  body.ls-page-home-v2 .home-intro-title {
    font-size: 1.18rem !important;
    line-height: 1.08 !important;
  }
  body.ls-page-home-v2 .home-strip .home-strip-greeting {
    font-size: .72rem !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  body.ls-page-home-v2 .home-intro-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  body.ls-page-home-v2 .home-intro-btn,
  body.ls-page-home-v2 .home-random-mini {
    min-height: 30px !important;
    padding: 6px 5px !important;
    font-size: .68rem !important;
    border-radius: 8px !important;
  }
  body.ls-page-home-v2 .home-intro-status {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  body.ls-page-home-v2 .home-intro-status .hs-stat {
    min-width: 0;
    padding: 5px 4px !important;
    justify-content: center !important;
  }
  body.ls-page-home-v2 .home-random-mini {
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Top-nav text consistency (2026-05-02h)
   D: "make text in top menu consistent". The topnav had a mix of
   bold link text + 2-letter icon button text + emoji. Normalize the
   nav links + ensure all icon buttons share the same letter-spacing,
   weight, and tone so they read as one row instead of three styles.
   ─────────────────────────────────────────────────────────────────── */
.ls-topnav-links a {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  padding: 6px 12px;
  border-radius: 999px;
  color: rgba(244,238,248,.78);
  border: 1px solid transparent;
}
.ls-topnav-links a:hover {
  background: rgba(255,255,255,.06);
  color: var(--text, #f0eaf6);
}
.ls-topnav-links a.active {
  background: rgba(120,216,255,.12);
  border: 1px solid rgba(120,216,255,.30);
  color: #fff;
}
.ls-topnav-right .ls-icon-btn {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(244,238,248,.78);
}
.ls-topnav-right .ls-icon-btn:hover {
  color: var(--text, #f0eaf6);
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 14 — karaoke / music library drawer polish (2026-05-02h)
   The room.js code already mounts a `#yt-lib-modal` with search, tabs,
   and a tile grid. These rules give it a cohesive dark glass look that
   matches the rest of the site, makes the category chips read as
   buttons (not generic browser styling), and ensures the grid feels
   touch-friendly on mobile.
   ─────────────────────────────────────────────────────────────────── */
.yt-lib-modal-card {
  width: min(94vw, 920px);
  max-height: 88dvh;
  background:
    linear-gradient(160deg, rgba(28,18,38,.96), rgba(14,10,22,.96)),
    radial-gradient(circle at 100% 0%, rgba(120,216,255,.16), transparent 60%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.yt-lib-modal-card .modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.yt-lib-modal-card .modal-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -.01em;
  flex-shrink: 0;
}
.yt-lib-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: var(--text, #f0eaf6);
  font-size: .9rem;
  padding: 7px 12px;
}
.yt-lib-search-input:focus {
  outline: none;
  border-color: var(--accent, #f0a050);
  box-shadow: 0 0 0 3px rgba(240,160,80,.2);
}
.yt-lib-modal-card .modal-body {
  padding: 12px 14px 16px;
  overflow-y: auto;
  max-height: calc(88dvh - 60px);
}
.yt-lib-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.yt-lib-tabs button,
.yt-lib-tabs .yt-lib-tab {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(244,238,248,.8);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.yt-lib-tabs button:hover,
.yt-lib-tabs .yt-lib-tab:hover {
  border-color: var(--accent, #f0a050);
  background: rgba(240,160,80,.08);
  color: var(--text, #f0eaf6);
}
.yt-lib-tabs button.active,
.yt-lib-tabs .yt-lib-tab.active {
  border-color: var(--accent, #f0a050);
  background: linear-gradient(135deg, rgba(240,160,80,.22), rgba(255,126,95,.22));
  color: #fff;
}
.yt-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.yt-lib-tile {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 8px;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .78rem;
}
.yt-lib-tile:hover {
  border-color: var(--accent, #f0a050);
  transform: translateY(-1px);
}
.yt-lib-tile-thumb {
  aspect-ratio: 16/9;
  border-radius: 8px;
  background: rgba(0,0,0,.5) center/cover no-repeat;
  position: relative;
}
.yt-lib-tile-actions {
  display: flex;
  gap: 4px;
  margin-top: auto;
}
.yt-lib-tile-actions button {
  flex: 1 1 0;
  font-size: .7rem;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(244,238,248,.86);
  cursor: pointer;
}
.yt-lib-tile-actions button.is-primary {
  background: linear-gradient(135deg, var(--accent, #f0a050), #ff7e5f);
  border: 0;
  color: #0e0915;
  font-weight: 800;
}
@media (max-width: 540px) {
  .yt-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .yt-lib-modal-card .modal-head { flex-wrap: wrap; gap: 6px; padding: 10px; }
  .yt-lib-search-input { flex: 1 1 100%; order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════
   River — drop the camera viewfinder + clean up under-canvas (2026-05-02j)
   D's brief: "dont need the photo cross hairs anymore and clean up under
   it". The corner-brackets + center cross + "Aim at the wildlife" hint
   covered the river scene; D wants the river to be the focal point.
   The PHOTO button itself stays (still works to capture birds when the
   raft is in a photo zone). The Photos / Branches / Zones LS-tool strip
   below the canvas + the "No photos yet" empty-state row also get
   retired so the river breathes.
   ─────────────────────────────────────────────────────────────────── */
body.ls-page-river .river-viewfinder { display: none !important; }
body.ls-page-river .rvf-hint,
body.ls-page-river #rvf-hint { display: none !important; }
body.ls-page-river .river-ls-tools { display: none !important; }
body.ls-page-river #river-photos-empty,
body.ls-page-river #river-branches-empty { display: none !important; }
/* Re-center the floating PHOTO button now that it doesn't have a
   viewfinder around it. The button keeps its fixed-bottom position from
   river.css. */
body.ls-page-river .river-controls {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Profile builder one-screen pass (2026-05-02k)
   Keep the edit-profile sheet compact: preview + tabs + picker + Done
   stay in view, while only the active avatar/emoji grid scrolls. */
#id-modal .id-profile-builder {
  width: min(92vw, 720px);
  height: min(560px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 2026-05-03 Codex pass: one-row chrome + persistent user chat dock. */
.ls-topnav {
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px;
}
.ls-topnav .ls-logo {
  min-width: 0;
  gap: 0;
}
.ls-logo-name {
  display: none !important;
}
.ls-topnav-clock {
  justify-self: start;
  width: auto;
  max-width: min(380px, 34vw);
  margin: 0 !important;
}
.ls-topnav-links {
  justify-self: end;
  justify-content: flex-end;
  min-width: 0;
  flex-wrap: nowrap;
}
.ls-topnav-right {
  justify-self: end;
  min-width: max-content;
  flex-wrap: nowrap;
}
.ls-topnav-right #feed-drawer-toggle,
.ls-topnav-right #vr-mode-toggle,
.ls-topnav-right #theme-cycle,
.ls-topnav-right #ls-osk-btn,
.ls-topnav-right #ls-keys-btn,
.ls-topnav-right #ls-sfx-btn {
  display: none !important;
}
/* 2026-05-06 — D: "top menu can be improved with better more cohesive icons".
   Visible top-nav-right buttons (Mute, Music, Min, Menu) are CSS-painted but
   were mismatched in shape/colour. Unify them: same 36px circle, same accent
   colour for the painted glyph parts, consistent hover/active. */
.ls-topnav-right .ls-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.ls-topnav-right .ls-icon-btn:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--accent, #f0a050);
}
.ls-topnav-right .ls-icon-btn.active {
  background: color-mix(in srgb, var(--accent, #f0a050) 18%, transparent);
  border-color: var(--accent, #f0a050);
}
/* 2026-05-06 — When chrome.js paints SVG icons into the top-nav buttons,
   suppress the legacy ::before/::after CSS-painted glyphs and let the
   <span class="ls-svg-ic"> SVG drive the visual. */
.ls-topnav-right .ls-icon-btn-svg::before,
.ls-topnav-right .ls-icon-btn-svg::after { display: none !important; content: none !important; }
.ls-topnav-right .ls-icon-btn-svg {
  font-size: 0;
  color: transparent;
}
.ls-topnav-right .ls-icon-btn-svg .ls-svg-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: var(--text, #f5ede8);
  font-size: 0;
  pointer-events: none;
}
.ls-topnav-right .ls-icon-btn-svg .ls-svg-ic > svg {
  width: 100%; height: 100%;
}
.ls-topnav-right .ls-icon-btn-svg .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ls-topnav-right .ls-icon-btn-svg.muted .ls-svg-ic { color: #ff8a8a; }
.ls-topnav-right .ls-icon-btn-svg:hover .ls-svg-ic { color: var(--accent, #f0a050); }
body.vr-mode .ls-topnav-right .ls-icon-btn-svg .ls-svg-ic { width: 22px; height: 22px; }
.tk-chat-dock {
  position: fixed;
  left: 50%;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 76;
  width: min(720px, calc(100vw - 28px));
  pointer-events: auto;
  display: none;
}
body.tk-open .tk-chat-dock,
body.chrome-hidden .tk-chat-dock {
  display: none !important;
}
.tk-chat-dock .tk-chat-composer {
  width: 100%;
  margin: 0 auto;
  backdrop-filter: blur(16px);
  background: rgba(15, 11, 22, .82);
  border-color: rgba(255,255,255,.18);
}
.tk-chat-dock .tk-chat-composer input {
  font-size: 1rem;
}
.tk-settings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tk-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}
.tk-setting-btn,
.tk-settings-themes button {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  color: var(--text, #f3edf7);
  font-weight: 850;
}
.tk-setting-btn:hover,
.tk-setting-btn.active,
.tk-settings-themes button:hover,
.tk-settings-themes button.active {
  border-color: var(--accent, #ffd76b);
  color: var(--accent, #ffd76b);
  background: rgba(255,255,255,.085);
}
.tk-settings-themes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.tk-settings-themes .small {
  flex-basis: 100%;
}
.tk-settings-themes button {
  min-height: 38px;
  padding: 0 12px;
}
@media (max-width: 760px) {
  .ls-topnav {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }
  .ls-topnav-clock { max-width: 150px; }
  .ls-topnav-clock-date { display: none !important; }
  .ls-topnav-links a:not(.active) { display: none !important; }
  .ls-topnav-links.open {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    z-index: 120 !important;
  }
  .ls-topnav-links.open a,
  .ls-topnav-links.open a:not(.active) {
    display: flex !important;
  }
  .tk-chat-dock {
    width: calc(100vw - 12px);
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  grid-template-rows: auto auto auto !important;
  gap: 10px;
}
.ls-page-queue .que-ticker {
  border-radius: 10px;
}
.ls-page-queue #que-ticker-track {
  padding: 6px 0;
  font-size: .76rem;
  animation-duration: 48s;
}
.ls-page-queue .que-panel {
  grid-template-columns: minmax(0, .96fr) minmax(310px, .74fr);
  gap: 10px;
}
.ls-page-queue .que-copy {
  min-height: 0;
  padding: 14px 16px;
  border-radius: 10px;
  gap: 8px;
}
.ls-page-queue .que-copy h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
}
.ls-page-queue .que-copy p:not(.eyebrow) {
  font-size: .88rem;
  line-height: 1.32;
  max-width: 620px;
}
.ls-page-queue .que-clock,
.ls-page-queue .que-music-row {
  gap: 8px;
}
.ls-page-queue .que-card {
  padding: 12px;
  border-radius: 10px;
  gap: 8px;
}
.ls-page-queue #que-name {
  min-height: 38px;
}
.ls-page-queue .que-actions button,
.ls-page-queue .que-enter-link {
  min-height: 38px;
}
.ls-page-queue .que-stats span {
  min-height: 52px;
}
.ls-page-queue .que-stats strong {
  font-size: 1.05rem;
}
.ls-page-queue .que-room {
  min-height: 0;
  grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr);
  gap: 10px;
}
.ls-page-queue .que-room > div {
  min-height: 420px !important;
  height: auto !important;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}
.ls-page-queue .que-section-head {
  min-height: 24px;
  margin-bottom: 6px;
}
.ls-page-queue .que-section-head h2 {
  font-size: .8rem;
}
.ls-page-queue .que-section-head span {
  font-size: .66rem;
}
.ls-page-queue .que-list-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.ls-page-queue .que-line {
  max-height: 340px !important;
  min-height: 0;
  overflow-y: auto !important;
  gap: 5px;
}
.ls-page-queue .que-line-item {
  min-height: 38px;
  grid-template-columns: 24px 30px minmax(0, 1fr) auto;
  border-radius: 8px;
  padding: 4px 6px;
}
.ls-page-queue .que-line-pic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.ls-page-queue .que-chat {
  max-height: 290px !important;
  min-height: 0;
  overflow-y: auto !important;
  gap: 6px;
}
.ls-page-queue .que-chat-msg {
  padding: 7px 8px;
  border-radius: 8px;
}
.ls-page-queue .que-emoji-form {
  grid-template-columns: repeat(6, minmax(38px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.ls-page-queue .que-emoji-form button {
  min-height: 42px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.15rem;
}
.ls-page-queue .que-emoji-form button:hover {
  border-color: var(--accent, #ffd36b);
  background: rgba(255,255,255,.13);
}
@media (max-width: 860px) {
  .ls-page-queue {
    overflow: auto;
  }
  .ls-page-queue .que-main {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-top: 78px;
  }
  .ls-page-queue .que-hero {
    height: auto;
  }
  .ls-page-queue .que-panel,
  .ls-page-queue .que-room {
    grid-template-columns: 1fr;
  }
  .ls-page-queue .que-room > div {
    min-height: 180px;
  }
}

/* ════════════ PREMIUM VISUAL UPGRADES ════════════ */

/* Glassmorphism Overlays */
.tk-drawer,
#id-modal .id-card,
.qr-card,
.home-side-card,
.lobby-chat-panel,
.room-sidebar {
  background: rgba(18, 12, 22, 0.78) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

/* Custom Themed Scrollbars */
.tk-pane,
.tk-dm-list,
.tk-dm-thread-log,
.lobby-chat-log,
.room-chat-log,
#tool-notepad,
#id-modal .id-body,
.lobby-rooms-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.tk-pane::-webkit-scrollbar,
.tk-dm-list::-webkit-scrollbar,
.tk-dm-thread-log::-webkit-scrollbar,
.lobby-chat-log::-webkit-scrollbar,
.room-chat-log::-webkit-scrollbar,
#tool-notepad::-webkit-scrollbar,
#id-modal .id-body::-webkit-scrollbar,
.lobby-rooms-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.tk-pane::-webkit-scrollbar-track,
.tk-dm-list::-webkit-scrollbar-track,
.tk-dm-thread-log::-webkit-scrollbar-track,
.lobby-chat-log::-webkit-scrollbar-track,
.room-chat-log::-webkit-scrollbar-track,
#tool-notepad::-webkit-scrollbar-track,
#id-modal .id-body::-webkit-scrollbar-track,
.lobby-rooms-list::-webkit-scrollbar-track {
  background: transparent;
}

.tk-pane::-webkit-scrollbar-thumb,
.tk-dm-list::-webkit-scrollbar-thumb,
.tk-dm-thread-log::-webkit-scrollbar-thumb,
.lobby-chat-log::-webkit-scrollbar-thumb,
.room-chat-log::-webkit-scrollbar-thumb,
#tool-notepad::-webkit-scrollbar-thumb,
#id-modal .id-body::-webkit-scrollbar-thumb,
.lobby-rooms-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}

.tk-pane::-webkit-scrollbar-thumb:hover,
.tk-dm-list::-webkit-scrollbar-thumb:hover,
.tk-dm-thread-log::-webkit-scrollbar-thumb:hover,
.lobby-chat-log::-webkit-scrollbar-thumb:hover,
.room-chat-log::-webkit-scrollbar-thumb:hover,
#tool-notepad::-webkit-scrollbar-thumb:hover,
#id-modal .id-body::-webkit-scrollbar-thumb:hover,
.lobby-rooms-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #f0a050);
}

/* Active Room Pulsing Border Glows */
@keyframes activeTilePulse {
  0% { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
  50% { border-color: var(--tile-color, var(--accent, #f0a050)); box-shadow: 0 0 14px var(--tile-color, var(--accent, #f0a050)); }
  100% { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
}
.home-tile.has-people {
  animation: activeTilePulse 2.5s infinite ease-in-out;
  border-width: 1px;
  border-style: solid;
}

/* 2026-05-24 ID modal compact pass.
   Keep the profile builder mostly one-screen: the preview becomes a shallow
   three-column card, the avatar chooser gets the vertical room, and only the
   picker area scrolls when the library is long. */
#id-modal .id-profile-builder {
  width: min(92vw, 720px) !important;
  max-height: min(88dvh, 660px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  border-radius: 20px !important;
}

#id-modal .id-profile-builder .modal-head {
  padding: 14px 18px 9px !important;
  align-items: center !important;
}

#id-modal .id-profile-builder .modal-head h3 {
  font-size: clamp(1.35rem, 2vw, 1.72rem) !important;
}

#id-modal .id-profile-builder .modal-head p {
  margin-top: 2px !important;
}

#id-modal .id-profile-builder .id-body {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 10px 18px 0 !important;
  overflow: hidden !important;
  max-height: none !important;
}

#id-modal .id-live-card {
  grid-template-columns: 76px minmax(220px, 1fr) minmax(160px, 210px) !important;
  grid-template-areas: "avatar name colors";
  gap: 10px !important;
  padding: 9px 10px !important;
  align-items: center !important;
}

#id-modal .id-avatar-preview {
  grid-area: avatar;
  grid-row: auto !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 18px !important;
  font-size: 1.72rem !important;
}

#id-modal .id-name-field {
  grid-area: name;
}

#id-modal .id-color-block {
  grid-area: colors;
}

#id-modal .id-name-field span,
#id-modal .id-color-block > span,
#id-modal .id-pane-head,
#id-modal .id-more summary {
  font-size: .66rem !important;
  letter-spacing: .07em !important;
}

#id-modal .id-profile-builder #id-name {
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: .96rem !important;
}

#id-modal .id-profile-builder .id-colors,
#id-modal .id-profile-builder .tk-prof-colors {
  gap: 5px !important;
}

#id-modal .id-profile-builder .id-colors button {
  width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  border-width: 2px !important;
}

#id-modal .id-avatar-builder {
  grid-template-rows: auto minmax(178px, 1fr) !important;
  gap: 7px !important;
}

#id-modal .id-tabbar {
  gap: 6px !important;
}

#id-modal .id-tab {
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: .94rem !important;
  padding: 0 8px !important;
}

#id-modal .id-avatar-stage {
  min-height: 178px !important;
  padding: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#id-modal .id-pane-head {
  margin-bottom: 6px !important;
}

#id-modal .id-profile-builder .lsid-avatar-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
  gap: 6px !important;
}

#id-modal .id-profile-builder .lsid-avatar-choice {
  min-height: 68px !important;
  padding: 5px !important;
  border-radius: 12px !important;
}

#id-modal .id-profile-builder .lsid-avatar-choice img {
  width: 43px !important;
  height: 43px !important;
  border-radius: 12px !important;
}

#id-modal .id-profile-builder .lsid-avatar-choice span {
  max-width: 100%;
  font-size: .66rem !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#id-modal .id-more {
  padding-top: 4px !important;
}

#id-modal .id-more summary {
  min-height: 28px !important;
}

#id-modal .id-footer {
  padding: 9px 18px 12px !important;
  gap: 10px !important;
}

#id-modal .id-profile-builder .id-enter,
#id-modal .id-profile-builder #id-shuffle {
  min-height: 42px !important;
}

@media (max-width: 760px) {
  #id-modal .id-profile-builder {
    width: min(96vw, 620px) !important;
    max-height: 92dvh !important;
  }

  #id-modal .id-live-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar name"
      "colors colors";
    padding: 8px !important;
  }

  #id-modal .id-avatar-preview {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    font-size: 1.45rem !important;
  }

  #id-modal .id-profile-builder .id-colors,
  #id-modal .id-profile-builder .tk-prof-colors {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  #id-modal .id-profile-builder .id-colors::-webkit-scrollbar,
  #id-modal .id-profile-builder .tk-prof-colors::-webkit-scrollbar {
    display: none;
  }

  #id-modal .id-profile-builder .id-colors button {
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }
}

@media (max-width: 540px), (max-height: 720px) {
  #id-modal .id-profile-builder {
    width: 100vw !important;
    max-height: 96dvh !important;
    border-radius: 18px 18px 0 0 !important;
  }

  #id-modal .id-profile-builder .modal-head {
    padding: 10px 12px 7px !important;
  }

  #id-modal .id-profile-builder .modal-head h3 {
    font-size: 1.18rem !important;
  }

  #id-modal .id-profile-builder .modal-head p {
    font-size: .72rem !important;
  }

  #id-modal .id-profile-builder .id-body {
    padding: 8px 10px 0 !important;
    gap: 6px !important;
  }

  #id-modal .id-profile-builder #id-name {
    min-height: 36px !important;
    font-size: .9rem !important;
  }

  #id-modal .id-tab {
    min-height: 34px !important;
    font-size: .82rem !important;
  }

  #id-modal .id-avatar-builder {
    grid-template-rows: auto minmax(154px, 1fr) !important;
  }

  #id-modal .id-avatar-stage {
    min-height: 154px !important;
    padding: 7px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-choice {
    min-height: 60px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-choice img {
    width: 38px !important;
    height: 38px !important;
  }

  #id-modal .id-more summary {
    min-height: 24px !important;
  }

  #id-modal .id-footer {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* Walking Avatar Wiggle Animations (Lobby) */
@keyframes lobbyWalkWiggle {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-3deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(1.05) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.lobby-avatar.is-moving {
  animation: lobbyWalkWiggle 0.45s infinite ease-in-out;
}

/* ─── Premium Visual Upgrades: Notes & Bottom User Toolbar ─── */

/* Refined Bottom Toolbar
   2026-05-25 — D reported the toolbar was scrolling with the page instead
   of staying pinned to the viewport bottom. Defensive: re-assert the
   viewport-pin here too since chrome-extras.css is the last word in the
   cascade and any future visual tweak block in this file shouldn't be
   able to silently break the positioning contract. */
.ls-bottombar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  background: linear-gradient(180deg, rgba(22, 16, 26, 0.8) 0%, rgba(14, 9, 18, 0.96) 100%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.6) !important;
  padding: 6px 16px !important;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 8px !important;
}

/* Bottom Toolbar Buttons styling */
.ls-bottombar .ls-bb-btn {
  position: relative;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  min-height: 46px !important;
  min-width: 54px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

/* Active Button state */
.ls-bottombar .ls-bb-btn.active {
  color: var(--accent, #ffd76b) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Glowing indicator dot under the active button icon or label */
.ls-bottombar .ls-bb-btn.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #ffd76b);
  box-shadow: 0 0 8px var(--accent, #ffd76b);
}

/* Hover interactions */
.ls-bottombar .ls-bb-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  transform: translateY(-1px);
}

/* SVG icon scaling and effects */
.ls-bottombar .ls-bb-btn .bb-ic svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
.ls-bottombar .ls-bb-btn:hover .bb-ic svg {
  transform: scale(1.08);
}
.ls-bottombar .ls-bb-btn.active .bb-ic svg {
  filter: drop-shadow(0 0 6px rgba(255, 215, 107, 0.5));
  transform: scale(1.05);
}

/* Toolbar Labels typography */
.ls-bottombar .bb-lbl {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 2px !important;
  transition: color 0.25s ease !important;
}

/* Profile Avatar style pip */
.ls-bottombar .bb-tk-tab[data-tk-tab="profile"] .bb-prof-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s, transform 0.25s !important;
}
.ls-bottombar .bb-tk-tab[data-tk-tab="profile"]:hover .bb-prof-avatar {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.4);
}
.ls-bottombar .bb-tk-tab[data-tk-tab="profile"].active .bb-prof-avatar {
  border-color: var(--accent, #ffd76b) !important;
  box-shadow: 0 0 12px rgba(255, 215, 107, 0.35);
}

.bb-prof-avatar-art {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  background-size: cover;
  background-position: center;
}

/* Status indicator breathing pulse animation */
@keyframes statusPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
.bb-prof-avatar-status[data-status="active"] {
  background: #2ecc71 !important;
  box-shadow: 0 0 6px #2ecc71 !important;
  animation: statusPulse 2s infinite !important;
}
.bb-prof-avatar-status {
  width: 8px !important;
  height: 8px !important;
  border: 1.5px solid rgba(20, 15, 25, 1) !important;
  bottom: -1px !important;
  right: -1px !important;
  border-radius: 50% !important;
}

/* DM badge indicator */
.ls-bottombar .bb-tab-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ff4757 !important;
  color: white !important;
  font-size: 0.6rem !important;
  padding: 2px 5px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(20, 15, 25, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

/* Drawer Tab Bar Segmented Control */
.tk-tabbar {
  background: rgba(10, 7, 14, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  gap: 6px !important;
}
.tk-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 0.76rem !important;
  transition: all 0.22s ease !important;
}
.tk-tab:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.tk-tab.active {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--accent, #ffd76b) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}
.tk-tab .tk-tab-ic svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
  transition: transform 0.2s ease;
}
.tk-tab:hover .tk-tab-ic svg {
  transform: translateY(-1px);
}

/* Notes Header Tab switcher (Notepad / Q-Notes) */
.tk-notes-head {
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  margin-bottom: 10px !important;
}
.tk-notes-modes {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  display: inline-flex !important;
}
.tk-note-mode {
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  padding: 5px 14px !important;
  border-radius: 9px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}
.tk-note-mode:hover {
  color: white !important;
}
.tk-note-mode.active {
  background: linear-gradient(135deg, var(--accent, #ffd76b) 0%, #ffb85c 100%) !important;
  color: #110d18 !important;
  box-shadow: 0 3px 8px rgba(255, 215, 107, 0.25) !important;
  font-weight: 800 !important;
}

/* Notes Actions Toolbar Buttons (Schema, Copy, .md, Clear) */
.tk-notes-actions {
  display: flex !important;
  gap: 4px !important;
}
.tk-note-act {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.tk-note-act:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px);
}
.tk-note-act:active {
  transform: translateY(0);
}

/* Schema toggled active state */
.tk-note-act.tk-note-schema[aria-pressed="true"] {
  background: rgba(46, 204, 113, 0.12) !important;
  border-color: rgba(46, 204, 113, 0.35) !important;
  color: #2ecc71 !important;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.1) !important;
}
.tk-note-act.tk-note-schema::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
}

/* Clear button danger style */
.tk-note-act.tk-note-danger {
  color: rgba(231, 76, 60, 0.8) !important;
  border-color: rgba(231, 76, 60, 0.2) !important;
}
.tk-note-act.tk-note-danger:hover {
  background: rgba(231, 76, 60, 0.12) !important;
  border-color: rgba(231, 76, 60, 0.4) !important;
  color: #ff6b6b !important;
}

/* Notepad / Q-Notes textareas */
#tool-notepad,
#tk-qnote-input {
  background: rgba(8, 6, 12, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

#tool-notepad:focus,
#tk-qnote-input:focus {
  outline: none !important;
  border-color: var(--accent, #ffd76b) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 12px rgba(255, 215, 107, 0.2) !important;
}

/* Dictate & Keyboard micro-buttons */
.tk-note-kb,
.tk-qnote-mic,
.tk-qnote-kb,
.tk-dm-mic,
.tk-dm-kb {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: all 0.22s ease !important;
}
.tk-note-kb:hover,
.tk-qnote-mic:hover,
.tk-qnote-kb:hover,
.tk-dm-mic:hover,
.tk-dm-kb:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.05);
}

/* Mic styling */
.tk-qnote-mic,
.tk-dm-mic {
  background: rgba(255, 112, 67, 0.08) !important;
  border-color: rgba(255, 112, 67, 0.2) !important;
  color: #ff7043 !important;
}
.tk-qnote-mic:hover,
.tk-dm-mic:hover {
  background: rgba(255, 112, 67, 0.15) !important;
  border-color: rgba(255, 112, 67, 0.4) !important;
}

/* Active listening pulse for Dictate */
.tk-qnote-mic.active,
.tk-dm-mic.active {
  background: rgba(231, 76, 60, 0.22) !important;
  border-color: #e74c3c !important;
  color: #ff4d4d !important;
}

/* Style formatting toggle dropdown */
.tk-qnote-fmtwrap {
  position: relative;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-qnote-fmt-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 9px !important;
  padding: 6px 12px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.tk-qnote-fmt-toggle svg {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
}
.tk-qnote-fmt-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}
.tk-qnote-fmt-toggle.active {
  background: var(--accent, #ffd76b) !important;
  border-color: var(--accent, #ffd76b) !important;
  color: #110d18 !important;
}

.tk-qnote-toolbar {
  background: rgba(15, 11, 20, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.tk-qnote-size,
.tk-qnote-fmt {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition: all 0.15s ease !important;
}
.tk-qnote-size:hover,
.tk-qnote-fmt:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.tk-qnote-size.active {
  background: var(--accent, #ffd76b) !important;
  border-color: var(--accent, #ffd76b) !important;
  color: #110d18 !important;
}

/* Q-Notes log entries */
.tk-qnote-log {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  gap: 6px !important;
}
.tk-qnote-row {
  position: relative;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  padding: 8px 12px 8px 16px !important;
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
}
.tk-qnote-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #ffd76b);
  opacity: 0.4;
  transition: opacity 0.2s, width 0.2s;
}
.tk-qnote-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(1px);
}
.tk-qnote-row:hover::before {
  opacity: 1;
  width: 4px;
}

.tk-qnote-ts {
  font-family: 'Outfit', 'Inter', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  margin-right: 4px;
}

.tk-qnote-text {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Sizing support */
.tk-qnote-row[data-size="S"] .tk-qnote-text { font-size: 0.78rem !important; }
.tk-qnote-row[data-size="M"] .tk-qnote-text { font-size: 0.85rem !important; }
.tk-qnote-row[data-size="L"] .tk-qnote-text { font-size: 0.96rem !important; }

/* ═══════════════════════════════════════════════════════════════════
   Unlock Viewport Scrolling for Content Pages (2026-05-25)
   Ensures mouse wheel, touch scroll, and VR (e.g. Meta Quest) controller
   scrolling work on directory and document-heavy pages.
   ─────────────────────────────────────────────────────────────────── */
html:has(body.ls-page-home-v2),
html:has(body.ls-page-explore),
html:has(body.ls-page-queue),
html:has(body.ls-page-music),
html:has(body.ls-page-feedback),
html:has(body.ls-page-sitemap),
html:has(body.ls-page-status),
html:has(body.ls-page-tipjar),
html.ls-html-scrollable {
  height: auto !important;
  overflow: visible !important;
  overflow-y: auto !important;
}

body.ls-page-home-v2,
body.ls-page-explore,
body.ls-page-queue,
body.ls-page-music,
body.ls-page-feedback,
body.ls-page-sitemap,
body.ls-page-status,
body.ls-page-tipjar {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: visible !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 2026-05-25 profile modal repair.
   Final override for the shared identity sheet: fields must not overlap the
   avatar picker, and bio/status should be visible without hunting. */
#id-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, 2vw) max(12px, env(safe-area-inset-bottom)) !important;
}

#id-modal .id-profile-builder {
  width: min(96vw, 780px) !important;
  height: min(92dvh, 720px) !important;
  max-height: min(92dvh, 720px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(16, 12, 22, 0.96), rgba(7, 5, 11, 0.99)),
    url('img/splash-bg.jpg') center/cover no-repeat !important;
}

#id-modal .id-profile-builder .modal-head {
  padding: 12px 18px 8px !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

#id-modal .id-profile-builder .modal-head h3 {
  font-size: clamp(1.32rem, 2vw, 1.72rem) !important;
  line-height: 1.05 !important;
}

#id-modal .id-profile-builder .modal-head p {
  font-size: .82rem !important;
}

#id-modal .id-profile-builder .id-body {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(178px, 1fr) auto !important;
  gap: 10px !important;
  padding: 10px 18px 0 !important;
  overflow: hidden !important;
  max-height: none !important;
}

#id-modal .id-live-card {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) minmax(126px, 186px) !important;
  grid-template-areas: "avatar name colors" !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  min-height: 88px !important;
  overflow: hidden !important;
}

#id-modal .id-avatar-preview {
  grid-area: avatar !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  border-radius: 18px !important;
  font-size: 1.52rem !important;
}

#id-modal .id-name-field {
  grid-area: name !important;
  min-width: 0 !important;
}

#id-modal .id-color-block {
  grid-area: colors !important;
  min-width: 0 !important;
  align-self: center !important;
}

#id-modal .id-profile-builder #id-name {
  min-height: 44px !important;
  font-size: 1rem !important;
}

#id-modal .id-profile-builder .id-colors,
#id-modal .id-profile-builder .tk-prof-colors {
  display: grid !important;
  grid-template-columns: repeat(4, 30px) !important;
  justify-content: end !important;
  gap: 7px !important;
  overflow: visible !important;
  padding: 0 !important;
}

#id-modal .id-profile-builder .id-colors button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

#id-modal .id-avatar-builder {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#id-modal .id-tabbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#id-modal .id-tab {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-size: .96rem !important;
  padding: 0 8px !important;
  touch-action: manipulation !important;
}

#id-modal .id-avatar-stage {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 10px !important;
  overscroll-behavior: contain !important;
}

#id-modal .id-tab-pane {
  min-height: 0 !important;
}

#id-modal .id-profile-builder .lsid-avatar-grid {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
}

#id-modal .id-profile-builder .lsid-avatar-choice {
  min-height: 82px !important;
  padding: 7px !important;
  border-radius: 14px !important;
  touch-action: manipulation !important;
}

#id-modal .id-profile-builder .lsid-avatar-choice img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
}

#id-modal .id-profile-builder .lsid-avatar-choice span {
  font-size: .68rem !important;
  line-height: 1.08 !important;
}

#id-modal .id-more {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "summary summary"
    "bio-label away-label"
    "bio away" !important;
  gap: 5px 10px !important;
  padding: 8px 0 0 !important;
  overflow: visible !important;
}

#id-modal .id-more summary {
  grid-area: summary !important;
  min-height: 20px !important;
  padding: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  list-style: none !important;
}

#id-modal .id-more summary::-webkit-details-marker {
  display: none !important;
}

#id-modal .id-more label[for="id-bio"] {
  grid-area: bio-label !important;
}

#id-modal .id-more label[for="id-away"] {
  grid-area: away-label !important;
}

#id-modal .id-more textarea#id-bio {
  grid-area: bio !important;
}

#id-modal .id-more input#id-away {
  grid-area: away !important;
}

#id-modal .id-more label {
  margin: 0 !important;
}

#id-modal .id-more textarea,
#id-modal .id-more input {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 9px 11px !important;
  font-size: .92rem !important;
}

#id-modal .id-more textarea {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 72px !important;
  resize: none !important;
}

#id-modal .id-footer {
  padding: 10px 18px max(12px, env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
}

#id-modal .id-profile-builder .id-enter,
#id-modal .id-profile-builder #id-shuffle {
  min-height: 48px !important;
  border-radius: 15px !important;
  touch-action: manipulation !important;
}

@media (max-width: 680px) {
  #id-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #id-modal .id-profile-builder {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #id-modal .id-profile-builder .modal-head {
    padding: 10px 12px 7px !important;
  }

  #id-modal .id-profile-builder .modal-head h3 {
    font-size: 1.2rem !important;
  }

  #id-modal .id-profile-builder .modal-head p {
    font-size: .72rem !important;
  }

  #id-modal .id-profile-builder .id-body {
    grid-template-rows: auto minmax(150px, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 10px 0 !important;
  }

  #id-modal .id-live-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar name"
      "colors colors" !important;
    gap: 8px !important;
    padding: 8px !important;
    min-height: 148px !important;
  }

  #id-modal .id-avatar-preview {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  #id-modal .id-profile-builder #id-name {
    min-height: 42px !important;
  }

  #id-modal .id-profile-builder .id-colors,
  #id-modal .id-profile-builder .tk-prof-colors {
    grid-template-columns: repeat(6, minmax(28px, 1fr)) !important;
    justify-content: stretch !important;
    gap: 6px !important;
  }

  #id-modal .id-profile-builder .id-colors button {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  #id-modal .id-tab {
    min-height: 42px !important;
    font-size: .86rem !important;
  }

  #id-modal .id-avatar-stage {
    padding: 8px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-choice {
    min-height: 76px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-choice img {
    width: 46px !important;
    height: 46px !important;
  }

  #id-modal .id-more {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "summary"
      "bio-label"
      "bio"
      "away-label"
      "away" !important;
    gap: 4px !important;
  }

  #id-modal .id-more textarea {
    height: 50px !important;
    min-height: 50px !important;
  }

  #id-modal .id-footer {
    padding: 9px 10px max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-height: 720px) {
  #id-modal .id-profile-builder {
    height: 98dvh !important;
    max-height: 98dvh !important;
  }

  #id-modal .id-profile-builder .modal-head {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  #id-modal .id-profile-builder .modal-head p {
    display: none !important;
  }

  #id-modal .id-profile-builder .id-body {
    grid-template-rows: auto minmax(132px, 1fr) auto !important;
    gap: 7px !important;
  }

  #id-modal .id-avatar-preview {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-choice {
    min-height: 70px !important;
  }

  #id-modal .id-profile-builder .lsid-avatar-choice img {
    width: 42px !important;
    height: 42px !important;
  }

  #id-modal .id-more textarea {
    height: 46px !important;
    min-height: 46px !important;
  }

  #id-modal .id-footer {
    padding-top: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* LittleScreen person and lobby context menus */
.tk-dm-ctx {
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: min(78dvh, 560px) !important;
  overflow: auto !important;
  padding: 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(120, 210, 255, .22) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(91, 173, 255, .20), transparent 34%),
    linear-gradient(145deg, rgba(20, 15, 27, .98), rgba(12, 8, 17, .97)) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .58),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

.tk-person-ctx-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tk-person-ctx-pic {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 950;
  letter-spacing: .02em;
  background-color: rgba(94, 215, 240, .22);
  background-color: color-mix(in srgb, var(--pc, #5ed7f0) 42%, #14101d);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pc, #5ed7f0) 45%, #14101d), rgba(255, 255, 255, .08));
  background-size: cover;
  background-position: center;
  border: 2px solid var(--pc, rgba(120, 210, 255, .55));
  box-shadow: 0 0 0 4px rgba(120, 210, 255, .08), 0 12px 26px rgba(0, 0, 0, .38);
}

.tk-person-ctx-pic.has-pic {
  font-size: 0;
}

.tk-person-ctx-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tk-person-ctx-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.tk-person-ctx-meta span {
  color: rgba(255, 255, 255, .62);
  font-size: .72rem;
  line-height: 1.25;
}

.tk-person-ctx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 0;
}

.tk-dm-ctx .tk-person-ctx-grid button,
.tk-dm-ctx .tk-person-ctx-list button {
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: var(--text, #f5ede8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.tk-dm-ctx .tk-person-ctx-grid button {
  min-height: 62px !important;
  padding: 10px 12px !important;
  display: grid;
  align-content: center;
  gap: 2px;
  border-radius: 16px !important;
  text-align: left !important;
}

.tk-dm-ctx .tk-person-ctx-grid button.primary {
  border-color: rgba(94, 215, 240, .52) !important;
  background: linear-gradient(145deg, rgba(51, 147, 205, .45), rgba(55, 42, 75, .55)) !important;
}

.tk-person-ctx-grid span,
.tk-person-ctx-list span {
  font-weight: 900;
}

.tk-person-ctx-grid small {
  color: rgba(255, 255, 255, .55);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tk-person-ctx-list {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.tk-dm-ctx .tk-person-ctx-list button {
  min-height: 42px !important;
  padding: 8px 10px !important;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 14px !important;
  text-align: left !important;
}

.tk-dm-ctx button:hover,
.tk-dm-ctx button:focus-visible {
  border-color: rgba(120, 210, 255, .45) !important;
  background: rgba(120, 210, 255, .13) !important;
  outline: none;
}

.tk-dm-ctx button.danger:hover,
.tk-dm-ctx button.danger:focus-visible {
  border-color: rgba(255, 116, 116, .45) !important;
  background: rgba(255, 82, 82, .12) !important;
}

.tk-person-ctx-ic {
  width: 34px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .80);
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: .66rem;
  letter-spacing: .06em;
}

.tk-dm-friend-dot {
  display: inline-grid;
  place-items: center;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #b7ffe3;
  background: rgba(69, 214, 146, .16);
  border: 1px solid rgba(69, 214, 146, .28);
  font-size: .62rem;
  line-height: 1;
  vertical-align: middle;
}

.ls-pop:has(.ls-world-menu) {
  width: min(390px, calc(100vw - 24px));
  max-width: min(390px, calc(100vw - 24px));
  padding: 0;
  border-radius: 22px;
  border-color: rgba(120, 210, 255, .22);
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 189, 89, .16), transparent 34%),
    linear-gradient(145deg, rgba(20, 15, 27, .98), rgba(12, 8, 17, .97));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ls-world-menu {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ls-world-menu-head {
  display: grid;
  gap: 3px;
  padding: 5px 6px 2px;
}

.ls-world-menu-kicker {
  color: rgba(255, 255, 255, .48);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ls-world-menu-head strong {
  color: var(--text, #f5ede8);
  font-size: 1.02rem;
}

.ls-world-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ls-world-menu-list {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ls-world-menu .lsp-item {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;
  color: var(--text, #f5ede8);
  background: rgba(255, 255, 255, .055);
  display: grid;
  gap: 2px;
  align-content: center;
  text-align: left;
  padding: 9px 11px;
  font: inherit;
  cursor: pointer;
}

.ls-world-menu-list .lsp-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ls-world-menu .lsp-item.primary {
  border-color: rgba(94, 215, 240, .48);
  background: linear-gradient(145deg, rgba(51, 147, 205, .45), rgba(55, 42, 75, .55));
}

.ls-world-menu .lsp-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 950;
}

.ls-world-menu .lsp-item small {
  color: rgba(255, 255, 255, .55);
  font-size: .66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.ls-world-menu .lsp-item:hover,
.ls-world-menu .lsp-item:focus-visible {
  outline: none;
  border-color: rgba(120, 210, 255, .45);
  background: rgba(120, 210, 255, .13);
}

@media (max-width: 520px) {
  .tk-dm-ctx {
    width: calc(100vw - 16px) !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .tk-person-ctx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tk-dm-ctx .tk-person-ctx-grid button {
    min-height: 56px !important;
  }

  .ls-pop:has(.ls-world-menu) {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}

/* 2026-06-15 contextual user toolbar hardening. The bottom row should read
   as one stable, touch-friendly control surface even when chat is mounted. */
.ls-bottombar {
  min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: center !important;
  background:
    linear-gradient(180deg, rgba(26,19,31,.88), rgba(11,7,15,.98)) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 -18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.ls-bottombar .ls-bb-btn,
.ls-bottombar .bb-tk-tab {
  min-height: 54px !important;
  border-radius: 16px !important;
}

.ls-bottombar .ls-bb-btn.active,
.ls-bottombar .bb-tk-tab.active {
  background:
    linear-gradient(180deg, rgba(123,224,196,.14), rgba(255,255,255,.045)) !important;
  border-color: rgba(123,224,196,.28) !important;
}

.ls-bottombar .bb-ic {
  width: 28px;
  min-height: 26px;
  display: grid;
  place-items: center;
}

.ls-bottombar .bb-lbl {
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-bottombar .lobby-say-bar,
.ls-bottombar #ls-room-saybar.ls-bb-saybar {
  max-width: min(760px, 100%) !important;
  border-radius: 18px !important;
}

.ls-bottombar .lobby-say-bar input,
.ls-bottombar .ls-bb-saybar .ls-saybar-input {
  border-radius: 999px !important;
}

@media (max-width: 640px) {
  .ls-bottombar {
    min-height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: 8px !important;
    gap: 5px !important;
  }

  .ls-bottombar .ls-bb-btn,
  .ls-bottombar .bb-tk-tab {
    min-width: 48px !important;
    padding-inline: 5px !important;
  }

  .ls-bottombar .lobby-say-bar {
    flex-basis: 100%;
    order: -1;
  }
}

body.vr-mode .ls-bottombar {
  min-height: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

body.vr-mode .ls-bottombar .ls-bb-btn,
body.vr-mode .ls-bottombar .bb-tk-tab {
  min-height: 72px !important;
  min-width: 72px !important;
}