/* ═══════════════════════════════════════════
   LittleScreen — Site Chrome (shared across pages)
   Top nav · Bottom toolbar · Landing page · QR modal
   Loaded after styles.css so it can override.
   ═══════════════════════════════════════════ */

/* ── MOD-SPEC Phase 4 — block/mute/report context menu ── */
.ls-block-menu {
  position: fixed; z-index: 9999;
  min-width: 180px;
  background: rgba(20, 14, 26, .98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(0,0,0,.6);
  padding: 4px;
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
.ls-block-menu.hidden { display: none; }
.ls-block-menu button {
  display: block; width: 100%;
  text-align: left;
  background: transparent; border: none;
  color: var(--text);
  padding: 8px 12px;
  font-size: .9rem;
  border-radius: 6px;
  cursor: pointer;
}
.ls-block-menu button:hover { background: rgba(255,255,255,.08); }
.ls-blocked-row { opacity: .35; filter: grayscale(.6); }
.ls-blocked-row .lc-text, .ls-blocked-row .cc-msg-text { display: none; }
.ls-blocked-row::after {
  content: 'blocked'; font-size: .68rem; color: var(--muted);
  margin-left: 6px;
}

/* ── Mobile / native-feel polish (applies everywhere) ──
   These rules make the site behave like a native app on iOS Safari + Android
   Chrome PWAs — kill tap-highlight, kill double-tap zoom delay, prevent the
   16px-or-less iOS auto-zoom-on-focus, and respect notch/home-indicator
   safe areas. */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;             /* no long-press image preview */
  overscroll-behavior-y: contain;          /* no rubber-band on scroll */
}
button, a, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}
button, a {
  touch-action: manipulation;              /* removes the 300ms tap delay */
}
/* iOS Safari auto-zooms when an input has font-size < 16px and gets focus.
   Apply 16px to every visible text input/textarea by default; per-component
   styles can override font-size for non-tappable surfaces. */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="password"], input[type="tel"],
input:not([type]), textarea {
  font-size: max(16px, 1rem);
}
/* PWA: respect iOS notch + home indicator on the top nav and bottombar */
@supports (padding: env(safe-area-inset-top)) {
  .ls-topnav    { padding-top: max(env(safe-area-inset-top), 12px); }
  .ls-bottombar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Top Nav ── */
.ls-topnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(26,17,24,.92) 0%, rgba(26,17,24,.7) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .92rem;
}
.ls-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  font-weight: 800;
  letter-spacing: -.01em;
}
.ls-logo-mark { font-size: 1.5rem; }
.ls-logo-name { font-size: 1.05rem; }
.ls-topnav-links {
  display: flex; gap: 4px; justify-content: center;
  flex-wrap: wrap;
}
.ls-topnav-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  transition: color .12s, background .12s;
}
.ls-topnav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.ls-topnav-links a.active {
  color: var(--accent);
  background: var(--accent-dim);
}
.ls-topnav-right { display: flex; gap: 6px; align-items: center; }
.ls-enter-vr-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(120, 216, 255, .62);
  border-radius: 10px;
  color: #071018;
  background: linear-gradient(180deg, #b6f2ff, #78d8ff);
  box-shadow: 0 8px 24px rgba(120,216,255,.20);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ls-enter-vr-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
/* Cohesive icon-button — uniform square, consistent visual weight, no
   text labels (they were a mix of icon words and bare emoji,
   which made the right side look inconsistent). Now they all match. */
.ls-icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 38px; height: 38px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
  flex-shrink: 0;
}
.ls-icon-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.ls-icon-btn:active { transform: translateY(0); }
.ls-icon-btn.active {
  background: var(--accent-dim, rgba(255,180,80,.18));
  color: var(--accent);
  border-color: var(--accent);
}
.ls-topnav-right > .ls-icon-btn {
  position: relative;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.ls-topnav-right > .ls-icon-btn::before,
.ls-topnav-right > .ls-icon-btn::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}
#feed-drawer-toggle::before,
#vr-mode-toggle::before,
#theme-cycle::before,
#ls-osk-btn::before,
#ls-keys-btn::before,
#topnav-menu-btn::before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#feed-drawer-toggle::before {
  width: 17px; height: 18px;
  border: 2px solid #e7e2ef;
  border-radius: 3px;
  background:
    linear-gradient(#e7e2ef 0 0) 5px 5px/8px 2px no-repeat,
    linear-gradient(#e7e2ef 0 0) 5px 10px/8px 2px no-repeat,
    linear-gradient(#e7e2ef 0 0) 5px 15px/8px 2px no-repeat,
    rgba(255,255,255,.04);
}
#feed-drawer-toggle::after {
  width: 4px; height: 18px;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(167,139,250,.58);
}
#vr-mode-toggle::before {
  width: 24px; height: 13px;
  border: 2px solid #78d8ff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(120,216,255,.12);
}
#vr-mode-toggle::after {
  width: 7px; height: 7px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%);
  border-radius: 999px;
  background: rgba(120,216,255,.92);
  box-shadow: -8px 0 0 rgba(120,216,255,.75), 8px 0 0 rgba(120,216,255,.75);
}
#theme-cycle::before {
  width: 20px; height: 20px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 33%, #f8f0ff 0 9%, transparent 10%),
    radial-gradient(circle at 66% 36%, #76d7ff 0 9%, transparent 10%),
    radial-gradient(circle at 46% 67%, #ffb76b 0 9%, transparent 10%),
    conic-gradient(from 20deg, #ff6a9a, #a78bfa, #4eddd1, #ffc84d, #ff6a9a);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.34);
}
#theme-cycle::after {
  width: 8px; height: 8px;
  right: 8px; bottom: 8px;
  border-radius: 999px;
  background: rgba(10,6,16,.78);
}
#ls-sfx-btn::before {
  width: 8px; height: 12px;
  left: 11px; top: 13px;
  border-radius: 2px;
  background: #e7e2ef;
  box-shadow: 6px 2px 0 2px #e7e2ef;
  transform: skewY(-12deg);
}
#ls-sfx-btn::after {
  width: 14px; height: 18px;
  right: 8px; top: 10px;
  border: 2px solid #78d8ff;
  border-left: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0 999px 999px 0;
}
#ls-sfx-btn.muted::after {
  width: 22px; height: 2px;
  right: 8px; top: 18px;
  border: 0;
  border-radius: 999px;
  background: #ff6a6a;
  transform: rotate(-42deg);
}
#ls-music-btn::before {
  width: 5px; height: 19px;
  left: 18px; top: 9px;
  border-radius: 3px;
  background: #a78bfa;
  box-shadow: -8px 14px 0 3px #a78bfa;
}
#ls-music-btn::after {
  width: 13px; height: 4px;
  left: 18px; top: 9px;
  border-radius: 999px;
  background: #a78bfa;
}
#ls-osk-btn::before {
  width: 22px; height: 16px;
  border: 2px solid #e7e2ef;
  border-radius: 4px;
  background:
    linear-gradient(#e7e2ef 0 0) 5px 5px/3px 2px no-repeat,
    linear-gradient(#e7e2ef 0 0) 10px 5px/3px 2px no-repeat,
    linear-gradient(#e7e2ef 0 0) 15px 5px/3px 2px no-repeat,
    linear-gradient(#e7e2ef 0 0) 6px 10px/10px 2px no-repeat;
}
#ls-keys-btn::before {
  content: '?';
  color: #e7e2ef;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}
#ls-chrome-min-btn::before {
  width: 15px; height: 15px;
  left: 50%; top: 50%;
  border-right: 3px solid #78d8ff;
  border-bottom: 3px solid #78d8ff;
  transform: translate(-50%, -62%) rotate(45deg);
  border-radius: 2px;
}
#topnav-menu-btn::before {
  width: 19px; height: 2px;
  background: #e7e2ef;
  border-radius: 999px;
  box-shadow: 0 -6px 0 #e7e2ef, 0 6px 0 #e7e2ef;
}
@media (max-width: 540px) {
  /* 2026-05-25 — Hit 44px tap-target minimum (was 34px, sub-accessible).
     D explicitly called out "make sure top menu is visible and working
     in mobile" — bumping size + accenting the hamburger so it reads as
     the primary nav affordance, not just another icon. */
  .ls-icon-btn { width: 40px; height: 40px; font-size: .95rem; }
  .ls-topnav-right { gap: 4px; }
  /* Make the hamburger menu pop on mobile so users find the nav. */
  #topnav-menu-btn, #topnav-hamburger-btn {
    width: 44px !important; height: 44px !important;
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  #topnav-menu-btn[aria-expanded="true"], #topnav-hamburger-btn[aria-expanded="true"] {
    background: var(--accent) !important;
    color: #1a0e05 !important;
  }
}
#topnav-menu-btn, #topnav-hamburger-btn { display: none; }

/* Push everything below the nav */
body { padding-top: 64px; }
body.ls-page-home { padding-top: 0; }

/* On the home page, give content room above + below */
body.ls-page-home main, body.ls-page-home > section, body.ls-page-home > footer { z-index: 1; }
.ls-page-home .ls-hero { padding-top: 88px; }

/* ── Bottom toolbar (mobile-first nav) ──
   2026-05-25 — D: "make sure the bottom toolbar/user toolbar is always
   there even when window resized". Defensive: pin to viewport at all
   sizes, all body classes. !important here is a safety net in case any
   future page-specific override tries to detach the bar. */
.ls-bottombar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  display: flex !important;
  align-items: center;
  /* 2026-05-06 — D: "main home page and user toolbar could use some love".
     Spread the 3 tabs evenly so they fill the bar instead of clumping
     left, leaving the right two-thirds empty. The status pill (added
     by tools.js) sits at the far right with margin-left:auto. */
  justify-content: space-around;
  gap: 4px;
  background: linear-gradient(0deg, rgba(26,17,24,.96) 0%, rgba(26,17,24,.7) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 4px 12px;
  /* iOS home indicator: pad below the safe area so tappable buttons don't sit
     under the bar. Falls back to 0 on platforms without safe-area-inset. */
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}
/* The Profile tab is the user's identity surface — make its avatar
   read at a glance, not as an afterthought beside an SVG. */
.ls-bottombar .bb-tk-tab[data-tk-tab="profile"] .bb-prof-avatar {
  width: 30px; height: 30px;
}
/* Status pill on the far right of the bar. Painted by tools.js. Shows
   the user's "now in: {room}" + optional "♪ {track}" line. */
.ls-bottombar .bb-now-pill {
  margin-left: auto;
  display: inline-flex; align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, #f5ede8);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 38vw;
  overflow: hidden; text-overflow: ellipsis;
}
.ls-bottombar .bb-now-pill .bb-now-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success, #2ecc71);
  box-shadow: 0 0 6px var(--success, #2ecc71);
  flex-shrink: 0;
}
.ls-bottombar .bb-now-pill .bb-now-track {
  color: var(--muted, #a09098);
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.ls-bottombar .bb-now-pill .bb-now-track::before { content: '· ♪ '; }
@media (max-width: 540px){
  .ls-bottombar { padding: 4px 6px; }
  .ls-bottombar .bb-now-pill {
    font-size: .6rem;
    padding: 4px 8px;
    max-width: 44vw;
  }
  .ls-bottombar .bb-now-pill .bb-now-track { display: none; }
}
/* 2026-05-06 — Room say-bar relocated INTO the bottombar by tools.js so
   every room mirrors the lobby's inline chat composer instead of a
   separate floating row above the toolbar. */
.ls-bottombar #ls-room-saybar.ls-bb-saybar {
  flex: 1 1 auto;
  margin: 0 8px;
  min-width: 0;
}
/* When the bar already has a chat composer, the "Where you are" pill is
   redundant — collapse it so the composer gets the room. */
.ls-bottombar:has(.ls-bb-saybar) .bb-now-pill,
.ls-bottombar:has(.lobby-say-bar) .bb-now-pill { display: none; }
.ls-bottombar .ls-bb-saybar .ls-saybar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  margin: 0;
}
.ls-bottombar .ls-bb-saybar .ls-saybar-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,.05);
  color: var(--text, #f5ede8);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: .82rem;
  min-height: 36px;
}
.ls-bottombar .ls-bb-saybar .ls-saybar-input:focus { outline: none; border-color: var(--accent, #f0a050); }
.ls-bottombar .ls-bb-saybar .ls-say-mode-btn,
.ls-bottombar .ls-bb-saybar .ls-say-mic-btn,
.ls-bottombar .ls-bb-saybar button[type="submit"] {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text, #f5ede8);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.ls-bottombar .ls-bb-saybar button[type="submit"] {
  background: var(--accent, #f0a050);
  color: #1a0e05;
  border-color: var(--accent, #f0a050);
}
.ls-bottombar .ls-bb-saybar button[type="submit"]:hover { filter: brightness(1.08); }
.ls-bottombar .ls-bb-saybar .ls-say-mode-btn:hover,
.ls-bottombar .ls-bb-saybar .ls-say-mic-btn:hover { background: rgba(255,255,255,.10); border-color: var(--accent, #f0a050); }
@media (max-width: 540px){
  .ls-bottombar { padding: 4px 6px; gap: 4px; }
  /* 2026-05-25 — Phone portrait: keep tap targets ≥44px (Apple/WCAG min).
     Was 36px, which is borderline-tappable with a fat thumb. */
  .ls-bottombar .ls-bb-btn { min-width: 44px; min-height: 44px; padding: 4px 2px; }
  .ls-bottombar #ls-room-saybar.ls-bb-saybar,
  .ls-bottombar .lobby-say-bar {
    margin: 0 4px;
    flex: 1;
    min-width: 0;
    width: auto !important;
  }
  .ls-bottombar .ls-bb-saybar .ls-saybar,
  .ls-bottombar .lobby-say-bar {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .ls-bottombar .ls-bb-saybar .ls-say-mode-btn,
  .ls-bottombar .ls-bb-saybar .ls-say-mic-btn,
  .ls-bottombar .lobby-say-bar .ls-say-mode-btn,
  .ls-bottombar .lobby-say-bar .ls-say-mic-btn,
  .ls-bottombar .lobby-say-bar .ls-say-voice-btn,
  .ls-bottombar .ls-bb-saybar button[type="submit"],
  .ls-bottombar .lobby-say-bar button[type="submit"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border-radius: 50% !important;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
  }
  .ls-bottombar .ls-bb-saybar .ls-say-mode-btn::before,
  .ls-bottombar .lobby-say-bar .ls-say-mode-btn::before { content: '💬'; font-size: 0.95rem; color: var(--text); }
  .ls-bottombar .ls-bb-saybar .ls-say-mic-btn::before,
  .ls-bottombar .lobby-say-bar .ls-say-mic-btn::before  { content: '🎙'; font-size: 0.95rem; }
  .ls-bottombar .lobby-say-bar .ls-say-voice-btn::before { content: '🎤'; font-size: 0.95rem; }
  .ls-bottombar .ls-bb-saybar button[type="submit"]::before,
  .ls-bottombar .lobby-say-bar button[type="submit"]::before { content: '➔'; font-size: 0.95rem; color: #1a0e05; font-weight: bold; }
  .ls-bottombar .bb-lbl { display: none !important; }
}
.ls-bb-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  min-height: 48px;
  min-width: 48px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  /* manipulation removes the 300ms tap delay on iOS without disabling pinch-zoom */
  touch-action: manipulation;
}
.ls-bb-btn .bb-ic { font-size: 1.1rem; line-height: 1; }
.ls-bb-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.ls-bb-btn.active { color: var(--accent); }
.ls-bb-btn.active .bb-ic { filter: drop-shadow(0 0 8px var(--accent-dim)); }

body { padding-bottom: 70px; }

/* ── Landing: Hero ── */
.ls-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center;
  padding: 88px 20px 60px;
  overflow: hidden;
}
.ls-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.hero-orb {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: orbDrift 24s ease-in-out infinite alternate;
}
.hero-orb-a { background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); top: -25vmax; left: -10vmax; }
.hero-orb-b { background: radial-gradient(circle at 70% 70%, var(--accent2), transparent 60%); bottom: -25vmax; right: -10vmax; animation-delay: -8s; }
.hero-orb-c { background: radial-gradient(circle at 50% 50%, #6e4cff, transparent 60%); top: 30%; left: 50%; transform: translate(-50%,-50%); opacity: .35; animation-delay: -16s; }
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8vmax, -6vmax) scale(1.1); }
  100% { transform: translate(-6vmax, 8vmax) scale(.95); }
}
.hero-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .35;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
}
.ls-hero-inner {
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto;
  text-align: center;
}
.ls-hero-eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.ls-hero-title {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 22px;
  color: var(--text);
}
.ls-hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ls-hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 32px;
}
.ls-hero-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 36px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #1a0e05;
  border: none; border-radius: 14px;
  padding: 16px 26px;
  font-weight: 800; font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 40px -10px var(--accent), 0 0 0 1px rgba(255,255,255,.1);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary:active { transform: scale(.98); }
.btn-ghost-lg {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  padding: 16px 26px;
  font-weight: 800; font-size: 1.02rem;
  text-decoration: none;
  transition: transform .15s, background .15s, border-color .15s;
}
.btn-ghost-lg:hover { background: rgba(255,255,255,.1); border-color: var(--accent); transform: translateY(-2px); }
.btn-ic { font-size: 1.2rem; }

.ls-hero-marquee {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  font-size: .8rem; color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ls-hero-marquee li { white-space: nowrap; }

/* ── Modes ── */
.ls-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}
.mode-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.mode-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 20px 50px -25px var(--accent); }
.mode-card-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, var(--accent-dim), transparent 60%);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.mode-card:hover .mode-card-bg { opacity: 1; }
.mode-icon {
  position: relative;
  font-size: 2.6rem; line-height: 1;
  margin-bottom: 6px;
  width: fit-content;
}
.mode-icon-overlay {
  position: absolute;
  bottom: -6px; right: -10px;
  font-size: 1.2rem;
}
.mode-card h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.mode-card p { color: var(--muted); line-height: 1.5; flex: 1; }
.mode-cta { color: var(--accent); font-weight: 700; }

