/* ===================== BIGOLO =====================
   Eén donker, premium palet voor de hele app: bijna-zwarte ondergrond met
   een koude paarsblauwe gloed, en twee accenten die naar voren komen -
   violet (merk) en cyaan (neon), zoals bij de moderne streaming-apps.
   Alles wat afgerond, geschaduwd of geanimeerd is, haalt zijn maten en
   tijden hier vandaan, zodat de app overal hetzelfde aanvoelt. */
:root {
  --bg: #07060f;
  --bg-2: #0d0a1c;
  --surface: #131024;
  --surface-2: #1c1836;
  --surface-3: #272148;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --brand: #a78bfa;
  --brand-2: #7c3aed;
  --brand-3: #c4b5fd;
  --neon: #22d3ee;
  --neon-2: #6366f1;
  --glow: rgba(139, 92, 246, .5);
  --glow-neon: rgba(34, 211, 238, .45);
  --danger: #fb7185;
  --gold: #fbbf24;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .87);
  --muted: rgba(255, 255, 255, .6);
  --tabbar: 64px;
  /* maten en rondingen */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
  /* schaduwen: diep en zacht, met een gekleurde gloed voor het merk */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .42);
  --shadow-3: 0 18px 46px rgba(0, 0, 0, .5);
  --shadow-brand: 0 8px 24px rgba(124, 58, 237, .34);
  --shadow-neon: 0 8px 24px rgba(34, 211, 238, .28);
  /* overgangen */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .16s cubic-bezier(.22, .61, .36, 1);
  --smooth: .3s cubic-bezier(.22, .61, .36, 1);
  /* verloopaccenten */
  --grad-brand: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #22d3ee 130%);
  --grad-knop: linear-gradient(180deg, #c4b5fd, #7c3aed);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
/* De gloed achter de hele app: een paarse wolk linksboven en een cyaan
   wolk rechtsonder. Hij hangt vast aan het scherm (fixed) en pakt geen
   tikken, dus hij zit nooit in de weg - maar de app voelt er meteen
   dieper van. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 38% at 12% -6%, rgba(124, 58, 237, .34), transparent 72%),
    radial-gradient(60% 42% at 104% 8%, rgba(34, 211, 238, .16), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(99, 102, 241, .2), transparent 72%);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; border-radius: 6px; }

[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[data-icon] svg { width: 24px; height: 24px; display: block; }

/* Aanraken moet je voelen: elke knop die je aantikt, veert heel even in.
   Alleen de dingen waar dat niet stoort (geen schuiven, geen invoervelden) -
   en wie minder beweging wil, krijgt helemaal niets. */
.btn:not([disabled]):active,
.icon-btn:active,
.chip:active,
.tab:active,
.feed-tab:active,
.seg-btn:active,
.muziek-knop:active,
.gift:active,
.choice:active,
.paneel-keuze:active,
.paneel-knop:active,
.golive-cat:active,
.sticker-tab:active,
.gif-cat:active { transform: scale(.965); }
.btn, .icon-btn, .chip, .tab, .feed-tab, .seg-btn, .muziek-knop, .gift, .choice,
.paneel-keuze, .paneel-knop, .golive-cat, .sticker-tab, .gif-cat, .rail-btn,
.muziek-rij, .row, .live-card, .remote-tegel, .golive-tool {
  transition: transform var(--fast), background var(--fast), border-color var(--fast),
    box-shadow var(--fast), color var(--fast), opacity var(--fast);
}

@media (prefers-reduced-motion: reduce) {
  *:active { transform: none !important; }
  .btn, .icon-btn, .chip, .tab, .seg-btn, .gift, .choice, .row, .live-card,
  .muziek-rij, .golive-tool { transition: none !important; }
}

/* ===================== app-schil ===================== */
#app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
#screens { position: relative; flex: 1; min-height: 0; }
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.screen-feed { overflow: hidden; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
  background: rgba(9, 7, 20, .68);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar-feed { position: absolute; top: 0; left: 0; right: 0; border-bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent); backdrop-filter: none; }
.topbar-title { font-size: 21px; font-weight: 800; letter-spacing: -.2px; }
.topbar-title::after { content: ""; display: block; width: 26px; height: 3px; margin-top: 5px; border-radius: var(--r-pill); background: var(--grad-brand); box-shadow: 0 0 12px var(--glow); }
.icon-btn {
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  transition: background var(--fast), color var(--fast), border-color var(--fast),
    transform var(--fast), box-shadow var(--fast);
}
.icon-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--line-strong); }
.icon-btn:active { background: rgba(255, 255, 255, .2); }
.icon-btn-brand { color: var(--brand-3); box-shadow: 0 0 0 1px rgba(196, 181, 253, .16) inset; }
.icon-btn-brand:hover { background: rgba(196, 181, 253, .2); box-shadow: 0 0 16px var(--glow); }

/* ===================== onderbalk (mobiele navigatie) =====================
   De vaste navigatie onderaan: doorzichtig glas met een neon randje, zodat
   de inhoud erachter doorwerkt en de balk toch duidelijk op het scherm ligt.
   Vijf plekken: Home, Ontdek, Live (midden, met het merkverloop), Inbox en
   Profiel. De actieve plek licht op met een zachte gloed. */