/* ── How it works ── */
.ls-how {
  max-width: 1100px; margin: 60px auto 80px;
  padding: 0 20px;
}
.ls-how h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 26px;
  text-align: center;
}
.ls-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.how-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}
.how-step h4 { font-size: 1.05rem; margin-bottom: 8px; }
.how-step p { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.how-num {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
  border-radius: 50%;
  font-weight: 800; font-size: .95rem;
  margin-bottom: 12px;
}

/* ── Footer ── */
.ls-footer {
  border-top: 1px solid var(--border);
  padding: 30px 20px 100px;
  background: rgba(0,0,0,.18);
}
.ls-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.ls-footer p { color: var(--muted); }
.ls-footer-links {
  display: flex; flex-direction: column; gap: 6px;
}
.ls-footer-links a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.ls-footer-links a:hover { color: var(--accent); }

/* ── Mobile / VR / Print ── */
@media (max-width: 760px) {
  .ls-topnav { grid-template-columns: auto 1fr auto; gap: 8px; padding: 10px 14px; }
  .ls-topnav-links { display: none; position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(20,12,18,.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    z-index: 120;
  }
  .ls-topnav-links.open { display: flex; }
  .ls-topnav-links a { padding: 14px 18px; border-radius: 10px; }
  .ls-enter-vr-btn { min-height: 34px; padding: 0 10px; font-size: .64rem; letter-spacing: .05em; }
  #topnav-menu-btn, #topnav-hamburger-btn { display: inline-flex; }
  .ls-logo-name { display: none; }
  .ls-footer-inner { grid-template-columns: 1fr; }
  .ls-hero { min-height: 70vh; padding: 70px 16px 40px; }
}

/* ── FEED slide-down drawer ── */
.ls-feed-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ls-feed-backdrop.open { opacity: 1; pointer-events: auto; }

.ls-feed-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ls-feed-h, 78vh);
  z-index: 71;
  background: var(--bg);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 24px 60px -10px rgba(0,0,0,.6);
  transform: translateY(-105%);
  transition: transform .28s cubic-bezier(.2,.9,.25,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ls-feed-drawer.open { transform: translateY(0); }

.ls-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(38,30,35,.9) 100%);
  border-bottom: 1px solid var(--border);
}
.ls-feed-head-left { display: flex; align-items: center; gap: 12px; }
.ls-feed-head-title {
  font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.ls-feed-head-title .ic { font-size: 1.3rem; }
.ls-feed-head-tag {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  padding: 4px 10px; border-radius: 999px;
}
.ls-feed-head-actions { display: flex; gap: 8px; align-items: center; }
.ls-feed-pop-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700; font-size: .8rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
}
.ls-feed-pop-btn:hover { background: rgba(255,255,255,.06); border-color: var(--border-hi); }
.ls-feed-close-btn {
  background: var(--danger); border: none; color: #fff;
  border-radius: 999px;
  padding: 6px 14px; min-height: 36px;
  font-weight: 800;
  cursor: pointer;
}

.ls-feed-body { flex: 1; min-height: 0; position: relative; background: #000; }
.ls-feed-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: var(--bg);
}
.ls-feed-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--muted);
  font-size: .9rem;
  pointer-events: none;
}

/* Drag handle at bottom edge — drag to resize */
.ls-feed-resize {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 12px;
  cursor: ns-resize;
  display: grid; place-items: center;
  z-index: 2;
  background: linear-gradient(0deg, var(--bg2) 0%, transparent 100%);
}
.ls-feed-resize::before {
  content: '';
  width: 56px; height: 4px;
  background: var(--border-hi); border-radius: 999px;
}
.ls-feed-resize:hover::before { background: var(--accent); }

/* Active state on the FEED toggle button */
#feed-drawer-toggle.active {
  background: var(--accent);
  color: #1a0e05;
  border-color: var(--accent);
}

/* Mobile */
@media (max-width: 760px) {
  .ls-feed-drawer { height: var(--ls-feed-h, 88vh); }
  .ls-feed-head-tag { display: none; }
  .ls-feed-pop-btn .lbl { display: none; }
}

/* ── Chrome show/hide ──
   2026-05-25 — D: minimize button used to hide BOTH top nav and bottom
   toolbar. The bottom toolbar carries the user's chat/profile/notes so
   hiding it strands them. Only collapse the top nav now; bottom stays. */
body.chrome-hidden .ls-topnav { display: none; }
body.chrome-hidden { padding-top: 0; }
.ls-chrome-peek {
  position: fixed;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: rgba(20,12,18,.92);
  border: 1px solid var(--border-hi);
  color: var(--accent);
  border-radius: 0 0 14px 14px;
  padding: 6px 18px;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  display: none;
  backdrop-filter: blur(8px);
}
body.chrome-hidden .ls-chrome-peek { display: block; }
body.chrome-hidden .ls-chrome-peek:hover { color: var(--text); border-color: var(--accent); }

/* Shortcuts modal kbd */
#ls-shortcuts-modal kbd {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  text-align: center;
  min-width: 36px;
  display: inline-block;
}

/* ── On-screen QWERTY ──
   v2.13: slides up from the bottom (transform transition) and is shorter
   so it doesn't cover the text-entry field while typing. Default key
   height dropped from 50→34px; total panel height ≈ 200px. */
.ls-osk {
  position: fixed;
  left: 0; right: 0; bottom: 70px;
  z-index: 75;
  background: rgba(16,10,18,.97);
  backdrop-filter: blur(12px);
  border-top: 2px solid var(--accent);
  padding: 6px 10px 10px;
  box-shadow: 0 -20px 40px -10px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 4px;
  /* Open state is the default — the slide animation runs both ways */
  transform: translateY(0);
  opacity: 1;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out;
  will-change: transform, opacity;
}
/* Hidden = slide off the bottom; keep display:flex so transition can run */
.ls-osk.hidden {
  display: flex;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
/* OSK panel actually renders ~218px tall (5 key rows × 28px + head + gaps + padding).
   Reserve ~225px so content scrolls cleanly above and never hides behind keys. */
body.osk-open { padding-bottom: calc(70px + 225px); }
body.chrome-hidden .ls-osk { bottom: 0; }
body.chrome-hidden.osk-open { padding-bottom: 225px; }
body.vr-mode.osk-open { padding-bottom: calc(70px + 290px); }

.ls-osk-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 2px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ls-osk-actions { display: flex; gap: 6px; }
.ls-osk-row { display: flex; gap: 4px; justify-content: center; }
.ls-osk-row-bottom { margin-top: 3px; }
.ls-osk-key {
  flex: 1 0 7%;
  min-height: 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  transition: background .08s, transform .08s;
}
.ls-osk-key:hover { background: rgba(255,255,255,.1); }
.ls-osk-key:active { transform: scale(.96); background: var(--accent-dim); }
.ls-osk-key.wide { flex: 1.4 0 14%; font-size: .74rem; min-height: 28px; }
.ls-osk-key.space { flex: 4 0 40%; font-size: .74rem; color: var(--muted); min-height: 28px; }

/* VR mode keys stay big enough for controllers — headsets need the larger target.
   (vr-mode.osk-open padding-bottom is set above next to the base osk-open rule.) */
body.vr-mode .ls-osk-key { min-height: 52px; font-size: 1.2rem; }
body.vr-mode .ls-osk-key.wide,
body.vr-mode .ls-osk-key.space { font-size: 1rem; min-height: 52px; }

/* Mobile */
@media (max-width: 540px) {
  .ls-osk-key { min-height: 32px; font-size: .88rem; padding: 0 2px; border-radius: 5px; }
  body.osk-open { padding-bottom: calc(70px + 195px); }
}

/* ── OSK-open: shrink fixed-height page shells so input fields stay above
   the keyboard. The lobby say-bar, chat form, and room chat form all live
   at the bottom of viewport-sized containers; padding the body alone won't
   lift them above the OSK. */
body.osk-open .cc-shell        { height: calc(100vh - 56px - 56px - 225px); }
body.osk-open .room-body       { height: calc(100vh - 56px - 56px - 70px - 225px); }
body.osk-open.ls-page-lobby .lobby-map { height: calc(100vh - 56px - 56px - 225px); }

body.vr-mode.osk-open .cc-shell        { height: calc(100vh - 78px - 90px - 290px); }
body.vr-mode.osk-open .room-body       { height: calc(100vh - 78px - 90px - 70px - 290px); }
body.vr-mode.osk-open.ls-page-lobby .lobby-map { height: calc(100vh - 78px - 90px - 290px); }

body.chrome-hidden.osk-open .cc-shell        { height: calc(100vh - 225px); }
body.chrome-hidden.osk-open .room-body       { height: calc(100vh - 70px - 225px); }
body.chrome-hidden.osk-open.ls-page-lobby .lobby-map { height: calc(100vh - 225px); }

@media (max-width: 540px) {
  body.osk-open .cc-shell        { height: calc(100vh - 56px - 56px - 195px); }
  body.osk-open .room-body       { height: calc(100vh - 56px - 56px - 70px - 195px); }
  body.osk-open.ls-page-lobby .lobby-map { height: calc(100vh - 56px - 56px - 195px); }
}

/* VR Mode chrome scaling */
body.vr-mode .ls-topnav { padding: 16px 24px; }
body.vr-mode .ls-logo-name { font-size: 1.4rem; }
body.vr-mode .ls-topnav-links a { padding: 12px 18px; font-size: 1.05rem; }
body.vr-mode .ls-bottombar .ls-bb-btn { min-height: 76px; }
body.vr-mode .ls-bottombar .bb-ic { font-size: 1.7rem; }
body.vr-mode .ls-bottombar .bb-lbl { font-size: .78rem; }
body.vr-mode { padding-top: 78px; padding-bottom: 90px; }
body.vr-mode.ls-page-home { padding-top: 0; }
body.vr-mode .ls-hero-title { font-size: clamp(3rem, 9vw, 6rem); }
body.vr-mode .btn-primary, body.vr-mode .btn-ghost-lg { padding: 22px 32px; font-size: 1.2rem; }
body.vr-mode .ls-feed-pop-btn,
body.vr-mode .ls-feed-close-btn { min-height: 56px; padding: 14px 22px; font-size: 1rem; }
body.vr-mode .ls-feed-head-title { font-size: 1.3rem; }
body.vr-mode .ls-feed-resize { height: 18px; }
/* ── SPLASH (cinematic) ──────────────────────── */
.ls-splash {
  position: fixed; inset: 0;
  z-index: 200;
  background: radial-gradient(ellipse at 50% 60%, #2a1830 0%, #0a0610 70%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  /* 2026-05-25 — reserve room at the top for the site ticker (z-index
     250) so its content doesn't overlap the splash logo. Ticker var
     defined in lib-ticker.css. Falls back to 26px if unset. */
  padding: calc(var(--ls-ticker-height, 26px) + 12px) 20px 20px;
  /* No auto-fade — splash now waits for the user to read the 3 steps and click "Let's go". */
  transition: opacity .55s cubic-bezier(.6,0,.2,1), transform .55s cubic-bezier(.6,0,.2,1);
}
.ls-splash.gone {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.ls-splash.gone-done { display: none !important; }
.ls-splash-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.splash-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: splashOrb 5s ease-in-out infinite alternate;
}
.splash-orb.orb-1 { width: 60vmax; height: 60vmax; background: var(--accent); top: -25vmax; left: -15vmax; opacity: .55; }
.splash-orb.orb-2 { width: 60vmax; height: 60vmax; background: var(--accent2); bottom: -25vmax; right: -15vmax; opacity: .45; animation-delay: -2s; }
.splash-orb.orb-3 { width: 30vmax; height: 30vmax; background: #6e4cff; top: 30%; left: 40%; opacity: .35; animation-delay: -3s; }
@keyframes splashOrb {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vmax, -6vmax) scale(1.15); }
}
.splash-rays {
  position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(240,160,80,.06) 5deg, transparent 14deg);
  animation: rayspin 80s linear infinite;
  opacity: .5;
}
@keyframes rayspin { to { transform: rotate(360deg); } }