.tabbar {
  height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding: 0 calc(6px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(6px + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(20, 15, 44, .82), rgba(7, 6, 15, .96));
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .55);
  backdrop-filter: blur(22px) saturate(150%);
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
}
.tabbar::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, .75), rgba(34, 211, 238, .6), transparent);
  pointer-events: none;
}
.tab {
  flex: 1;
  height: var(--tabbar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  position: relative;
  border-radius: var(--r-md);
}
.tab span[data-icon] { position: relative; }
/* het lichtende hofje achter het icoon van de actieve plek */
.tab span[data-icon]::before {
  content: "";
  position: absolute; inset: -8px -15px;
  border-radius: var(--r-pill);
  background: radial-gradient(60% 62% at 50% 45%, rgba(139, 92, 246, .6), transparent 76%);
  opacity: 0;
  transition: opacity var(--fast);
  pointer-events: none;
}
.tab svg { transition: transform var(--fast); }
.tab-label { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.tab:hover { color: var(--text-2); }
.tab.is-active { color: #fff; }
.tab.is-active span[data-icon]::before { opacity: 1; }
.tab.is-active span[data-icon] svg { transform: translateY(-1px) scale(1.12); filter: drop-shadow(0 0 10px var(--glow)); }
.tab.is-active .tab-label { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
/* de knop "Live gaan" in het midden: het merkverloop met een gloed */
.tab-live span[data-icon] {
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--r-md);
  width: 54px; height: 36px;
  box-shadow: 0 8px 20px var(--glow), 0 0 0 1px rgba(255, 255, 255, .16) inset;
}
.tab-live span[data-icon]::before { display: none; }
.tab-live span[data-icon] svg { width: 22px; height: 22px; }
.tab-live .tab-label { color: var(--brand-3); }
.tab-live:hover span[data-icon] { box-shadow: 0 10px 26px var(--glow), 0 0 0 1px rgba(255, 255, 255, .24) inset; }

/* De twee knoppen rechts in de kopbalk van de feed (Maken en Zoeken). */
.topbar-acties { display: flex; align-items: center; gap: 8px; }

/* ===================== mobiel fijnslijpen =====================
   iOS-Safari zoomt het hele scherm in zodra je een invulveld aantikt dat
   kleiner is dan 16px. Alle invulvelden staan daarom op 16px - je kunt
   typen zonder dat de app verspringt. */
.chat-input,
.field input,
.field select,
.paneel-veld,
.golive-titel,
#searchInput,
#gifInput,
#commentInput,
#chatInput,
#clipCaption,
#nameInput { font-size: 16px; }

/* Op een kort scherm (of in landscape) mag de kopbalk van de kamer wat
   compacter, zodat het raster en de chat ruimte houden. */
@media (max-height: 560px) {
  :root { --tabbar: 56px; }
  .room-gif { width: 84px; }
  .room-chat { max-height: 26vh; }
}

.tab-badge {
  position: absolute; top: 8px; left: 50%; margin-left: 7px;
  background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: var(--r-pill);
  box-shadow: 0 0 10px rgba(251, 113, 133, .6);
}

/* ===================== feed ===================== */
.feed-tabs { display: flex; gap: 18px; }
.feed-tab {
  font-size: 16px; font-weight: 700;
  color: rgba(255, 255, 255, .6);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--fast), border-color var(--fast);
}
.feed-tab.is-active { color: #fff; border-image: var(--grad-brand) 1; }

.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }

.clip {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #14092b;
}
.clip-bg { position: absolute; inset: 0; }
.clip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%); }
.clip-demo {
  position: absolute; top: 78px; left: 16px;
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line);
  padding: 4px 8px; border-radius: 999px; color: rgba(255,255,255,.85);
}
.clip-body { position: absolute; left: 16px; right: 92px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.clip-user { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.clip-caption { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .94); }
.clip-tags { font-size: 13px; font-weight: 600; color: var(--brand-3); }
.clip-music { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.86); }
.clip-music span[data-icon] svg { width: 15px; height: 15px; }

.rail { position: absolute; right: 10px; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rail-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; }
.rail-btn .rail-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .32);
}
.rail-count { font-size: 12px; font-weight: 700; }
.rail-btn.is-on { color: var(--danger); }
.rail-avatar { position: relative; margin-bottom: 2px; }
.rail-follow {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.rail-follow.is-following { background: var(--brand); }

/* avatar */
.avatar {
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800;
  background: linear-gradient(140deg, var(--brand), #f472b6);
  flex: 0 0 auto;
  overflow: hidden;
}
img.avatar { object-fit: contain; padding: 6px; background: radial-gradient(80% 80% at 50% 40%, #4c1d95, #24063f); }
.avatar-40 { width: 40px; height: 40px; font-size: 15px; }
.avatar-44 { width: 44px; height: 44px; font-size: 16px; }
.avatar-52 { width: 52px; height: 52px; font-size: 18px; }
.avatar-72 { width: 72px; height: 72px; font-size: 24px; }

/* ===================== chips + live-raster ===================== */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
}
.chip:hover { border-color: var(--line-strong); color: #fff; }
.chip.is-active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 6px 18px var(--glow); }

.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px calc(18px + env(safe-area-inset-bottom)); }
.live-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: var(--shadow-1);
}
.live-card:hover { border-color: var(--line-strong); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(196,181,253,.18) inset; }
.live-card-art { position: absolute; inset: 0; }
.live-card-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 42%, rgba(255,255,255,.22), transparent 70%);
}
.live-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 45%, rgba(0,0,0,.8)); }
.live-card-body { position: absolute; inset: auto 10px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.live-card-host { font-size: 13px; font-weight: 700; }
.live-card-title { font-size: 12px; color: rgba(255,255,255,.82); }
.live-card-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; }
.pill {
  font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255,255,255,.16);
  display: inline-flex; align-items: center; gap: 5px;
}
.pill-live { background: var(--danger); border-color: transparent; }
.pill-mode { background: rgba(124, 58, 237, .85); border-color: transparent; }
.pill-echt { background: rgba(16, 185, 129, .9); border-color: transparent; }
.initial { display: grid; place-items: center; font-weight: 800; color: #fff; }

/* ===================== livekamer ===================== */
.room { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; }
.room-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.room-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Beeld van een deelnemer op zijn eigen plek in het raster. */
.room-panel .seat-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-art { position: absolute; inset: 0; }
.room-art .initial { width: 100%; height: 100%; font-size: 52px; color: rgba(255,255,255,.92); background: none; }
.room-panes { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pane { position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.14); }
.pane:last-child { border-right: 0; }
.pane video { width: 100%; height: 100%; object-fit: cover; }
.pane-art { width: 100%; height: 100%; display: grid; place-items: center; font-size: 54px; font-weight: 800; background: radial-gradient(80% 60% at 50% 40%, #7c3aed, #24063f); color: #fff; }
.pane-rival .pane-art { background: radial-gradient(80% 60% at 50% 40%, #b91c1c, #450a0a); }
.pane-tag { position: absolute; left: 8px; top: 98px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 999px; }
.pane-votes { position: absolute; left: 8px; bottom: 46px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 999px; }
.vote-bar { position: absolute; left: 8px; right: 8px; bottom: 24px; height: 7px; border-radius: 999px; background: rgba(0,0,0,.55); overflow: hidden; display: block; }
.vote-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-3), #f0abfc); transition: width .3s ease; }
.room-kop { position: absolute; inset: 12px 12px auto 12px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.room-kop > * { pointer-events: auto; }
/* De kopbalk van de kamer ligt over de bovenste stoelen van het raster. Alleen
   de dingen waar je op kunt tikken (de hostkaart, de knoppen en de tellers)
   houden de tik tegen; de lege ruimte eromheen laat hem door naar de stoel. */
.room-kop .room-top { pointer-events: none; }
.room-kop .room-top .host-chip, .room-kop .room-top .room-top-right { pointer-events: auto; }
/* De tweede regel (munten en kijkers) is alleen om te lezen, dus daar mag je
   gewoon doorheen tikken naar de stoel eronder. */
.room-kop .room-tweede { pointer-events: none; }
.room-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.host-chip { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 68%; background: rgba(12, 8, 28, .55); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 5px 13px 5px 6px; backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow-1); }
.host-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.host-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-followers { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-follow { flex: none; }
.host-follow { font-size: 12px; font-weight: 700; background: var(--danger); border-radius: 999px; padding: 5px 10px; color: #fff; }
.host-follow.is-following { background: rgba(255,255,255,.18); }
.room-top-right { display: flex; align-items: center; gap: 6px; }
.room-score { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.room-score-dot { color: var(--brand-3); }

/* De chat en de supporters liggen over de onderste stoelen van het raster.
   Ze zijn alleen om te lezen, dus ze laten de tik door naar de stoel eronder.
   De Join-knop blijft gewoon aanklikbaar. */
.room-onder {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  pointer-events: none;
}
.room-chat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  max-height: 34vh;
  /* De chatstroom rolt zelf mee naar het nieuwste bericht (zie pushChat in
     live.js). Daarom mag hij scrollen en niet knippen: een GIF is hoger dan
     een gewone regel, en zonder dit viel juist het nieuwste bericht weg. */
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 22%);
}
.room-chat::-webkit-scrollbar { display: none; }
.btn-deel {
  flex: none; pointer-events: auto; border: 0; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, #67e8f9, #06b6d4); color: #04202e;
  font-weight: 800; font-size: 13.5px; border-radius: var(--r-pill); padding: 11px 22px;
  box-shadow: var(--shadow-neon);
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.btn-deel:active { transform: scale(.96); }
.btn-deel.is-uit { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
/* De chat in de ruimte als moderne bubbels: glasachtig (je ziet het beeld
   er vaag doorheen), afgerond met een klein hoekje aan de kant van de
   afzender, en je eigen berichten komen rechts te staan. Elk nieuw bericht
   komt zachtjes binnen. */
.chat-line {
  flex: none;
  font-size: 13px; line-height: 1.38;
  /* Glas: je ziet het beeld er vaag doorheen. Iets donkerder dan puur
     doorzichtig, zodat de letters ook op een fel gekleurd beeld leesbaar
     blijven - met een lichte schaduw eronder als extra vangnet. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  background: rgba(16, 12, 34, .5);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px 16px 16px 5px;
  padding: 7px 12px;
  width: fit-content; max-width: 100%;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  animation: bubbel-kom .26s var(--ease) both;
}
@keyframes bubbel-kom {
  from { opacity: 0; transform: translateY(7px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.chat-line b { color: var(--brand-3); }
.chat-line.is-me {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(139, 92, 246, .44), rgba(99, 102, 241, .3));
  border-color: rgba(196, 181, 253, .42);
  border-radius: 16px 16px 5px 16px;
}
.chat-line.is-me b { color: #fff; }
.chat-line.is-system {
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
  color: rgba(255,255,255,.8);
  font-style: italic;
  border-radius: var(--r-pill);
}
@media (prefers-reduced-motion: reduce) {
  .chat-line { animation: none; }
}
/* Cadeaus die iemand stuurt: een klein kaartje in een eigen laag bovenop de
   kamer. De laag zelf laat tikken door, dus stoelen, Join en de + plekken
   blijven gewoon te gebruiken; alleen het kaartje pakt muis en vinger, want
   dat kun je verslepen of wegklikken. Het kaartje staat niet midden in het
   raster maar in de marge boven de chat, en vervaagt vanzelf. */
.gift-laag { position: absolute; inset: 0; pointer-events: none; }
.gift-pop {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  max-width: 216px;
  padding: 8px 10px 8px 12px;
  border-radius: 16px;
  background: rgba(10, 4, 24, .62);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  cursor: grab; touch-action: none; user-select: none;
  animation: cadeau-kom .42s ease-out both;
  transition: opacity .4s ease, transform .4s ease;
}
.gift-pop.is-slepen { cursor: grabbing; animation: none; transition: none; }
.gift-pop.is-weg { opacity: 0; transform: scale(.92); pointer-events: none; }
.gift-pop-emoji { font-size: 30px; line-height: 1; }
.gift-pop-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.gift-pop-meta b { font-size: 12.5px; font-weight: 800; }
.gift-pop-meta small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-pop-sluit {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.gift-pop-sluit:hover, .gift-pop-sluit:focus-visible { background: rgba(255, 255, 255, .3); }
.gift-pop-sluit svg { width: 13px; height: 13px; }
@keyframes cadeau-kom {
  0% { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-pop { animation: none; }
}
.room-supporters { position: absolute; right: 12px; bottom: 78px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
/* Mascotte-GIF: het draakje danst in de hoek van de kamer, uit de weg van
   de chat (linksonder) en de supporters (rechtsonder). */
.room-gif {
  position: absolute;
  top: 116px;
  right: 12px;
  width: 104px;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
  animation: gif-zweef 2.6s ease-in-out infinite;
}
.room-gif img { width: 100%; height: auto; }
@keyframes gif-zweef {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@media (max-width: 359px) {
  .room-gif { width: 104px; }
}
/* wie liever geen beweging wil: alleen de zachte wieg stopt, de GIF loopt door */
@media (prefers-reduced-motion: reduce) {
  .room-gif { animation: none; }
}
/* Het draakje mag je zelf een plek geven: sleep het waar je wilt. Dubbel
   tikken zet hem terug in de hoek. */
.room-gif.is-sleepbaar { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
.room-gif.is-slepen { cursor: grabbing; animation: none; transition: none; }
.room-gif.is-gesleept { animation: none; }
.room-gif.is-slepen img { transform: scale(1.06); }
.supporter { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.45); border-radius: 999px; padding: 3px 8px 3px 3px; font-size: 11px; font-weight: 600; }
.supporter .avatar { width: 22px; height: 22px; font-size: 10px; }

.room-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(20, 15, 44, .86), rgba(7, 6, 15, .97));
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(20px) saturate(150%);
}
.room-bar .icon-btn { flex: none; }
/* De microfoonknop: rood als hij uitstaat. */
#roomMicBtn.is-uit { color: #f87171; }
/* "Tik voor geluid": sommige browsers laten geluid pas horen na een tik. */
/* De geluidsla met een <audio>-element per binnenkomend spoor. Hij is
   onzichtbaar en neemt geen ruimte in, maar de elementen zitten wél in de
   pagina - dat is precies wat browsers nodig hebben om geluid te laten
   horen. Er kan dus nooit iets door bedekt of geblokkeerd raken. */
.room-audio {
  position: absolute; left: 0; bottom: 0;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
  pointer-events: none;
}
.room-audio-el { width: 1px; height: 1px; }
#roomSpeakerBtn.is-uit { color: #f87171; }
.room-sound {
  position: absolute; top: 88px; left: 50%; transform: translateX(-50%);
  z-index: 5; border: 0; border-radius: 999px; padding: 8px 16px;
  background: var(--brand-3); color: #1b0733;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.chat-input {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 16px;
  color: #fff;
  backdrop-filter: blur(10px);
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.chat-input::placeholder { color: rgba(255,255,255,.45); }
.chat-input:focus { outline: none; border-color: rgba(196, 181, 253, .65); box-shadow: 0 0 0 3px rgba(124, 58, 237, .22); }
.btn {
  border-radius: var(--r-pill);
  font-weight: 700;
  padding: 13px 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--grad-knop); color: #1b0b3d; box-shadow: var(--shadow-brand); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255, 255, 255, .04); }
.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; }

/* ===================== sheets ===================== */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(180deg, #14102a, var(--bg) 45%);
  display: flex; flex-direction: column; gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  overflow-y: auto;
  animation: sheet-in var(--smooth) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-tray { background: linear-gradient(180deg, var(--surface), var(--bg) 40%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.coin-balance { font-size: 13px; font-weight: 700; color: var(--gold); }
.note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.list { display: flex; flex-direction: column; gap: 12px; }
/* In de schermen (Inbox) loopt de lijst van rand tot rand; met kaartjes met
   ronde hoeken ziet dat er beter uit met een kleine marge. In de schuiven
   (.sheet) hebben we die marge al. */
.screen .list { padding: 2px 14px calc(18px + env(safe-area-inset-bottom)); }

.choice-list { display: flex; flex-direction: column; gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: var(--shadow-1);
}
.choice:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.choice.is-featured { background: linear-gradient(135deg, rgba(139,92,246,.34), rgba(34,211,238,.18)); border-color: rgba(196,181,253,.5); box-shadow: var(--shadow-brand); }
.choice span[data-icon] { width: 46px; height: 46px; border-radius: var(--r-sm); background: rgba(255,255,255,.12); }
.choice div { display: flex; flex-direction: column; gap: 3px; }
.choice strong { font-size: 15px; }
.choice small { font-size: 12.5px; color: var(--muted); }

.stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #12071f; aspect-ratio: 3 / 4; max-height: 52dvh; width: 100%; max-width: 420px; margin: 0 auto; box-shadow: var(--shadow-2); }
.stage video { width: 100%; height: 100%; object-fit: cover; }
.stage-art { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; font-size: 14px; color: var(--muted); background: radial-gradient(90% 70% at 45% 35%, #6d28d9, #24063f); }
.stage-art .initial { width: 100%; height: 100%; font-size: 54px; }
.rec-indicator { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.6); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; }
.rec-indicator i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: blink 1.2s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field select {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px; color: #fff;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.field input:focus, .field select:focus { outline: none; border-color: rgba(196, 181, 253, .65); box-shadow: 0 0 0 3px rgba(124, 58, 237, .22); }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gift {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 13px 6px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.gift:hover { border-color: var(--brand); box-shadow: 0 0 18px var(--glow); }
.gift-emoji { font-size: 28px; line-height: 1.1; }
.gift-name { font-size: 11.5px; font-weight: 600; }
.gift-price { font-size: 11px; color: var(--gold); font-weight: 700; }
.gift[disabled] { opacity: .45; }

/* reacties */
.comment { display: flex; gap: 10px; }
.comment-body { display: flex; flex-direction: column; gap: 2px; }
.comment-name { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.comment-text { font-size: 14px; line-height: 1.4; }
.comment-form { display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* ===================== profiel ===================== */
.profile-head { padding: 16px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: radial-gradient(90% 120% at 50% 0%, rgba(124,58,237,.55), rgba(34,211,238,.12) 55%, transparent 76%); }
/* Welkomstscherm bij het openen van de app */
.splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 120% at 30% 10%, #a78bfa 0%, #7c3aed 45%, #2b0b4d 100%);
  /* nooit in de weg zitten: de app eronder blijft gewoon bruikbaar */
  pointer-events: none;
  transition: opacity .55s ease, visibility .55s ease;
}
.splash.is-weg { opacity: 0; visibility: hidden; }
.splash-logo { animation: splash-pop .55s ease-out; }
.splash-draak {
  width: 172px;
  height: 172px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45));
  /* het logo danst: stuiteren, wiebelen en een beetje squashen */
  animation: splash-dans 1.15s ease-in-out .5s infinite;
  transform-origin: 50% 88%;
}
/* muzieknootjes die omhoog dwarrelen tijdens het dansje */
.splash-noot {
  position: absolute;
  opacity: 0;
  color: #fff;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
  animation: splash-noot 1.7s ease-out .6s infinite;
}
.splash-noot svg { width: 22px; height: 22px; }
.splash-noot-1 { left: 24%; top: 40%; }
.splash-noot-2 { left: 72%; top: 47%; animation-delay: 1.1s; }
/* staand dansen: op de voeten stuiteren en van links naar rechts wiegen */
@keyframes splash-dans {
  0% { transform: translate(0, 0) rotate(0) scale(1, 1); }
  12% { transform: translate(-7px, -15px) rotate(-5deg) scale(.97, 1.05); }
  25% { transform: translate(0, 0) rotate(0) scale(1.04, .95); }
  37% { transform: translate(7px, -15px) rotate(5deg) scale(.97, 1.05); }
  50% { transform: translate(0, 0) rotate(0) scale(1.04, .95); }
  62% { transform: translate(-5px, -10px) rotate(-4deg) scale(1, 1.03); }
  75% { transform: translate(5px, -10px) rotate(4deg) scale(1, 1.03); }
  100% { transform: translate(0, 0) rotate(0) scale(1, 1); }
}
@keyframes splash-noot {
  0% { opacity: 0; transform: translateY(8px) scale(.8) rotate(-8deg); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-52px) scale(1.15) rotate(12deg); }
}
/* je eigen foto als logo: zonder kader, los op het scherm */
.splash-draak.is-foto {
  width: 210px;
  height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45));
}
.splash-titel { font-size: 28px; font-weight: 800; letter-spacing: .3px; }
.splash-sub { font-size: 14.5px; color: rgba(255, 255, 255, .85); }
@keyframes splash-pop {
  from { transform: scale(.86); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* wie liever geen beweging wil, krijgt een stilstaand logo */
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-draak, .splash-noot { animation: none; }
  .splash-noot { display: none; }
}

.profile-naam-rij { display: flex; align-items: center; gap: 8px; }
.profile-name { font-size: 20px; font-weight: 800; }
.naam-edit { padding: 6px; color: rgba(255,255,255,.72); }
img.avatar-foto { object-fit: cover; padding: 0; }
img.avatar-foto.is-vrij { object-fit: contain; }
.naam-edit:hover { color: #fff; background: var(--surface-2); }
.profile-handle { font-size: 13px; color: var(--muted); }
.profile-bio { font-size: 13.5px; color: rgba(255,255,255,.86); text-align: center; max-width: 320px; }
.profile-stats { display: flex; gap: 22px; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat b { font-size: 17px; }
.stat span { font-size: 11.5px; color: var(--muted); }
.profile-coins { font-size: 13px; font-weight: 700; color: var(--gold); }
.seg { display: flex; border-bottom: 1px solid var(--line); }
.seg-btn { flex: 1; padding: 13px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; transition: color var(--fast), border-color var(--fast); }
.seg-btn:hover { color: var(--text-2); }
.seg-btn.is-active { color: #fff; border-image: var(--grad-brand) 1; }
.clip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px 5px calc(18px + env(safe-area-inset-bottom)); }
.clip-thumb { position: relative; display: block; width: 100%; aspect-ratio: 9 / 14; overflow: hidden; border-radius: var(--r-xs); }
.clip-thumb video, .clip-thumb .clip-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-thumb-views { position: absolute; left: 6px; bottom: 5px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

/* ===================== inbox ===================== */
.row { display: flex; gap: 12px; align-items: center; padding: 13px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line); text-align: left; box-shadow: var(--shadow-1); }
.row:hover { border-color: var(--line-strong); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 14px; font-weight: 700; }
.row-text { font-size: 13px; color: var(--muted); }
.row-time { font-size: 11px; color: rgba(255,255,255,.45); }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; }

/* ===================== toasts ===================== */
.toasts { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 20px); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(20, 14, 44, .92); border: 1px solid var(--line-strong); color: #fff;
  font-size: 13px; padding: 11px 18px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-2); backdrop-filter: blur(14px);
  animation: pop .25s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===================== gradienten (demo-"video's") ===================== */
.g1 { background: linear-gradient(160deg, #7c3aed, #db2777 60%, #f59e0b); }
.g2 { background: linear-gradient(160deg, #0ea5e9, #6366f1 55%, #a855f7); }
.g3 { background: linear-gradient(160deg, #f43f5e, #f97316 60%, #facc15); }
.g4 { background: linear-gradient(160deg, #10b981, #0ea5e9 60%, #4f46e5); }
.g5 { background: linear-gradient(160deg, #facc15, #f97316 50%, #dc2626); }
.g6 { background: linear-gradient(160deg, #8b5cf6, #06b6d4 60%, #22d3ee); }
.g7 { background: linear-gradient(160deg, #ec4899, #8b5cf6 55%, #1e1b4b); }
.g8 { background: linear-gradient(160deg, #22c55e, #eab308 60%, #f97316); }
.art-shine { position: absolute; inset: 0; background: radial-gradient(45% 30% at 30% 25%, rgba(255,255,255,.25), transparent 70%); animation: shine 6s ease-in-out infinite alternate; }
@keyframes shine { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.15); } }

/* ===================== bewaren, filter en zoeken ===================== */
.feed-person-chip {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 8px;
  background: rgba(20, 10, 40, .92); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.chip-close { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 11px; line-height: 1; display: grid; place-items: center; }

.rail-btn.is-saved { color: var(--gold); }
.like-burst {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  font-size: 72px; pointer-events: none;
  animation: burst .7s ease-out forwards;
}
@keyframes burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

.btn-quiet { border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; padding: 9px 14px; }
.btn-quiet:hover { color: #fff; border-color: rgba(255,255,255,.5); }
/* hint onder de knoppen in het profiel */
.profile-foto-note { font-size: 12.5px; color: var(--muted); text-align: center; max-width: 320px; }
.profile-opslag { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; max-width: 320px; }

.clip-cell { position: relative; display: block; width: 100%; }
.clip-del {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, .65); color: #fff;
  font-size: 12px; line-height: 1; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25);
}
.clip-cell-note { display: block; font-size: 11px; color: var(--muted); padding: 4px 2px 0; }

.sheet-search { background: var(--surface); }
.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px 14px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.search-bar:focus-within { border-color: rgba(196, 181, 253, .65); box-shadow: 0 0 0 3px rgba(124, 58, 237, .22); }
.search-bar span[data-icon] { color: var(--muted); }
.search-bar span[data-icon] svg { width: 18px; height: 18px; }
.search-bar .chat-input { background: none; border: 0; padding: 10px 0; }
.search-kop { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding: 6px 2px 0; }
.search-aantal { color: var(--brand-3); }
.search-art {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
  object-fit: cover; overflow: hidden;
}

/* ===================== account ===================== */
.account {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(0, 0, 0, .22);
}
.account-tekst { font-size: 13px; text-align: center; color: rgba(255, 255, 255, .9); }
.account-sub { font-size: 11.5px; text-align: center; color: var(--muted); }
.account-knop { text-decoration: none; font-size: 14px; padding: 10px 16px; }
.account-uitloggen { margin-top: 2px; }
.account-lokaal { border-style: dashed; }

/* ===================== echte deelnemers ===================== */
.room-remote {
  position: absolute; inset: auto 8px 96px 8px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start;
}
.remote-tegel {
  position: relative; width: 86px; height: 116px; border-radius: 12px; overflow: hidden;
  background: #1a0f2e; border: 1px solid rgba(255, 255, 255, .18);
}
.remote-tegel video { width: 100%; height: 100%; object-fit: cover; }
.remote-tegel .remote-naam {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10.5px; font-weight: 700; padding: 3px 5px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
}
.remote-tegel.is-spreker {
  border-color: var(--brand-3);
  animation: praat-gloed 1.5s ease-in-out infinite;
}
.remote-tegel.is-spreker .remote-naam { background: linear-gradient(180deg, transparent, rgba(124, 58, 237, .75)); }
@media (prefers-reduced-motion: reduce) { .remote-tegel.is-spreker { animation: none; box-shadow: 0 0 0 2px rgba(196, 181, 253, .6); } }
.remote-tegel .remote-stem { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff; }
.room-echt {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 11px;
}
.room-echt-tekst { color: rgba(255, 255, 255, .85); }

@media (min-width: 700px) {
  #app { max-width: 480px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  body { background: #05030c; }
  .room { max-width: 480px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .sheet { max-width: 480px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ===================== stickers ===================== */
/* De kiezer hangt direct boven de balk waar je hem opent. */
.sticker-panel {
  position: fixed; left: 0; right: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(32, 26, 62, .96), rgba(19, 16, 40, .98));
  border-top: 1px solid var(--line-strong);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 44px rgba(0, 0, 0, .55);
  backdrop-filter: blur(20px) saturate(150%);
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh;
  animation: panel-in var(--smooth) both;
}
@keyframes panel-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sticker-panel { animation: none; } }
.sticker-head { display: flex; align-items: center; gap: 8px; }
.sticker-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; }
.sticker-tab {
  flex: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.sticker-tab.is-active { background: var(--brand-2); color: #fff; border-color: transparent; }
.sticker-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  overflow-y: auto; padding: 2px;
}
.sticker-btn { border: 0; background: transparent; padding: 2px; border-radius: 12px; cursor: pointer; }
.sticker-btn:hover, .sticker-btn:focus-visible { background: rgba(255, 255, 255, .08); }
.sticker-btn svg { display: block; width: 100%; height: auto; }
.sticker-inline { display: inline-block; vertical-align: middle; margin: 2px 0; }
.sticker-inline svg { display: block; width: 76px; height: 76px; }
.chat-line .sticker-inline svg { width: 68px; height: 68px; }
.comment-text .sticker-inline svg { width: 58px; height: 58px; }

/* ===================== GIF-stickers (bewegend) ===================== */
/* Het pakket "GIF" gebruikt dezelfde tekeningen, maar in beweging. Elk
   bewegend groepje in de sticker heeft een eigen klasse; de animatie staat
   hier, zodat de sticker overal beweegt waar hij staat: in de kiezer, in de
   livechat en bij reacties. GIF staat in de hoek van de knop. */
.sticker-btn.is-gif { position: relative; }
.sticker-gif-tag {
  position: absolute; top: 4px; right: 4px;
  background: var(--brand-2); color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  padding: 3px 4px; border-radius: 5px; pointer-events: none;
}
.beweeg {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation-duration: 1.6s; animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; animation-fill-mode: both;
}
.beweeg.gif-hop { animation-name: bigolo-hop; animation-duration: .9s; }
.beweeg.gif-wiebel { animation-name: bigolo-wiebel; animation-duration: 1.1s; }
.beweeg.gif-schud { animation-name: bigolo-schud; animation-duration: .4s; }
.beweeg.gif-tril { animation-name: bigolo-tril; animation-duration: .28s; }
.beweeg.gif-klop { animation-name: bigolo-klop; animation-duration: 1s; transform-origin: 50% 50%; }
.beweeg.gif-draai { animation-name: bigolo-draai; animation-duration: 2.4s; animation-timing-function: linear; transform-origin: 50% 50%; }
.beweeg.gif-zweef { animation-name: bigolo-zweef; animation-duration: 1.9s; animation-timing-function: ease-in; transform-origin: 50% 50%; }
.beweeg.gif-val { animation-name: bigolo-val; animation-duration: 1.5s; animation-timing-function: linear; transform-origin: 50% 50%; }
.beweeg.gif-groei { animation-name: bigolo-groei; animation-duration: 1.5s; transform-origin: 50% 50%; }
.beweeg.gif-pulse { animation-name: bigolo-pulse; animation-duration: 1.2s; transform-origin: 50% 50%; }
@keyframes bigolo-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bigolo-wiebel { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes bigolo-schud { 0%, 100% { transform: translate(-1px, 0) rotate(-3deg); } 50% { transform: translate(1px, -2px) rotate(3deg); } }
@keyframes bigolo-tril { 0%, 100% { transform: translateX(-1.6px); } 50% { transform: translateX(1.6px); } }
@keyframes bigolo-klop { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 55% { transform: scale(.97); } }
@keyframes bigolo-draai { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bigolo-zweef { 0% { transform: translateY(8px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes bigolo-val { 0% { transform: translateY(-16px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(28px) rotate(210deg); opacity: 0; } }
@keyframes bigolo-groei { 0% { transform: scale(.25); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(1.05); opacity: 0; } }
@keyframes bigolo-pulse { 0%, 100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.06); opacity: 1; } }

/* Wie minder beweging wil (of dat in het systeem heeft aangezet), ziet de
   sticker gewoon stilstaan. */
@media (prefers-reduced-motion: reduce) {
  .beweeg { animation: none !important; }
}

/* ===================== GIF's zoeken (GIPHY) ===================== */
/* Knop in het stickerpaneel, de kiezer zelf en de GIF's die in de chat staan. */
.sticker-gif-open {
  flex: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.sticker-gif-open:hover, .sticker-gif-open:focus-visible {
  background: var(--brand-2); color: #fff; border-color: transparent;
}
/* De categorieknoppen boven het GIF-raster: Trending, Gelukkig, Fun,
   Duim omhoog. Zelfde pil-vorm als de stickertabs, maar los scrollbaar. */
.gif-cats {
  display: flex; gap: 6px; overflow-x: auto; flex: none; padding: 2px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gif-cats::-webkit-scrollbar { display: none; }
.gif-cat {
  flex: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.gif-cat:hover, .gif-cat:focus-visible { color: var(--text); background: var(--surface-2); }
.gif-cat.is-active { background: var(--brand-2); color: #fff; border-color: transparent; }
.gif-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  overflow-y: auto; padding: 2px; flex: 1; min-height: 120px;
}
.gif-btn {
  border: 0; padding: 0; background: var(--surface-2); border-radius: 12px;
  overflow: hidden; cursor: pointer; line-height: 0; aspect-ratio: 1 / 1;
}
.gif-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-btn:hover, .gif-btn:focus-visible { outline: 2px solid var(--brand-3); }
.gif-bron {
  margin: 0; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* In het GIF-menu vult het raster de ruimte; de melding eronder (aantal
   gevonden GIF's, of waarom het niet lukte) en de verplichte vermelding
   "Powered by GIPHY" mogen daarbij niet tot niets worden platgedrukt. */
#gifSheet .note, #gifSheet .gif-bron { flex: none; }

/* Een gezochte GIF in een chatbericht of reactie: compact (maximaal 80 px
   hoog) en bewegend - het is een gewone <img>, dus de browser speelt hem af.
   De breedte loopt mee met de verhouding van de GIF, met een plafond zodat
   één GIF nooit de halve chatstroom vult. */
.gif-inline { display: inline-block; vertical-align: bottom; margin: 2px 0; }
.gif-inline img { display: block; width: auto; height: auto; max-height: 80px; max-width: 168px; border-radius: 10px; }
.chat-line .gif-inline img { max-height: 80px; max-width: 150px; }
.comment-text .gif-inline img { max-height: 72px; max-width: 132px; }
/* Lukt het laden van de GIF niet, dan blijft er een leesbaar [GIF] staan. */
.gif-inline.is-kapot { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ===================== panelen in de livekamer =====================
   Zoals in de kamer-app: één groot hostpaneel linksboven en daaromheen
   genummerde gastplekken. Lege plekken krijgen een +. */
/* Het aantal kolommen en rijen komt uit de app (zie stoelRaster in ui.js); zo
   past het raster zich aan het gekozen aantal gastplekken aan. Elke plek
   krijgt zijn eigen plek in het raster. */
.room-deck {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--stoel-kolommen, 4), 1fr);
  grid-template-rows: repeat(var(--stoel-rijen, 4), 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .08);
}
.room-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(80, 40, 140, .34), rgba(26, 10, 52, .5)); }
.room-panel.is-host { grid-area: 1 / 1 / 3 / 3; border: 2px solid #38bdf8; background: radial-gradient(120% 90% at 50% 12%, #33156b, #150633); }
.room-deck.is-zoom .room-panel.is-host { grid-area: 1 / 1 / -1 / -1; }
.room-deck.is-zoom .room-panel:not(.is-host) { display: none; }
/* Een gastplek is aanklikbaar: zo ga je zitten, wissel je van plek of stap je
   er weer af. Je eigen plek licht op. */
.room-panel.stoel-klik { cursor: pointer; }

/* Grid View: iedereen even groot, in een raster */
.room-deck.is-grid { display: grid; grid-template-columns: repeat(var(--stoel-kolommen, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.room-deck.is-grid .room-panel { grid-area: auto; }
/* Groot beeld voor iedereen: alleen die persoon is in beeld */
.room-deck.is-spotlit .room-panel:not(.is-spot) { display: none !important; }
.room-deck.is-spotlit .room-panel.is-spot { grid-area: 1 / 1 / -1 / -1; }

/* Camera- en microfoonknopjes op elke plek */
.seat-knoppen { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 2; display: flex; justify-content: center; gap: 4px; }
.seat-knop { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 10, 40, .72); color: #fff; cursor: pointer; }
.seat-knop svg { width: 14px; height: 14px; }
.seat-knop.is-uit { opacity: .45; }
.seat-knop.is-passief { cursor: default; }
.room-panel.is-leeg:hover { background: linear-gradient(180deg, rgba(110, 60, 180, .5), rgba(36, 14, 70, .6)); }
.room-panel.is-mijn { border: 2px solid #67e8f9; background: radial-gradient(90% 70% at 50% 30%, #0e4f5c, #06202a); }
.seat-nr { position: absolute; top: 6px; left: 10px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.seat-plus { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 300; color: rgba(255, 255, 255, .5); }
.seat-rol {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  background: #0ea5e9; color: #04202e; border-radius: 6px; padding: 2px 6px;
}
.seat-naam { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 700; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-panel.is-host .seat-naam { left: 48px; }
.room-panel.is-bezet { background: radial-gradient(90% 70% at 50% 30%, #4c1d95, #1b0733); }
/* In een audio-ruimte zie je wie er praat: de plek licht op en de gloed
   ademt mee met de stem, zodat je in één oogopslag ziet wie er aan het
   woord is. */
.room-panel.is-spreker {
  animation: praat-gloed 1.5s ease-in-out infinite;
  background-image: radial-gradient(110% 80% at 50% 30%, rgba(139, 92, 246, .3), transparent 72%);
}
@keyframes praat-gloed {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(196, 181, 253, .8), 0 0 16px rgba(139, 92, 246, .38); }
  50% { box-shadow: inset 0 0 0 3px rgba(237, 233, 254, 1), 0 0 34px rgba(139, 92, 246, .8); }
}
/* De avatar van de spreker krijgt dezelfde gloed, zodat het ook op een
   klein paneel meteen opvalt. In het hostvak staat geen losse avatar maar
   een groot vlak met de letter; dat licht dan van binnen mee op. */
.room-panel.is-spreker .avatar {
  box-shadow: 0 0 0 3px rgba(196, 181, 253, .55), 0 0 22px var(--glow);
}
.room-panel.is-spreker .room-art .initial {
  box-shadow: inset 0 0 70px rgba(139, 92, 246, .5);
}
@media (prefers-reduced-motion: reduce) {
  .room-panel.is-spreker {
    animation: none;
    box-shadow: inset 0 0 0 3px rgba(226, 232, 255, .95), 0 0 24px rgba(139, 92, 246, .5);
  }
}
/* Het groene microfoontje op een plek waar de microfoon aanstaat. */
.seat-mic {
  position: absolute; right: 8px; top: 6px;
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #34d399, #10b981); color: #04231a;
  box-shadow: 0 0 12px rgba(16, 185, 129, .55);
}
.seat-mic svg { width: 13px; height: 13px; }
.room-panel .avatar { margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* munten en kijkers in de kopbalk */
.room-tweede { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pill-coins { display: inline-flex; align-items: center; gap: 5px; }
.pill-coins svg { width: 14px; height: 14px; }
.room-kijkers { display: flex; align-items: center; gap: 8px; }
.kijker-stapel { display: flex; }
.kijker-stapel .avatar { width: 30px; height: 30px; font-size: 11px; margin-left: -9px; border: 1.5px solid rgba(255, 255, 255, .85); }
.kijker-stapel .avatar:first-child { margin-left: 0; }

/* ===================== Ga live =====================
   Kaart met titel, categorieknopjes, stoelenraster, onderbalk, Go LIVE en de
   soort uitzending onderaan. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sheet-golive {
  background: linear-gradient(180deg, #7140c9, #3c1a70 55%, #1b0a35);
  gap: 12px;
}
.golive-sluit { align-self: flex-end; }
.golive-kaart {
  display: flex; gap: 12px; align-items: center;
  background: rgba(12, 6, 26, .55); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px; padding: 12px; backdrop-filter: blur(10px);
}
.golive-foto {
  flex: none; width: 60px; height: 60px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 20px;
  background: radial-gradient(80% 70% at 50% 30%, #7c3aed, #2a0a4d); color: #fff;
  background-size: cover; background-position: center;
}
.golive-kop { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.golive-titel { background: none; border: 0; color: #fff; font: inherit; font-size: 17px; font-weight: 800; width: 100%; padding: 0; }
.golive-titel::placeholder { color: rgba(255, 255, 255, .55); }
.golive-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .82); }
.golive-sub svg { width: 14px; height: 14px; }
.golive-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.golive-cats::-webkit-scrollbar { display: none; }
.golive-cat {
  flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border-radius: 14px; cursor: pointer; font: inherit;
  background: rgba(12, 6, 26, .45); border: 1px solid transparent;
  color: rgba(255, 255, 255, .85); font-size: 11.5px; font-weight: 700;
}
.golive-cat.is-active { border-color: #67e8f9; background: rgba(255, 255, 255, .15); color: #fff; }
.golive-cat span[data-icon] svg { width: 22px; height: 22px; }
.golive-stoelen {
  flex: 1; min-height: 220px;
  display: grid;
  grid-template-columns: repeat(var(--stoel-kolommen, 4), 1fr);
  grid-template-rows: repeat(var(--stoel-rijen, 4), 1fr);
  gap: 1px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .07);
}
.golive-cel { position: relative; display: grid; place-items: center; background: linear-gradient(180deg, rgba(80, 40, 140, .38), rgba(26, 10, 52, .5)); color: rgba(255, 255, 255, .42); }
.golive-cel svg { width: 32px; height: 32px; }
.golive-cel .cel-inhoud { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.golive-cel .cel-plus { font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, .5); }
.golive-cel.is-host { grid-area: 1 / 1 / 3 / 3; background: radial-gradient(120% 90% at 50% 12%, #33156b, #150633); }
.golive-cel.is-host video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.golive-cel .stage-art {
  position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center;
  font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .85);
}
.golive-onder { display: flex; justify-content: space-between; gap: 6px; }
.golive-tool { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 10.5px; color: rgba(255, 255, 255, .85); flex: 1; }
.golive-tool svg { width: 24px; height: 24px; }
.golive-tool:hover, .golive-tool:focus-visible { color: #fff; }
.btn-golive {
  border: 0; cursor: pointer; font: inherit; width: 100%;
  background: linear-gradient(180deg, #67e8f9, #06b6d4); color: #04202e;
  font-weight: 800; font-size: 17px; border-radius: 999px; padding: 15px;
  box-shadow: 0 8px 22px rgba(6, 182, 212, .32);
}
.golive-modes { display: flex; justify-content: center; gap: 14px; }
.golive-mode { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .68); padding: 5px 2px; }
.golive-mode.is-active { color: #fff; font-weight: 800; }
.sheet-golive #roomsMeterWrap { margin: -6px 0 0; }

/* ===================== Go-LIVE-paneel =====================
   Het paneel dat openklapt voor de onderbalk (stoelen, thema, evenementen,
   creator center, instellingen) plus de staat van de stoeltegels. */
.golive-aankondiging { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.golive-thema-vlak { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.golive-cel.is-host { overflow: hidden; }

.golive-cel.stoel-klik { cursor: pointer; }
.golive-cel.stoel-klik:hover { background: linear-gradient(180deg, rgba(110, 60, 180, .5), rgba(36, 14, 70, .6)); }
.golive-cel.is-gesloten { background: linear-gradient(180deg, rgba(36, 16, 66, .55), rgba(14, 6, 28, .65)); color: rgba(255, 255, 255, .6); }
.golive-cel.is-gesloten .cel-plus { color: rgba(255, 255, 255, .3); }

.golive-paneel {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  max-height: 74%;
  display: flex; flex-direction: column;
  background: rgba(26, 14, 48, .97);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  z-index: 6;
}
.golive-paneel[hidden] { display: none; }
.golive-paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 4px; }
.golive-paneel-kop h3 { margin: 0; font-size: 16px; }
.golive-paneel-body { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 16px; overflow-y: auto; }
.paneel-tekst { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.paneel-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.paneel-keuze { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; border-radius: var(--r-pill); padding: 9px 15px; font-size: 13px; cursor: pointer; }
.paneel-keuze.is-active { background: #7c3aed; border-color: #a78bfa; }
.paneel-lijst { display: flex; flex-direction: column; gap: 6px; }
.paneel-lijtje { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; }
.paneel-rij-knop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; cursor: pointer; text-align: left; }
.paneel-status { font-size: 12px; color: var(--muted); }
.paneel-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.paneel-velden { display: flex; flex-direction: column; gap: 8px; }
.paneel-veld { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 14px; color-scheme: dark; }
.paneel-veld::placeholder { color: rgba(255, 255, 255, .45); }
.paneel-knop { border: 0; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: rgba(255, 255, 255, .1); color: #fff; }
.paneel-knop.primair { background: #22d3ee; color: #062033; }
.paneel-themas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.paneel-thema { position: relative; height: 52px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; }
.paneel-thema.is-active { border-color: #fff; }
.paneel-thema-vink { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 1px 4px rgba(0, 0, 0, .65); opacity: 0; }
.paneel-thema.is-active .paneel-thema-vink { opacity: 1; }
.paneel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.paneel-stat { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 6px; text-align: center; }
.paneel-stat-getal { display: block; font-size: 17px; font-weight: 700; }
.paneel-stat-label { font-size: 11px; color: var(--muted); }
.paneel-evenement { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paneel-evenement-titel { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paneel-evenement-meta { font-size: 12px; color: var(--muted); }
.paneel-verwijder { border: 0; background: none; color: #f87171; font-size: 12.5px; cursor: pointer; padding: 4px; }
.paneel-schakelaar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; color: #fff; cursor: pointer; text-align: left; }
.paneel-schakelaar-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paneel-schakelaar-label { font-size: 13.5px; font-weight: 600; }
.paneel-schakelaar-sub { font-size: 11.5px; color: var(--muted); }
.paneel-schakelaar-knop { min-width: 46px; text-align: center; border-radius: var(--r-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .14); color: #fff; transition: background var(--fast), color var(--fast); }
.paneel-schakelaar.is-aan .paneel-schakelaar-knop { background: #22d3ee; color: #062033; }

/* ===================== muziek =====================
   De muziekspeler: muziek van je telefoon. Bovenin staat wat er speelt, daar
   onder de voortgang, de knoppen en de lijst met nummers. In de livekamer
   staat er een klein balkje van, boven de chatbalk. */
.sheet-muziek { background: var(--surface); }
.muziek-nu {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .34), rgba(34, 211, 238, .16));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px;
  box-shadow: var(--shadow-brand);
}
.muziek-kunst {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: radial-gradient(80% 70% at 50% 30%, #7c3aed, #2a0a4d); color: #fff;
}
.muziek-kunst.is-leeg { background: rgba(255, 255, 255, .08); color: var(--muted); }
.muziek-kunst.speelt { box-shadow: 0 0 0 2px rgba(34, 211, 238, .65); }
.muziek-kunst-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.muziek-kunst-tekst b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muziek-kunst-tekst small { font-size: 12px; color: var(--muted); }
.muziek-voortgang { width: 100%; accent-color: var(--brand-3); }
.muziek-tijd { text-align: center; font-size: 12px; color: var(--muted); margin-top: -8px; }
.muziek-knoppen { display: flex; align-items: center; justify-content: center; gap: 14px; }
.muziek-knop {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255, 255, 255, .08);
}
.muziek-knop svg { width: 22px; height: 22px; }
.muziek-knop:hover { background: rgba(255, 255, 255, .16); }
.muziek-knop.is-groot { width: 62px; height: 62px; background: linear-gradient(180deg, var(--brand-3), var(--brand-2)); color: #1b0b3d; }
.muziek-knop.is-groot svg { width: 28px; height: 28px; }
.muziek-knop.is-active { color: var(--brand-3); background: rgba(196, 181, 253, .2); }
.muziek-knop.is-een::after {
  content: '1'; position: absolute; right: 1px; bottom: 1px;
  background: var(--brand-2); color: #fff; font-size: 9px; font-weight: 800;
  line-height: 1; padding: 2px 3px; border-radius: 5px;
}
.muziek-volume { display: flex; align-items: center; gap: 8px; }
.muziek-volume-balk { flex: 1; min-width: 0; accent-color: var(--brand-3); }

/* het mengpaneel: standen als chips, daaronder de drie schuiven */
.muziek-eq {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.muziek-eq-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muziek-eq-titel { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.muziek-eq-titel svg { width: 18px; height: 18px; color: var(--brand-3); }
.muziek-eq-stand { font-size: 12px; font-weight: 700; color: var(--brand-3); }
.muziek-eq-stijlen { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.muziek-eq-stijlen::-webkit-scrollbar { display: none; }
.muziek-eq-stijlen .chip { padding: 6px 12px; font-size: 12.5px; }
.muziek-eq-banden { display: flex; flex-direction: column; gap: 4px; }
.muziek-eq-band { display: flex; align-items: center; gap: 8px; }
.muziek-eq-naam { flex: 0 0 52px; font-size: 12px; color: var(--muted); }
.muziek-eq-band input { flex: 1; min-width: 0; accent-color: var(--brand-3); }
.muziek-eq-waarde { flex: 0 0 52px; text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.muziek-eq .note { margin: 0; }
.muziek-rij {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 6px;
}
.muziek-rij.is-actief { border-color: rgba(196, 181, 253, .7); background: linear-gradient(135deg, rgba(167, 139, 250, .2), rgba(124, 58, 237, .16)); }
.muziek-rij-knop { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 6px; text-align: left; }
.muziek-rij-nr { flex: none; width: 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.muziek-rij.is-actief .muziek-rij-nr { color: var(--brand-3); }
.muziek-rij-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.muziek-rij-naam { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muziek-rij-sub { font-size: 11.5px; color: var(--muted); }
.muziek-rij-weg { flex: none; color: var(--muted); padding: 6px; }
.muziek-rij-weg:hover { color: var(--danger); }
.muziek-rij-weg svg { width: 20px; height: 20px; display: block; }

/* het muziekbalkje in de livekamer, boven de chatbalk */
.room-muziek {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(24, 17, 52, .9), rgba(13, 7, 24, .95));
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.muziek-puls { flex: none; color: var(--brand-3); }
.muziek-puls svg { width: 20px; height: 20px; }
.muziek-mini-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.muziek-mini-naam { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muziek-mini-sub { font-size: 11px; color: var(--muted); }
.room-muziek .icon-btn { width: 34px; height: 34px; }
.room-muziek .icon-btn svg { width: 20px; height: 20px; }