.ls-splash-mark {
  position: relative; z-index: 1;
  font-size: clamp(3.4rem, 9vw, 5.2rem);
  filter: drop-shadow(0 0 50px var(--accent));
  animation: splashPop 1s cubic-bezier(.16,1.4,.3,1) .15s both;
}
.ls-splash-mark img {
  display: block;
  width: clamp(86px, 13vw, 142px);
  height: clamp(86px, 13vw, 142px);
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.16) inset;
}
.ls-splash-title {
  position: relative; z-index: 1;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -.05em;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--accent), #fff 50%, var(--accent2));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: splashRise .9s cubic-bezier(.2,1.2,.3,1) .35s both, splashShimmer 4s ease-in-out infinite;
}
@keyframes splashShimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.ls-splash-sub {
  position: relative; z-index: 1;
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
  color: var(--muted);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 10px;
  animation: splashRise .8s ease .55s both;
}
@keyframes splashPop {
  0%   { opacity: 0; transform: scale(.4) rotate(-20deg) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.1) rotate(4deg) translateY(0); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes splashRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
/* ─── How-it-works strip (3 step cards) ─── */
.ls-splash-steps {
  position: relative; z-index: 1;
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(880px, 92vw);
}
.ls-splash-step {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  padding: 14px 16px 14px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  text-align: left;
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(18px);
  animation: splashRise .65s cubic-bezier(.2,1.05,.3,1) calc(.7s + var(--d, 0s)) both;
}
.ls-splash-step::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 14px; pointer-events: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0; transition: opacity .25s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
.ls-splash-step:hover::before { opacity: .8; }
.ls-splash-step-num {
  position: absolute; top: -10px; left: 14px;
  width: 22px; height: 22px;
  background: var(--accent); color: #1a0e05;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 900;
  box-shadow: 0 0 20px var(--accent);
}
.ls-splash-step-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.7rem; line-height: 1;
  margin-top: 2px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.ls-splash-step-h {
  font-size: 1rem; font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  margin-top: 6px;
}
.ls-splash-step-p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ─── "Let's go" call-to-action ─── */
.ls-splash-go {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px;
  padding: 14px 30px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #150a04;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 18px 40px -10px rgba(240,160,80,.55), 0 0 0 1px rgba(255,255,255,.1) inset;
  animation: splashRise .7s ease 1.25s both, splashGoPulse 2.4s ease-in-out 2s infinite;
  transition: transform .15s, box-shadow .15s;
}
.ls-splash-go:hover { transform: translateY(-1px) scale(1.02); }
.ls-splash-go:active { transform: scale(.98); }
.ls-splash-go-arrow { transition: transform .2s; }
.ls-splash-go:hover .ls-splash-go-arrow { transform: translateX(3px); }
@keyframes splashGoPulse {
  0%, 100% { box-shadow: 0 18px 40px -10px rgba(240,160,80,.55), 0 0 0 1px rgba(255,255,255,.1) inset; }
  50%      { box-shadow: 0 22px 50px -8px rgba(240,160,80,.75), 0 0 0 1px rgba(255,255,255,.15) inset; }
}
.ls-splash-foot {
  position: relative; z-index: 1;
  margin-top: 16px;
  font-size: .76rem;
  letter-spacing: .04em;
  animation: splashRise .7s ease 1.4s both;
}

/* Phone: stack the 3 step cards vertically (still no scroll on most phones) */
@media (max-width: 720px) {
  .ls-splash { padding: 16px; justify-content: flex-start; padding-top: max(28px, env(safe-area-inset-top)); }
  .ls-splash-mark { font-size: 2.6rem; margin-top: 8px; }
  .ls-splash-title { font-size: 2.2rem; margin-top: 8px; }
  .ls-splash-sub { font-size: .78rem; letter-spacing: .18em; margin-top: 6px; }
  .ls-splash-steps { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .ls-splash-step { padding: 11px 14px 11px 14px; }
  .ls-splash-step-h { font-size: .92rem; }
  .ls-splash-step-p { font-size: .78rem; }
  .ls-splash-go { margin-top: 18px; padding: 12px 26px; font-size: 1rem; }
  .ls-splash-foot { margin-top: 10px; font-size: .7rem; }
}

/* VR mode bumps everything for headset legibility */
body.vr-mode .ls-splash-step-h { font-size: 1.2rem; }
body.vr-mode .ls-splash-step-p { font-size: .98rem; }
body.vr-mode .ls-splash-go { font-size: 1.3rem; padding: 18px 36px; }


/* ═══════════════════════════════════════════
   v1.9 — Quick-reply emoji bar + Sound + GUI polish
   ═══════════════════════════════════════════ */

/* Quick-reply emoji bar */
.ls-quick-reply {
  display: flex; flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  background: rgba(0,0,0,.18);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ls-quick-reply::-webkit-scrollbar { height: 4px; }
.ls-quick-reply::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
.ls-qr-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.04);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  scroll-snap-align: start;
  transition: transform .1s, background .1s, border-color .1s;
}
.ls-qr-btn:hover { background: rgba(255,255,255,.1); border-color: var(--accent); transform: scale(1.08); }
.ls-qr-btn:active { transform: scale(.94); }
body.vr-mode .ls-qr-btn { width: 56px; height: 56px; font-size: 1.6rem; }

/* Sound mute toggle in top-nav (added via chrome.js) */
#ls-sfx-btn.muted { opacity: .55; }

/* Reaction-burst — when quick-reply emoji posts, briefly puff at the bar */
@keyframes ls-puff {
  0%   { transform: scale(.6); opacity: 0; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(2);   opacity: 0; }
}
.ls-puff {
  position: fixed;
  pointer-events: none;
  font-size: 2rem;
  z-index: 95;
  animation: ls-puff .6s ease-out forwards;
}

/* Better hover focus rings (VR controllers benefit from clear focus) */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Make sure modals / drawers always sit above anything else */
.modal-overlay { z-index: 300; }
.ls-tools-drawer, .lobby-chat-panel, .ls-feed-drawer { z-index: 95; }
#ls-osk { z-index: 110; }
.cc-toolbar { z-index: 92; }

/* ═══════════════════════════════════════════
   v2.0 — Real media wired in
   ═══════════════════════════════════════════ */

/* Ambient music — top-nav icon + popover (no-cover model, esta-ensenada style) */
#ls-music-btn { position: relative; }
#ls-music-btn.playing::after {
  content: '';
  position: absolute;
  left: auto; right: 4px; top: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: ls-music-pulse 1.6s ease-in-out infinite;
}
@keyframes ls-music-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.8); }
}
.ls-music-pop {
  position: fixed;
  z-index: 105;             /* above topnav (90), below modals (130) */
  min-width: 320px;
  max-width: 420px;
  padding: 12px;
  background: rgba(20,12,18,.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 10px;
  font-size: .85rem;
  color: var(--text);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.ls-music-pop[hidden] { display: none; }
.ls-music-pop .lsmp-row { display: flex; align-items: center; gap: 10px; }
.ls-music-pop .lsmp-vol-row { padding-top: 4px; border-top: 1px solid var(--border); }
.ls-music-pop .lsmp-mode-toggle {
  display: flex; gap: 4px;
  padding: 3px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ls-music-pop .lsmp-mode {
  flex: 1;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.ls-music-pop .lsmp-mode.active { background: var(--accent-dim); color: var(--accent); }
.ls-music-pop .lsmp-toggle {
  min-width: 58px; height: 34px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: .74rem; font-weight: 800;
  cursor: pointer;
  padding: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ls-music-pop .lsmp-toggle.playing { background: var(--accent); color: #1a0e05; }
.ls-music-pop .lsmp-skip {
  min-width: 46px; height: 30px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text);
  cursor: pointer;
  padding: 0 10px;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.ls-music-pop .lsmp-meta { flex: 1; min-width: 0; }
.ls-music-pop .lsmp-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
}
.ls-music-pop .lsmp-title {
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-music-pop .lsmp-vol-icon { font-size: .68rem; font-weight: 800; text-transform: uppercase; opacity: .7; flex-shrink: 0; }
.ls-music-pop .lsmp-vol { flex: 1; min-height: 0; padding: 0; }
.ls-music-pop .lsmp-mute {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
}
.ls-music-pop .lsmp-mute:hover,
.ls-music-pop .lsmp-mute.is-muted {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* Shared/jukebox extras */
.ls-music-pop .lsmp-shared { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.ls-music-pop .lsmp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .7rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted); font-weight: 700;
}
.ls-music-pop .lsmp-tab-btn {
  border: 1px solid var(--border-hi); background: transparent;
  color: var(--text); font-size: .72rem; padding: 4px 8px;
  border-radius: 8px; cursor: pointer;
}
.ls-music-pop .lsmp-tab-btn:hover { background: var(--accent-dim); color: var(--accent); }
.ls-music-pop .lsmp-queue {
  list-style: none; margin: 0; padding: 0;
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.ls-music-pop .lsmp-queue-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto auto;
  align-items: center; gap: 6px;
  padding: 5px 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .78rem;
}
.ls-music-pop .lsmp-q-pos { color: var(--muted); font-weight: 700; }
.ls-music-pop .lsmp-q-meta { min-width: 0; }
.ls-music-pop .lsmp-q-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-music-pop .lsmp-q-btn {
  border: 1px solid var(--border); background: transparent;
  color: var(--text); font-size: .72rem; padding: 3px 6px;
  border-radius: 6px; cursor: pointer; min-width: 26px;
}
.ls-music-pop .lsmp-q-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.ls-music-pop .lsmp-q-btn.voted { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.ls-music-pop .lsmp-empty { margin: 4px 0 0; }
.ls-music-pop .lsmp-library {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.ls-music-pop .lsmp-cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ls-music-pop .lsmp-cat-tab {
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .72rem; padding: 4px 8px;
  border-radius: 999px; cursor: pointer; font-weight: 700;
}
.ls-music-pop .lsmp-cat-tab.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.ls-music-pop .lsmp-cat-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.ls-music-pop .lsmp-lib-item {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 6px;
  padding: 4px 6px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
  font-size: .76rem;
}
.ls-music-pop .lsmp-lib-meta { min-width: 0; }
.ls-music-pop .lsmp-lib-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

@media (max-width: 540px) {
  .ls-music-pop { min-width: 240px; max-width: calc(100vw - 16px); right: 8px !important; }
}
body.vr-mode .ls-music-pop { min-width: 360px; padding: 18px; font-size: 1rem; }
body.vr-mode .ls-music-pop .lsmp-toggle { width: 52px; height: 52px; font-size: 1.2rem; }
body.vr-mode .ls-music-pop .lsmp-title { font-size: 1.1rem; }

/* Splash now uses real bg image + intro video */
.ls-splash {
  background:
    linear-gradient(180deg, rgba(10,6,16,.5), rgba(10,6,16,.3)),
    url('img/splash-bg.jpg') center/cover no-repeat,
    radial-gradient(ellipse at 50% 60%, #2a1830 0%, #0a0610 70%);
}
.ls-splash-mark {
  /* keep emoji as fallback but overlay the real wordmark when image exists */
  position: relative;
}

/* Lobby ambient video as an underlay */
.lobby-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
  z-index: 0;
  pointer-events: none;
  filter: saturate(1.1);
}

/* Room feature video background (theater + karaoke loops) */
.room-feature-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .22;
  z-index: 0;
  pointer-events: none;
}

/* Lobby station — overlay station icon image */
.ls-station-pad {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(circle at 50% 100%, var(--door-color, var(--accent)), transparent 65%);
}
.ls-station-pad.has-art {
  background:
    radial-gradient(circle at 50% 100%, var(--door-color, var(--accent)) 0%, transparent 70%),
    var(--art-img, none) center/cover no-repeat,
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2));
}
.ls-station-pad.has-art .ls-station-icon { display: none; }

/* Home tile — overlay icon image as a side glyph */
.home-tile.has-art .home-tile-icon {
  background-image: var(--art-img, none);
  background-size: cover;
  background-position: center;
  font-size: 0; /* hide emoji once art is loaded */
}

/* Trivia overlay videos (alpha clips) */
.ls-trivia-fx {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid; place-items: center;
}
.ls-trivia-fx video { max-width: 80vw; max-height: 80vh; mix-blend-mode: screen; }

/* -- Static-only public preview banner (LSStatic.show) -- */
.ls-static-banner{
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 9999;
  max-width: 720px; width: calc(100% - 24px);
  background: rgba(20,20,28,.95);
  color: #f0f0f8;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 40px 10px 14px;
  font-size: 13px; line-height: 1.45;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.ls-static-banner strong{ font-size: 13px; letter-spacing: .02em; }
.ls-static-banner span{ opacity: .88; }
.ls-static-banner a{ color: #6ad1ff; text-decoration: underline; }
.ls-static-banner-x{
  position: absolute; right: 6px; top: 6px;
  width: 28px; height: 28px;
  background: transparent; color: #f0f0f8;
  border: 0; border-radius: 6px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.ls-static-banner-x:hover{ background: rgba(255,255,255,.08); }

/* ═══════════════════════════════════════════
   LSIDENTITY — temp profile pic + bio + away
   v2.4 (2026-04-29)
   ═══════════════════════════════════════════ */

/* Photo / bio / away block injected into every identity modal */
.lsid-extras {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.lsid-extras .eyebrow { margin: 4px 0 4px; }
.lsid-photo-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
}
.lsid-photo-prev {
  width: 84px; height: 84px;
  border-radius: 18px;
  background-color: rgba(255,255,255,.06);
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; line-height: 1;
  overflow: hidden;
}
.lsid-photo-prev.has-pic { font-size: 0; }
.lsid-photo-actions {
  display: flex; flex-direction: column; gap: 6px;
}
.lsid-photo-pick {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  width: max-content;
}
.lsid-photo-clear { width: max-content; }
.lsid-photo-hint, .lsid-photo-status { margin: 0; }
.lsid-photo-status:not(:empty) {
  color: var(--accent, #f0a050);
}
.lsid-bio, .lsid-away {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: inherit;
  font-family: inherit; font-size: .95rem;
  line-height: 1.4;
  resize: vertical;
}
.lsid-bio:focus, .lsid-away:focus {
  outline: 2px solid var(--accent, #f0a050);
  outline-offset: 1px;
}
.lsid-away-menu {
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lsid-away-choice {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
  border-radius: 8px;
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.lsid-away-choice:hover {
  border-color: var(--accent, #f0a050);
  background: rgba(255,255,255,.08);
}
.lsid-away-custom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.lsid-away-custom input,
.lsid-away-custom button {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: inherit;
  padding: 8px 10px;
  font: inherit;
}
.lsid-away-custom button {
  background: var(--accent, #f0a050);
  color: #1a1118;
  font-weight: 800;
  cursor: pointer;
}

/* In-VR mode, scale text up so headset users can see/edit it */
body.vr-mode .lsid-photo-prev { width: 110px; height: 110px; font-size: 48px; }
body.vr-mode .lsid-bio,
body.vr-mode .lsid-away { font-size: 1.15rem; padding: 14px 16px; }

/* Identity card pip with photo */
.lobby-id-pip.has-pic,
.lobby-id-preview-circle.has-pic,
.home-id-pip.has-pic,
#cc-id-pip.has-pic {
  background-size: cover !important;
  background-position: center !important;
  color: transparent;
  text-shadow: none;
}

/* Chat-message photo replaces the emoji span */
.lc-icon.has-pic,
.cc-msg-icon.has-pic,
.room-chat-msg .ic.has-pic {
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.06);
}

/* Lobby avatar with photo (the .ls-av-emoji becomes a circle) */
.ls-av-emoji {
  /* Fill the avatar circle so the token gradient + icon shapes are visible */
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
/* 2026-05-04 — The global has-token rule sets position:relative which
   collapses .ls-av-emoji (no explicit width/height). Force it back to
   fill its avatar circle so the token gradient + pseudo-element icon render. */
.ls-av-emoji.has-token {
  position: absolute !important;
  inset: 0 !important;
}
.ls-av-emoji.has-pic {
  background-size: cover !important;
  background-position: center !important;
  color: transparent;
  text-shadow: none;
}
/* Away avatars are dimmed + show a moon badge corner */
.ls-avatar.is-away { opacity: .55; filter: grayscale(.4); }
.ls-avatar.is-away::after {
  content: 'moon';
  position: absolute; right: -4px; top: -6px;
  background: rgba(20,18,28,.92);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 2px 5px; font-size: 12px;
}
.ls-av-away {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}

/* Hover/tap card on a lobby avatar — shows photo, name, away, bio */
.ls-av-card {
  position: absolute;
  left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  min-width: 220px; max-width: 280px;
  background: rgba(20,18,28,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 30;
  text-align: left;
}
.ls-avatar:hover .ls-av-card,
.ls-avatar:focus-within .ls-av-card,
.ls-avatar.show-card .ls-av-card {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(-2px);
}
.ls-av-card-head {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
}
.ls-av-card-pic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background-color: rgba(255,255,255,.08);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.ls-av-card-pic.has-pic { font-size: 0; }
.ls-av-card-meta { display: flex; flex-direction: column; }
.ls-av-card-status { color: rgba(255,255,255,.65); }
.ls-av-card-bio {
  margin: 8px 0 0;
  line-height: 1.4;
  color: rgba(255,255,255,.78);
  word-wrap: break-word;
}

/* Away toggle button in the room header */
.room-away-btn.away {
  background: rgba(120, 100, 200, .25);
  border-color: rgba(160, 140, 220, .55);
}
.room-away-btn:not(.away) {
  background: rgba(80, 200, 120, .15);
  border-color: rgba(120, 220, 160, .35);
}

/* People-in-this-room drawer (room.html) */
.room-users-drawer {
  position: fixed;
  top: 56px; right: 0; bottom: 64px;
  width: min(360px, 92vw);
  z-index: 40;
  background: rgba(18,16,24,.96);
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -16px 0 40px rgba(0,0,0,.45);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
.room-users-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}
.room-users-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.room-users-drawer-head h3 { margin: 0; font-size: 1.05rem; }
.room-users-hint { padding: 8px 18px 0; }
.room-users-list {
  list-style: none;
  margin: 0; padding: 12px 14px 18px;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.room-user {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  transition: background .15s ease;
  border-left: 3px solid var(--ru-color, var(--accent, #f0a050));
}
.room-user:hover { background: rgba(255,255,255,.05); }
.room-user.is-away { opacity: .68; }
.room-user .ru-pic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background-color: rgba(255,255,255,.06);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border: 2px solid var(--ru-color, transparent);
}
.room-user .ru-pic.has-pic { font-size: 0; }
.room-user .ru-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.room-user .ru-name {
  font-weight: 600; font-size: .98rem;
  color: var(--ru-color, var(--text));
  display: inline-flex; align-items: center; gap: 6px;
  word-wrap: break-word;
}
.room-user .ru-me {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .68rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.room-user .ru-status {
  font-size: .82rem;
  color: rgba(180, 160, 220, .85);
}
.room-user .ru-bio {
  margin: 4px 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: rgba(255,255,255,.75);
  word-wrap: break-word; word-break: break-word;
}
.room-users-empty {
  text-align: center;
  padding: 24px 16px;
}

/* VR mode boosts for the room user list (so it stays legible in headset) */
body.vr-mode .room-users-list { padding: 16px; }
body.vr-mode .room-user .ru-pic { width: 64px; height: 64px; font-size: 32px; }
body.vr-mode .room-user .ru-name { font-size: 1.18rem; }
body.vr-mode .room-user .ru-bio { font-size: 1rem; }
body.vr-mode .room-users-drawer { width: min(440px, 96vw); }

/* On phones, drawer takes ~90% of screen height/width */
@media (max-width: 540px) {
  .room-users-drawer { width: 100%; }
  .lsid-photo-row { grid-template-columns: 72px 1fr; }
  .lsid-photo-prev { width: 72px; height: 72px; font-size: 30px; }
}

/* ═══════════════════════════════════════════
   TOOLS DRAWER — moved from lobby.css so it works on every page
   v2.10 (2026-04-29): the drawer markup is rendered on home / lobby /
   room / chat — its position:fixed + visual styling now lives here.
   ═══════════════════════════════════════════ */
.ls-tools-drawer {
  position: fixed;
  bottom: 70px; left: 0; right: 0;
  z-index: 95;
  background: var(--bg);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -16px 40px -10px rgba(0,0,0,.55);
  max-height: 80vh; overflow-y: auto;
  transform: translateY(0);
  transition: transform .25s cubic-bezier(.2,.9,.25,1), opacity .2s;
}
.ls-tools-drawer.hidden {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.ls-tools-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
/* ── Cohesive tools layout ──
   Every tool card has the same rhythm:
   1) header (h4, accent color)
   2) "stage"  — the central visual element (number readout / coin / textarea)
   3) primary controls row (full-width buttons)
   4) optional sub-row (laps / presets / stats)
   This keeps Timer / Stopwatch / Coin / Notepad visually consistent. */
.ls-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 16px;
}
.ls-tool {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 280px;
}
.ls-tool h4 {
  font-size: .92rem;
  margin: 0;
  letter-spacing: .04em;
  color: var(--accent);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.ls-tool input, .ls-tool textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  width: 100%;
}
.ls-tool textarea { min-height: 110px; resize: vertical; }

/* ── Shared "stage" — the central readout slot every tool fills ──
   118px tall; dark inset; centered content. */
.tool-stage {
  height: 118px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.tool-readout {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 2.4rem; font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent);
  text-align: center;
  line-height: 1;
}

/* ── Shared button row ── */
.tool-row { display: flex; gap: 6px; }
.tool-row > * { flex: 1; }
.tool-row .btn-ghost,
.tool-row .btn-accent { min-height: 36px; }

/* ── Shared "sub-row" pattern (presets, lap list, stats) ── */
.tool-meta {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  text-align: center;
  margin: 0;
}
.tool-meta strong { color: var(--accent); }

/* ── Timer ── (uses .tool-stage / .tool-readout) */
.tool-timer-display {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 2.6rem; font-weight: 800;
  text-align: center;
  letter-spacing: .04em;
  color: var(--accent);
  line-height: 1;
}
.tool-timer-display.warn { color: #ffd76b; }
.tool-timer-display.done { color: var(--danger); }
.tool-timer-row { display: flex; gap: 6px; align-items: center; }
.tool-timer-row input { flex: 0 0 80px; min-height: 36px; }
.tool-timer-row button { flex: 1; min-height: 36px; }
.tool-timer-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.tool-timer-presets button {
  flex: 1; min-width: 50px;
  font-size: .8rem; padding: 6px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tool-timer-presets button:hover {
  border-color: var(--accent);
  background: rgba(240,160,80,.08);
}
.tool-notepad textarea { min-height: 140px; }

/* ═══════════════════════════════════════════
   STOPWATCH + COIN TOSS — share the .tool-stage layout above
   v2.12 (2026-04-29)
   ═══════════════════════════════════════════ */

/* ── Stopwatch ── (same readout style as Timer) */
.tool-sw-display {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 2.4rem; font-weight: 800;
  text-align: center;
  letter-spacing: .04em;
  color: var(--accent);
  line-height: 1;
}
.tool-sw-row { display: flex; gap: 6px; }
.tool-sw-row button { flex: 1; min-height: 36px; }
.tool-sw-laps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 110px;
  overflow-y: auto;
  font-family: ui-monospace, monospace;
  font-size: .82rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 6px;
}
.tool-sw-laps:empty { display: none; }
.tool-sw-laps li {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tool-sw-laps .sw-lap-n { color: var(--accent); font-weight: 700; }
.tool-sw-laps .sw-lap-split { color: rgba(255,255,255,.65); }
.tool-sw-laps .sw-lap-total { text-align: right; color: var(--text); }

/* ── Coin Toss (3D flip) ──
   The coin lives inside the shared .tool-stage so its "card" matches
   Timer / Stopwatch. Perspective is on the stage so the flip reads as 3D. */
.tool-coin-tool .tool-stage,
.tool-coin-stage {
  perspective: 1000px;
}
.tool-coin {
  position: relative;
  width: 88px; height: 88px;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,.55))
    drop-shadow(0 0 14px rgba(240,160,80,.18));
}
/* Faces of the coin — gradient brushed-metal look */
.tool-coin-side {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Georgia', serif;
  font-weight: 900;
  font-size: 2.4rem;
  color: #2a1a08;
  text-shadow: 0 2px 0 rgba(255,255,255,.45), 0 -1px 0 rgba(0,0,0,.25);
  border: 3px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.6),
    inset 0 -8px 16px rgba(120,70,10,.4),
    inset 0 0 0 6px rgba(255,255,255,.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tool-coin-heads {
  background: radial-gradient(circle at 35% 30%, #ffeaa3 0%, #f3c25b 40%, #c08020 90%);
}
.tool-coin-tails {
  background: radial-gradient(circle at 35% 30%, #ffe07a 0%, #d9a73c 40%, #8a5a18 90%);
  transform: rotateY(180deg);
}
/* Edge ring — the "side" of the coin you see during the flip */
.tool-coin-edge {
  position: absolute;
  left: 50%; top: 50%;
  width: 88px; height: 5px;
  background: linear-gradient(90deg, #5d3b10, #d8a34c, #5d3b10);
  border-radius: 3px;
  transform: translate(-50%, -50%) rotateX(90deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

/* ── Flip animation ──
   The animation runs to its final keyframe, then the JS removes both
   .flipping AND the .land-* class. After that, the resting transform
   below (driven by data-face) takes over and keeps the right side up. */
.tool-coin.flipping.land-heads {
  animation: coinFlipHeads 1.0s cubic-bezier(.18,.7,.2,1) forwards;
}
.tool-coin.flipping.land-tails {
  animation: coinFlipTails 1.0s cubic-bezier(.18,.7,.2,1) forwards;
}
@keyframes coinFlipHeads {
  0%   { transform: rotateY(0deg)    rotateX(0deg)   translateY(0); }
  25%  { transform: rotateY(540deg)  rotateX(15deg)  translateY(-30px); }
  60%  { transform: rotateY(1080deg) rotateX(-8deg)  translateY(-16px); }
  85%  { transform: rotateY(1620deg) rotateX(4deg)   translateY(-4px); }
  100% { transform: rotateY(1800deg) rotateX(0deg)   translateY(0); }
}
@keyframes coinFlipTails {
  0%   { transform: rotateY(0deg)    rotateX(0deg)   translateY(0); }
  25%  { transform: rotateY(540deg)  rotateX(15deg)  translateY(-30px); }
  60%  { transform: rotateY(1080deg) rotateX(-8deg)  translateY(-16px); }
  85%  { transform: rotateY(1620deg) rotateX(4deg)   translateY(-4px); }
  100% { transform: rotateY(1980deg) rotateX(0deg)   translateY(0); }
}
/* Resting orientation after the flip. data-face drives which side faces up. */
.tool-coin[data-face="heads"]:not(.flipping) {
  transform: rotateY(0deg);
}
.tool-coin[data-face="tails"]:not(.flipping) {
  transform: rotateY(180deg);
}

/* Stage is the click target — make it look interactive */
.tool-coin-stage {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.tool-coin-stage:hover {
  background: rgba(240,160,80,.06);
  border-color: rgba(240,160,80,.18);
}
.tool-coin-stage:active .tool-coin {
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55))
          drop-shadow(0 0 12px rgba(240,160,80,.24));
}
.tool-coin-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tool-coin-meta {
  text-align: center;
  margin: 0;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
.tool-coin-meta strong { color: var(--accent); }

body.vr-mode .tool-coin { width: 110px; height: 110px; }
body.vr-mode .tool-coin-edge { width: 110px; }
body.vr-mode .tool-coin-side { font-size: 2.8rem; }
body.vr-mode .tool-stage { height: 150px; }

/* ═══════════════════════════════════════════
   YOUR TOOLKIT — tabbed bottom drawer
   v2.16 (2026-04-29) — replaces v2.14 fullscreen-by-default design
   The drawer is the local user's personal control surface. The shared
   room screen never shows it; only the device owner sees it.
     - Default open state = compact panel (room/chat still visible above)
     - Tabs at the top switch between Profile / DMs / Notes / Keyboard
     - Full button toggles into fullscreen mode for serious editing
   ═══════════════════════════════════════════ */

.tk-drawer {
  position: fixed;
  left: 0; right: 0;
  bottom: 70px;                      /* sits above the bottombar */
  z-index: 65;
  background: rgba(14, 10, 22, .98);
  border-top: 2px solid rgba(120, 100, 220, .55);
  box-shadow: 0 -20px 50px -12px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  height: 300px;                     /* compact panel - room visible above */
  max-height: 70vh;
  max-height: 70dvh;                 /* dvh tracks the *visible* viewport (iOS address bar / keyboard) */
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), height .22s ease, bottom .22s ease;
}
/* When the OSK is also open, lift the drawer above it so the input the user
   is typing into never gets hidden behind the keyboard. */
body.osk-open .tk-drawer { bottom: calc(70px + 225px); }
body.vr-mode.osk-open .tk-drawer { bottom: calc(70px + 290px); }
@media (max-width: 540px) {
  body.osk-open .tk-drawer { bottom: calc(70px + 195px); }
}
.tk-drawer.hidden {
  display: flex;
  transform: translateY(110%);
  pointer-events: none;
}

/* Drag-resize handle — sits at the very top edge of the drawer.
   Made slightly taller (12px) so it's a comfortable touch target without
   feeling chunky visually. The 36px-wide grab indicator below handles
   the mouse-affordance signal. */
.tk-resize {
  position: relative;
  height: 12px;
  cursor: ns-resize;
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent, rgba(120,100,220,.12));
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.tk-resize::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 3px;
  background: rgba(120,100,220,.55);
  border-radius: 999px;
  transition: background .15s ease, width .15s ease;
}
.tk-resize:hover::before { background: var(--accent, #ffd76b); width: 60px; }
.tk-resize.dragging::before { background: var(--accent, #ffd76b); width: 80px; }

/* Identity strip — replaces the floating "YOU PRIME Edit" card and gives the
   user a permanent station header. Tabbar comes right after this strip. */
.tk-id-strip {
  display: flex; align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  min-height: 44px;
}
.tk-id-pip {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  transition: border-color .12s ease, transform .1s ease;
}
.tk-id-pip:hover { border-color: var(--accent, #ffd76b); transform: scale(1.05); }
.tk-id-meta {
  display: flex; flex-direction: column;
  min-width: 0;
  gap: 1px;
  flex: 1;
  cursor: pointer;
}
.tk-id-name {
  font-weight: 700; font-size: .92rem;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-id-status {
  font-size: .7rem;
  color: var(--success, #7ce0a0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-id-status.is-away {
  color: #b08fff;
}
.tk-id-strip .tk-private-pill {
  font-size: .62rem;
  padding: 2px 8px;
  background: rgba(120,100,220,.16);
  border: 1px solid rgba(120,100,220,.40);
  color: #b8a8ff;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: .04em;
}
.tk-id-strip .tk-size-btn,
.tk-id-strip .tk-close-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: .85rem;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .12s ease, color .12s ease;
}
.tk-id-strip .tk-size-btn:hover,
.tk-id-strip .tk-close-btn:hover {
  border-color: var(--accent, #ffd76b);
  color: var(--accent, #ffd76b);
}
.tk-id-strip .tk-close-btn:hover {
  border-color: var(--danger, #e74c3c);
  color: var(--danger, #e74c3c);
}

/* Phone: hide the private pill (saves precious px) */
@media (max-width: 540px) {
  .tk-id-strip .tk-private-pill { display: none; }
  .tk-id-strip { gap: 6px; padding: 6px; }
  .tk-id-strip .tk-size-btn,
  .tk-id-strip .tk-close-btn { width: 28px; height: 28px; }
}

/* Mini mode: hide tab content, only id-strip + tabbar visible. Lets the
   user see their identity + jump tabs without the panel taking up space. */
.tk-drawer.tk-mini .tk-id-status { display: none; }

/* In-drawer .tk-tabbar is now redundant — the bottombar mode tabs are the
   primary tab switcher. Hide visually but keep in DOM so existing JS that
   queries .tk-tab still works. */
.tk-drawer .tk-tabbar { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   Bottombar mode tabs (.bb-tk-tab) — Profile / DMs / Notes / Keyboard
   These replace the single Tools button. Each tap opens the drawer
   straight to its pane (or closes if already on that pane). The active
   tab gets the same accent treatment as the in-drawer tabs.
   ───────────────────────────────────────────────────────────── */
.bb-tk-tab {
  position: relative;
}
.bb-tk-tab.active {
  color: var(--accent, #ffd76b);
}
.bb-tk-tab.active .bb-ic {
  filter: drop-shadow(0 0 8px var(--accent-dim, rgba(255,180,80,.45)));
}
.bb-tk-tab.active::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 2px;
  background: var(--accent, #ffd76b);
  border-radius: 0 0 2px 2px;
}
.bb-tab-badge {
  position: absolute;
  top: 4px; right: 18%;
  background: var(--danger, #e74c3c);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 14px;
  text-align: center;
  line-height: 1.2;
}
.bb-tab-badge[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   Q-NOTE — cleaner GUI v2
   • Empty state has icon + headline + sub-line (welcoming)
   • Format toolbar (S/M/L/B/I) lives behind a single style toggle
   • Input row has dictation mic to the right of the textarea
   ───────────────────────────────────────────────────────────── */
.tk-qnote-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 16px;
  gap: 6px;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 10px;
  margin: 4px 0 8px;
}
.tk-qnote-empty-ic {
  font-size: 1.8rem;
  opacity: .55;
  margin-bottom: 2px;
}
.tk-qnote-empty strong {
  font-size: .95rem;
  color: rgba(255,255,255,.8);
  font-weight: 700;
}
.tk-qnote-empty-sub {
  font-size: .78rem;
  max-width: 36ch;
  line-height: 1.45;
}

.tk-qnote-form { display: flex; flex-direction: column; gap: 6px; }

/* Format-toolbar wrap — toggle button + collapsed-by-default toolbar */
.tk-qnote-fmtwrap {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.tk-qnote-fmt-toggle {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: .85rem;
  display: grid; place-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: all .12s ease;
}
.tk-qnote-fmt-toggle:hover { color: var(--accent, #ffd76b); border-color: var(--accent, #ffd76b); }
.tk-qnote-fmt-toggle.active {
  background: var(--accent, #ffd76b);
  color: #0b0d11;
  border-color: var(--accent, #ffd76b);
}
.tk-qnote-toolbar {
  display: inline-flex; gap: 4px; align-items: center;
  flex-wrap: wrap;
  transition: opacity .15s ease, transform .15s ease;
}
.tk-qnote-toolbar.collapsed {
  display: none;
}

/* Input row: textarea + dictation mic side-by-side */
.tk-qnote-inputrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: end;
}
.tk-qnote-mic, .tk-dm-mic {
  width: 38px; min-height: 38px; align-self: end;
  border-radius: 10px;
  background: rgba(255,120,60,.06);
  border: 1.5px solid rgba(255,120,60,.25);
  color: rgba(255,180,140,.85);
  font-size: 1rem;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: all .12s ease;
  position: relative;
}
.tk-qnote-mic:hover, .tk-dm-mic:hover {
  color: #ff7844;
  border-color: rgba(255,120,60,.55);
  background: rgba(255,120,60,.10);
}
.tk-qnote-mic.active, .tk-dm-mic.active {
  border-color: rgba(231,76,60,.85);
  background: rgba(231,76,60,.18);
  color: #ff4444;
  animation: tkMicPulse .65s ease-in-out infinite alternate;
}
.tk-qnote-mic.active::after, .tk-dm-mic.active::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 12px;
  border: 2px solid rgba(231,76,60,.4);
  animation: tkMicRing 1s ease-out infinite;
  pointer-events: none;
}
@keyframes tkMicPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.06); box-shadow: 0 0 14px rgba(231,76,60,.35); }
}
@keyframes tkMicRing {
  from { transform: scale(1);   opacity: .6; }
  to   { transform: scale(1.6); opacity: 0; }
}

/* DM thread reply: keep the mic + send button aligned */
.tk-dm-thread-form {
  display: flex; gap: 6px; align-items: stretch;
}
.tk-dm-thread-form input { flex: 1; min-height: 38px; }
.tk-dm-thread-form .tk-dm-mic { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   PROFILE — clearer photo upload affordance
   The photo pip already shows the icon when no pic is set; on
   hover/focus it now reveals a Change overlay so users know
   they can tap to upload.
   ───────────────────────────────────────────────────────────── */
.tk-prof-pic {
  position: relative;
  overflow: hidden;
}
.tk-prof-pic::after {
  content: 'Change';
  position: absolute;
  inset: auto 0 0 0;
  padding: 4px 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color: #fff;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.tk-prof-pic:hover::after,
.tk-prof-pic:focus-visible::after { opacity: 1; }
.tk-prof-pic.has-pic::after { content: 'Change'; }

/* ─────────────────────────────────────────────────────────────
   KEYBOARD pane — clearer affordance + live status
   ───────────────────────────────────────────────────────────── */
[data-tk-pane="keyboard"] {
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: stretch;
  padding: 4px;
}
[data-tk-pane="keyboard"] #tk-osk-toggle {
  align-self: stretch;
  min-height: 56px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 12px;
}
[data-tk-pane="keyboard"] .tk-pane-hint {
  text-align: center;
  font-size: .85rem;
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
  align-self: center;
  color: rgba(255,255,255,.6);
}
/* Mini = compact strip (default-open size). Just tab bar + room for one input row.
   Keeps the room/chat content underneath fully visible. */
.tk-drawer.tk-mini {
  height: 150px;
}
body.vr-mode .tk-drawer.tk-mini {
  height: 180px;
}

/* Fullscreen takes everything between top nav and bottom bar */
.tk-drawer.tk-fullscreen {
  height: calc(100dvh - 64px - 70px);
  max-height: none;
  bottom: 70px;
}
body.vr-mode .tk-drawer.tk-fullscreen {
  height: calc(100dvh - 78px - 90px);
  bottom: 90px;
}

/* When the drawer is open, push body content up so chat/room stays visible.
   Bottombar already eats 70px. Each size adds its own height on top. */
body.tk-open      { padding-bottom: calc(70px + 300px); } /* panel = default open height */
body.tk-open.tk-mini { padding-bottom: calc(70px + 150px); }
body.tk-open.tk-full { padding-bottom: 70px; } /* fullscreen covers everything */
body.vr-mode.tk-open.tk-mini { padding-bottom: calc(90px + 180px); }

/* Mini-mode pane tweaks: hide descriptive text + tighten gaps so the input
   row is the focus. Each pane decides what's essential to show in mini. */
.tk-drawer.tk-mini .tk-pane { padding: 8px 14px 10px; gap: 6px; }
.tk-drawer.tk-mini .tk-pane-hint { display: none; }
.tk-drawer.tk-mini [data-tk-pane="profile"] .tk-prof-pickers,
.tk-drawer.tk-mini [data-tk-pane="profile"] #tk-prof-bio,
.tk-drawer.tk-mini [data-tk-pane="profile"] .tk-prof-status { display: none; }
.tk-drawer.tk-mini [data-tk-pane="dms"] .tk-dm-empty { font-size: .78rem; padding: 4px 0; }
.tk-drawer.tk-mini [data-tk-pane="notes"] textarea { min-height: 72px; }
.tk-drawer.tk-mini [data-tk-pane="keyboard"] { gap: 6px; }
.tk-drawer.tk-mini [data-tk-pane="keyboard"] .tk-pane-hint { display: none; }
/* Size buttons share styling */
.tk-size-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
  display: grid; place-items: center;
}
.tk-size-btn:hover { background: rgba(255,255,255,.06); }

/* ── Tab strip ── */
.tk-tabbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: rgba(14, 10, 22, 1);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.tk-tab {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: .8rem;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  position: relative;
}
.tk-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.tk-tab.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.tk-tab-ic { font-size: 1.05rem; line-height: 1; }
.tk-tab-lbl { letter-spacing: .04em; }
.tk-tab-badge {
  background: var(--accent);
  color: #1a0e05;
  font-size: .62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0;
  min-width: 16px; text-align: center;
}
.tk-private-pill {
  margin-left: auto;
  font-size: .68rem;
  color: rgba(200, 180, 255, .7);
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(120, 100, 220, .12);
  border: 1px solid rgba(120, 100, 220, .25);
  white-space: nowrap;
}
.tk-fullscreen-btn,
.tk-close-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
  display: grid; place-items: center;
}
.tk-fullscreen-btn:hover,
.tk-close-btn:hover { background: rgba(255,255,255,.06); }

/* ── Panel content: only the active pane shows ── */
.tk-panel {
  flex: 1 1 0; min-height: 0;
  overflow: hidden;
  position: relative;
}
.tk-pane {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 12px 16px 14px;
  gap: 8px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* iOS momentum scroll */
  overscroll-behavior: contain;        /* keep touch-drag inside the pane, not the page behind */
}
.tk-pane.active { display: flex; }

/* In fullscreen, lay out all panes side-by-side as a 2x2 grid */
.tk-drawer.tk-fullscreen .tk-panel {
  overflow-y: auto;
  padding: 14px 18px 18px;
}
.tk-drawer.tk-fullscreen .tk-pane {
  display: flex !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
}
.tk-drawer.tk-fullscreen .tk-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.6fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: 100%;
}
.tk-drawer.tk-fullscreen [data-tk-pane="profile"]  { grid-column: 1; grid-row: 1; }
.tk-drawer.tk-fullscreen [data-tk-pane="dms"]      { grid-column: 2; grid-row: 1 / span 2; }
.tk-drawer.tk-fullscreen [data-tk-pane="notes"]    { grid-column: 1; grid-row: 2; }
.tk-drawer.tk-fullscreen [data-tk-pane="keyboard"] { display: none !important; }
.tk-drawer.tk-fullscreen[data-focus-pane="settings"] .tk-pane { display: none !important; }
.tk-drawer.tk-fullscreen[data-focus-pane="settings"] [data-tk-pane="settings"] {
  display: flex !important;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  min-height: 0;
}

/* ── Profile pane (compact layout — fits 360px without scroll) ── */
.tk-prof-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 9px;
  align-items: center;
}
.tk-prof-pic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, transform .12s;
}
.tk-prof-pic:hover { transform: scale(1.04); }
.tk-prof-pic.has-pic { font-size: 0; }
.tk-prof-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-prof-id input,
.tk-prof-status-row input {
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 8px;
  font: inherit;
  font-size: .82rem;
  width: 100%;
  min-height: 34px;
}
.tk-prof-status-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
  align-items: stretch;
}
.tk-prof-away-toggle {
  background: rgba(80, 200, 120, .15);
  border: 1px solid rgba(120, 220, 160, .35);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 8px;
  font-weight: 800; font-size: .7rem;
  cursor: pointer;
  white-space: nowrap;
}
.tk-prof-away-toggle.away {
  background: rgba(160, 120, 220, .25);
  border-color: rgba(180, 150, 230, .55);
}
#tk-prof-bio {
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font: inherit;
  font-size: .8rem;
  resize: none;
  min-height: 34px;
  width: 100%;
  flex: 0 0 auto;
}
.tk-prof-pickers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  flex: 0 0 auto;
}
.tk-prof-icons {
  display: grid;
  grid-template-columns: repeat(8, 34px);
  gap: 5px;
  align-items: center;
}
.tk-prof-colors {
  display: grid;
  grid-template-columns: repeat(6, 18px);
  gap: 5px;
}
.tk-prof-icon {
  width: 34px;
  height: 34px;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  font-size: 0;
  display: grid; place-items: center;
  padding: 0;
}
.tk-prof-icon.active {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent), 0 10px 22px rgba(0,0,0,.28);
}
.tk-prof-color {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  cursor: pointer;
  padding: 0;
}
.tk-prof-color.active { border-color: var(--text); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
#tk-prof-status:not(:empty) { color: var(--accent); font-size: .68rem; margin: -2px 0 0; }
.tk-drawer.tk-fullscreen #tk-prof-bio { min-height: 80px; }
.tk-drawer.tk-fullscreen .tk-prof-pic { width: 84px; height: 84px; font-size: 36px; }

/* ── DM pane ── */
[data-tk-pane="dms"] { position: relative; }
.tk-dm-shell {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: rgba(0, 0, 0, .25);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.tk-dm-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
}
.tk-dm-new,
.tk-dm-start,
.tk-dm-empty-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: var(--text);
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tk-dm-new:hover,
.tk-dm-start:hover,
.tk-dm-empty-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,.11);
}
.tk-dm-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: rgba(255,255,255,.62);
}
.tk-dm-sort select {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.3);
  color: var(--text);
  font: inherit;
  font-size: .75rem;
  padding: 0 6px;
}
.tk-dm-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.tk-dm-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .12s;
}
.tk-dm-item:hover { background: rgba(255,255,255,.05); }
.tk-dm-item.has-unread { background: rgba(240,160,80,.06); }
.tk-dm-item.is-blocked { opacity: .58; }
.tk-dm-item.is-online .tk-dm-pic { box-shadow: 0 0 0 2px rgba(95,226,125,.18); }
.tk-dm-pic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font-size: 1.1rem;
  border: 2px solid var(--pc, transparent);
}
.tk-dm-pic.has-pic { font-size: 0; }
.tk-dm-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tk-dm-name { font-size: .88rem; }
.tk-dm-name-btn,
.tk-dm-thread-name {
  font: inherit;
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-dm-name-btn:hover,
.tk-dm-thread-name:hover { text-decoration: underline; }
.tk-dm-where,
.tk-dm-thread-status {
  font-size: .66rem;
  color: rgba(255,255,255,.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-dm-preview {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-dm-aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tk-dm-more {
  width: 26px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.66);
  cursor: pointer;
  line-height: 1;
}
.tk-dm-more:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.tk-dm-time { font-size: .66rem; color: rgba(255,255,255,.5); }
.tk-dm-unread {
  background: var(--accent); color: #1a0e05;
  font-size: .64rem; font-weight: 800;
  padding: 1px 6px; border-radius: 999px;
}
.tk-dm-empty {
  padding: 18px 14px;
  text-align: center;
  color: rgba(255,255,255,.58);
  display: grid;
  gap: 8px;
  justify-items: center;
}
.tk-dm-empty[hidden] { display: none; }
.tk-dm-empty strong { color: var(--text); }
.tk-dm-empty-sub { font-size: .8rem; line-height: 1.35; max-width: 28rem; }
.tk-dm-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tk-dm-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tk-dm-thread.hidden { display: none; }
.tk-dm-list.hidden { display: none; }
.tk-dm-thread-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .9rem;
}
.tk-dm-thread-head strong { color: var(--text); }
.tk-dm-thread-pic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
  font-size: 1rem;
  border: 2px solid var(--pc, rgba(255,255,255,.18));
}
.tk-dm-thread-pic.has-pic { font-size: 0; }
.tk-dm-thread-with { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tk-dm-thread-with .tk-dm-thread-status { flex: 1; }
.tk-dm-thread-log {
  list-style: none;
  margin: 0; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.tk-dm-msg {
  max-width: 80%;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: .86rem;
  line-height: 1.35;
  display: flex; flex-direction: column; gap: 2px;
  word-wrap: break-word;
}
.tk-dm-system {
  list-style: none;
  align-self: center;
  color: rgba(255,255,255,.58);
  font-size: .78rem;
  text-align: center;
  padding: 12px;
}
.tk-dm-msg.is-me { align-self: flex-end; background: var(--accent); color: #1a0e05; }
.tk-dm-msg.is-them { align-self: flex-start; background: rgba(255,255,255,.08); color: var(--text); }
.tk-dm-msg-time { font-size: .62rem; opacity: .65; align-self: flex-end; }
.tk-dm-msg.is-me .tk-dm-msg-time { color: rgba(0,0,0,.5); }
.tk-dm-thread-form {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
}
.tk-dm-thread-form.is-disabled { opacity: .65; }
.tk-dm-thread-form input {
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit; font-size: .9rem;
}
/* hidden helper element kept for badge logic compatibility */
#tk-dm-badge { display: none; }

.tk-dm-picker,
.tk-dm-profile,
.tk-dm-ctx {
  position: absolute;
  z-index: 80;
  background: rgba(12,9,18,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.tk-dm-picker.hidden,
.tk-dm-profile.hidden,
.tk-dm-ctx.hidden { display: none; }
.tk-dm-picker {
  inset: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.tk-dm-picker-head,
.tk-dm-profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tk-dm-picker-head strong { flex: 1; }
#tk-dm-picker-search {
  margin: 10px;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: var(--text);
  padding: 0 10px;
  font: inherit;
}
.tk-dm-picker-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 10px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
.tk-dm-picker-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.tk-dm-picker-item:hover { background: rgba(255,255,255,.07); }
.tk-dm-picker-meta { display: flex; flex-direction: column; min-width: 0; }
.tk-dm-picker-meta span { color: rgba(255,255,255,.52); font-size: .7rem; }
.tk-dm-picker-empty { padding: 0 14px 14px; text-align: center; }
.tk-dm-profile {
  right: 12px;
  top: 56px;
  width: min(330px, calc(100% - 24px));
  border-radius: 10px;
  overflow: hidden;
}
.tk-dm-profile-head > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tk-dm-profile-head span { color: rgba(255,255,255,.55); font-size: .72rem; }
.tk-dm-profile-pic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  border: 2px solid var(--pc, rgba(255,255,255,.18));
}
.tk-dm-profile-pic.has-pic { font-size: 0; }
.tk-dm-profile-away,
.tk-dm-profile-bio {
  margin: 0;
  padding: 10px 12px 0;
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  line-height: 1.35;
}
.tk-dm-profile-actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  flex-wrap: wrap;
}
.tk-dm-ctx {
  position: fixed;
  min-width: 170px;
  border-radius: 10px;
  padding: 6px;
}
.tk-dm-ctx button {
  width: 100%;
  min-height: 34px;
  text-align: left;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 0 10px;
  cursor: pointer;
}
.tk-dm-ctx button:hover { background: rgba(255,255,255,.08); }
.bb-tab-badge {
  position: absolute;
  top: 6px;
  right: 14px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger, #e74c3c);
  color: #fff;
  font-size: .64rem;
  font-weight: 900;
}
.bb-tab-badge[hidden] { display: none !important; }

/* ── Notes pane ── */
.tk-notes-hint { margin: 0; }
[data-tk-pane="notes"] { display: flex; flex-direction: column; gap: 8px; }
[data-tk-pane="notes"] textarea {
  flex: 1;
  min-height: 0;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  font-size: .9rem;
  line-height: 1.4;
  resize: none;
}

/* Header strip — mode toggle on the left, action buttons on the right */
.tk-notes-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding: 0;
}
.tk-notes-modes {
  display: inline-flex;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 2px;
}
.tk-note-mode {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tk-note-mode:hover { color: var(--text); }
.tk-note-mode.active {
  background: var(--accent, #ffd76b);
  color: #0b0d11;
}
.tk-notes-actions { display: inline-flex; gap: 6px; }
.tk-note-act {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .76rem; font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.tk-note-act:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.tk-note-act:active { transform: translateY(1px); }
.tk-note-act.tk-note-danger:hover {
  background: rgba(231,76,60,.18); border-color: rgba(231,76,60,.55); color: #ff7866;
}
.tk-note-act.flash {
  background: rgba(126,224,160,.22);
  border-color: rgba(126,224,160,.55);
  color: #7ce0a0;
}

/* Pane visibility — JS toggles .hidden */
.tk-note-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.tk-note-pane.hidden { display: none; }

/* ── Q-Note mode ── */
.tk-qnote-log {
  list-style: none; padding: 6px 4px; margin: 0;
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.tk-qnote-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  transition: background .12s ease;
}
.tk-qnote-row:hover { background: rgba(255,255,255,.06); }
.tk-qnote-ts {
  font-size: .62rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tk-qnote-text {
  font-size: .88rem;
  line-height: 1.4;
  word-break: break-word;
  color: var(--text);
}
.tk-qnote-text strong { color: #fff; }
.tk-qnote-text em { color: var(--accent, #ffd76b); font-style: italic; }
.tk-qnote-S .tk-qnote-text { font-size: .76rem; }
.tk-qnote-L .tk-qnote-text { font-size: 1.05rem; font-weight: 600; }
.tk-qnote-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 1rem;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
  padding: 0;
  line-height: 1;
}
.tk-qnote-row:hover .tk-qnote-del,
.tk-qnote-del:focus-visible { opacity: 1; }
.tk-qnote-del:hover {
  background: rgba(231,76,60,.18);
  border-color: rgba(231,76,60,.45);
  color: #ff7866;
}
.tk-qnote-empty { margin: 8px 4px 0; }

.tk-qnote-form { display: flex; flex-direction: column; gap: 6px; }
.tk-qnote-toolbar {
  display: inline-flex; gap: 4px; align-items: center;
  flex-wrap: wrap;
}
.tk-qnote-size, .tk-qnote-fmt {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  border-radius: 6px;
  font-size: .72rem; font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
  transition: all .12s ease;
}
.tk-qnote-size:hover, .tk-qnote-fmt:hover { background: rgba(255,255,255,.12); color: var(--text); }
.tk-qnote-size.active {
  background: var(--accent, #ffd76b);
  border-color: var(--accent, #ffd76b);
  color: #0b0d11;
}
.tk-qnote-fmt[data-fmt="bold"] { font-weight: 900; }
.tk-qnote-fmt[data-fmt="italic"] { font-style: italic; }
.tk-qnote-sep {
  width: 1px; height: 18px;
  background: rgba(255,255,255,.12);
  margin: 0 4px;
}
#tk-qnote-input {
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: .9rem;
  line-height: 1.4;
  resize: none;
  min-height: 38px;
  max-height: 120px;
}
#tk-qnote-input:focus {
  outline: 1px solid var(--accent, #ffd76b);
  outline-offset: -1px;
}

/* ── Keyboard pane ── */
[data-tk-pane="keyboard"] { gap: 10px; }
[data-tk-pane="keyboard"] p { margin: 0; }
[data-tk-pane="keyboard"] button { align-self: flex-start; min-height: 38px; padding: 8px 18px; }

/* ── Bottom-toolbar unread pin (overlay on the Tools button) ── */
.ls-bb-btn { position: relative; }
.bb-unread {
  position: absolute;
  top: 6px; right: calc(50% - 24px);
  background: var(--accent);
  color: #1a0e05;
  font-size: .62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  pointer-events: none;
  border: 2px solid rgba(26,17,24,.95);
  letter-spacing: 0; text-transform: none;
  min-width: 18px;
  text-align: center;
}

/* Mobile — drop the panel pad and shrink tabs */
@media (max-width: 600px) {
  .tk-drawer { height: 300px; }
  body.tk-open { padding-bottom: calc(70px + 300px); }
  .tk-tab-lbl { display: none; }
  .tk-tab { padding: 7px 10px; }
  .tk-private-pill { display: none; }
  .tk-prof-pickers { grid-template-columns: 1fr; gap: 8px; }
  .tk-prof-icons { grid-template-columns: repeat(8, 30px); gap: 4px; }
  .tk-prof-icon { width: 30px; height: 30px; border-radius: 9px; }
  .tk-prof-colors { grid-template-columns: repeat(12, 18px); }
  .tk-drawer.tk-fullscreen .tk-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .tk-drawer.tk-fullscreen [data-tk-pane="dms"] { grid-column: 1; grid-row: 2; }
  .tk-drawer.tk-fullscreen [data-tk-pane="notes"] { grid-column: 1; grid-row: 3; }
}

/* DM entry-points: button on each row of the room People drawer + on lobby avatar hover-card */
.room-user {
  grid-template-columns: 48px 1fr auto;
}
.ru-dm-btn {
  background: rgba(120, 100, 220, .18);
  border: 1px solid rgba(160, 140, 230, .45);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.ru-dm-btn:hover {
  background: rgba(160, 140, 230, .35);
  border-color: rgba(200, 180, 250, .65);
}
.ls-av-card-dm {
  margin-top: 10px;
  width: 100%;
  font-size: .82rem;
}

/* ── Karaoke / Music library picker (room.js openVideoLibraryPicker) ── */
.yt-lib-sections {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 60vh; overflow-y: auto;
}
.yt-lib-section { display: flex; flex-direction: column; gap: 6px; }
.yt-lib-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 4px 2px;
  font-size: .82rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.yt-lib-section-head .muted { color: rgba(255,255,255,.5); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .72rem; }
.yt-lib-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.yt-lib-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.yt-lib-item:hover { background: rgba(255,255,255,.06); }
.yt-lib-meta { min-width: 0; }
.yt-lib-meta strong { font-size: .92rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-lib-meta .muted { font-family: ui-monospace, monospace; font-size: .68rem; }
/* Karaoke YouTube jukebox filter input (ls-2.44) */
.yt-lib-search { margin: 4px 0 8px; }
.yt-lib-filter {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35); color: var(--ls-fg, #fff);
  font: inherit; font-size: .9rem;
}
.yt-lib-filter:focus { outline: none; border-color: var(--ls-accent, #6cf); background: rgba(0,0,0,.5); }
.yt-lib-list-yt { max-height: 42vh; }
.yt-lib-vid { font-family: ui-monospace, monospace; opacity: .65; }

/* ═══════════════════════════════════════════
   SITE-WIDE CONTEXT MENU (lib-site-menu.js, ls-2.45)
   Right-click anywhere → Home / Lobby / Music / DMs / Identity / Mute…
   ═══════════════════════════════════════════ */
.ls-site-menu {
  position: fixed;
  z-index: 9999;
  min-width: 184px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: calc(100svh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  background: rgba(20, 14, 28, .96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink, #f5ede8);
  font-size: .82rem;
  animation: ls-site-menu-pop .12s ease-out;
}
@keyframes ls-site-menu-pop {
  from { opacity: 0; transform: scale(.96) translateY(-2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ls-site-menu-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  padding: 4px 9px 1px;
  font-weight: 700;
}
.ls-site-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  min-height: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ls-site-menu-item:hover,
.ls-site-menu-item:focus {
  background: rgba(255,255,255,.08);
  outline: none;
}
.ls-site-menu-sep {
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 3px 6px;
}
body.vr-mode .ls-site-menu { font-size: 1.1rem; min-width: 240px; }
body.vr-mode .ls-site-menu-item { padding: 12px 16px; }

/* Styled avatar/icon tokens - replaces raw letter/emoji fallbacks. */
:is(
  .ls-av-emoji,
  .ls-av-card-pic,
  .lsra-pic,
  .lsra-card-pic,
  .ru-pic,
  .room-chat-msg .ic,
  .tk-prof-pic,
  .tk-dm-pic,
  .tk-dm-thread-pic,
  .tk-dm-profile-pic,
  .lsid-photo-prev,
  .home-id-pip,
  .home-sec-ic,
  .home-tile-icon,
  .lobby-id-pip,
  #cc-id-pip,
  .room-header-icon,
  .ls-splash-step-ic
).has-token,
.id-icons button[data-icon],
.tk-prof-icon[data-icon] {
  --token-color: var(--pc, var(--ru-color, var(--av-color, var(--lsra-color, var(--c, var(--user-color, var(--accent, #f0a050))))))); /* 2026-05-02d — fixed missing closing paren that was silently aborting the CSS parser around line 3367, killing every rule below. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.42), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--token-color) 72%, #ffffff 5%), color-mix(in srgb, var(--token-color) 36%, #050308 64%));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -12px 24px rgba(0,0,0,.26);
}
.id-icons button[data-icon] > span,
.tk-prof-icon[data-icon] > span { opacity: 0; font-size: 0; }
:is(
  .ls-av-emoji,
  .ls-av-card-pic,
  .lsra-pic,
  .lsra-card-pic,
  .ru-pic,
  .room-chat-msg .ic,
  .tk-prof-pic,
  .tk-dm-pic,
  .tk-dm-thread-pic,
  .tk-dm-profile-pic,
  .lsid-photo-prev,
  .home-id-pip,
  .home-sec-ic,
  .home-tile-icon,
  .lobby-id-pip,
  #cc-id-pip,
  .room-header-icon,
  .ls-splash-step-ic
).has-token::before,
.id-icons button[data-icon]::before,
.tk-prof-icon[data-icon]::before {
  content: '';
  position: absolute;
  inset: 25% 22% 31%;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.12));
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  z-index: 1;
}
:is(
  .ls-av-emoji,
  .ls-av-card-pic,
  .lsra-pic,
  .lsra-card-pic,
  .ru-pic,
  .room-chat-msg .ic,
  .tk-prof-pic,
  .tk-dm-pic,
  .tk-dm-thread-pic,
  .tk-dm-profile-pic,
  .lsid-photo-prev,
  .home-id-pip,
  .home-sec-ic,
  .home-tile-icon,
  .lobby-id-pip,
  #cc-id-pip,
  .room-header-icon,
  .ls-splash-step-ic
).has-token::after,
.id-icons button[data-icon]::after,
.tk-prof-icon[data-icon]::after {
  content: '';
  position: absolute;
  width: 13%;
  height: 13%;
  right: 27%;
  top: 28%;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 10px color-mix(in srgb, var(--token-color) 65%, white 35%);
  z-index: 2;
}
.home-sec-ic.has-token,
.home-tile-icon.has-token {
  --token-color: var(--tile-color, var(--accent));
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="CH"]::before,
.id-icons button[data-icon="CH"]::before,
.tk-prof-icon[data-icon="CH"]::before {
  inset: 27% 20% 35%;
  border-radius: 10px;
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="CH"]::after,
.id-icons button[data-icon="CH"]::after,
.tk-prof-icon[data-icon="CH"]::after {
  width: 16%;
  height: 12%;
  right: 24%;
  top: 56%;
  border-radius: 0 0 999px 999px;
  transform: skewX(-24deg);
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="AU"]::before,
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="RF"]::before,
.id-icons button[data-icon="AU"]::before,
.id-icons button[data-icon="RF"]::before,
.tk-prof-icon[data-icon="AU"]::before,
.tk-prof-icon[data-icon="RF"]::before {
  inset: 31% 46% 28% 24%;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 10px 3px 0 -1px rgba(255,255,255,.72), 20px -4px 0 -2px rgba(255,255,255,.58), 30px 5px 0 -3px rgba(255,255,255,.45);
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="GM"]::before,
.id-icons button[data-icon="GM"]::before,
.tk-prof-icon[data-icon="GM"]::before {
  inset: 33% 18% 32%;
  border-radius: 999px;
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="GM"]::after,
.id-icons button[data-icon="GM"]::after,
.tk-prof-icon[data-icon="GM"]::after {
  width: 7%;
  height: 7%;
  left: 31%;
  top: 45%;
  box-shadow: 13px 0 0 rgba(255,255,255,.9), 29px -4px 0 rgba(255,255,255,.68), 34px 5px 0 rgba(255,255,255,.68);
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="VR"]::before,
.id-icons button[data-icon="VR"]::before,
.tk-prof-icon[data-icon="VR"]::before {
  inset: 35% 24% 35%;
  border-radius: 999px;
  box-shadow: 18px 0 0 -2px rgba(255,255,255,.75), 0 10px 18px rgba(0,0,0,.22);
}
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon).has-token[data-icon="DB"]::before,
.id-icons button[data-icon="DB"]::before,
.tk-prof-icon[data-icon="DB"]::before {
  inset: 28% 45% 25%;
  border-width: 0 0 0 2px;
  border-radius: 0;
  box-shadow: -10px 18px 0 -8px rgba(255,255,255,.86), 10px 18px 0 -8px rgba(255,255,255,.86), 0 -5px 0 -1px rgba(255,255,255,.86);
}

/* Profile setup modal: centered, image-backed, and less plain. */
#id-modal .id-card {
  width: min(92vw, 560px);
  max-height: min(88vh, 760px);
  max-height: min(88dvh, 760px);       /* dvh so the Enter button stays reachable on iOS */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(12,8,18,.74), rgba(10,6,14,.94)),
    url('img/avatar-frame-glow.jpg') center/cover no-repeat;
  box-shadow: 0 24px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06) inset;
}
#id-modal .modal-head {
  padding: 18px 20px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#id-modal .modal-head h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: 0;
}
#id-modal .id-body {
  display: grid;
  gap: 13px;
  padding: 16px 20px 22px;
}
#id-modal #id-name {
  min-height: 54px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.36);
  color: var(--text);
  padding: 0 16px;
  font: inherit;
  font-size: 1.05rem;
  box-shadow: 0 14px 32px rgba(0,0,0,.22) inset;
}
#id-modal #id-name:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 14px 32px rgba(0,0,0,.22) inset;
}
#id-modal .id-icons,
.id-icons {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
#id-modal .id-icons button,
.id-icons button {
  min-height: 48px;
  aspect-ratio: 1;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
}
#id-modal .id-icons button.active,
.id-icons button.active,
.tk-prof-icon.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 12px 26px rgba(0,0,0,.24);
}
#id-modal .id-colors,
.id-colors {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px;
}
#id-modal .id-colors button,
.id-colors button {
  min-height: 38px;
  aspect-ratio: 1;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.12);
  cursor: pointer;
}
#id-modal .id-colors button.active,
.id-colors button.active {
  border-color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(0,0,0,.5);
}
#id-modal .id-enter {
  min-height: 54px;
  border-radius: 16px;
  margin-top: 2px;
}
.lsid-photo-prev.has-token { border-color: var(--accent); }

.room-chat-person {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.room-chat-person:hover,
.room-chat-person:focus-visible { text-decoration: underline; outline: none; }
.room-chat-person:disabled { cursor: default; text-decoration: none; opacity: 1; }
.room-chat-msg .ic.has-token {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.room-header-icon.has-token {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.room-user { cursor: pointer; grid-template-columns: 48px minmax(0, 1fr) auto auto; }
.room-user .ru-dm-btn,
.room-user .ru-mute-btn {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 750;
  padding: 5px 9px;
}
.room-user .ru-dm-btn:hover,
.room-user .ru-mute-btn:hover { background: rgba(255,255,255,.1); }
.ru-mute-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 10px;
}

@media (max-width: 560px) {
  #id-modal .id-icons,
  .id-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #id-modal .id-colors,
  .id-colors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Cohesion pass: pictogram toolbar, compact profile editor, polished intro. */
.bb-tk-tab {
  --bb-line: rgba(244,238,248,.72);
  --bb-fill: rgba(244,238,248,.12);
}
.bb-tk-tab.active { --bb-line: var(--accent, #ffd76b); --bb-fill: color-mix(in srgb, var(--accent, #ffd76b) 22%, transparent); }
.bb-tk-tab .bb-ic {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 24px;
  margin: 0 auto 1px;
  font-size: 0 !important;
  color: transparent !important;
}
.bb-tk-tab .bb-ic::before,
.bb-tk-tab .bb-ic::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}
.bb-tk-tab[data-tk-tab="profile"] .bb-ic::before {
  width: 10px; height: 10px;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--bb-line);
  border-radius: 999px;
  background: var(--bb-fill);
}
.bb-tk-tab[data-tk-tab="profile"] .bb-ic::after {
  width: 23px; height: 10px;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  border: 2px solid var(--bb-line);
  border-top-width: 0;
  border-radius: 0 0 14px 14px;
}
.bb-tk-tab[data-tk-tab="dms"] .bb-ic::before {
  inset: 4px 5px 7px;
  border: 2px solid var(--bb-line);
  border-radius: 9px;
  background: var(--bb-fill);
}
.bb-tk-tab[data-tk-tab="dms"] .bb-ic::after {
  left: 11px; bottom: 3px;
  width: 8px; height: 8px;
  border-left: 2px solid var(--bb-line);
  border-bottom: 2px solid var(--bb-line);
  transform: skew(-25deg);
}
.bb-tk-tab[data-tk-tab="notes"] .bb-ic::before {
  width: 18px; height: 20px;
  top: 2px; left: 7px;
  border: 2px solid var(--bb-line);
  border-radius: 5px;
  background:
    linear-gradient(var(--bb-line), var(--bb-line)) 5px 6px / 8px 2px no-repeat,
    linear-gradient(var(--bb-line), var(--bb-line)) 5px 11px / 8px 2px no-repeat,
    var(--bb-fill);
}
.bb-tk-tab[data-tk-tab="notes"] .bb-ic::after {
  width: 7px; height: 2px;
  top: 1px; left: 12px;
  background: var(--bb-line);
  border-radius: 999px;
}
.bb-tk-tab[data-tk-tab="keyboard"] .bb-ic::before {
  inset: 5px 3px 4px;
  border: 2px solid var(--bb-line);
  border-radius: 7px;
  background: var(--bb-fill);
}
.bb-tk-tab[data-tk-tab="keyboard"] .bb-ic::after {
  width: 3px; height: 3px;
  top: 10px; left: 9px;
  border-radius: 1px;
  background: var(--bb-line);
  box-shadow:
    6px 0 0 var(--bb-line),
    12px 0 0 var(--bb-line),
    0 6px 0 var(--bb-line),
    6px 6px 0 var(--bb-line),
    12px 6px 0 var(--bb-line);
}
.bb-tk-tab .bb-lbl {
  font-size: .66rem;
  letter-spacing: .04em;
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 2026-05-06 — Profile tab label morphs into "AWAY · {message}" while
   the user is away. Highlight it so a quick glance is enough to tell. */
.bb-tk-tab.bb-prof-away .bb-lbl {
  color: #d8c8ff;
  font-weight: 800;
  max-width: 140px;
}
@media (max-width: 540px){
  .bb-tk-tab.bb-prof-away .bb-lbl { max-width: 110px; }
}
.ls-topnav-right #ls-sfx-btn,
.ls-topnav-right #ls-site-mute-btn,
.ls-topnav-right #ls-music-btn {
  position: relative;
  min-width: 38px;
  width: 38px;
  height: 38px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  text-shadow: none !important;
  overflow: hidden;
}
.ls-topnav-right #ls-site-mute-btn::before,
.ls-topnav-right #ls-site-mute-btn::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}
.ls-topnav-right #ls-site-mute-btn::before {
  width: 17px;
  height: 17px;
  left: 9px;
  top: 10px;
  border: 2px solid currentColor;
  border-right-width: 0;
  border-radius: 5px 1px 1px 5px;
  color: rgba(255,255,255,.78);
  box-shadow: 7px 3px 0 -5px currentColor;
}
.ls-topnav-right #ls-site-mute-btn::after {
  width: 12px;
  height: 12px;
  right: 8px;
  top: 13px;
  border-top: 2px solid rgba(255,255,255,.82);
  border-right: 2px solid rgba(255,255,255,.82);
  transform: rotate(45deg);
  opacity: .7;
}
.ls-topnav-right #ls-site-mute-btn.muted::after {
  width: 18px;
  height: 2px;
  right: 8px;
  top: 18px;
  border: 0;
  background: #ff7b7b;
  transform: rotate(-35deg);
  opacity: 1;
  border-radius: 999px;
}

.tk-drawer:not(.tk-fullscreen):not(.tk-mini) {
  height: 276px;
  max-height: min(58vh, 420px);
}
body.tk-open { padding-bottom: calc(70px + 276px); }
body.tk-open.tk-mini { padding-bottom: calc(70px + 132px); }
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) .tk-panel { padding: 6px 12px 10px; }
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(320px, 1.18fr);
  grid-template-rows: auto auto 1fr;
  gap: 8px 12px;
  align-items: start;
}
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active .tk-prof-row {
  grid-column: 1;
  gap: 8px;
  align-items: center;
}
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active #tk-prof-bio {
  grid-column: 1;
  min-height: 54px;
}
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active .tk-prof-pickers {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.tk-prof-icons {
  grid-template-columns: repeat(8, minmax(36px, 1fr));
  gap: 6px;
}
.tk-prof-icon,
#id-modal .id-icons button,
.id-icons button {
  min-width: 0;
  color: rgba(255,255,255,.86) !important;
  font-size: .62rem !important;
  font-weight: 850;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}
.tk-prof-icon[data-icon] > span {
  position: absolute;
  left: 5px;
  bottom: 4px;
  z-index: 3;
  opacity: .92 !important;
  font-size: .58rem !important;
  line-height: 1;
}
#id-modal .id-icons button,
.id-icons button {
  display: grid;
  place-items: end center;
  padding: 0 0 5px;
}
.tk-prof-icon {
  width: auto;
  height: 38px;
  border-radius: 10px;
}
.tk-prof-icon[data-icon]:not([data-icon="CH"]):not([data-icon="AU"]):not([data-icon="RF"]):not([data-icon="GM"]):not([data-icon="VR"]):not([data-icon="DB"])::before,
#id-modal .id-icons button[data-icon]:not([data-icon="CH"]):not([data-icon="AU"]):not([data-icon="RF"]):not([data-icon="GM"]):not([data-icon="VR"]):not([data-icon="DB"])::before,
.id-icons button[data-icon]:not([data-icon="CH"]):not([data-icon="AU"]):not([data-icon="RF"]):not([data-icon="GM"]):not([data-icon="VR"]):not([data-icon="DB"])::before {
  inset: 8px 12px 14px;
  border-width: 2px;
  opacity: .96;
}
.tk-prof-icon[data-icon]::after,
#id-modal .id-icons button[data-icon]::after,
.id-icons button[data-icon]::after {
  opacity: .95;
}
.tk-prof-colors {
  grid-template-columns: repeat(12, 24px);
  gap: 6px;
  justify-content: start;
}
.tk-prof-color,
#id-modal .id-colors button,
.id-colors button {
  width: 24px;
  height: 24px;
  min-height: 0;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -7px 14px rgba(0,0,0,.22);
}
#id-modal .id-card {
  width: min(94vw, 640px);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(16,10,24,.82), rgba(8,5,12,.96)),
    url('img/splash-bg.jpg') center/cover no-repeat;
}
#id-modal .modal-head {
  padding: 16px 18px 8px;
}
#id-modal .id-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 12px 18px 18px;
}
#id-modal .id-body > .muted {
  margin: 0;
  font-size: .82rem;
}
#id-modal #id-name {
  min-height: 48px;
  border-radius: 13px;
}
#id-modal .id-icons,
.id-icons {
  grid-template-columns: repeat(8, minmax(42px, 1fr));
  gap: 6px;
}
#id-modal .id-icons button,
.id-icons button {
  min-height: 44px;
  border-radius: 13px;
}
#id-modal .id-colors,
.id-colors {
  grid-template-columns: repeat(12, 24px);
  justify-content: start;
  gap: 7px;
}
.lsid-extras {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px 10px;
  align-items: start;
  padding: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
.lsid-extras > .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}
.lsid-photo-row {
  display: contents;
}
.lsid-photo-prev {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}
.lsid-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.lsid-photo-actions .muted {
  width: 100%;
  margin: 0;
  font-size: .68rem;
}
.lsid-bio,
.lsid-away {
  grid-column: 1 / -1;
  width: 100%;
  border-radius: 11px;
}
.lsid-bio {
  min-height: 52px;
  resize: none;
}
.ls-splash {
  justify-content: center;
  padding: clamp(18px, 4vw, 42px);
  gap: 0;
  background:
    linear-gradient(180deg, rgba(8,5,12,.20), rgba(8,5,12,.58)),
    url('img/splash-bg.jpg') center/cover no-repeat,
    #08050c;
}
.splash-orb { display: none !important; }
.splash-rays { opacity: .28; }
.ls-splash-mark {
  margin-top: 0;
}
.ls-splash-mark img {
  width: clamp(72px, 9vw, 112px);
  height: clamp(72px, 9vw, 112px);
  border-radius: 22px;
  box-shadow: 0 18px 56px rgba(0,0,0,.45), 0 0 38px rgba(210,155,255,.22);
}
.ls-splash-title {
  margin-top: 10px;
  font-size: clamp(2.7rem, 6vw, 4.9rem);
  line-height: .95;
  letter-spacing: 0;
}
.ls-splash-sub {
  margin-top: 8px;
  font-size: clamp(.78rem, 1.25vw, 1rem);
  letter-spacing: .22em;
}
.ls-splash-steps {
  width: min(820px, 92vw);
  gap: 8px;
  margin-top: 20px;
}
.ls-splash-step {
  min-height: 96px;
  padding: 12px 13px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
}
.ls-splash-step-p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ls-splash-go {
  margin-top: 18px;
  min-height: 50px;
  padding: 12px 30px;
}
.ls-splash-foot {
  margin-top: 10px;
}
@media (max-width: 720px) {
  .tk-drawer:not(.tk-fullscreen):not(.tk-mini) { height: 360px; max-height: 62vh; max-height: 72dvh; }
  body.tk-open { padding-bottom: calc(70px + 360px); }
  .tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active {
    grid-template-columns: 1fr;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS momentum scroll on the profile pane */
    overscroll-behavior: contain;        /* fixes: avatar picker couldn't be scrolled on mobile */
  }
  .tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active .tk-prof-pickers {
    grid-column: 1;
    grid-row: auto;
  }
  .tk-prof-icons { grid-template-columns: repeat(4, minmax(38px, 1fr)); }
  .tk-prof-colors { grid-template-columns: repeat(6, 24px); }
  #id-modal .id-icons,
  .id-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #id-modal .id-colors,
  .id-colors { grid-template-columns: repeat(6, 24px); }
  .lsid-extras { grid-template-columns: 64px minmax(0, 1fr); }
  .lsid-photo-prev { width: 56px; height: 56px; border-radius: 15px; }
}

/* Custom avatar library + compact toolbar panes (2026-05-02). */
.lsid-avatar-library {
  display: grid;
  gap: 8px;
  margin: 8px 0 4px;
}
.lsid-avatar-lib-head,
.tk-prof-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lsid-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  min-width: 0;
}
.lsid-avatar-choice {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  border-radius: 10px;
  padding: 6px;
  display: grid;
  gap: 5px;
  place-items: center;
  cursor: pointer;
}
.lsid-avatar-choice:hover,
.lsid-avatar-choice.active {
  border-color: var(--accent, #f0a050);
  background: rgba(240,160,80,.13);
}
.lsid-avatar-choice img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}
.lsid-avatar-choice span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .68rem;
  color: rgba(255,255,255,.74);
}
.lsid-avatar-empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px;
  color: rgba(255,255,255,.55);
  text-align: center;
  font-size: .82rem;
}
.tk-prof-avatar-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.tk-prof-avatars {
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  max-height: 128px;
  overflow: auto;
  padding-right: 2px;
}
.tk-prof-avatars .lsid-avatar-choice img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active {
  overflow: hidden;
}
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active .tk-prof-pickers {
  min-height: 0;
  overflow: auto;
  align-content: start;
}
/* ── B1 fix (2026-06-01): mobile profile pane must scroll as ONE column. ──
   The desktop layout above makes the pane a fixed 2-col grid with
   `overflow:hidden` (4371) and delegates scrolling to an inner pickers
   column + a 128px avatars box. On a phone that single-column collapse
   trapped the avatar library off-screen with no reachable scroll. This
   block sits AFTER the desktop rules so it wins by source order at ≤720px:
   the pane becomes a plain scrolling flex column and the nested scroll
   containers are neutralised so everything flows into the pane's scroll. */
@media (max-width: 720px) {
  .tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active .tk-prof-pickers {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    overflow: visible;
  }
  .tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="profile"].active .tk-prof-avatars {
    max-height: none;
    overflow: visible;
  }
}
.tk-drawer:not(.tk-fullscreen):not(.tk-mini) [data-tk-pane="notes"].active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.tk-notes-head {
  align-items: center;
  gap: 8px;
}
.tk-notes-actions {
  gap: 6px;
  flex-wrap: wrap;
}
.tk-notes-hint {
  display: none;
}
.tk-note-pane {
  min-height: 0;
  overflow: hidden;
}
.tk-pane-pad #tool-notepad,
.tk-pane-q .tk-qnote-log {
  min-height: 0;
  height: 100%;
  max-height: none;
}
.tk-pane-q {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
}
.tk-qnote-empty {
  min-height: 76px;
  padding: 12px;
}
.tk-qnote-empty-ic {
  font-size: 1.4rem;
}
.tk-qnote-log {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  align-content: start;
  overflow: auto;
}
.tk-qnote-log li {
  min-height: 72px;
  max-height: 108px;
  overflow: hidden;
}
.tk-notes-regular .tk-qnote-log {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.tk-notes-regular .tk-qnote-row {
  border-style: solid;
  background: rgba(255,255,255,.045);
}
.tk-notes-regular .tk-qnote-text {
  font-size: .88rem;
  line-height: 1.35;
}

/* LittleScreen splash media refresh */
.ls-splash {
  isolation: isolate;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(18px, 4vh, 42px) clamp(16px, 5vw, 72px);
  overflow: hidden auto;
  background: #07050b;
}
.ls-splash-bg::before,
.ls-splash-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ls-splash-bg::before {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,4,10,.18), rgba(6,4,10,.78)),
    linear-gradient(90deg, rgba(4,3,8,.62), rgba(4,3,8,.18) 44%, rgba(4,3,8,.68));
}
.ls-splash-bg::after {
  z-index: 3;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 100% 44px, 44px 100%;
  mix-blend-mode: screen;
  opacity: .18;
}
.ls-splash-video,
.ls-splash-video-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ls-splash-video {
  z-index: 1;
  object-fit: cover;
  filter: saturate(1.28) contrast(1.08) brightness(.78);
  transform: scale(1.035);
}
.ls-splash-video-glass {
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(255,206,96,.20), transparent 34%),
    linear-gradient(315deg, rgba(114,90,255,.22), transparent 42%);
  mix-blend-mode: screen;
  opacity: .75;
}
.ls-splash .splash-rays {
  z-index: 4;
  opacity: .18;
  mix-blend-mode: screen;
}
.ls-splash-mark,
.ls-splash-title,
.ls-splash-sub,
.ls-splash-reel,
.ls-splash-steps,
.ls-splash-actions,
.ls-splash-go,
.ls-splash-audio-control,
.ls-splash-foot {
  position: relative;
  z-index: 5;
}
.ls-splash-mark img {
  width: clamp(78px, 8vw, 118px);
  height: clamp(78px, 8vw, 118px);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.ls-splash-title {
  font-size: 6.2rem;
  line-height: .88;
  margin-top: 12px;
  text-shadow: 0 24px 80px rgba(0,0,0,.54);
}
.ls-splash-sub {
  color: rgba(255,255,255,.78);
  text-shadow: 0 8px 24px rgba(0,0,0,.65);
}
.ls-splash-reel {
  width: min(920px, 92vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(16px, 2.4vh, 24px);
  animation: splashRise .7s ease .62s both;
}
.ls-splash-clip {
  position: relative;
  display: block;
  min-height: 82px;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 16px 42px rgba(0,0,0,.32);
}
.ls-splash-clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.18) contrast(1.05) brightness(.82);
}
.ls-splash-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.58));
}
.ls-splash-clip b {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.78);
}
.ls-splash-steps {
  width: min(920px, 92vw);
  margin-top: 14px;
}
.ls-splash-step {
  min-height: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14,11,20,.68), rgba(14,11,20,.46));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
.ls-splash-step::before {
  border-radius: 8px;
}
.ls-splash-go {
  margin-top: 18px;
}
.ls-splash-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  animation: splashRise .7s ease 1.22s both;
}
.ls-splash-actions .ls-splash-go {
  margin-top: 0;
}
.ls-splash-queue {
  min-height: 52px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 10px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(10,8,15,.55);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 18px 46px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
.ls-splash-queue:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent2, #7cc7ff) 55%, white 15%);
  background: rgba(18,15,28,.68);
}
.ls-splash-queue-sub {
  color: rgba(255,255,255,.58);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ls-splash-audio-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-top: 12px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(8,6,13,.58);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  animation: splashRise .7s ease 1.34s both;
}
.ls-splash-sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
  color: #170d05;
  background: linear-gradient(135deg, var(--accent), #ffe3a6);
  font-weight: 900;
  cursor: pointer;
}
.ls-splash-sound.is-blocked {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}
.ls-splash-track {
  max-width: 180px;
  padding-right: 7px;
  color: rgba(255,255,255,.76);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-splash-eq {
  width: 18px;
  height: 14px;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  align-items: end;
}
.ls-splash-eq i {
  display: block;
  height: 38%;
  border-radius: 999px;
  background: currentColor;
  opacity: .7;
}
.ls-splash-sound.is-playing .ls-splash-eq i:nth-child(1) { animation: lsEq 720ms ease-in-out infinite; }
.ls-splash-sound.is-playing .ls-splash-eq i:nth-child(2) { animation: lsEq 620ms ease-in-out -180ms infinite; }
.ls-splash-sound.is-playing .ls-splash-eq i:nth-child(3) { animation: lsEq 820ms ease-in-out -320ms infinite; }
@keyframes lsEq {
  0%, 100% { height: 32%; }
  45% { height: 100%; }
}
@media (max-width: 720px) {
  .ls-splash {
    justify-content: flex-start;
    padding-top: max(24px, env(safe-area-inset-top));
  }
  .ls-splash-mark img {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }
  .ls-splash-title {
    font-size: 3.2rem;
    margin-top: 9px;
  }
  .ls-splash-sub {
    font-size: .72rem;
    letter-spacing: .17em;
  }
  .ls-splash-reel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
  }
  .ls-splash-clip {
    min-height: 58px;
    aspect-ratio: 1.2 / 1;
  }
  .ls-splash-clip b {
    left: 8px;
    bottom: 7px;
    font-size: .62rem;
  }
  .ls-splash-steps {
    margin-top: 12px;
    gap: 8px;
  }
  .ls-splash-step {
    padding: 10px 12px;
  }
  .ls-splash-step-ic {
    display: none;
  }
  .ls-splash-go {
    margin-top: 12px;
  }
  .ls-splash-actions {
    width: min(92vw, 380px);
    margin-top: 12px;
  }
  .ls-splash-actions .ls-splash-go,
  .ls-splash-queue {
    flex: 1 1 148px;
    min-height: 48px;
    padding: 10px 16px;
  }
  .ls-splash-audio-control {
    max-width: min(92vw, 360px);
  }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .ls-splash-title {
    font-size: 5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ls-splash-video,
  .ls-splash-clip video {
    animation: none;
  }
}

/* Profile card builder: compact one-screen identity setup. */
:is(.ls-av-emoji,.ls-av-card-pic,.lsra-pic,.lsra-card-pic,.ru-pic,.room-chat-msg .ic,.tk-prof-pic,.tk-dm-pic,.tk-dm-thread-pic,.tk-dm-profile-pic,.lsid-photo-prev,.home-id-pip,.lobby-id-pip,#cc-id-pip,.room-header-icon,.id-avatar-preview).has-emoji {
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 1.45rem !important;
  line-height: 1;
  text-shadow: 0 4px 14px rgba(0,0,0,.45);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.38), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--user-color, var(--accent)) 42%, #1a1022 58%), rgba(255,255,255,.08));
}
#id-modal {
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 28px);
}
#id-modal .id-profile-builder {
  width: min(94vw, 760px);
  max-height: min(92svh, 720px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(18,14,24,.90), rgba(8,6,12,.98)),
    url('img/splash-bg.jpg') center/cover no-repeat;
  box-shadow: 0 28px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.08) inset;
}
#id-modal .id-profile-builder .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#id-modal .id-profile-builder .modal-head h3 {
  margin: 0;
  font-size: 1.65rem;
  letter-spacing: 0;
}
#id-modal .id-profile-builder .modal-head p {
  margin: 4px 0 0;
}
#id-modal .id-profile-builder .id-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 18px 0;
  overflow: hidden;
}
.id-live-card {
  display: grid;
  grid-template-columns: 88px minmax(180px, 1fr);
  gap: 10px 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--user-color, var(--accent)) 30%, rgba(255,255,255,.12));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--user-color, var(--accent)) 14%, rgba(255,255,255,.04)), rgba(255,255,255,.035));
}
.id-avatar-preview {
  grid-row: 1 / span 2;
  width: 78px;
  height: 78px;
  min-width: 78px;
  border-radius: 22px;
  border: 2px solid var(--user-color, var(--accent));
  background: color-mix(in srgb, var(--user-color, var(--accent)) 24%, rgba(255,255,255,.04));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--user-color, var(--accent)) 18%, transparent), 0 18px 36px rgba(0,0,0,.32);
  cursor: pointer;
}
.id-avatar-preview.has-pic {
  background-size: cover;
  background-position: center;
}
.id-avatar-preview.has-emoji {
  font-size: 2.35rem;
}
.id-name-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.id-name-field span,
.id-color-block > span,
.id-pane-head,
.id-more summary {
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#id-modal .id-profile-builder #id-name {
  width: 100%;
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(0,0,0,.34);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
}
#id-modal .id-profile-builder #id-name:focus {
  outline: none;
  border-color: var(--user-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-color, var(--accent)) 22%, transparent);
}
.id-color-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}
#id-modal .id-profile-builder .id-colors,
#id-modal .id-profile-builder .tk-prof-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
#id-modal .id-profile-builder .id-colors button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.16);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -8px 15px rgba(0,0,0,.24);
}
#id-modal .id-profile-builder .id-colors button.active {
  border-color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--user-color, var(--accent)) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.34);
}
.id-avatar-builder {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}
.id-tabbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
#id-modal .id-tab {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.75);
  font-weight: 850;
  cursor: pointer;
}
#id-modal .id-tab.active {
  border-color: color-mix(in srgb, var(--user-color, var(--accent)) 72%, white 8%);
  background: color-mix(in srgb, var(--user-color, var(--accent)) 20%, rgba(255,255,255,.05));
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-color, var(--accent)) 16%, transparent);
}
.id-avatar-stage {
  min-height: 168px;
  overflow: auto;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.20);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--user-color, var(--accent)) 45%, #777) rgba(255,255,255,.06);
}
.id-avatar-stage::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.id-avatar-stage::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 999px;
}
.id-avatar-stage::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--user-color, var(--accent)) 48%, rgba(255,255,255,.28));
  border-radius: 999px;
}
.id-tab-pane {
  min-height: 100%;
}
.id-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#id-modal .id-profile-builder .lsid-avatar-grid {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
#id-modal .id-profile-builder .lsid-avatar-choice {
  min-height: 76px;
  border-radius: 12px;
  padding: 6px;
}
#id-modal .id-profile-builder .lsid-avatar-choice img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
#id-modal .id-profile-builder .lsid-avatar-choice.active {
  border-color: var(--user-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-color, var(--accent)) 24%, transparent);
}
.id-emoji-search {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
}
.id-emoji-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
}
.id-emoji-cats button {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.76);
  padding: 0 11px;
  font-weight: 800;
  white-space: nowrap;
}
.id-emoji-cats button.active {
  color: #fff;
  border-color: var(--user-color, var(--accent));
  background: color-mix(in srgb, var(--user-color, var(--accent)) 20%, rgba(255,255,255,.05));
}
.id-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 7px;
}
.id-emoji-grid button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  font-size: 1.5rem;
  cursor: pointer;
}
.id-emoji-grid button.active {
  border-color: var(--user-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-color, var(--accent)) 25%, transparent);
  transform: scale(1.03);
}
.id-upload-card {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
#id-modal .id-profile-builder .id-icons {
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 7px;
}
#id-modal .id-profile-builder .id-icons button {
  min-height: 48px;
  border-radius: 13px;
}
.id-more {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 8px;
}
.id-more summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.id-more label {
  display: block;
  margin: 8px 0 5px;
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  font-weight: 800;
}
.id-more textarea,
.id-more input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.id-more textarea {
  min-height: 64px;
  resize: vertical;
}
.id-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(8,6,12,.72), rgba(8,6,12,.96));
}
#id-modal .id-profile-builder .id-enter {
  min-width: 132px;
  min-height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--user-color, var(--accent)), color-mix(in srgb, var(--user-color, var(--accent)) 55%, white 28%));
}
@media (max-width: 720px) {
  #id-modal {
    align-items: flex-end;
    padding: 0;
  }
  #id-modal .id-profile-builder {
    width: 100vw;
    max-height: 94svh;
    border-radius: 24px 24px 0 0;
  }
  #id-modal .id-profile-builder .modal-head {
    padding: 14px 14px 10px;
  }
  #id-modal .id-profile-builder .modal-head h3 {
    font-size: 1.28rem;
  }
  #id-modal .id-profile-builder .id-body {
    padding: 10px 12px 0;
    gap: 8px;
  }
  .id-live-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 8px;
  }
  .id-avatar-preview {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 18px;
    font-size: 1.55rem;
  }
  .id-avatar-preview.has-emoji {
    font-size: 1.95rem;
  }
  #id-modal .id-profile-builder #id-name {
    min-height: 44px;
  }
  #id-modal .id-profile-builder .id-colors button {
    width: 28px;
    height: 28px;
    min-height: 28px;
  }
  .id-avatar-stage {
    min-height: 152px;
    padding: 8px;
  }
  #id-modal .id-profile-builder .lsid-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #id-modal .id-profile-builder .lsid-avatar-choice {
    min-height: 70px;
    padding: 5px;
  }
  #id-modal .id-profile-builder .lsid-avatar-choice img {
    width: 48px;
    height: 48px;
  }
  .id-footer {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }
  #id-modal .id-profile-builder .id-enter {
    flex: 1;
  }
}

/* Que Room */
.ls-page-queue {
  min-height: 100svh;
  overflow-x: hidden;
  background: #08050c;
}
.que-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #08050c url('img/splash-bg.jpg') center/cover no-repeat;
}
.que-bg video,
.que-bg-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.que-bg video {
  object-fit: cover;
  filter: saturate(1.18) contrast(1.08) brightness(.62);
  transform: scale(1.04);
}
.que-bg-glass {
  background:
    linear-gradient(180deg, rgba(7,4,10,.38), rgba(7,4,10,.86)),
    linear-gradient(110deg, rgba(255,196,87,.20), transparent 42%),
    linear-gradient(300deg, rgba(102,215,255,.18), transparent 48%);
}
.que-topnav {
  background: rgba(13,8,16,.78);
  backdrop-filter: blur(18px);
}
.que-enter-now {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.que-main {
  min-height: 100svh;
  padding: 104px clamp(14px, 4vw, 48px) 32px;
}
.que-hero {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.que-ticker {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(7,5,12,.62);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
#que-ticker-track {
  display: inline-flex;
  gap: 32px;
  min-width: max-content;
  padding: 9px 0;
  color: rgba(255,255,255,.78);
  font-size: .86rem;
  font-weight: 750;
  animation: queTicker 36s linear infinite;
}
#que-ticker-track span {
  white-space: nowrap;
}
@keyframes queTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.que-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 16px;
  align-items: stretch;
}
.que-copy,
.que-card,
.que-room > div {
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(16,11,22,.76), rgba(10,7,15,.72));
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.que-copy {
  min-height: 270px;
  padding: clamp(20px, 4vw, 42px);
  border-radius: 16px;
  display: grid;
  align-content: center;
  gap: 12px;
}
.que-copy h1 {
  margin: 0;
  font-size: 4.8rem;
  line-height: .9;
  letter-spacing: 0;
}
.que-copy p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 1.05rem;
  line-height: 1.45;
}
.que-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(255,255,255,.74);
}
.que-clock strong {
  color: #fff;
  font-size: 1.2rem;
}
.que-card {
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.que-status {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
#que-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 5px rgba(255,255,255,.06);
}
#que-status-dot.is-in {
  background: #71f2a2;
  box-shadow: 0 0 0 5px rgba(113,242,162,.12), 0 0 22px rgba(113,242,162,.45);
}
.que-status strong,
.que-status span {
  display: block;
}
.que-status span {
  color: rgba(255,255,255,.62);
  font-size: .85rem;
}
.que-name-label {
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#que-name,
#que-chat-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  padding: 0 13px;
  font: inherit;
}
.que-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.que-actions button {
  min-height: 44px;
  flex: 1 1 130px;
}
.que-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.que-stats span {
  min-height: 72px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}
.que-stats strong {
  font-size: 1.4rem;
}
.que-stats em {
  color: rgba(255,255,255,.6);
  font-style: normal;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.que-enter-link {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  background: rgba(255,255,255,.06);
}
.que-room {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 16px;
}
.que-room > div {
  min-height: 320px;
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.que-section-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.que-section-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.que-section-head span {
  color: rgba(255,255,255,.58);
  font-size: .78rem;
}
.que-line,
.que-chat {
  list-style: none;
  padding: 0;
  margin: 0;
}
.que-line {
  display: grid;
  gap: 8px;
  max-height: 292px;
  overflow: auto;
}
.que-line-item {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.que-line-item.mine {
  border-color: rgba(255,215,107,.45);
  background: rgba(255,215,107,.10);
}
.que-line-pos {
  color: rgba(255,255,255,.62);
  font-weight: 900;
}
.que-line-pic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--user-color, #ffd36b) 24%, rgba(255,255,255,.05));
  border: 1px solid color-mix(in srgb, var(--user-color, #ffd36b) 58%, rgba(255,255,255,.16));
  font-size: .78rem;
  font-weight: 900;
}
.que-line-name,
.que-line-time {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.que-line-time,
.que-line-empty,
.que-chat-empty {
  color: rgba(255,255,255,.55);
  font-size: .8rem;
}
.que-chat-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.que-chat {
  min-height: 0;
  max-height: 246px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 4px;
}
.que-chat-msg {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.que-chat-by {
  color: color-mix(in srgb, var(--user-color, #ffd36b) 72%, white 12%);
  font-size: .78rem;
  font-weight: 900;
}
.que-chat-text {
  color: rgba(255,255,255,.84);
  line-height: 1.35;
}
.que-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}
.que-chat-form button {
  min-height: 46px;
}
@media (max-width: 860px) {
  .que-main {
    padding: 90px 12px 20px;
  }
  .que-panel,
  .que-room {
    grid-template-columns: 1fr;
  }
  .que-copy {
    min-height: 0;
  }
  .que-copy h1 {
    font-size: 3.1rem;
  }
  .que-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .que-room > div {
    min-height: 260px;
  }
  .que-chat {
    max-height: 220px;
  }
}

.tk-drawer:not(.tk-fullscreen) .tk-pane:not(.active) {
  display: none !important;
}