@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --bg: #0a0d0c;
  --surface: #121613;
  --surface-2: #1a201c;
  --surface-3: #212922;
  --border: #263029;
  --border-bright: #37453c;
  --text: #e6ece8;
  --text-muted: #7c8a82;
  --signal: #3ddc84;
  --signal-dim: #2a9c5f;
  --signal-wash: rgba(61, 220, 132, 0.1);
  --tally: #ff4433;
  --tally-wash: rgba(255, 68, 51, 0.12);
  --amber: #e8b93d;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --topbar-h: 58px;

  /* ---- profundidade: sombras e brilho (v1.0) ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px -4px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Texto de overlays sobre vídeo (rótulos de tile, controles) — sempre claro,
     porque o chip por trás é sempre escuro mesmo no tema claro do app. */
  --overlay-text: #f1f3f1;
  --overlay-text-muted: #aab3ac;
  --glow-signal: 0 0 0 1px var(--signal-dim), 0 0 28px -6px rgba(61, 220, 132, 0.55);
  --glow-tally: 0 0 0 1px rgba(255, 68, 51, 0.55), 0 0 22px -6px rgba(255, 68, 51, 0.5);

  /* ---- movimento (v2.1): um só vocabulário de easing/duração pro site todo,
     pra tudo "deslizar" do mesmo jeito. ---- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);      /* transições gerais */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);   /* entradas: chega rápido, assenta devagar */
  --dur-fast: 150ms;   /* hover, press, cor */
  --dur: 260ms;        /* popovers, fades */
  --dur-slow: 420ms;   /* painéis, layout */
}

:root[data-theme="light"] {
  --shadow-sm: 0 1px 2px rgba(20, 30, 24, 0.08);
  --shadow-md: 0 8px 24px -6px rgba(20, 30, 24, 0.14), 0 1px 2px rgba(20, 30, 24, 0.08);
  --shadow-lg: 0 24px 56px -14px rgba(20, 30, 24, 0.22), 0 2px 6px rgba(20, 30, 24, 0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
}

a { color: inherit; text-decoration: none; }

/* ═══════════════ LANDING (index.html) ═══════════════ */

body:not(.in-room) {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 28px 20px;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(61, 220, 132, 0.05), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(255, 68, 51, 0.04), transparent 40%);
}

.wrap { width: 100%; max-width: 440px; margin: auto; }
.wrap.wide { max-width: 920px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--signal);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 1px;
  transform: rotate(45deg);
}

h1 {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.18;
  background: linear-gradient(135deg, var(--text) 45%, var(--signal) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p.sub {
  color: var(--text-muted);
  margin: 0 0 30px;
  line-height: 1.55;
  font-size: 0.96rem;
  max-width: 46ch;
}

/* ═══════════════ PRIMITIVOS COMPARTILHADOS ═══════════════ */

.frame { position: relative; padding: 30px; }
.frame .corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--border-bright);
  transition: border-color var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
  pointer-events: none;
}
.frame.is-live .corner { border-color: var(--tally); box-shadow: 0 0 14px -2px rgba(255, 68, 51, 0.55); }
.frame.is-connected .corner { border-color: var(--signal); box-shadow: 0 0 14px -2px rgba(61, 220, 132, 0.45); }
.frame .corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.frame .corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.frame .corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.frame .corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; }

label { font-size: 0.82rem; color: var(--text-muted); }

button, input, select { font-family: var(--font-display); font-size: 0.95rem; }

button {
  background: var(--signal);
  color: #06120b;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
button:hover { background: #4fe897; box-shadow: var(--shadow-md); transform: translateY(-1px); }
button:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-sm); }
button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal); }
button:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; }

button.secondary {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text);
  box-shadow: none;
}
button.secondary:hover { background: var(--surface-2); border-color: var(--text-muted); box-shadow: var(--shadow-sm); }
button.secondary:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--border-bright); }

button.danger {
  background: transparent;
  border: 1px solid var(--tally);
  color: var(--tally);
  box-shadow: none;
}
button.danger:hover { background: var(--tally-wash); box-shadow: var(--glow-tally); }
button.danger:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--tally); }

input[type="text"], select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
input[type="text"]:focus, select:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }

.code-input {
  font-family: var(--font-mono);
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 0.85rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.link-box { display: flex; gap: 8px; }
.link-box input { font-family: var(--font-mono); font-size: 0.85rem; }

.error-text {
  color: var(--tally);
  font-size: 0.86rem;
  font-family: var(--font-mono);
  min-height: 1.2em;
}

.hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  border-left: 2px solid var(--border-bright);
  padding-left: 12px;
}
.hint strong { color: var(--text); font-weight: 600; }

.stat { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.stat strong { color: var(--text); font-weight: 600; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 68, 51, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 68, 51, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 68, 51, 0); }
}

.tally-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tally);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
}

/* ═══════════════ APP SHELL (room.html) ═══════════════ */

body.in-room {
  display: block;
  height: 100vh;
  overflow: hidden;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  background:
    radial-gradient(ellipse 900px 560px at 12% -8%, rgba(61, 220, 132, 0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 108%, rgba(255, 68, 51, 0.035), transparent 55%);
  background-color: var(--bg);
  background-attachment: fixed;
}
:root[data-theme="light"] .app {
  background:
    radial-gradient(ellipse 900px 560px at 12% -8%, rgba(31, 155, 91, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 108%, rgba(255, 68, 51, 0.04), transparent 55%);
  background-color: var(--bg);
  background-attachment: fixed;
}

/* ───── topbar ───── */
.topbar {
  flex-shrink: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 40;
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.topbar-left { flex: 1; overflow: hidden; }
.topbar-right { flex-shrink: 0; }

/* Nada aqui deve encolher a ponto de virar sopa de letrinha — a partir de
   um certo ponto, itens somem por inteiro (ver breakpoints mais abaixo),
   em vez de espremer até sobrepor. */
.topbar-left > *, .topbar-right > * { flex-shrink: 0; }

.home-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.home-btn:hover { color: var(--signal); border-color: var(--signal-dim); transform: translateY(-1px); }

.room-ident { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.room-name {
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.room-code-chip {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--signal);
  background: var(--signal-wash);
  border: 1px solid var(--signal-dim);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge strong { color: var(--text); font-weight: 600; }
.badge-mod { border-color: var(--amber); color: var(--amber); background: rgba(232, 185, 61, 0.1); }
.badge-public { border-color: var(--signal-dim); color: var(--signal); background: var(--signal-wash); }
.badge-live { border-color: var(--tally); color: var(--tally); background: var(--tally-wash); }
.badge-live strong { color: var(--tally); }

.conn-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-smooth), border-color var(--dur) var(--ease-smooth);
}
.conn-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--text-muted);
  transition: background var(--dur) var(--ease-smooth);
}
/* o JS troca o texto deste elemento; colorimos pelo conteúdo via classes
   aplicadas no .frame, que compartilha o mesmo estado da conexão */
.app:has(.frame.is-connected) .conn-pill { color: var(--signal); border-color: var(--signal-dim); }
.app:has(.frame.is-connected) .conn-pill::before { background: var(--signal); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text);
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--signal-dim); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal-dim); }
.icon-btn.off { color: var(--text-muted); border-color: var(--border); opacity: 0.6; }

/* ---- ícones (Lucide, via data-lucide + lucide.createIcons) ---- */
.ico { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; display: inline-block; }
.icon-btn .ico { width: 18px; height: 18px; vertical-align: middle; }
.home-btn .ico { width: 17px; height: 17px; vertical-align: middle; }
.badge .ico { width: 12px; height: 12px; vertical-align: -1px; }
.topbar-share .ico, .topbar-video .ico, .share-room summary .ico { width: 16px; height: 16px; }
#command-palette-btn .ico { width: 16px; height: 16px; }

/* Botão principal: é literalmente o motivo da página existir, então é o
   único lugar da topbar com brilho de assinatura — pulsa bem devagar
   quando ninguém ainda está transmitindo, convidando o clique. */
.topbar-share {
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--glow-signal);
  animation: shareBtnBreathe 3.4s ease-in-out infinite;
}
.topbar-share:hover { animation-play-state: paused; box-shadow: 0 0 0 1px var(--signal), 0 0 32px -4px rgba(61, 220, 132, 0.65); }
.topbar-share.danger { background: transparent; box-shadow: none; animation: none; }
@keyframes shareBtnBreathe {
  0%, 100% { box-shadow: 0 0 0 1px var(--signal-dim), 0 0 16px -6px rgba(61, 220, 132, 0.4); }
  50% { box-shadow: 0 0 0 1px var(--signal-dim), 0 0 30px -4px rgba(61, 220, 132, 0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-share { animation: none; }
}

/* ───── menu suspenso da topbar (convidar) ───── */
.share-room { position: relative; }

.share-room > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--text);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.share-room > summary::-webkit-details-marker { display: none; }
.share-room > summary:hover { background: var(--surface-2); }
.share-room[open] > summary { background: var(--surface-2); border-color: var(--signal-dim); }

.share-room-body {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  z-index: 50;
}
.share-room-title {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.setup-section { display: flex; flex-direction: column; gap: 7px; }
.setup-section-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ───── barra de erro ───── */
.error-bar {
  flex-shrink: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
  padding: 0 16px;
  background: var(--tally-wash);
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  transition: height var(--dur) var(--ease-smooth);
}
.error-bar.visible {
  height: 38px;
  border-bottom-color: var(--tally);
}

/* ───── corpo: sidebar | palco | chat ───── */
.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
  gap: 0;
}

.side-panel {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel-title .ico { width: 14px; height: 14px; color: var(--text-muted); }
.panel-title-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 0.66rem;
  color: var(--tally);
  background: var(--tally-wash);
  border: 1px solid rgba(255, 68, 51, 0.35);
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  letter-spacing: 0.02em;
}
.panel-title-live .tally-dot { width: 5px; height: 5px; }

.participants-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.stage-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px;
}

.stage-frame {
  flex: 1;
  display: flex;
  padding: 14px;
  min-height: 0;
}
.stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-content: start;
}

/* ───── estado vazio do palco ───── */
.stage-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.stage-empty::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 45%, var(--signal-wash) 0%, transparent 60%);
  opacity: 0.6;
  animation: emptyPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes emptyPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.7; transform: scale(1.05); }
}
.stage-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.stage-empty-art {
  position: relative;
  width: 132px;
  height: 76px;
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(61, 220, 132, 0.035) 3px 4px
    );
}
.stage-empty-art .scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0.55;
  animation: scanline 3.2s ease-in-out infinite;
}
.stage-empty-art .scan.scan-2 {
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0.35;
  animation-duration: 4.4s;
  animation-direction: reverse;
}
.stage-empty-art .mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  animation: moteFloat 4s ease-in-out infinite;
}
@keyframes scanline {
  0%, 100% { top: 6%; }
  50% { top: 92%; }
}
@keyframes moteFloat {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.8; }
  80% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-34px); }
}

.stage-empty-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
}
.stage-empty-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 40ch;
}
.stage-share-btn { margin-top: 4px; }

/* ───── tiles de vídeo ───── */
.tile { order: 0; cursor: pointer; }
.tile.featured { order: -1; grid-column: 1 / -1; }
.tile.featured .video-wrap { max-height: 68vh; }

.video-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #000;
  aspect-ratio: 16 / 9;
  transition: border-color var(--dur) var(--ease-smooth);
}
.tile:hover .video-wrap { border-color: var(--border-bright); }
.tile.featured .video-wrap { border-color: var(--signal-dim); }

video { width: 100%; display: block; background: #000; }
.video-wrap video { height: 100%; object-fit: contain; }

/* Discreto por padrão: some quando o mouse não está sobre a transmissão,
   igual aos outros controles do tile. O anel pulsante (.tile-live-glow) já
   sinaliza "quem está ao vivo" o tempo todo, então esconder o rótulo não
   esconde a informação mais importante. Em telas sem mouse (toque), o rótulo
   continua visível — não dá pra "passar o mouse" num celular. */
.tile-label {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(10, 13, 12, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-bright);
  color: var(--overlay-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 12px);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-smooth);
  pointer-events: none;
}
.tile:hover .tile-label,
.video-wrap:focus-within .tile-label,
.tile.featured .tile-label { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .tile-label { opacity: 1; transform: none; }
}
.tile-timer { color: var(--overlay-text-muted); white-space: nowrap; }

/* ---- glow pulsando na borda de quem está transmitindo ---- */
.tile-live-glow {
  animation: tileLiveGlow 2.6s ease-in-out infinite;
}
.tile.featured .tile-live-glow { animation-duration: 3.4s; }
@keyframes tileLiveGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--tally-wash), 0 0 14px 0 rgba(255, 68, 51, 0.08); }
  50% { box-shadow: 0 0 0 1px rgba(255, 68, 51, 0.45), 0 0 22px 2px rgba(255, 68, 51, 0.22); }
}

.tile-volume-group {
  position: absolute;
  bottom: 8px; left: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(10, 13, 12, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-bright);
  padding: 5px 9px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-smooth);
}
.tile:hover .tile-volume-group,
.video-wrap:focus-within .tile-volume-group { opacity: 1; }
.tile-volume-group .tile-mute {
  position: static;
  background: none;
  border: none;
  backdrop-filter: none;
  color: var(--overlay-text);
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.3em;
}
.tile-volume-group .tile-mute:hover { color: var(--signal-dim); background: none; }

.tile-volume {
  width: 64px;
  height: 3px;
  accent-color: var(--signal-dim);
  cursor: pointer;
}
@media (max-width: 640px) {
  .tile-volume { width: 44px; }
}

.video-controls {
  position: absolute;
  bottom: 8px; right: 8px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-smooth);
}
.tile:hover .video-controls,
.video-wrap:focus-within .video-controls { opacity: 1; }

.video-controls button {
  background: rgba(10, 13, 12, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-bright);
  color: var(--overlay-text);
  padding: 6px 9px;
  font-size: 0.8rem;
  border-radius: 2px;
}
.video-controls button:hover { background: rgba(10, 13, 12, 0.95); }
.video-controls button.is-active { border-color: var(--signal); color: var(--signal); background: var(--signal-wash); }
.tile-mod-mute, .tile-mod-stop { border-color: var(--amber) !important; color: var(--amber) !important; }
.tile-mod-stop:hover { border-color: var(--tally) !important; color: var(--tally) !important; }

/* barras de qualidade de conexão */
.conn-quality {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  flex-shrink: 0;
}
.conn-quality .bar { width: 3px; background: var(--border-bright); border-radius: 1px; }
.conn-quality .bar:nth-child(1) { height: 40%; }
.conn-quality .bar:nth-child(2) { height: 68%; }
.conn-quality .bar:nth-child(3) { height: 100%; }
.conn-quality.q-excellent .bar { background: var(--signal); }
.conn-quality.q-good .bar:nth-child(1),
.conn-quality.q-good .bar:nth-child(2) { background: var(--signal); }
.conn-quality.q-poor .bar:nth-child(1) { background: var(--amber); }
.conn-quality.q-lost .bar { background: var(--tally); opacity: 0.45; }

/* ───── chat ───── */
.room-chat {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
}
/* .room-chat.hidden: ver bloco 'v2.1 — movimento' no fim do arquivo */

.chat-header {
  flex-shrink: 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-empty {
  margin: auto;
  color: var(--text-muted);
  font-size: 0.86rem;
  text-align: center;
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 4px;
  padding: 7px 34px 7px 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
}
.chat-msg:hover { background: var(--surface-2); }
.chat-msg .avatar { flex-shrink: 0; margin-top: 1px; }
.chat-msg-body { min-width: 0; flex: 1; }
.chat-msg-meta { display: flex; align-items: baseline; gap: 8px; }
.chat-msg .who {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--signal);
}
.chat-msg .when {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
}
.chat-msg-text { margin-top: 1px; }
.chat-msg.own .who { color: var(--text); }
.chat-msg.own { background: var(--signal-wash); }
.chat-msg.own:hover { background: var(--signal-wash); filter: brightness(1.15); }
.chat-msg.mentions-me { background: rgba(232, 185, 61, 0.1); box-shadow: inset 3px 0 0 var(--amber); }
.chat-msg.mentions-me:hover { background: rgba(232, 185, 61, 0.15); }

.mention { color: var(--signal); font-weight: 600; }
.mention-me {
  color: var(--amber);
  background: rgba(232, 185, 61, 0.14);
  padding: 0 3px;
  border-radius: 2px;
}

.chat-typing {
  flex-shrink: 0;
  padding: 0 14px 8px;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-muted);
}

.chat-form {
  flex-shrink: 0;
  display: flex;
  gap: 7px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.chat-form input { padding: 10px 12px; font-size: 0.88rem; }
.chat-form button { padding: 10px 14px; font-size: 0.85rem; white-space: nowrap; }

.chat-tool-btn {
  padding: 0 !important;
  width: 38px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  font-size: 0.95rem;
}
.chat-tool-btn:hover { color: var(--text); border-color: var(--border-bright); }

.room-chat.is-drag-over { outline: 2px dashed var(--signal); outline-offset: -4px; }

/* ---- enquetes rápidas no chat ---- */
.poll-creator {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.poll-creator input[type="text"] { padding: 8px 10px; font-size: 0.85rem; }
.poll-creator-options { display: flex; flex-direction: column; gap: 6px; }
.poll-creator-actions { display: flex; align-items: center; gap: 8px; }
.poll-creator-actions button { padding: 7px 12px; font-size: 0.8rem; }

.chat-poll {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 11px 12px;
  margin: 6px 0;
  font-size: 0.86rem;
}
.poll-head { display: flex; align-items: flex-start; gap: 9px; }
.poll-icon { font-size: 1.1rem; line-height: 1.3; }
.poll-head-text { flex: 1; min-width: 0; }
.poll-question { font-weight: 600; }
.poll-meta { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.poll-close-btn { flex-shrink: 0; padding: 5px 9px !important; font-size: 0.72rem !important; }
.poll-options { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  font-size: 0.83rem;
  color: var(--text);
}
.poll-option:disabled { cursor: default; }
.poll-option-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--signal-wash);
  transition: width var(--dur) var(--ease-smooth);
  z-index: 0;
}
.poll-option-label, .poll-option-pct { position: relative; z-index: 1; }
.poll-option-pct { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.74rem; flex-shrink: 0; }
.poll-option.mine { border-color: var(--signal); }
.poll-option.mine .poll-option-label { font-weight: 600; }
.poll-total { margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ---- imagens no chat ---- */
.chat-image-preview {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-image-preview img { max-height: 60px; border-radius: 4px; border: 1px solid var(--border-bright); }
.chat-image-preview-remove,
#chat-image-preview-remove {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 7px;
  border-radius: 4px;
}
#chat-image-preview-remove:hover { background: var(--surface-3); color: var(--text); }
.chat-msg-image {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 4px;
  margin-top: 6px;
  cursor: zoom-in;
  border: 1px solid var(--border-bright);
}

/* ───── toasts ───── */
.toast-container {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-left: 3px solid var(--tally);
  border-radius: 3px;
  padding: 11px 16px;
  font-size: 0.88rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.toast .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tally);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
}

/* ═══════════════ RESPONSIVO ═══════════════ */

/* A topbar tem bastante coisa (identidade + status + ações). Em vez de
   deixar tudo encolher até virar sopa de letrinha num monitor secundário
   mais estreito, cada faixa aqui esconde por inteiro o que é dispensável
   naquele tamanho — sempre a coisa certa sumindo, nunca texto cortado ou
   botões se sobrepondo. */

@media (max-width: 1440px) {
  .conn-pill { display: none; }
  .room-name { display: none; }
}

@media (max-width: 1240px) {
  .topbar-share .label,
  .topbar-video .label,
  .share-room > summary .label { display: none; }
  .topbar-share, .topbar-video, .share-room > summary { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 1180px) {
  .side-panel { width: 190px; }
  .room-chat { width: 280px; }
}

@media (max-width: 960px) {
  body.in-room, .app { height: auto; overflow: visible; }
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
  }
  .topbar-left, .topbar-right { flex-wrap: wrap; }
  .app-body { flex-direction: column; }
  .side-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 168px;
  }
  .participants-list { flex-direction: row; flex-wrap: wrap; }
  .stage-col { padding: 12px; overflow: visible; }
  .stage-frame { padding: 10px; }
  .room-chat {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    height: 420px;
  }
  .tile.featured .video-wrap { max-height: none; }
  .share-room-body {
    width: min(92vw, 380px);
    right: auto;
    left: 0;
  }
}

@media (max-width: 560px) {
  .conn-pill { display: none; }
  .topbar-share { flex: 1; }
  .stage-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ 0.7.0 — NOVOS COMPONENTES ═══════════════ */

.beta-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 2px;
  background: #5b4bff;
  color: #fff;
  vertical-align: middle;
}

/* ───── avatares ───── */
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  flex-shrink: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-letter {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--signal);
}
.avatar-lg { width: 68px; height: 68px; border-radius: 4px; font-size: 1.7rem; }
.avatar-md { width: 38px; height: 38px; border-radius: 5px; }
.avatar-md.avatar-letter { font-size: 1rem; }
.avatar-sm { width: 24px; height: 24px; border-radius: 3px; }
.avatar-sm.avatar-letter { font-size: 0.7rem; }

/* ---- molduras de avatar ---- */
.avatar-frame-mod { box-shadow: 0 0 0 2px var(--amber); }
.avatar-frame-blue { box-shadow: 0 0 0 2px #4c8cff; }
.avatar-frame-purple { box-shadow: 0 0 0 2px #a463ff; }
.avatar-frame-red { box-shadow: 0 0 0 2px var(--tally); }
.avatar-frame-teal { box-shadow: 0 0 0 2px #2dd4bf; }
/* Anel de presença: quem está transmitindo agora ganha um anel vermelho
   pulsante — a mesma linguagem visual do "tally" usado no resto do app
   pra sinalizar "ao vivo". Vem depois das molduras de cor acima de
   propósito, pra vencer o empate quando alguém é moderador E está
   transmitindo ao mesmo tempo (estar ao vivo é a informação mais
   operacionalmente relevante das duas). */
.avatar-live {
  box-shadow: 0 0 0 2px var(--tally), 0 0 0 5px var(--tally-wash);
  animation: avatarLivePulse 2s ease-in-out infinite;
}
@keyframes avatarLivePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--tally), 0 0 0 5px var(--tally-wash); }
  50% { box-shadow: 0 0 0 2px var(--tally), 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) { .avatar-live { animation: none; } }

.frame-swatches { display: flex; gap: 8px; margin-top: 4px; }
.frame-swatch {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px;
  line-height: 0;
}
.frame-swatch.is-active { border-color: var(--border-bright); background: var(--surface-2); }
.frame-swatches.is-disabled .frame-swatch { opacity: 0.4; pointer-events: none; }

/* ───── linhas de participante ───── */
.participant-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.88rem;
  padding: 9px 11px 9px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  line-height: 1.3;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
/* Barra de destaque fina à esquerda em vez de tomar a caixa inteira com
   fundo/borda de "alerta" — sinaliza "ao vivo" sem parecer um aviso de erro. */
.participant-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.participant-chip:hover { border-color: var(--border-bright); background: var(--surface-3); box-shadow: var(--shadow-sm); transform: translateX(1px); }
.participant-chip.sharing::before { background: var(--tally); }

.p-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-name-main {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  min-width: 0;
}
.p-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.p-you {
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  background: var(--surface-3);
  border-radius: 3px;
  padding: 1px 5px;
}
.p-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--amber);
  background: rgba(232, 185, 61, 0.12);
  border: 1px solid rgba(232, 185, 61, 0.35);
  border-radius: 3px;
  padding: 1px 5px 1px 4px;
  flex-shrink: 0;
}
.p-role-chip .ico { width: 10px; height: 10px; color: var(--amber); vertical-align: -1px; }

.p-substatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  width: fit-content;
}
.p-substatus.is-live { color: var(--tally); }
.p-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.p-dot.live {
  background: var(--tally);
  animation: pulse 1.6s infinite;
}

.p-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 2px 5px;
  font-size: 1rem;
  line-height: 1;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.participant-chip:hover .p-menu-btn,
.participant-chip:focus-within .p-menu-btn { opacity: 1; }
.p-menu-btn:hover { background: var(--surface-3); color: var(--text); }

/* ───── menu flutuante de moderação ───── */
.mod-menu {
  position: fixed;
  z-index: 300;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  padding: 12px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
}
.mod-menu-head {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.mod-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 4px;
  font-weight: 500;
}
.mod-menu-item + .mod-menu-item { margin-top: 8px; }
.mod-menu-item:hover { background: var(--surface-3); border-color: var(--border-bright); }
.mod-menu-item strong { display: block; font-size: 0.88rem; font-weight: 600; }
.mod-menu-item small { display: block; color: var(--text-muted); font-size: 0.76rem; margin-top: 2px; }
.mod-menu-icon { font-size: 1rem; line-height: 1.3; color: var(--amber); flex-shrink: 0; }
.mod-menu-item.danger { border-color: rgba(255, 68, 51, 0.4); }
.mod-menu-item.danger:hover { background: var(--tally-wash); border-color: var(--tally); }
.mod-menu-item.danger strong { color: var(--tally); }
.mod-menu-item.danger .mod-menu-icon { color: var(--tally); }

/* ───── preview de perfil (clique num participante) ───── */
.participant-preview {
  position: fixed;
  z-index: 300;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  padding: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
}
.pp-head {
  display: flex; align-items: center; gap: 12px;
  /* sangra até as bordas do popover pra o banner virar uma faixa de topo */
  margin: -14px -14px 12px;
  padding: 16px 14px 14px;
  border-radius: 4px 4px 0 0;
  transition: background var(--dur-slow) var(--ease-smooth);
}
.pp-ping { font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.pp-meta { min-width: 0; }
.pp-name { font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.pp-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px;
  margin-top: 3px; font-size: 0.78rem; color: var(--text-muted);
  font-family: var(--font-mono);
}
.pp-status.is-live { color: var(--tally); }
.pp-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pp-actions .mod-menu-item { padding: 9px 10px; }

/* ───── player compartilhado da sala ───── */
.video-bar {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.video-bar-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.video-bar-icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 3px;
  background: var(--signal-wash);
  border: 1px solid var(--signal-dim);
  color: var(--signal);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.video-bar-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.video-bar-title {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-bar-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.video-bar-frame {
  height: min(38vh, 340px);
  background: #000;
}
.video-bar-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-bar.collapsed .video-bar-frame { display: none; }

.topbar-video { padding: 9px 14px; font-size: 0.88rem; white-space: nowrap; }

/* ───── modais ───── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(4, 7, 6, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalBackdropIn 0.18s ease;
}
.modal {
  width: 100%;
  max-width: 470px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-sm { max-width: 400px; }
@keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { animation: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.modal-body input[type="text"], .modal-body select { padding: 11px 13px; font-size: 0.9rem; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.modal-foot button { padding: 11px 17px; font-size: 0.9rem; }

.field-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.field-help { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* seletor de plataforma */
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.platform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}
.platform-btn:hover { background: var(--surface-3); color: var(--text); }
.platform-btn.is-active {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--signal-wash);
}
.platform-icon { font-size: 1.1rem; line-height: 1; }

/* opções de rádio */
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.radio-row:hover { border-color: var(--border-bright); }
.radio-row input { margin-top: 3px; accent-color: var(--signal); flex-shrink: 0; }
.radio-row strong { display: block; font-size: 0.87rem; font-weight: 600; }
.radio-row small { display: block; color: var(--text-muted); font-size: 0.76rem; margin-top: 2px; }
.radio-row:has(input:checked) { border-color: var(--signal-dim); background: var(--signal-wash); }

/* ───── cartão de perfil no rodapé do chat ───── */
.profile-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  transition: background var(--dur-slow) var(--ease-smooth);
}
.profile-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.profile-editor {
  display: flex; align-items: center; gap: 16px; margin-bottom: 4px;
  padding: 16px; border-radius: var(--radius-md);
  transition: background var(--dur-slow) var(--ease-smooth);
}
.profile-editor-actions { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.profile-editor-actions button { padding: 9px 13px; font-size: 0.84rem; }

@media (max-width: 960px) {
  .video-bar-frame { height: 34vh; }
  .mod-menu { width: min(90vw, 268px); }
}
@media (max-width: 560px) {
  .topbar-video { flex: 1; }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ───── seletor de fonte de compartilhamento (0.8.0) ───── */
.source-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 14px 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-weight: 500;
}
.source-card:hover { background: var(--surface-3); border-color: var(--border-bright); }
.source-card.is-active {
  border-color: var(--signal);
  background: var(--signal-wash);
}
.source-icon { font-size: 1.35rem; line-height: 1.1; flex-shrink: 0; }
.source-text { min-width: 0; }
.source-text strong { display: block; font-size: 0.92rem; font-weight: 600; }
.source-text small {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 3px;
  line-height: 1.45;
}
.source-card.is-active .source-text strong { color: var(--signal); }

/* ───── visibilidade da sala (index.html) ───── */
.visibility-toggle { display: flex; gap: 8px; }
.visibility-option {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 3px;
  padding: 12px 10px;
  font-weight: 600;
  font-size: 0.88rem;
  text-align: center;
}
.visibility-option:hover { background: var(--surface-3); border-color: var(--border-bright); color: var(--text); }
.visibility-option.is-active {
  border-color: var(--signal);
  background: var(--signal-wash);
  color: var(--signal);
}

/* ───── navegar salas ativas (index.html) ───── */
.browse-tabs { display: flex; gap: 8px; }
.browse-tab {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 3px;
  padding: 10px;
  font-weight: 600;
  font-size: 0.86rem;
}
.browse-tab:hover { background: var(--surface-2); color: var(--text); }
.browse-tab.is-active {
  border-color: var(--signal-dim);
  color: var(--signal);
  background: var(--signal-wash);
}

.browse-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 2px 2px 2px 0;
}
.browse-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
  padding: 34px 10px;
}
.browse-room-row {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.browse-room-row:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.browse-room-info { padding: 10px 11px 2px; flex: 1; min-width: 0; }
.browse-room-name { font-weight: 600; font-size: 0.9rem; word-break: break-word; }
.browse-room-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.browse-room-join { width: calc(100% - 22px); margin: 8px 11px 11px; padding: 8px; font-size: 0.82rem; }

.browse-code-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 11px 11px; }
.browse-code-form input {
  width: 100%;
  padding: 9px 10px;
  font-size: 0.85rem;
  text-align: center;
  letter-spacing: 0.1em;
}
.browse-code-form button { width: 100%; padding: 9px 12px; font-size: 0.82rem; }

@media (max-width: 560px) {
  .browse-list { grid-template-columns: 1fr; }
}

/* ═══════════════ 0.9.4 — LANDING PAGE (mais larga, 2 colunas) ═══════════════ */

.landing-card {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.landing-name-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.landing-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 28px;
  align-items: stretch;
}

.landing-divider {
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

.landing-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.landing-col-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-col-title::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.opt-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: normal;
  font-weight: 400;
}

.hint-tight { padding: 0; border: none; font-size: 0.78rem; margin-top: -2px; }

/* Empurra o botão "Entrar em uma sala" pro fim da coluna, alinhando com o
   "Criar uma sala" do lado esquerdo mesmo quando o conteúdo tem alturas
   diferentes. */
.landing-col #join-btn { margin-top: auto; }

@media (max-width: 760px) {
  .landing-columns { grid-template-columns: 1fr; gap: 22px; }
  .landing-divider { display: none; }
  .landing-col-title { margin-top: 4px; }
}

/* ═══════════════ 0.9.4 — MODAL DE COMPARTILHAMENTO (compacto) ═══════════════ */

.modal-wide { max-width: 620px; }

.share-modal-body { gap: 12px; }

/* linha de 3 ícones, em vez dos blocos empilhados com texto longo */
.surface-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.surface-row .source-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 8px;
  text-align: center;
}
.surface-row .source-icon { font-size: 1.6rem; }
.source-label { font-size: 0.84rem; font-weight: 600; }
.source-card.is-active .source-label { color: var(--signal); }

.surface-desc {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.3em;
}

.share-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* interruptor de áudio */
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.switch-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative;
  width: 36px; height: 20px;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.switch-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-smooth), background var(--dur) var(--ease-smooth);
}
.switch-row input:checked + .switch-track { background: var(--signal-wash); border-color: var(--signal-dim); }
.switch-row input:checked + .switch-track .switch-thumb { transform: translateX(16px); background: var(--signal); }
.switch-label { min-width: 0; line-height: 1.3; }
.switch-label strong { display: block; font-size: 0.84rem; font-weight: 600; }
.switch-label small { display: block; color: var(--text-muted); font-size: 0.72rem; margin-top: 2px; }

.quality-inline {
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.quality-inline label {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.quality-inline select { padding: 8px 10px; font-size: 0.82rem; }

/* dicas recolhíveis — some com a rolagem por padrão */
.tips-disclosure {
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.tips-disclosure summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 13px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tips-disclosure summary::-webkit-details-marker { display: none; }
.tips-disclosure summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform var(--dur) var(--ease-smooth);
}
.tips-disclosure[open] summary::after { transform: rotate(180deg); }
.tips-disclosure summary:hover { color: var(--text); }
.tips-disclosure .hint {
  margin: 12px 13px;
}
.tips-disclosure .hint:last-child { margin-bottom: 13px; }

@media (max-width: 560px) {
  .surface-row { grid-template-columns: 1fr; }
  .share-options-row { grid-template-columns: 1fr; }
  .quality-inline { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
}

/* ═══════════════ 0.9.5 ═══════════════ */

/* ---- tema claro ("modo estúdio") — mesmo produto, variáveis diferentes ---- */
:root[data-theme="light"] {
  --bg: #eef1ee;
  --surface: #ffffff;
  --surface-2: #f3f5f2;
  --surface-3: #e8ebe6;
  --border: #d9ded6;
  --border-bright: #c3ccc0;
  --text: #161c18;
  --text-muted: #5c665e;
  --signal-wash: rgba(42, 156, 95, 0.1);
  --tally-wash: rgba(255, 68, 51, 0.08);
}
:root[data-theme="light"] { --signal: #1f9b5b; --signal-dim: #1c7f4b; }
:root[data-theme="light"] body { background-image:
  radial-gradient(circle at 15% 0%, rgba(31, 155, 91, 0.06), transparent 45%),
  radial-gradient(circle at 85% 100%, rgba(255, 68, 51, 0.05), transparent 40%);
}
:root[data-theme="light"] .video-wrap, :root[data-theme="light"] video { background: #000; }
:root[data-theme="light"] .icon-btn, :root[data-theme="light"] button.secondary { color: var(--text); }

.theme-toggle-btn { font-size: 1rem; }

/* ---- estatísticas reais do stream (overlay "ⓘ") ---- */
.tile-stats-overlay {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6, 9, 8, 0.82);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.tile-stats-overlay .stat-row { display: flex; gap: 8px; justify-content: space-between; }
.tile-stats-overlay .stat-row b { color: var(--signal); font-weight: 600; }

/* ---- reações e ações (fixar/reagir) nas mensagens do chat ---- */
.msg-actions {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 2px;
}
.msg-pin-toggle,
.msg-react-toggle {
  background: transparent;
  border: none;
  font-size: 0.72rem;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: pointer;
  line-height: 1;
}
.chat-msg:hover .msg-pin-toggle,
.chat-msg:hover .msg-react-toggle,
.msg-pin-toggle:hover,
.msg-react-toggle:hover,
.msg-pin-toggle:focus-visible,
.msg-react-toggle:focus-visible { opacity: 1; background: var(--surface-3); color: var(--text); }

.msg-emoji-picker {
  display: none;
  position: absolute;
  top: 26px;
  right: 8px;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 4px 6px;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.msg-emoji-picker.open { display: flex; }
.msg-emoji-btn {
  background: transparent;
  border: none;
  font-size: 1rem;
  padding: 3px 5px;
  border-radius: 999px;
  line-height: 1;
}
.msg-emoji-btn:hover { background: var(--surface-3); transform: scale(1.15); }

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.msg-reactions:empty { display: none; margin-top: 0; }
.msg-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.msg-reaction-pill:hover { border-color: var(--signal); }
.msg-reaction-pill.mine {
  border-color: var(--signal);
  color: var(--text);
  background: var(--signal-wash);
}

/* ---- mensagem fixada, acima da lista do chat ---- */
.chat-pinned {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: var(--amber-wash, rgba(232, 185, 61, 0.1));
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.chat-pinned-icon { flex-shrink: 0; line-height: 1.3; }
.chat-pinned-body { min-width: 0; flex: 1; }
.chat-pinned-who { font-family: var(--font-mono); font-size: 0.72rem; color: var(--amber); margin-right: 6px; }
.chat-pinned-text { color: var(--text-muted); word-break: break-word; }
.chat-pinned-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
}
.chat-pinned-close:hover { background: var(--surface-3); color: var(--text); }

/* ---- painéis recolhíveis (modo teatro) ---- */
/* .side-panel.hidden: ver bloco 'v2.1 — movimento' no fim do arquivo */
.icon-btn.off { opacity: 0.55; }

/* ---- badge de visibilidade clicável (moderador pode trocar) + idade ---- */
.badge-age { font-family: var(--font-mono); }

/* ═══════════════ 2.0 — TOPBAR: identidade + status + toolbar ═══════════════ */

/* Em vez de badges soltos, cada um com sua própria borda flutuando lado a
   lado (a "sopa de caixinhas" que deixava a topbar sem hierarquia), tudo
   vira segmentos de UMA tira contínua — como uma barra de status de
   verdade, não uma pilha de componentes desencontrados. */
.status-cluster {
  display: flex;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 32px;
}
.status-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0 10px;
  color: var(--text-muted);
  white-space: nowrap;
  position: relative;
}
.status-seg + .status-seg::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--border-bright);
}
.status-seg strong { color: var(--text); font-weight: 600; }
.status-seg .ico { width: 12px; height: 12px; }
.status-seg.status-mod { color: var(--amber); }
.status-seg.status-public { color: var(--signal); }
.status-seg.status-live { color: var(--tally); }
.status-seg.status-live strong { color: var(--tally); }
.status-seg.status-age { color: var(--text-muted); font-size: 0.68rem; }
.status-seg.badge-clickable { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.status-seg.badge-clickable:hover { background: var(--surface-3); color: var(--text); }

/* ---- toolbar de ícones agrupado (em vez de botões soltos) ---- */
.icon-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.icon-toolbar .icon-btn {
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-md) - 2px);
}
.icon-toolbar .icon-btn:hover { background: var(--surface-3); border-color: transparent; transform: none; }
.icon-toolbar .icon-btn.off { opacity: 0.5; }
.icon-toolbar-divider { width: 1px; height: 16px; background: var(--border-bright); margin: 0 2px; flex-shrink: 0; }

/* ---- painel de pedidos de entrada (fila de aprovação) ---- */
.join-requests-panel {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 14px;
  width: 300px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--amber);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 120;
  display: none;
}
.join-requests-panel.visible { display: block; }
.join-requests-head {
  padding: 11px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amber);
  border-bottom: 1px solid var(--border);
}
.join-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
}
.join-request-row:last-child { border-bottom: none; }
.join-request-name { flex: 1; font-size: 0.85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-request-row button {
  padding: 6px 9px;
  font-size: 0.78rem;
  border-radius: 3px;
}
.join-req-approve { background: var(--signal); color: #06120b; border: none; }
.join-req-deny { background: transparent; border: 1px solid var(--tally); color: var(--tally); }

/* ---- tela de espera (pedido de entrada pendente) ---- */
.waiting-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 380px;
  margin: auto;
  padding: 60px 20px;
}
.waiting-spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--border-bright);
  border-top-color: var(--signal);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- @menção: dropdown de autocomplete ---- */
.mention-autocomplete {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 14px;
  right: 14px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 30;
  display: none;
}
.mention-autocomplete.visible { display: block; }
.mention-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  font-size: 0.85rem;
  cursor: pointer;
}
.mention-option.active, .mention-option:hover { background: var(--signal-wash); }

/* ---- clipe local (gravação client-side) ---- */
.tile-clip-active { color: var(--tally) !important; border-color: var(--tally) !important; }

/* ---- prévia ao vivo no buscador de salas ---- */
.browse-room-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: var(--text-muted);
}
.browse-room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.browse-room-live-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 0 3px rgba(10, 13, 12, 0.65);
  animation: pulse 1.6s infinite;
}
.browse-room-age { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }

/* ---- cards de fonte no modal de compartilhar: reforço do estado ativo ---- */
.surface-row .source-card { position: relative; border-width: 1px; }
.surface-row .source-card.is-active {
  border-width: 2px;
  padding: 15px 7px; /* compensa a borda mais grossa pra não pular o layout */
  box-shadow: 0 0 0 3px var(--signal-wash), 0 4px 14px rgba(61, 220, 132, 0.15);
}
.surface-row .source-card.is-active::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--signal);
  color: #06120b;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.surface-row .source-icon { font-size: 1.9rem; }

@media (max-width: 960px) {
  .join-requests-panel { right: 10px; left: 10px; width: auto; }
}

/* ═══════════════ PALETA DE COMANDOS (Ctrl+K) ═══════════════ */
kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 6px;
  min-width: 20px;
  text-align: center;
}

.cmdk-backdrop { align-items: flex-start; padding-top: 14vh; }
.cmdk {
  width: 100%;
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(61, 220, 132, 0.06);
  overflow: hidden;
  animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmdk-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.cmdk-search .ico { width: 18px; height: 18px; }
.cmdk-search input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1rem;
  color: var(--text);
  box-shadow: none;
}
.cmdk-search input[type="text"]:focus { box-shadow: none; border: none; }

.cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.cmdk-item .ico { width: 18px; height: 18px; color: var(--text-muted); }
.cmdk-item.is-active { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--signal); }
.cmdk-item.is-active .ico { color: var(--signal); }
.cmdk-item-label { flex: 1; font-size: 0.92rem; font-weight: 500; min-width: 0; }
.cmdk-item-hint { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.cmdk-item-keys { display: flex; gap: 3px; }
.cmdk-empty { padding: 30px 12px; text-align: center; color: var(--text-muted); font-size: 0.86rem; }

.cmdk-foot {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.cmdk-foot kbd { margin-right: 4px; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 2px; }

@media (max-width: 640px) {
  .cmdk-backdrop { padding: 10vh 12px 0; }
  .cmdk-item-hint { display: none; }
  .cmdk-foot { display: none; }
}

/* ---- atalhos de teclado ---- */
.shortcuts-list { display: flex; flex-direction: column; }
.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.sc-row:last-child { border-bottom: none; }
.sc-keys { display: flex; gap: 4px; flex-shrink: 0; }

/* tamanhos de ícone nos novos contextos */
.chat-tool-btn .ico { width: 17px; height: 17px; vertical-align: middle; }
.tile-label .ico, .video-controls .ico, .tile-volume-group .ico { width: 15px; height: 15px; vertical-align: middle; }
.p-menu-btn .ico { width: 16px; height: 16px; vertical-align: middle; }
.p-crown .ico { width: 13px; height: 13px; color: var(--amber); vertical-align: -2px; }
.mod-menu-icon .ico { width: 18px; height: 18px; }
.msg-pin-toggle .ico { width: 13px; height: 13px; vertical-align: middle; }
.chat-pinned-icon .ico { width: 14px; height: 14px; color: var(--amber); }
.chat-pinned-close .ico, #chat-image-preview-remove .ico { width: 14px; height: 14px; vertical-align: middle; }
.join-requests-head .ico, .video-bar-icon .ico { width: 15px; height: 15px; vertical-align: -3px; }
.modal-head .icon-btn .ico { width: 16px; height: 16px; }
.source-icon .ico { width: 1.7rem; height: 1.7rem; vertical-align: middle; color: var(--signal); stroke-width: 1.5; }
.stage-share-btn .ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }
.share-details summary .ico, details summary .ico { width: 15px; height: 15px; vertical-align: -3px; }
.visibility-option .ico, .browse-tab .ico, #browse-btn .ico { width: 15px; height: 15px; vertical-align: -3px; }
.browse-room-thumb .ico { width: 30px; height: 30px; color: var(--text-muted); stroke-width: 1.4; }
.browse-room-meta .ico { width: 12px; height: 12px; vertical-align: -1px; }
#theme-toggle .ico { width: 18px; height: 18px; }

/* ═══════════════ 2.0 — LANDING: HERO EM DUAS COLUNAS ═══════════════ */

body:not(.in-room) {
  padding: 0;
  display: block;
  position: relative;
  overflow-x: hidden;
  background-image: none;
}

.landing-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.landing-bg-grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 20%, transparent 75%);
}
:root[data-theme="light"] .landing-bg-grid { opacity: 0.5; }
.landing-bg-glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
}
.landing-bg-glow-a { top: -220px; left: -160px; background: radial-gradient(circle, rgba(61,220,132,0.30), transparent 70%); }
.landing-bg-glow-b { top: 120px; right: -220px; background: radial-gradient(circle, rgba(255,68,51,0.20), transparent 70%); }

.landing-shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 22px 24px;
  min-height: 100vh;
}

.landing-copy { flex: 1 1 480px; min-width: 0; max-width: 600px; }

.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--signal-wash);
  animation: pulse 2s infinite;
}
.eyebrow::before { display: none; }

h1 { font-size: 1.95rem; }

.landing-points {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.landing-points li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.landing-points li .ico { color: var(--signal); width: 15px; height: 15px; }

.landing-card {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 14%);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.landing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal-dim) 30%, var(--signal-dim) 70%, transparent);
  opacity: 0.6;
}

.landing-col-title { display: flex; align-items: center; gap: 7px; }
.landing-col-title .ico { width: 14px; height: 14px; }

/* ---- mockup decorativo (não é um iframe real) ---- */
.landing-preview {
  flex: 1 1 480px;
  max-width: 520px;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-window {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(-1.6deg);
  animation: previewFloat 6s ease-in-out infinite;
}
@keyframes previewFloat {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50% { transform: rotate(-1.6deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .preview-window { animation: none; } }

.preview-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.preview-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.preview-room-chip {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--signal);
  background: var(--signal-wash);
  border: 1px solid var(--signal-dim);
  border-radius: 3px;
  padding: 2px 6px;
}
.preview-live-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--tally);
  background: var(--tally-wash);
  border: 1px solid var(--tally);
  border-radius: 3px;
  padding: 2px 7px;
}
.preview-live-chip .tally-dot { width: 5px; height: 5px; }

.preview-body { display: flex; height: calc(100% - 33px); }
.preview-sidebar {
  width: 26%;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-person { display: flex; align-items: center; gap: 7px; }
.preview-avatar {
  width: 20px; height: 20px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #06120b;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.preview-avatar.is-live { box-shadow: 0 0 0 2px var(--tally); }
.preview-bar { height: 6px; border-radius: 3px; background: var(--surface-3); flex: 1; }

.preview-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 9px;
  background: var(--bg);
}
.preview-tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-bright);
}
.preview-tile-a { background: linear-gradient(135deg, #163f2c, #0a1f16); }
.preview-tile-b { background: linear-gradient(135deg, #3a1a4a, #170a1f); }
.preview-tile-scan {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  background-size: 220% 220%;
  animation: previewScan 3.6s ease-in-out infinite;
}
@keyframes previewScan {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
.preview-tile-tag {
  position: absolute; bottom: 6px; left: 6px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 2px 6px;
  border-radius: 3px;
}

.preview-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: previewFloat 6s ease-in-out infinite;
}
.preview-float .ico { width: 15px; height: 15px; color: var(--signal); }
.preview-float-1 { top: 6%; right: -6%; animation-delay: -2s; }
.preview-float-2 { bottom: 8%; left: -8%; animation-delay: -4s; }

.landing-copy p.sub { margin-bottom: 0; }
.landing-card .landing-name-row { padding-bottom: 14px; gap: 6px; }
.landing-card .landing-columns { gap: 22px; }
.landing-card .stack { gap: 10px; }

@media (max-width: 1180px) {
  .landing-preview { display: none; }
  .landing-shell { padding: 32px 20px; }
}
@media (max-width: 640px) {
  .landing-shell { padding: 28px 16px; }
  .landing-points { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — MOVIMENTO SUAVE (estilo "o site desliza")
   Tudo aqui usa os tokens --ease-* / --dur-* do :root, então qualquer ajuste
   de ritmo se faz num lugar só. Fica no fim do arquivo de propósito: vence
   regras antigas de mesma especificidade sem precisar de !important.
   ═══════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ---- base: toda interação responde com a mesma curva ----
   :where() tem especificidade zero, então componentes que já definem a própria
   transition continuam mandando; o resto ganha uma base suave de graça. */
:where(button, a, summary, input, select, textarea, .icon-btn) {
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth),
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-smooth);
}

/* ---- abertura da página: fade + leve subida, escalonado ---- */
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
body { animation: pageFade var(--dur-slow) var(--ease-smooth); }

/* sala */
body.in-room .topbar    { animation: riseIn var(--dur-slow) var(--ease-out-soft) backwards; }
body.in-room .side-panel { animation: slideInLeft var(--dur-slow) var(--ease-out-soft) 60ms backwards; }
body.in-room .stage-col  { animation: riseIn var(--dur-slow) var(--ease-out-soft) 120ms backwards; }
body.in-room .room-chat  { animation: slideInRight var(--dur-slow) var(--ease-out-soft) 180ms backwards; }

/* landing: cada bloco entra um pouco depois do anterior */
body:not(.in-room) > :not(.modal-backdrop):not(script):not(style) {
  animation: riseIn var(--dur-slow) var(--ease-out-soft) backwards;
}
body:not(.in-room) > :nth-child(2) { animation-delay: 60ms; }
body:not(.in-room) > :nth-child(3) { animation-delay: 120ms; }
body:not(.in-room) > :nth-child(4) { animation-delay: 180ms; }
body:not(.in-room) > :nth-child(n+5) { animation-delay: 240ms; }

/* ---- painéis laterais: deslizam em vez de sumir ----
   Em vez de display:none, a largura vai a zero (e o conteúdo some em fade).
   O conteúdo interno mantém a largura cheia pra não "espremer" durante o
   movimento. */
.room-chat {
  --chat-w: 320px;
  width: var(--chat-w);
  transition:
    width var(--dur-slow) var(--ease-smooth),
    opacity var(--dur) var(--ease-smooth),
    border-color var(--dur-slow) var(--ease-smooth);
}
.room-chat > * { min-width: var(--chat-w); }
.room-chat.hidden {
  width: 0;
  min-width: 0;
  opacity: 0;
  border-left-color: transparent;
  pointer-events: none;
}

.side-panel {
  --panel-w: 232px;
  width: var(--panel-w);
  overflow-x: hidden;
  transition:
    width var(--dur-slow) var(--ease-smooth),
    opacity var(--dur) var(--ease-smooth),
    padding var(--dur-slow) var(--ease-smooth),
    border-color var(--dur-slow) var(--ease-smooth);
}
.side-panel > * { min-width: calc(var(--panel-w) - 28px); }
.side-panel.hidden {
  width: 0;
  min-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .room-chat  { --chat-w: 280px; }
  .side-panel { --panel-w: 190px; }
}

/* Telas estreitas empilham os painéis na vertical: ali "largura zero" não faz
   sentido, então volta a esconder de verdade. */
@media (max-width: 960px) {
  .room-chat, .side-panel { --chat-w: 100%; width: 100%; }
  .room-chat > *, .side-panel > * { min-width: 0; }
  .room-chat.hidden, .side-panel.hidden { display: none; }
}

/* ---- tiles: entrada, saída e troca de destaque ---- */
.tile { transform-origin: center; }
.tile-enter { opacity: 0; transform: scale(0.94); }
.tile-enter-active {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--dur-slow) var(--ease-out-soft),
    transform var(--dur-slow) var(--ease-out-soft);
}
.tile-exit { opacity: 1; transform: scale(1); }
.tile-exit-active {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--dur) var(--ease-smooth),
    transform var(--dur) var(--ease-smooth);
}
/* o vídeo em destaque troca de altura máxima de forma gradual */
.video-wrap {
  transition:
    border-color var(--dur) var(--ease-smooth),
    max-height var(--dur-slow) var(--ease-smooth);
}
.tile-rtt {
  color: var(--overlay-text-muted);
  white-space: nowrap;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

/* ---- popovers, dropdowns e toasts ---- */
.mod-menu, .participant-preview {
  animation: popIn var(--dur) var(--ease-out-soft);
  transform-origin: top left;
}
.share-room[open] > .share-room-body {
  animation: popIn var(--dur) var(--ease-out-soft);
  transform-origin: top right;
}

.toast {
  animation: toastIn var(--dur-slow) var(--ease-out-soft);
  transition: opacity var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-smooth);
}
.toast.toast-out { opacity: 0; transform: translateY(8px) scale(0.98); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ---- modais: o fade de saída que faltava (a entrada já existia) ---- */
@keyframes modalBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.modal-backdrop.is-closing {
  animation: modalBackdropOut var(--dur-fast) var(--ease-smooth) forwards;
  pointer-events: none;
}
.modal-backdrop.is-closing .modal {
  animation: modalOut var(--dur-fast) var(--ease-smooth) forwards;
}

/* ---- mensagens do chat chegam subindo suavemente ---- */
.chat-msg, .chat-poll { animation: riseIn var(--dur) var(--ease-out-soft) backwards; }

/* ---- troca de tema: crossfade em tudo, só durante a troca ---- */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color var(--dur-slow) var(--ease-smooth),
    border-color var(--dur-slow) var(--ease-smooth),
    color var(--dur-slow) var(--ease-smooth),
    box-shadow var(--dur-slow) var(--ease-smooth),
    fill var(--dur-slow) var(--ease-smooth),
    stroke var(--dur-slow) var(--ease-smooth) !important;
}

/* ---- banner do perfil (v2.1) ---- */
/* Cada banner define --banner-bg; o background lê dela. Assim o hover/focus
   global de `button` (verde) não consegue sobrescrever a cor das amostras. */
.profile-banner-none   { --banner-bg: var(--surface-2); }
.profile-banner-signal { --banner-bg: linear-gradient(135deg, #184d33, #0c2318); }
.profile-banner-sunset { --banner-bg: linear-gradient(135deg, #7a3b12, #451209); }
.profile-banner-violet { --banner-bg: linear-gradient(135deg, #3c1f6b, #1c0f33); }
.profile-banner-ocean  { --banner-bg: linear-gradient(135deg, #0d3d4a, #0a1f2e); }

:root[data-theme="light"] .profile-banner-signal { --banner-bg: linear-gradient(135deg, #bfe9d1, #8fd1ac); }
:root[data-theme="light"] .profile-banner-sunset { --banner-bg: linear-gradient(135deg, #f6cfa6, #eaa183); }
:root[data-theme="light"] .profile-banner-violet { --banner-bg: linear-gradient(135deg, #d6c6f2, #b5a0e0); }
:root[data-theme="light"] .profile-banner-ocean  { --banner-bg: linear-gradient(135deg, #bde3ee, #8cc3d6); }

.profile-banner-none, .profile-banner-signal, .profile-banner-sunset,
.profile-banner-violet, .profile-banner-ocean { background: var(--banner-bg); }

.banner-swatches { display: flex; gap: 8px; margin-top: 4px; }
.banner-swatch {
  width: 36px; height: 24px;
  border-radius: 5px;
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth);
}
.banner-swatch:hover, .banner-swatch:focus-visible, .banner-swatch:active { background: var(--banner-bg); }
.banner-swatch:hover, .banner-swatch:active { box-shadow: none; }
.banner-swatch:hover { transform: translateY(-1px); border-color: var(--border-bright); }
.banner-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--signal);
}

/* ---- respeita quem pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  /* o brilho "ao vivo" e partículas da tela vazia são decorativos e infinitos —
     paradas, não "1 ciclo de 0.01ms". */
  .tile-live-glow, .stage-empty-art .scan, .stage-empty-art .mote { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.2 — PAINEL DE CONTAS LIVEKIT (admin.html) + atalho na tela inicial
   ═══════════════════════════════════════════════════════════════════════ */

.lk-page { width: 100%; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.lk-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lk-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.86rem; color: var(--text-muted);
  padding: 7px 10px; margin-left: -10px; border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.lk-back:hover { color: var(--text); background: var(--surface-2); }
.lk-back .ico { width: 16px; height: 16px; }

.lk-title { margin: 0; }
.lk-lead { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; max-width: 62ch; }

.lk-active-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--signal-dim);
  border-radius: var(--radius-md);
  background: var(--signal-wash);
}
.lk-active-banner[hidden] { display: none; }
.lk-active-banner .lk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); flex-shrink: 0; }
.lk-active-banner.is-empty { border-color: var(--tally); background: var(--tally-wash); }
.lk-active-banner.is-empty .lk-dot { background: var(--tally); box-shadow: 0 0 0 4px var(--tally-wash); }
.lk-active-text { font-size: 0.92rem; }
.lk-active-text strong { font-weight: 600; }
.lk-active-sub { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }

.lk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 16px;
}

.lk-card {
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.lk-card.is-active { border-color: var(--signal-dim); box-shadow: var(--glow-signal); }
.lk-card.is-env { background: var(--surface-2); }

.lk-card-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.lk-slot {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--text-muted); border: 1px solid var(--border-bright);
  border-radius: 3px; padding: 3px 7px; flex-shrink: 0;
}
.lk-card-title { font-weight: 600; font-size: 0.98rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-card-title.is-empty { color: var(--text-muted); font-weight: 500; }
.lk-badge-live {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--signal); border: 1px solid var(--signal-dim); background: var(--signal-wash);
  border-radius: 3px; padding: 3px 8px;
}

.lk-fields { display: flex; flex-direction: column; gap: 10px; }
.lk-field { display: flex; flex-direction: column; gap: 5px; }
.lk-field > label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; }
.lk-card input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.lk-card.is-env input { background: var(--surface); }
.lk-card input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
.lk-card input[readonly] { color: var(--text-muted); cursor: default; }
.lk-card input[readonly]:focus { border-color: var(--border); box-shadow: none; }

.lk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.lk-actions button { padding: 9px 13px; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 7px; }
.lk-actions button .ico { width: 15px; height: 15px; }
.lk-actions .lk-spacer { flex: 1; }
/* botões desabilitados precisam parecer desabilitados (o estilo global de
   .secondary/.danger ganhava do :disabled e deixava tudo com cara de ativo) */
.lk-actions button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.lk-actions button.secondary:disabled { background: transparent; color: var(--text-muted); border-color: var(--border); }
.lk-actions button.danger:disabled { background: transparent; color: var(--text-muted); border-color: var(--border); }

.lk-status { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.45; min-height: 1.2em; color: var(--text-muted); }
.lk-status.ok { color: var(--signal); }
.lk-status.err { color: var(--tally); }

.lk-note { margin: 0; }
.lk-fatal {
  padding: 22px; text-align: center; color: var(--text-muted); line-height: 1.6;
}
.lk-fatal strong { color: var(--text); display: block; margin-bottom: 6px; }

/* atalho flutuante na tela inicial — só aparece pra quem acessa pelo localhost */
.lk-admin-link {
  position: fixed; top: 62px; right: 16px; z-index: 50;
  display: none; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.lk-admin-link.is-visible { display: inline-flex; }
.lk-admin-link:hover { border-color: var(--signal-dim); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.lk-admin-link .ico { width: 15px; height: 15px; color: var(--signal); }
.lk-admin-link .lk-admin-name { color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); font-size: 0.74rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .lk-admin-link .lk-admin-name { display: none; } }


/* ───── contas de usuário (auth.js) ───── */
.account-slot { position: fixed; top: 16px; right: 64px; z-index: 50; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 6px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.acct-btn:hover { background: var(--surface-2); border-color: var(--signal-dim); }
.acct-btn-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--signal); color: #06120b; font-weight: 700; font-size: 0.78rem;
}
.acct-modal { max-width: 440px; }
.acct-modal.acct-wide { max-width: 640px; }
.acct-form, .acct-body { gap: 14px; overflow-y: auto; }
.acct-msg { min-height: 1.2em; }
.acct-link {
  background: none; border: none; padding: 2px 0; color: var(--text-muted);
  font-size: 0.82rem; text-decoration: underline; text-align: center;
}
.acct-link:hover { background: none; color: var(--text); }
.acct-email { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); word-break: break-all; }
.acct-inline { display: flex; gap: 8px; }
.acct-inline input { flex: 1; min-width: 0; }
.acct-inline button { width: auto; padding: 0 16px; white-space: nowrap; }
.acct-section { display: flex; flex-direction: column; gap: 8px; }
.acct-section-title {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--text-muted); text-transform: uppercase;
}
.acct-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.acct-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.acct-row-main { flex: 1; min-width: 160px; }
.acct-row-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; word-break: break-word; }
.acct-row-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.acct-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.acct-enter {
  padding: 7px 12px; font-size: 0.8rem; font-weight: 600; border-radius: 3px;
  background: var(--signal); color: #06120b; text-decoration: none;
}
.acct-mini { width: auto; padding: 7px 10px; font-size: 0.78rem; }
.acct-danger:hover { border-color: var(--tally); color: var(--tally); }
.acct-badge {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border-bright); color: var(--text-muted);
}
.acct-badge.is-public { border-color: var(--signal-dim); color: var(--signal); }
.acct-bans { width: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 0.78rem; color: var(--text-muted); }
.acct-ban { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 640px) {
  .acct-btn-name { display: none; }
  .acct-btn { padding: 0 6px; }
  .account-slot { right: 60px; }
}

/* ───── administradores (admin.html) ───── */
.acct-admin-link {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px;
  border: 1px solid var(--signal-dim); border-radius: var(--radius-sm);
  background: var(--signal-wash); text-decoration: none; color: var(--text);
}
.acct-admin-link strong { color: var(--signal); font-size: 0.9rem; }
.acct-admin-link span { font-size: 0.78rem; color: var(--text-muted); }
.acct-admin-link:hover { border-color: var(--signal); }

.adm-section { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.adm-section[hidden] { display: none; }
.adm-title { font-size: 1.05rem; font-weight: 700; }
.adm-lead { margin: 0; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
.adm-list { display: flex; flex-direction: column; gap: 8px; }
.adm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.adm-info { min-width: 0; }
.adm-name { font-weight: 600; font-size: 0.9rem; word-break: break-word; }
.adm-mail { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); word-break: break-all; }
.adm-remove { width: auto; padding: 8px 12px; font-size: 0.8rem; flex-shrink: 0; }
.adm-remove:hover { border-color: var(--tally); color: var(--tally); }
.adm-add { display: flex; gap: 8px; }
.adm-add input { flex: 1; min-width: 0; }
.adm-add button { width: auto; padding: 0 18px; white-space: nowrap; }
@media (max-width: 560px) { .adm-add { flex-direction: column; } .adm-add button { padding: 12px; } }


/* ═══════════════════════════════════════════════════════════════════════
   v2.5 — PERFIL COMPLETO: banner GIF, status, jogo favorito, card novo
   ═══════════════════════════════════════════════════════════════════════ */

/* banner de imagem/GIF: o background-image vem inline (URL dinâmica) */
.profile-banner-image {
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- editor: abas do banner ---- */
.banner-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.banner-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; font-size: 0.78rem; font-weight: 600;
  background: transparent; border: 1px solid transparent; border-radius: calc(var(--radius-md) - 2px);
  color: var(--text-muted); box-shadow: none;
}
.banner-tab .ico { width: 14px; height: 14px; }
.banner-tab:hover { color: var(--text); background: var(--surface-3); box-shadow: none; }
.banner-tab.is-active { color: var(--signal); background: var(--signal-wash); border-color: var(--signal-dim); }
.banner-tab-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.banner-url-row { display: flex; gap: 8px; }
.banner-url-row input { flex: 1; min-width: 0; }
.banner-url-row button { width: auto; padding: 0 16px; }

.gif-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: 188px; overflow-y: auto; padding: 2px;
}
.gif-thumb {
  aspect-ratio: 16 / 9; padding: 0; border-radius: 5px;
  border: 2px solid transparent; cursor: pointer;
  background-color: var(--surface-3); background-size: cover; background-position: center;
  box-shadow: none; transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.gif-thumb:hover, .gif-thumb:focus-visible { transform: scale(1.03); border-color: var(--border-bright); background-color: var(--surface-3); box-shadow: none; }
.gif-thumb.is-active { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-wash); }

.profile-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-grid-2 > div { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.field-opt { text-transform: none; letter-spacing: 0; opacity: 0.7; font-size: 0.68rem; }

/* texto sempre legível por cima de GIF: o editor e o cartão do chat ganham
   uma película escura leve quando o banner é imagem */
.profile-editor, .profile-card { position: relative; isolation: isolate; }
.profile-editor.profile-banner-image::before,
.profile-card.profile-banner-image::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 11, 10, 0.72), rgba(8, 11, 10, 0.35));
}
.profile-editor.profile-banner-image .btn,
.profile-card.profile-banner-image .profile-name,
.profile-card.profile-banner-image .profile-sub { color: #f2f5f3; }

/* ---- card de participante (lista lateral) ---- */
.participant-chip { gap: 12px; padding: 10px 11px 10px 14px; }
.p-avatar-wrap {
  flex-shrink: 0; padding: 3px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
}
.p-avatar-wrap .avatar { border-radius: 6px; }
.p-tagline {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 0.7rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-tagline .ico { width: 11px; height: 11px; flex-shrink: 0; color: var(--signal-dim); }
.p-name { gap: 3px; }

/* ---- popover de perfil (clique num participante) ---- */
.participant-preview { width: 292px; padding: 0 14px 14px; overflow: hidden; }
.pp-head {
  position: relative; isolation: isolate;
  min-height: 104px; align-items: flex-end;
  margin: 0 -14px 12px; padding: 40px 14px 14px;
  border-radius: 0;
  background-size: cover; background-position: center;
}
.pp-head-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 11, 10, 0.05) 0%, rgba(8, 11, 10, 0.78) 100%);
  pointer-events: none;
}
.pp-head .pp-name, .pp-head .pp-status { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.pp-head .pp-name { font-size: 1.02rem; color: #f2f5f3; }
.pp-head .pp-status:not(.is-live) { color: rgba(242, 245, 243, 0.78); }
.pp-bio { font-size: 0.84rem; line-height: 1.45; color: var(--text); margin: 0 0 10px; word-break: break-word; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.pp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; font-family: var(--font-mono);
  padding: 3px 8px; border-radius: 999px;
  color: var(--signal); background: var(--signal-wash); border: 1px solid var(--signal-dim);
}
.pp-tag .ico { width: 12px; height: 12px; }
.pp-tag-muted { color: var(--text-muted); background: var(--surface-3); border-color: var(--border-bright); }

@media (max-width: 560px) { .profile-grid-2 { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════
   3.0 — REDESIGN VISUAL
   Camada final: troca paleta, tipografia, raios e os componentes principais
   (landing, topbar, participantes, palco, chat, modais). Fica por último de
   propósito: o resto do arquivo continua valendo, só que com a nova cara.
   Pra voltar ao visual antigo, apague daqui até o fim do arquivo e restaure
   o @import da primeira linha.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0C0D11;
  --surface: #14151B;
  --surface-2: #1B1D25;
  --surface-3: #23252F;
  --border: #262833;
  --border-bright: #343846;
  --text: #F2F3F7;
  --text-muted: #9A9FAE;
  --signal: #C8F25A;
  --signal-dim: #8FB83A;
  --signal-wash: rgba(200, 242, 90, 0.10);
  --on-signal: #0C0D11;
  --tally: #FF5A4E;
  --tally-wash: rgba(255, 90, 78, 0.14);
  --amber: #FFC857;
  --font-display: 'Instrument Sans', system-ui, sans-serif;
  --font-heading: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --topbar-h: 68px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: none;
  --shadow-md: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
  --glow-signal: none;
  --glow-tally: 0 0 0 1px rgba(255, 90, 78, 0.55);
}

:root[data-theme="light"] {
  --bg: #F3F4F8;
  --surface: #FFFFFF;
  --surface-2: #F3F4F8;
  --surface-3: #E8EAF0;
  --border: #E1E3EB;
  --border-bright: #CDD0DB;
  --text: #14151B;
  --text-muted: #5B6072;
  --signal: #4D7C0F;
  --signal-dim: #3F6A0B;
  --signal-wash: rgba(77, 124, 15, 0.10);
  --on-signal: #FFFFFF;
  --tally: #D92D20;
  --tally-wash: rgba(217, 45, 32, 0.09);
  --amber: #B7791F;
  --shadow-md: 0 14px 30px -14px rgba(20, 21, 27, 0.18);
  --shadow-lg: 0 40px 80px -30px rgba(20, 21, 27, 0.25);
}

html, body { font-family: var(--font-display); }
body { font-size: 16px; -webkit-font-smoothing: antialiased; }
:root[data-theme="light"] body { background-image: none; }

h1, h2, .room-name, .stage-empty-title, .landing-col-title {
  font-family: var(--font-heading);
}

/* ---------- botões ---------- */
button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 600;
  box-shadow: none;
}
button:hover { background: color-mix(in srgb, var(--signal) 86%, white); box-shadow: none; transform: none; }
button:active { transform: scale(0.985); box-shadow: none; }
button:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal); }
button.secondary { border-color: var(--border-bright); color: var(--text); }
button.secondary:hover { background: var(--surface-2); border-color: var(--text-muted); box-shadow: none; }
.join-req-approve { color: var(--on-signal); }

.icon-btn { width: 44px; height: 44px; border-radius: 12px; border-color: var(--border); }
.icon-btn:hover { transform: none; border-color: var(--border-bright); }

/* ---------- campos ---------- */
input[type="text"], select {
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 1rem;
}
:root[data-theme="light"] input[type="text"], :root[data-theme="light"] select { background: var(--surface-2); }
input[type="text"]:focus, select:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
.code-input { font-size: 1.5rem; letter-spacing: 0.4em; min-height: 64px; }
label { font-size: 0.85rem; font-weight: 500; }

/* ═══════════ LANDING ═══════════ */
.frame .corner { display: none; }
.landing-copy .frame { padding: 0; }

.landing-bg-grid {
  background-image: radial-gradient(var(--border-bright) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.45;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, black 25%, transparent 80%);
}
:root[data-theme="light"] .landing-bg-grid { opacity: 0.8; }
.landing-bg-glow { display: none; }

.landing-shell { max-width: 1240px; gap: 64px; padding: 32px 40px; }
.landing-copy { max-width: 620px; }

.eyebrow {
  align-self: flex-start;
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.eyebrow-dot { box-shadow: none; animation: none; }

h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  background: none;
  color: var(--text);
  text-wrap: balance;
}
h1 .accent { color: var(--signal); }
p.sub { font-size: 1.1rem; line-height: 1.55; max-width: 46ch; margin-bottom: 0; }

.landing-points { margin: 22px 0 26px; gap: 10px 22px; }
.landing-points li { font-size: 0.92rem; }
.landing-points li .ico { width: 17px; height: 17px; }

.landing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
  gap: 20px;
  box-shadow: var(--shadow-lg);
}
.landing-card::before { display: none; }
.landing-card .landing-name-row { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.landing-card .landing-columns { gap: 28px; }
.landing-col-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; gap: 9px; color: var(--text); }
.landing-col-title .ico { width: 18px; height: 18px; color: var(--signal); }
.landing-divider { background: var(--border); }

.visibility-option { min-height: 48px; border-radius: 12px; }
.visibility-option.is-active { border-color: var(--signal); background: var(--signal-wash); color: var(--signal); }
.switch-row { border-radius: 14px; }

/* prévia da sala (lado direito) */
.landing-preview { max-width: 540px; }
.preview-window {
  border-radius: 24px;
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
  transform: none;
  animation: none;
  aspect-ratio: 4 / 3.1;
}
.preview-topbar { padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.preview-dot { display: none; }
.preview-room-chip {
  margin-left: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
}
.preview-sidebar { width: 24%; background: var(--surface); }
.preview-avatar { border-radius: 50%; width: 24px; height: 24px; }
.preview-avatar.is-live { box-shadow: 0 0 0 2px var(--tally); }
.preview-stage { background: var(--bg); gap: 10px; padding: 12px; }
.preview-tile { border-radius: 14px; border-color: var(--border); }
.preview-tile-a { background: linear-gradient(160deg, #22345C 0%, #121A2E 55%, #0B0F1B 100%); }
.preview-tile-b { background: linear-gradient(150deg, #5A2B3B 0%, #241420 60%, #120C16 100%); }
.preview-tile-tag { border-radius: 999px; padding: 4px 10px; background: rgba(12, 13, 17, 0.78); font-family: var(--font-display); font-size: 0.64rem; font-weight: 600; }
.preview-float { background: var(--surface-2); border-color: var(--border-bright); border-radius: 14px; font-size: 0.85rem; font-weight: 500; animation: none; padding: 11px 16px 11px 12px; }
.preview-float .ico { width: 18px; height: 18px; }
.preview-float-1 { top: 2%; right: -2%; }
.preview-float-2 { bottom: 4%; left: -4%; }

/* ═══════════ SALA: TOPBAR ═══════════ */
.topbar { background: var(--bg); box-shadow: none; padding: 0 20px; border-bottom: 1px solid var(--border); }

.home-btn {
  width: 44px; height: 44px;
  background: var(--signal);
  color: var(--on-signal);
  border: none;
  border-radius: 12px;
}
.home-btn:hover { color: var(--on-signal); border: none; transform: none; background: color-mix(in srgb, var(--signal) 86%, white); }

.room-ident { align-items: center; gap: 12px; }
.room-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.room-code-chip {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  padding: 5px 11px;
}

.status-cluster { background: transparent; border: none; border-radius: 0; overflow: visible; gap: 8px; height: auto; }
.status-seg {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
}
.status-seg + .status-seg::before { display: none; }
.status-seg .ico { width: 14px; height: 14px; }
.status-seg.status-live { background: var(--tally-wash); border-color: transparent; font-weight: 600; }
.status-seg.status-mod { background: rgba(255, 200, 87, 0.12); border-color: transparent; font-weight: 600; }
:root[data-theme="light"] .status-seg.status-mod { background: rgba(183, 121, 31, 0.12); }
.status-seg.status-public { border-color: var(--signal-dim); }

.conn-pill { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0; border-radius: 999px; padding: 6px 12px; border-color: var(--border); }
.conn-pill::before { border-radius: 50%; transform: none; }

.topbar-share { height: 44px; min-height: 44px; padding: 0 18px; font-size: 0.95rem; box-shadow: none; animation: none; }
.topbar-share:hover { box-shadow: none; }
.topbar-video, .share-room summary { min-height: 44px; font-size: 0.95rem; border-radius: 12px; }

.icon-toolbar { background: var(--surface); border-color: var(--border); border-radius: 14px; padding: 3px; gap: 2px; }
.icon-toolbar .icon-btn { width: 40px; height: 40px; min-height: 40px; border-radius: 11px; }
.icon-toolbar-divider { display: none; }

/* ═══════════ SALA: PARTICIPANTES ═══════════ */
.side-panel { width: 280px; background: var(--surface); border-right: 1px solid var(--border); padding: 18px 14px; }
.panel-title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; padding: 0 6px; }
.participant-chip {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 10px;
  gap: 12px;
  font-size: 0.95rem;
}
.participant-chip::before { display: none; }
.participant-chip:hover { background: var(--surface-2); border-color: transparent; box-shadow: none; transform: none; }
.participant-chip.sharing { background: var(--tally-wash); }

.avatar, .avatar-letter { border-radius: 50%; }
.avatar-lg { border-radius: 50%; }

/* ═══════════ SALA: PALCO ═══════════ */
.stage-col { padding: 20px; }
.video-wrap { border-radius: 18px; border-color: var(--border); }
.tile.featured .video-wrap { border-color: var(--border); }
.tile-label {
  top: 12px; left: 12px;
  border: none;
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(12, 13, 17, 0.78);
}
.stage-empty-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.stage-share-btn { min-height: 48px; padding: 0 22px; }

/* ═══════════ SALA: CHAT ═══════════ */
.room-chat { background: var(--surface); border-left: 1px solid var(--border); }
.chat-header { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.chat-msg { border-radius: 12px; }
.chat-msg.own { background: var(--signal-wash); }
.chat-form input { min-height: 44px; }
.chat-form button { min-height: 44px; }
.chat-tool-btn { min-width: 44px; min-height: 44px; border-radius: 12px; }
.profile-card { border-radius: 16px; }

/* ═══════════ MODAIS ═══════════ */
.modal-backdrop { background: rgba(7, 8, 11, 0.72); }
:root[data-theme="light"] .modal-backdrop { background: rgba(20, 21, 27, 0.45); }
.modal { border-radius: 24px; border-color: var(--border); box-shadow: var(--shadow-lg); max-width: 520px; }
.modal-head { padding: 22px 24px 16px; border-bottom: none; }
.modal-head h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.modal-body { padding-left: 24px; padding-right: 24px; }
.modal-foot { padding: 18px 24px; background: var(--bg); border-top: 1px solid var(--border); }
.source-card { border-radius: 16px; }
.source-card.is-active { border-color: var(--signal); background: var(--signal-wash); color: var(--signal); }

.beta-tag { border-radius: 6px; }

@media (max-width: 640px) {
  .landing-shell { padding: 24px 16px; }
  .side-panel { width: auto; }
}

/* ---- ajustes finos da landing (3.0) ---- */
.landing-copy { flex: 1 1 560px; max-width: 660px; }
.landing-preview { flex: 1 1 400px; max-width: 520px; }
h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); }
.landing-card .landing-columns { gap: 32px; }
.landing-card { padding: 28px; }
.preview-window { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 400px; }
.preview-body { height: auto; flex: 1; min-height: 0; }
.preview-float-1 { top: -4%; right: -3%; }
.preview-float-2 { bottom: -3%; left: -5%; }

/* ═══════════════════════════════════════════════════════════════════════
   3.1 — LANDING IGUAL AO DESIGN APROVADO (cabeçalho, abas, prévia da sala)
   ═══════════════════════════════════════════════════════════════════════ */

.lp { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

.lp-nav {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.lp-logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.lp-logo-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--signal); color: var(--on-signal); display: grid; place-items: center; }
.lp-nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-nav .account-slot { position: static; }
.lp-nav .lk-admin-link { position: static; }
.lp-nav .theme-toggle-btn { position: static; }
.lp-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text-muted); border: none;
  min-height: 44px; padding: 0 16px; font-size: 0.95rem; font-weight: 500;
}
.lp-ghost:hover { background: var(--surface-2); color: var(--text); }
.lp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tally); }

.lp-hero {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 40px 56px; flex: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 56px; align-items: center;
}
.lp-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lp-copy-head { display: flex; flex-direction: column; }
.lp-copy-head .eyebrow { margin-bottom: 18px; }
.lp-copy-head h1 { margin-bottom: 18px; }
.lp-copy-head p.sub { max-width: 46ch; }

.lp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-lg);
}
.lp-field { display: flex; flex-direction: column; gap: 8px; }
.lp-field label { color: var(--text-muted); }
.lp-panel { display: flex; flex-direction: column; gap: 18px; }
.lp-panel[hidden] { display: none; }
.lp-card .code-input { min-height: 72px; font-size: 2.1rem; font-weight: 600; letter-spacing: 0.4em; padding: 0 16px 0 calc(16px + 0.4em); }
.lp-card .error-text { margin: -6px 0 0; }

.seg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.seg-tab {
  min-height: 44px; border-radius: 11px; padding: 0 12px;
  background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: 0.95rem; font-weight: 600;
}
.seg-tab:hover { background: transparent; color: var(--text); }
.seg-tab.is-active { background: var(--surface-3); border-color: var(--border-bright); color: var(--text); }
.seg-tab.is-active:hover { background: var(--surface-3); }

.lp-card .visibility-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-card .visibility-option {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 12px; border: 1px solid var(--border-bright);
  background: transparent; color: var(--text); font-size: 0.95rem; font-weight: 600; padding: 0 12px;
}
.lp-card .visibility-option:hover { background: var(--surface-2); }
.lp-card .visibility-option.is-active { border-color: var(--signal); background: var(--signal-wash); color: var(--signal); }
.lp-card .hint-tight { margin: 0; color: var(--text-muted); }
.lp-switch { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
:root[data-theme="light"] .lp-switch { background: var(--surface-2); }

.btn-block { width: 100%; min-height: 54px; border-radius: 14px; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-block .ico { width: 20px; height: 20px; }
.btn-block-soft { width: 100%; min-height: 50px; border-radius: 14px; font-size: 1rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* prévia */
.lp-preview { position: relative; padding: 28px 24px 36px; min-width: 0; }
.rp-window { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.rp-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rp-logo { width: 24px; height: 24px; border-radius: 8px; background: var(--signal); }
.rp-code { font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.12em; padding: 5px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.rp-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--tally-wash); color: var(--tally); font-size: 0.78rem; font-weight: 600; }
.rp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tally); display: inline-block; flex: none; }
.rp-count { margin-left: auto; font-size: 0.82rem; color: var(--text-muted); }
.rp-body { padding: 14px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.rp-tile { position: relative; border-radius: 14px; overflow: hidden; min-height: 130px; color: #fff; }
.rp-tile-a { min-height: 300px; background: linear-gradient(160deg, #22345C 0%, #121A2E 55%, #0B0F1B 100%); color: #C8F25A; }
.rp-tile-b { flex: 1; background: linear-gradient(150deg, #5A2B3B 0%, #241420 60%, #120C16 100%); }
.rp-ring { position: absolute; left: 50%; top: 42%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 1px solid rgba(200, 242, 90, 0.25); }
.rp-cross { position: absolute; left: 50%; top: 42%; margin: -14px 0 0 -14px; }
.rp-hp { position: absolute; left: 14px; bottom: 14px; width: 120px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.rp-hp span { display: block; width: 72%; height: 100%; border-radius: 4px; background: #C8F25A; }
.rp-box { position: absolute; right: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); }
.rp-tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(12, 13, 17, 0.78); color: #F2F3F7; font-size: 0.78rem; font-weight: 600; }
.rp-tag-sm { left: 10px; top: 10px; padding: 5px 10px; font-size: 0.7rem; }
.rp-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rp-chat { flex: 1; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
:root[data-theme="light"] .rp-chat { background: var(--surface-2); }
.rp-bubble { align-self: flex-start; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: var(--surface-3); font-size: 0.78rem; color: var(--text); }
.rp-bubble-me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--signal); color: var(--on-signal); font-weight: 500; }
.rp-people { display: flex; align-items: center; padding: 4px 18px 16px; }
.rp-av { width: 30px; height: 30px; border-radius: 50%; color: #0C0D11; font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); box-sizing: border-box; }
.rp-av + .rp-av { margin-left: -10px; }
.rp-more { margin-left: 10px; font-size: 0.82rem; color: var(--text-muted); }
.rp-float { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-bright); font-size: 0.9rem; font-weight: 500; box-shadow: var(--shadow-md); }
:root[data-theme="light"] .rp-float { background: var(--surface); }
.rp-float .ico { width: 18px; height: 18px; color: var(--signal); }
.rp-float-1 { right: 0; top: 0; }
.rp-float-2 { left: 0; bottom: 0; }

@media (max-width: 640px) {
  .lp-nav, .lp-hero { padding-left: 16px; padding-right: 16px; }
  .lp-preview { display: none; }
  .lp-ghost { display: none; }
}

/* ---- 3.1: sala — avatares redondos, chat e participantes no mesmo estilo ---- */
.avatar, .avatar-sm, .avatar-md, .avatar-lg, .p-avatar-wrap, .p-avatar-wrap .avatar { border-radius: 50%; }
.avatar { border-color: transparent; }
.avatar-letter { font-family: var(--font-display); font-weight: 700; }
.p-name-main, .p-name-text { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.p-substatus, .p-tagline { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0; }
.p-role-chip { font-family: var(--font-display); border-radius: 999px; padding: 2px 8px; font-size: 0.68rem; }
.p-you { font-family: var(--font-display); }

.room-chat { width: 340px; }
.chat-msg .who { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text); }
.chat-msg .when { font-family: var(--font-display); font-size: 0.75rem; }
.chat-msg-text { font-size: 0.95rem; line-height: 1.45; }
.chat-form { gap: 8px; padding: 14px 16px; }
.chat-form input { flex: 1; min-width: 0; min-height: 44px; font-size: 0.95rem; }
.chat-form button[type="submit"] { padding: 0 16px; min-height: 44px; }
.chat-tool-btn { width: 44px; min-width: 44px; }
.chat-header { padding: 18px 20px 14px; border-bottom: none; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; }
.status-seg strong { font-family: var(--font-display); }
.room-chat .profile-card { margin: 0 16px 16px; border: 1px solid var(--border); border-radius: 16px; }


/* ───── home: coluna da direita + botão "Salas ativas" ───── */
.lp-right { display: flex; flex-direction: column; min-width: 0; }
.lp-right .lp-preview { padding-bottom: 22px; }
.rooms-cta {
  display: flex; align-items: center; gap: 14px; width: calc(100% - 48px); margin: 0 24px;
  padding: 16px 20px; text-align: left;
  color: var(--text); background: var(--signal-wash);
  border: 1.5px solid var(--signal-dim); border-radius: 18px;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.rooms-cta:hover { transform: translateY(-2px); border-color: var(--signal); background: var(--signal-wash); }
.rooms-cta:active { transform: translateY(0); }
.rooms-cta-dot {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-bright);
}
.rooms-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rooms-cta-text strong { font-size: 1.05rem; font-weight: 700; }
.rooms-cta-text small { font-size: 0.84rem; color: var(--text-muted); }
.rooms-cta .ico { width: 22px; height: 22px; color: var(--signal); flex-shrink: 0; }
@media (max-width: 640px) {
  .lp-right { margin-top: 4px; }
  .rooms-cta { width: 100%; margin: 0; }
}

/* ───── perfil da conta (cartão) ───── */
.lp-field[hidden], .home-profile[hidden] { display: none !important; }
.pcard { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.pcard-banner { height: 64px; background-color: var(--surface-3); }
.pcard-body { display: flex; align-items: center; gap: 12px; padding: 0 14px 14px; flex-wrap: wrap; }
.pcard-avatar { width: 56px; height: 56px; margin-top: -22px; flex-shrink: 0; border: 3px solid var(--surface-2); font-size: 1.3rem; }
.pcard-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.pcard-meta { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.pcard-name { font-size: 1rem; font-weight: 700; word-break: break-word; }
.pcard-bio { font-size: 0.82rem; color: var(--text-muted); word-break: break-word; }
.pcard-line { font-size: 0.76rem; color: var(--text-muted); }
.pcard-edit { width: auto; padding: 8px 14px; font-size: 0.82rem; margin-top: 8px; }
.home-profile { margin-bottom: 4px; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.acct-actions { display: flex; justify-content: flex-end; gap: 8px; }
.acct-actions button { width: auto; padding: 0 20px; }


/* ───── perfil embaixo, à esquerda (saiu do chat) ───── */
.side-panel { padding-bottom: 0; }
.side-panel .profile-card {
  margin: auto 0 14px; position: sticky; bottom: 14px; z-index: 2;
  border: 1px solid var(--border); border-radius: 16px;
}
.side-panel .profile-card .profile-name { max-width: 100%; }
@media (max-width: 960px) {
  .side-panel .profile-card { position: relative; inset: auto; margin: 0 0 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.8 — CABE NA JANELA (sem barra de rolagem), CARTÃO DA SALA NA LATERAL
   Fica no fim do arquivo de propósito: vence as camadas antigas sem !important.
   Regra geral: em janela de computador (≥ 961px) nada de rolagem na página —
   o que sobra de altura encolhe (espaços, tamanhos, prévias) em vez de rolar.
   Em celular/janela estreita as coisas empilham e a página rola normalmente.
   ═══════════════════════════════════════════════════════════════════════ */

/* Barras de rolagem finas e discretas: o "trilho" só aparece quando você
   passa o mouse em cima da área que rola. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--border-bright) transparent; }

/* ───── cartão da sala (lateral, em cima do cartão de perfil) ───── */
.room-card {
  flex: none;
  display: flex; flex-direction: column; gap: 5px;
  padding: 2px 6px 0;
  min-width: 0;
}
.room-card-name {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-card-meta {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 0.86rem; color: var(--text-muted); white-space: nowrap;
}
.room-card .room-code-chip {
  background: none; border: none; border-radius: 0; padding: 0;
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--text);
}
.room-card-dot { opacity: 0.55; }
.room-card-seg { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.room-card-seg .ico { width: 14px; height: 14px; flex-shrink: 0; }
.room-card-seg strong { color: var(--text); font-weight: 600; font-family: var(--font-display); }
.room-card-seg.status-public { color: var(--signal); }
.room-card-seg.badge-clickable {
  cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: -2px -6px;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.room-card-seg.badge-clickable:hover { background: var(--surface-2); color: var(--text); }
.room-card-age { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }

/* Os badges "moderador" e "ao vivo" continuam na barra de cima. */
.topbar-left .status-cluster { display: flex; align-items: center; gap: 8px; }

/* ───── sala (janela de computador): tudo cabe, nada de rolagem na página ───── */
@media (min-width: 961px) {
  body.in-room, .app { height: 100vh; height: 100dvh; }

  /* Lateral: a lista de pessoas é a única parte que cede (rola por dentro,
     sem barra aparente); o cartão da sala e o seu perfil ficam sempre à vista. */
  .side-panel { overflow: hidden; padding: 16px 14px 14px; gap: 10px; }
  .side-panel .profile-card { position: relative; inset: auto; margin: 0; flex: none; }
  .participants-list {
    flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto;
    gap: 2px; margin: 0 -6px; padding: 0 6px;
    overscroll-behavior: contain;
  }
  .participant-chip { padding: 5px 8px; gap: 10px; }
  .p-avatar-wrap { padding: 2px; }
  .p-avatar-wrap .avatar-md { width: 32px; height: 32px; }
  /* o "⋮" do moderador herdava a altura mínima de 44px dos botões e engordava a linha */
  .p-menu-btn { min-height: 0; height: 28px; width: 24px; padding: 0; display: grid; place-items: center; }
  /* nome em cima; "assistindo" e o jogo favorito lado a lado embaixo */
  .p-name { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 0; align-items: center; }
  .p-name-main { grid-column: 1 / -1; }
  .p-substatus { grid-column: 1; }
  .p-tagline { grid-column: 2; }

  /* Palco: as transmissões dividem a altura disponível em vez de empurrar
     a página pra baixo. Cada vídeo mantém 16:9, centralizado na sua célula. */
  .stage-col { overflow: hidden; padding: 16px; }
  .stage-frame { min-height: 0; }
  .stage { container-type: size; container-name: stagebox; }
  .stage-grid {
    flex: 1; min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
  }
  .stage-grid:has(> .tile:nth-child(3))  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-grid:has(> .tile:nth-child(5))  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-grid:has(> .tile:nth-child(10)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* palco largo (mais "deitado" que 16:9): duas transmissões ficam lado a lado */
  @container stagebox (min-aspect-ratio: 9/5) {
    .stage-grid:has(> .tile:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stage-grid:has(> .tile:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stage-grid:has(> .tile:nth-child(10)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* com uma transmissão em destaque: ela ocupa a maior parte, as outras ficam numa faixa embaixo */
  .stage-grid:has(> .tile.featured) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: minmax(0, 3fr);
  }
  .tile { min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; }
  .stage-grid .tile .video-wrap { width: min(100cqw, calc(100cqh * 16 / 9)); max-height: none; }
}

/* Alturas baixas: lista de pessoas mais enxuta (uma linha por pessoa) */
@media (min-width: 961px) and (max-height: 760px) {
  .side-panel { padding-top: 12px; gap: 8px; }
  .participant-chip { padding: 3px 8px; }
  .p-avatar-wrap .avatar-md { width: 26px; height: 26px; }
  .p-avatar-wrap .avatar-md.avatar-letter { font-size: 0.8rem; }
  .p-menu-btn { height: 26px; }
  .p-name { display: flex; flex-direction: row; align-items: center; }
  .p-name-main { flex: 1; min-width: 0; }
  .p-substatus { font-size: 0; gap: 0; flex-shrink: 0; }   /* só a bolinha (verde/vermelha) */
  .p-tagline { display: none; }
  .room-card-name { font-size: 1.15rem; }
  .side-panel .profile-card { padding: 8px 12px; }
}

@media (min-width: 961px) and (max-height: 660px) {
  .side-panel { padding-top: 10px; gap: 6px; }
  .participant-chip { padding: 2px 8px; }
  .p-avatar-wrap .avatar-md { width: 22px; height: 22px; }
  .p-avatar-wrap .avatar-md.avatar-letter { font-size: 0.72rem; }
  .p-menu-btn { height: 24px; }
  .panel-title { font-size: 0.72rem; }
}

/* Telas estreitas (empilhadas): a lateral volta a crescer com o conteúdo */
@media (max-width: 960px) {
  .side-panel { max-height: none; }
  .room-card { padding-bottom: 4px; }
}

/* ───── home: cabe na altura da janela ───── */
@media (min-width: 961px) {
  html:has(body:not(.in-room)), body:not(.in-room) { height: 100vh; height: 100dvh; overflow: hidden; }
  body:not(.in-room) .lp {
    height: 100vh; height: 100dvh; min-height: 0;
    overflow-x: hidden; overflow-y: auto;   /* só rola em janela absurdamente baixa */
  }
  .lp-nav { flex: none; padding-top: clamp(8px, 2vh, 24px); padding-bottom: clamp(4px, 1.4vh, 24px); }
  .lp-hero {
    flex: 1 1 auto; min-height: 0;
    padding-top: 0; padding-bottom: clamp(10px, 3vh, 48px);
    gap: clamp(28px, 4vw, 56px);
  }
  .lp-copy { gap: clamp(10px, 2.4vh, 28px); }
  .lp-copy-head .eyebrow { margin-bottom: clamp(6px, 1.6vh, 18px); }
  .lp-copy-head h1 { margin-bottom: clamp(6px, 1.6vh, 18px); font-size: clamp(1.9rem, 6.4vh, 3.9rem); line-height: 1.08; }
  .lp-copy-head p.sub { font-size: clamp(0.84rem, 1.9vh, 0.96rem); line-height: 1.5; }

  .lp-card { padding: clamp(12px, 2.4vh, 24px) clamp(16px, 2vw, 24px); gap: clamp(8px, 1.8vh, 20px); }
  .lp-panel { gap: clamp(8px, 1.7vh, 18px); }
  .lp-field { gap: clamp(4px, 0.9vh, 8px); }
  .lp-card input[type="text"] { min-height: clamp(38px, 5.2vh, 48px); }
  .seg-tab { min-height: clamp(34px, 4.8vh, 44px); }
  .lp-card .visibility-option { min-height: clamp(36px, 5.2vh, 48px); }
  .lp-switch { padding: clamp(8px, 1.5vh, 14px) 16px; }
  .btn-block { min-height: clamp(42px, 6vh, 54px); }
  .btn-block-soft { min-height: clamp(40px, 5.4vh, 50px); }
  .lp-card .code-input { min-height: clamp(52px, 8.5vh, 72px); font-size: clamp(1.5rem, 3.6vh, 2.1rem); }
  .lp-card .divider { margin: 0; }

  /* perfil da conta (logado): faixa e foto menores quando falta altura */
  .pcard-banner { height: clamp(14px, 3.4vh, 44px); }
  .pcard-body { flex-wrap: nowrap; padding-bottom: clamp(8px, 1.4vh, 14px); }
  .pcard-avatar { width: clamp(38px, 5.6vh, 56px); height: clamp(38px, 5.6vh, 56px); margin-top: -14px; }
  .pcard-meta { padding-top: 4px; min-width: 0; }
  .pcard-bio { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .pcard-edit { margin-top: 0; flex-shrink: 0; }

  /* prévia decorativa: encolhe com a altura, sem cortar */
  .lp-right { min-height: 0; }
  .lp-preview { padding: clamp(12px, 3vh, 28px) 24px clamp(10px, 2vh, 22px); }
  .rp-top { padding: clamp(8px, 1.6vh, 14px) 18px; }
  .rp-body { padding: clamp(8px, 1.4vh, 14px); gap: clamp(8px, 1.4vh, 12px); }
  .rp-tile { min-height: clamp(70px, 14vh, 130px); }
  .rp-tile-a { min-height: clamp(130px, 31vh, 300px); }
  .rp-people { padding-bottom: clamp(8px, 1.6vh, 16px); }
  .rooms-cta { padding: clamp(10px, 1.8vh, 16px) 20px; }
}
@media (min-width: 961px) and (max-height: 920px) {
  .pcard-line { display: none; }
  .lp-copy-head .eyebrow { display: none; }
}
@media (min-width: 961px) and (max-height: 860px) {
  .rp-float { display: none; }
  .pcard-bio { display: none; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .lp-copy-head p.sub { display: none; }
  .lp-card .hint-tight { display: none; }
}
@media (min-width: 961px) and (max-height: 700px) {
  .lp-switch .switch-label small { display: none; }
}
/* janela de computador mais estreita: só o formulário, centralizado */
@media (min-width: 961px) and (max-width: 1099px) {
  .lp-hero { grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; }
  /* some só a prévia decorativa; o botão "Salas ativas" continua (monitor em pé / janela estreita) */
  .lp-right { display: flex; margin-top: 0; }
  .lp-right .lp-preview { display: none; }
  .rooms-cta { width: 100%; margin: 0; }
}

/* celular: a barra de ícones (agora com o botão de som) quebra de linha em vez de vazar pro lado */
@media (max-width: 560px) {
  .topbar-right { max-width: 100%; }
  .icon-toolbar { flex-wrap: wrap; max-width: 100%; }
  .icon-toolbar .icon-btn { width: 36px; height: 36px; min-height: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.8.1 — correções
   ═══════════════════════════════════════════════════════════════════════ */

/* A película escura dos cartões com banner GIF nunca pode capturar clique
   (na 2.8 ela escapou do cartão e cobriu a sala inteira). */
.profile-editor.profile-banner-image::before,
.profile-card.profile-banner-image::before { pointer-events: none; }

/* Sem transmissões: o grid vazio não toma espaço, então o aviso
   "Ninguém está transmitindo" (e o botão) ficam centralizados no palco. */
.stage-grid:empty { display: none; }

/* Home: o banner do perfil ganha bem mais presença (era uma faixa de ~30%).
   Em janelas baixas ele ainda encolhe, mas nunca vira só um risco. */
.pcard-banner { height: 108px; background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (min-width: 961px) {
  .pcard-banner { height: clamp(52px, 11.5vh, 118px); }
  .pcard-avatar { margin-top: -18px; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .pcard-banner { height: clamp(44px, 9vh, 70px); }
}

/* Seleção de GIF bem visível: anel colorido + ✓ no canto; os outros escurecem um pouco */
.gif-thumb { position: relative; }
.gif-grid.has-selection .gif-thumb:not(.is-active) { opacity: 0.55; }
.gif-grid.has-selection .gif-thumb:not(.is-active):hover { opacity: 1; }
.gif-thumb.is-active,
.gif-thumb.is-active:hover,
.gif-thumb.is-active:focus-visible {
  opacity: 1; transform: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 2px var(--signal), 0 4px 14px rgba(0, 0, 0, 0.45);
}
.gif-thumb.is-active::after {
  content: '✓';
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  color: #0b0d0c; background: var(--signal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.gif-grid { padding: 4px; }

/* Aviso leve "sem áudio": chip dentro do tile de quem transmite sem som */
.no-audio-chip {
  display: none; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
  align-items: center; gap: 6px; padding: 3px 10px;
  font-size: 0.7rem; font-weight: 600; color: var(--overlay-text, #f2f5f3);
  background: rgba(14, 16, 15, 0.8); border: 1px solid var(--border-bright); border-radius: 999px;
  backdrop-filter: blur(6px); cursor: help; white-space: nowrap; max-width: calc(100% - 16px);
}
.no-audio-chip.visible { display: inline-flex; }
.no-audio-chip .ico, .no-audio-chip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--tally, #e5534b); }
.no-audio-chip span { overflow: hidden; text-overflow: ellipsis; }

/* Tiles pequenos (as telas que não estão em destaque): controles compactos,
   fáceis de acertar. Os botões globais têm altura mínima de 44px, que nas
   miniaturas virava um bloco gigante cobrindo o vídeo. */
.video-controls button, .tile-volume-group .tile-mute { min-height: 0; }
.video-controls button { display: grid; place-items: center; height: 28px; min-width: 28px; padding: 0 7px; }
@container (max-width: 420px) {
  .video-controls { bottom: 5px; right: 5px; gap: 3px; }
  .video-controls button { height: 22px; min-width: 22px; padding: 0 4px; }
  .video-controls .ico, .video-controls svg { width: 12px; height: 12px; }
  .video-controls .tile-clip, .video-controls .tile-pip { display: none; }
  .tile-volume-group { bottom: 5px; left: 5px; padding: 2px 6px; gap: 5px; }
  .tile-volume { width: 44px; }
  .tile-label { top: 4px; left: 4px; padding: 2px 6px; font-size: 0.6rem; gap: 4px; }
  .tile-label .tile-timer, .tile-label .tile-rtt { display: none; }
  .no-audio-chip { top: 4px; padding: 2px 7px; font-size: 0.6rem; }
}
@container (max-width: 260px) {
  .video-controls .tile-stats { display: none; }
  .tile-volume { display: none; }
  .no-audio-chip span { display: none; }
  .no-audio-chip { padding: 2px 5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.9 — Prime (beta)
   ═══════════════════════════════════════════════════════════════════════ */
:root { --prime: #f5b942; --prime-wash: rgba(245, 185, 66, 0.14); --prime-dim: rgba(245, 185, 66, 0.45); }

.prime-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; width: auto; min-height: 0;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--prime); background: var(--prime-wash);
  border: 1px solid var(--prime-dim); border-radius: var(--radius-sm);
  box-shadow: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.prime-btn:hover { background: rgba(245, 185, 66, 0.24); transform: translateY(-1px); box-shadow: none; }
.prime-btn-crown { font-size: 1rem; line-height: 1; }
.prime-btn .beta-tag { margin-left: 2px; }

.prime-body { display: flex; flex-direction: column; gap: 14px; }
.prime-hero {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--prime-dim); border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--prime-wash), transparent 70%);
}
.prime-crown { font-size: 2.2rem; line-height: 1; color: var(--prime); }
.prime-price { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.prime-price small { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.prime-sub { font-size: 0.84rem; color: var(--text-muted); }
.prime-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prime-benefits li {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.prime-benefits li strong { font-size: 0.92rem; }
.prime-benefits li strong::before { content: '✓ '; color: var(--prime); }
.prime-benefits li span { font-size: 0.8rem; color: var(--text-muted); }
.prime-area { display: flex; flex-direction: column; gap: 10px; }
.prime-cta, .prime-cta-sm {
  background: var(--prime); color: #1a1405; border: none; font-weight: 800; width: 100%;
}
.prime-cta:hover, .prime-cta-sm:hover { background: #ffc85a; }
.prime-cta-sm { width: auto; min-height: 0; height: 30px; padding: 0 12px; font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }
.prime-active { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--prime-wash); border: 1px solid var(--prime-dim); color: var(--prime); font-weight: 600; font-size: 0.88rem; line-height: 1.4; }
.prime-foot { margin: 0; }
.prime-pay { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.prime-qr { background: #fff; padding: 8px; border-radius: 10px; width: 192px; height: 192px; display: grid; place-items: center; flex-shrink: 0; color: #333; font-size: 0.75rem; text-align: center; }
.prime-qr img, .prime-qr canvas { display: block; }
.prime-pay-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.prime-code { width: 100%; font-family: var(--font-mono); font-size: 0.68rem; resize: none; word-break: break-all; }

/* abas/painéis bloqueados (GIF e link no editor de banner) */
.banner-tab.is-locked { opacity: 0.8; }
.banner-tab-panel.is-locked > :not(.prime-lock) { display: none; }
.prime-lock {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px dashed var(--prime-dim); border-radius: var(--radius-sm); background: var(--prime-wash);
}
.prime-lock-icon { font-size: 1.5rem; color: var(--prime); line-height: 1; }
.prime-lock-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-muted); }
.prime-lock-text strong { color: var(--text); font-size: 0.84rem; }
.banner-tab-panel > .prime-lock { margin: 0; }

/* admin: pedidos Prime */
.prime-order { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); flex-wrap: wrap; }
.prime-order-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: 0.84rem; }
.prime-order-main small { color: var(--text-muted); }
.prime-order button { width: auto; min-height: 0; height: 32px; padding: 0 12px; font-size: 0.78rem; }
.prime-st { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-bright); color: var(--text-muted); }
.prime-st.claimed { color: var(--prime); border-color: var(--prime-dim); background: var(--prime-wash); }
.prime-st.paid { color: var(--signal); border-color: var(--signal-dim); }
@media (max-width: 560px) { .prime-btn .beta-tag { display: none; } }
.modal-head h2 .beta-tag { margin-left: 8px; vertical-align: middle; }

.prime-waiting { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); }
.prime-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-bright); border-top-color: var(--prime); animation: primeSpin 0.9s linear infinite; flex-shrink: 0; }
@keyframes primeSpin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════════
   v2.11 — Prime: GIF no chat, 1080p60 com cadeado, sala fixa e temas de fundo
   ═══════════════════════════════════════════════════════════════════════ */

/* ── home: terceira aba ("Sala fixa") ── */
.seg-tabs { grid-template-columns: repeat(3, 1fr); }
.seg-tab { white-space: nowrap; padding: 0 8px; font-size: 0.9rem; }
.seg-crown { color: var(--prime); margin-right: 2px; }
@media (max-width: 560px) { .seg-tab { font-size: 0.8rem; padding: 0 4px; } }

/* ── home: painel da sala fixa ── */
.fixed-panel { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); }
.fixed-lead { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.fixed-label { margin: 0; }
.fixed-note { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--prime); }
.fixed-room-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.fixed-room-title { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.fixed-room-title strong { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixed-room-sub { font-size: 0.76rem; color: var(--text-muted); }
.fixed-code { width: auto; min-height: 0; height: 36px; padding: 0 14px; font-family: var(--font-mono); letter-spacing: 0.22em; font-size: 0.95rem; flex-shrink: 0; cursor: pointer; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-bright); border-radius: 10px; }
.fixed-code:hover { background: var(--surface-3); }
.fixed-theme-holder { display: block; }

/* ── escolha de tema (home e configurações da sala) ── */
.theme-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.theme-opt {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-height: 0; height: auto; padding: 6px 6px 7px; border-radius: 12px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 600; line-height: 1.15; text-align: center; box-shadow: none;
}
.theme-opt:hover { background: var(--surface-3); border-color: var(--border-bright); }
.theme-opt.is-active { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-wash); }
.theme-opt.is-locked { opacity: 0.78; }
.theme-swatch { display: block; height: clamp(24px, 4.2vh, 36px); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); }
.theme-opt-label { display: block; }
.theme-opt-lock { position: absolute; top: 2px; right: 5px; font-size: 0.72rem; color: var(--prime); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.prime-tag { margin-left: 6px; font-size: 0.68rem; font-weight: 800; color: var(--prime); letter-spacing: 0.02em; }
.fixed-teaser { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--prime-dim); border-radius: var(--radius-sm); background: var(--prime-wash); font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); }
.fixed-teaser > span { flex: 1; min-width: 0; }
.acct-badge.is-fixed { color: var(--prime); border-color: var(--prime-dim); background: var(--prime-wash); }

/* ── seletor de qualidade: aviso do 1080p60 ── */
.quality-inline { flex-wrap: wrap; }
.quality-prime-note {
  flex: 1 0 100%; min-height: 0; height: auto; padding: 5px 10px; margin-top: 2px;
  font-size: 0.74rem; font-weight: 700; text-align: left;
  background: var(--prime-wash); color: var(--prime); border: 1px solid var(--prime-dim); border-radius: 8px; box-shadow: none;
}
.quality-prime-note:hover { background: rgba(245, 185, 66, 0.24); }

/* ── participantes: coroa Prime ── */
.p-prime { color: var(--prime); font-size: 0.8rem; line-height: 1; flex-shrink: 0; }

/* ── chat: ferramentas (enquete, imagem, GIF) numa segunda linha + seletor de GIF ── */
.chat-form { flex-wrap: wrap; }
.chat-form .chat-tools { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; }
.chat-form .chat-tools .chat-tool-btn { width: 40px; min-width: 40px; height: 34px; min-height: 34px; border-radius: 10px; }
.chat-form .chat-tools .chat-gif-btn {
  width: auto; min-width: 54px; gap: 4px; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em;
  background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-bright); box-shadow: none;
}
.chat-gif-btn:hover { background: var(--surface-3); color: var(--text); transform: none; }
.chat-gif-btn .gif-crown { display: none; color: var(--prime); font-size: 0.8rem; line-height: 1; }
.chat-form .chat-tools .chat-gif-btn.is-locked { color: var(--prime); background: var(--prime-wash); border-color: var(--prime-dim); }
.chat-gif-btn.is-locked .gif-crown { display: inline; }

.cgif-panel {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border-bright); border-radius: 14px;
  box-shadow: var(--shadow-lg); max-height: min(340px, 52vh);
}
.cgif-panel[hidden] { display: none; }
.cgif-panel input[type="text"] { min-height: 38px; font-size: 0.88rem; flex-shrink: 0; }
.cgif-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; min-height: 90px; align-content: start; }
.cgif-item { padding: 0; min-height: 0; height: 86px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 2px solid transparent; box-shadow: none; }
.cgif-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cgif-item:hover { background: var(--surface-2); border-color: var(--signal); }
.cgif-msg { grid-column: 1 / -1; padding: 18px 8px; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
.cgif-foot { flex-shrink: 0; font-size: 0.66rem; color: var(--text-muted); text-align: right; letter-spacing: 0.04em; }
.chat-msg-gif { display: block; max-width: min(100%, 240px); max-height: 200px; border-radius: 10px; margin-top: 6px; border: 1px solid var(--border); background: var(--surface-2); }

/* ═══════════ TEMAS DE FUNDO DA SALA FIXA (v2.13) ═══════════
   body[data-room-theme] liga um tema (ver room-themes.js). Cada tema troca a
   paleta (todo o app se ajusta), pinta o fundo no <body> e anima duas camadas
   (body::before e body::after, position:fixed atrás do .app).
   As animações usam só transform/opacity (rodam na placa de vídeo, quase não
   gastam processador). Quem transmite jogo pode desligar em
   Configurações > "Animar o fundo" (body.theme-still) — e o sistema com
   "reduzir movimento" já começa desligado. Sala com tema usa o visual escuro. */
body.has-room-theme #theme-toggle { display: none; }
body[data-room-theme] { background-attachment: fixed; }
body[data-room-theme] .app { background: transparent !important; position: relative; z-index: 1; }
body[data-room-theme] .topbar,
body[data-room-theme] .side-panel,
body[data-room-theme] .room-chat { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

body[data-room-theme]::before,
body[data-room-theme]::after {
  content: ''; position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: calc(100% + var(--t, 0px)); height: calc(100% + var(--t, 0px));
  background-size: var(--t, auto) var(--t, auto); will-change: transform;
}
body[data-room-theme="custom"]::before,
body[data-room-theme="custom"]::after { display: none; }

/* movimentos reutilizáveis (T = tamanho do "azulejo", em --t) */
@keyframes gs-fall   { from { transform: translate3d(0, calc(var(--t) * -1), 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes gs-fall-l { from { transform: translate3d(0, calc(var(--t) * -1), 0); } to { transform: translate3d(calc(var(--t) * -1), 0, 0); } }
@keyframes gs-fall-r { from { transform: translate3d(calc(var(--t) * -1), calc(var(--t) * -1), 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes gs-rise   { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(var(--t) * -1), 0); } }
@keyframes gs-pan    { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--t) * -1), 0, 0); } }
@keyframes gs-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes gs-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes gs-sway-a { 0% { transform: translate3d(-6%, 0, 0) skewX(-6deg); } 100% { transform: translate3d(6%, -2%, 0) skewX(7deg); } }
@keyframes gs-sway-b { 0% { transform: translate3d(5%, 0, 0) skewX(5deg); } 100% { transform: translate3d(-7%, 2%, 0) skewX(-6deg); } }
@keyframes gs-blob-a { 0% { transform: translate3d(-8%, -6%, 0) scale(1); } 50% { transform: translate3d(6%, 4%, 0) scale(1.18); } 100% { transform: translate3d(-3%, 9%, 0) scale(0.95); } }
@keyframes gs-blob-b { 0% { transform: translate3d(7%, 6%, 0) scale(1.1); } 50% { transform: translate3d(-6%, -5%, 0) scale(0.92); } 100% { transform: translate3d(5%, -8%, 0) scale(1.2); } }
@keyframes gs-grid   { from { transform: perspective(520px) rotateX(68deg) translate3d(0, 0, 0); } to { transform: perspective(520px) rotateX(68deg) translate3d(0, var(--t), 0); } }
@keyframes gs-sun    { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.045); } }

/* ───── Anime Sakura: céu rosa-lilás, sol e pétalas caindo ───── */
body[data-room-theme="anime"] {
  --bg: #1a0f2b; --surface: #26163f; --surface-2: #321e52; --surface-3: #40276a;
  --border: #4a2f78; --border-bright: #6a47a3; --text: #fff4fb; --text-muted: #d8bfea;
  --signal: #ff9ccc; --signal-dim: #e06aa4; --signal-wash: rgba(255, 156, 204, 0.14); --on-signal: #2a0f22;
  background:
    radial-gradient(34% 26% at 82% 14%, rgba(255, 224, 238, 0.62), rgba(255, 170, 210, 0.2) 45%, transparent 72%),
    linear-gradient(180deg, #2a1650 0%, #5a2a74 42%, #a24577 82%, #c9628a 100%);
}
body[data-room-theme="anime"]::before {
  --t: 420px; animation: gs-fall-l 46s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%23ffc4e1'%3E%3Cpath opacity='.7' transform='translate(46 70) rotate(28)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3Cpath opacity='.45' transform='translate(150 210) rotate(-35) scale(1.3)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3Cpath opacity='.6' transform='translate(300 60) rotate(110) scale(.9)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3Cpath opacity='.4' transform='translate(360 270) rotate(70) scale(1.5)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3Cpath opacity='.55' transform='translate(80 340) rotate(-80) scale(1.1)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-room-theme="anime"]::after {
  --t: 560px; animation: gs-fall-l 28s linear infinite; opacity: 0.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='%23fff0f7'%3E%3Cpath opacity='.75' transform='translate(120 90) rotate(200) scale(1.9)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3Cpath opacity='.6' transform='translate(420 300) rotate(20) scale(2.3)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3Cpath opacity='.5' transform='translate(250 470) rotate(-120) scale(1.6)' d='M0 0C7-11 23-11 27-1C23 3 19 4 16 1C13 6 6 7 0 0Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ───── Neon: grade cyberpunk que avança + brilho pulsando ───── */
body[data-room-theme="neon"] {
  --bg: #0a0614; --surface: #120a24; --surface-2: #1b0f35; --surface-3: #26164a;
  --border: #2f1b5c; --border-bright: #4b2a8f; --text: #f5eeff; --text-muted: #bdaee0;
  --signal: #00e5ff; --signal-dim: #00a9bd; --signal-wash: rgba(0, 229, 255, 0.12); --on-signal: #00141a;
  background: linear-gradient(180deg, #0f0724, #080412);
}
body[data-room-theme="neon"]::before {
  --t: 56px; animation: gs-fall 3.6s linear infinite;
  background-image: linear-gradient(rgba(255, 43, 214, 0.38) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 229, 255, 0.34) 1.5px, transparent 1.5px);
}
body[data-room-theme="neon"]::after {
  background: radial-gradient(60% 50% at 88% 0%, rgba(255, 43, 214, 0.42), transparent 70%), radial-gradient(55% 55% at 0% 100%, rgba(0, 229, 255, 0.34), transparent 70%);
  animation: gs-breathe 5s ease-in-out infinite;
}

/* ───── Galáxia: estrelas que brilham e deslizam sobre a nebulosa ───── */
body[data-room-theme="galaxy"] {
  --bg: #060a1c; --surface: #0d1330; --surface-2: #141c42; --surface-3: #1d2757;
  --border: #232e66; --border-bright: #3a4a9a; --text: #eef1ff; --text-muted: #aab5e0;
  --signal: #9db4ff; --signal-dim: #6f89e8; --signal-wash: rgba(157, 180, 255, 0.13); --on-signal: #060a1c;
  background:
    radial-gradient(48% 40% at 18% 22%, rgba(124, 92, 255, 0.4), transparent 72%),
    radial-gradient(42% 46% at 86% 78%, rgba(45, 140, 255, 0.3), transparent 72%),
    radial-gradient(30% 30% at 62% 8%, rgba(255, 120, 200, 0.2), transparent 72%),
    linear-gradient(180deg, #070b22, #050816);
}
body[data-room-theme="galaxy"]::before {
  --t: 313px; animation: gs-pan 220s linear infinite;
  background-image:
    radial-gradient(1.5px 1.5px at 22px 34px, #fff, transparent 60%), radial-gradient(1px 1px at 96px 88px, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(2px 2px at 190px 24px, #cfd8ff, transparent 60%), radial-gradient(1px 1px at 250px 170px, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 60px 210px, #ffe9b8, transparent 60%), radial-gradient(1px 1px at 150px 260px, #fff, transparent 60%);
}
body[data-room-theme="galaxy"]::after {
  --t: 241px; animation: gs-twinkle 4.5s ease-in-out infinite, gs-pan 150s linear infinite;
  background-image:
    radial-gradient(2.5px 2.5px at 40px 60px, #fff, rgba(190, 205, 255, 0.4) 50%, transparent 70%), radial-gradient(2px 2px at 170px 150px, #ffe9b8, transparent 65%),
    radial-gradient(2px 2px at 110px 20px, #cfd8ff, transparent 65%);
}

/* ───── Pôr do sol: sol respirando e nuvens passando ───── */
body[data-room-theme="sunset"] {
  --bg: #1c0f24; --surface: #2a1530; --surface-2: #3a1c3d; --surface-3: #4a2548;
  --border: #5a2c52; --border-bright: #7d3a63; --text: #fff3ea; --text-muted: #e6c3ba;
  --signal: #ffb24d; --signal-dim: #e08a2a; --signal-wash: rgba(255, 178, 77, 0.14); --on-signal: #2a1204;
  background:
    radial-gradient(70% 42% at 50% 100%, rgba(255, 205, 130, 0.55), rgba(255, 140, 80, 0.18) 55%, transparent 78%),
    linear-gradient(180deg, #1b1033 0%, #4a2078 36%, #94306a 66%, #d1583f 100%);
}
body[data-room-theme="sunset"]::before {
  --t: 1100px; animation: gs-pan 160s linear infinite; height: 100%; opacity: 0.85;
  background-image:
    radial-gradient(160px 34px at 180px 22%, rgba(255, 190, 170, 0.34), transparent 70%), radial-gradient(240px 40px at 640px 34%, rgba(255, 160, 150, 0.28), transparent 70%),
    radial-gradient(200px 30px at 930px 16%, rgba(255, 200, 180, 0.3), transparent 70%), radial-gradient(260px 36px at 380px 52%, rgba(200, 110, 150, 0.3), transparent 70%);
  background-size: 1100px 100%; background-repeat: repeat-x;
}
body[data-room-theme="sunset"]::after {
  left: 50%; top: auto; bottom: -9vmin; width: 46vmin; height: 46vmin; border-radius: 50%; animation: gs-sun 7s ease-in-out infinite; transform: translateX(-50%);
  background: radial-gradient(circle, #fff1b8 0%, #ffc56b 38%, rgba(255, 130, 90, 0.55) 62%, transparent 72%);
}

/* ───── Aurora boreal: cortinas de luz balançando ───── */
body[data-room-theme="aurora"] {
  --bg: #040d14; --surface: #0a1822; --surface-2: #10242f; --surface-3: #17323f;
  --border: #1c3b48; --border-bright: #2c5a6b; --text: #effcf8; --text-muted: #a8cbc6;
  --signal: #5dffb1; --signal-dim: #2fcf88; --signal-wash: rgba(93, 255, 177, 0.13); --on-signal: #02140c;
  background: radial-gradient(70% 50% at 50% 110%, rgba(30, 90, 120, 0.5), transparent 70%), linear-gradient(180deg, #02070d 0%, #06161f 60%, #0a2230 100%);
}
body[data-room-theme="aurora"]::before {
  left: -20%; width: 140%; animation: gs-sway-a 19s ease-in-out infinite alternate;
  background:
    linear-gradient(98deg, transparent 18%, rgba(70, 255, 170, 0.34) 30%, rgba(60, 230, 200, 0.2) 38%, transparent 50%),
    linear-gradient(104deg, transparent 46%, rgba(120, 90, 255, 0.3) 58%, rgba(200, 90, 255, 0.16) 66%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 86%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 86%);
}
body[data-room-theme="aurora"]::after {
  --t: 281px; animation: gs-twinkle 5s ease-in-out infinite;
  background-image: radial-gradient(1.4px 1.4px at 30px 40px, #fff, transparent 60%), radial-gradient(1px 1px at 190px 90px, #dff, transparent 60%), radial-gradient(1.3px 1.3px at 110px 210px, #fff, transparent 60%), radial-gradient(1px 1px at 240px 250px, #cfe, transparent 60%);
}

/* ───── Synthwave: sol retrô e estrada de grade infinita ───── */
body[data-room-theme="synthwave"] {
  --bg: #130a26; --surface: #1c0f38; --surface-2: #281650; --surface-3: #351f68;
  --border: #44267f; --border-bright: #6a3cb8; --text: #fff2fb; --text-muted: #d3b9ee;
  --signal: #ff4fd8; --signal-dim: #d02fb0; --signal-wash: rgba(255, 79, 216, 0.15); --on-signal: #1c0420;
  background: linear-gradient(180deg, #0d0620 0%, #2a0f55 38%, #7a1f7c 49%, #12071f 49.2%, #0b0416 100%);
}
body[data-room-theme="synthwave"]::before {
  --t: 64px; left: -50%; top: 49%; width: 200%; height: calc(110% + var(--t)); transform-origin: 50% 0; animation: gs-grid 2.2s linear infinite;
  background-image: linear-gradient(rgba(255, 79, 216, 0.75) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 220, 255, 0.6) 2px, transparent 2px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
}
body[data-room-theme="synthwave"]::after {
  left: 50%; top: calc(49% - 32vmin); width: 32vmin; height: 32vmin; border-radius: 50%; animation: gs-sun 6s ease-in-out infinite; transform: translateX(-50%);
  background: linear-gradient(180deg, #fff27a 0%, #ff9d4d 40%, #ff3ea5 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 52% 57%, #000 57% 63%, transparent 63% 70%, #000 70% 78%, transparent 78% 87%, #000 87%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 52% 57%, #000 57% 63%, transparent 63% 70%, #000 70% 78%, transparent 78% 87%, #000 87%);
  filter: drop-shadow(0 0 28px rgba(255, 80, 190, 0.6));
}

/* ───── Oceano: ondas deslizando em duas camadas ───── */
body[data-room-theme="ocean"] {
  --bg: #04121f; --surface: #08203a; --surface-2: #0d2d50; --surface-3: #143c66;
  --border: #174574; --border-bright: #2a68a6; --text: #effaff; --text-muted: #a9cfe6;
  --signal: #4fd8ff; --signal-dim: #26a9d4; --signal-wash: rgba(79, 216, 255, 0.14); --on-signal: #021622;
  background:
    radial-gradient(40% 55% at 70% -10%, rgba(120, 220, 255, 0.28), transparent 70%), radial-gradient(30% 50% at 25% -10%, rgba(90, 190, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #0a3a63 0%, #07264a 45%, #031224 100%);
}
body[data-room-theme="ocean"]::before,
body[data-room-theme="ocean"]::after {
  --t: 800px; top: auto; bottom: 0; height: 200px; background-repeat: repeat-x; background-position: 0 100%; background-size: 800px 140px;
}
body[data-room-theme="ocean"]::before { animation: gs-pan 34s linear infinite; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='140' viewBox='0 0 800 140'%3E%3Cpath fill='%2335b8e8' fill-opacity='.28' d='M0 70Q100 20 200 70T400 70T600 70T800 70V140H0Z'/%3E%3C/svg%3E"); }
body[data-room-theme="ocean"]::after { animation: gs-pan 21s linear infinite reverse; background-size: 800px 110px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='110' viewBox='0 0 800 110'%3E%3Cpath fill='%23061c3a' fill-opacity='.7' d='M0 50Q100 5 200 50T400 50T600 50T800 50V110H0Z'/%3E%3C/svg%3E"); }

/* ───── Vaga-lumes: floresta noturna com luzes subindo ───── */
body[data-room-theme="fireflies"] {
  --bg: #07130c; --surface: #0e2216; --surface-2: #14301f; --surface-3: #1c402a;
  --border: #1f4a30; --border-bright: #33704a; --text: #f3ffe9; --text-muted: #b6d3b4;
  --signal: #d4ff5c; --signal-dim: #a8d63a; --signal-wash: rgba(212, 255, 92, 0.13); --on-signal: #0d1a02;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' viewBox='0 0 520 260'%3E%3Cg fill='%23040b07'%3E%3Cpath d='M40 260L40 200L10 200L50 120L28 120L62 50L96 120L74 120L114 200L84 200L84 260Z'/%3E%3Cpath d='M190 260L190 190L160 190L205 100L180 100L222 20L264 100L239 100L284 190L254 190L254 260Z'/%3E%3Cpath d='M360 260L360 210L336 210L370 140L350 140L382 80L414 140L394 140L428 210L404 210L404 260Z'/%3E%3Cpath d='M460 260L460 220L440 220L468 160L452 160L478 110L504 160L488 160L516 220L496 220L496 260Z'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 520px 260px repeat-x,
    radial-gradient(50% 40% at 50% 105%, rgba(120, 200, 90, 0.3), transparent 70%), linear-gradient(180deg, #030a06 0%, #08180f 60%, #0f2a18 100%);
}
body[data-room-theme="fireflies"]::before {
  --t: 500px; animation: gs-rise 60s linear infinite;
  background-image:
    radial-gradient(5px 5px at 60px 80px, #f4ffa0, rgba(212, 255, 92, 0.35) 45%, transparent 100%), radial-gradient(4px 4px at 300px 40px, #f4ffa0, rgba(212, 255, 92, 0.3) 45%, transparent 100%),
    radial-gradient(6px 6px at 420px 260px, #f4ffa0, rgba(212, 255, 92, 0.35) 45%, transparent 100%), radial-gradient(4px 4px at 180px 330px, #f4ffa0, rgba(212, 255, 92, 0.3) 45%, transparent 100%),
    radial-gradient(5px 5px at 90px 440px, #f4ffa0, rgba(212, 255, 92, 0.3) 45%, transparent 100%), radial-gradient(3px 3px at 350px 420px, #f4ffa0, rgba(212, 255, 92, 0.3) 45%, transparent 100%);
}
body[data-room-theme="fireflies"]::after {
  --t: 377px; animation: gs-twinkle 3.4s ease-in-out infinite, gs-fall-r 90s linear infinite;
  background-image:
    radial-gradient(4px 4px at 50px 60px, #fff7a8, rgba(255, 232, 100, 0.3) 50%, transparent 100%), radial-gradient(5px 5px at 240px 150px, #fff7a8, rgba(255, 232, 100, 0.3) 50%, transparent 100%),
    radial-gradient(3px 3px at 140px 300px, #fff7a8, rgba(255, 232, 100, 0.3) 50%, transparent 100%), radial-gradient(4px 4px at 320px 330px, #fff7a8, rgba(255, 232, 100, 0.3) 50%, transparent 100%);
}

/* ───── Lava lamp: bolhas de cor derretendo devagar ───── */
body[data-room-theme="lava"] {
  --bg: #14060f; --surface: #240b1b; --surface-2: #331127; --surface-3: #44183a;
  --border: #55204a; --border-bright: #7e3070; --text: #fff1f6; --text-muted: #e3bccd;
  --signal: #ff7a59; --signal-dim: #e04e2d; --signal-wash: rgba(255, 122, 89, 0.15); --on-signal: #230802;
  background: linear-gradient(160deg, #1c0716 0%, #2c0a2a 55%, #14061f 100%);
}
body[data-room-theme="lava"]::before {
  left: -15%; top: -15%; width: 130%; height: 130%; animation: gs-blob-a 24s ease-in-out infinite alternate;
  background:
    radial-gradient(26% 30% at 22% 30%, rgba(255, 110, 70, 0.7), transparent 70%), radial-gradient(22% 26% at 72% 24%, rgba(255, 60, 130, 0.55), transparent 70%),
    radial-gradient(28% 30% at 60% 78%, rgba(255, 170, 60, 0.45), transparent 70%);
}
body[data-room-theme="lava"]::after {
  left: -15%; top: -15%; width: 130%; height: 130%; animation: gs-blob-b 31s ease-in-out infinite alternate;
  background:
    radial-gradient(24% 28% at 30% 74%, rgba(160, 70, 255, 0.55), transparent 70%), radial-gradient(22% 24% at 82% 60%, rgba(255, 90, 90, 0.5), transparent 70%),
    radial-gradient(20% 22% at 46% 44%, rgba(255, 150, 90, 0.35), transparent 70%);
}

/* ───── Chuva cyberpunk: cidade de noite com chuva caindo ───── */
body[data-room-theme="cyberrain"] {
  --bg: #070a14; --surface: #0d1322; --surface-2: #141c32; --surface-3: #1d2845;
  --border: #223052; --border-bright: #36508a; --text: #eaf3ff; --text-muted: #a5b8d8;
  --signal: #35d6ff; --signal-dim: #1ea6cc; --signal-wash: rgba(53, 214, 255, 0.13); --on-signal: #021521;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='240' viewBox='0 0 640 240'%3E%3Cg fill='%2305070f'%3E%3Cpath d='M0 240V120H50V60H110V140H150V90H220V30H270V110H330V70H390V150H440V40H500V100H560V130H640V240Z'/%3E%3C/g%3E%3Cg fill='%23ffd15c' fill-opacity='.75'%3E%3Crect x='62' y='80' width='6' height='8'/%3E%3Crect x='90' y='110' width='6' height='8'/%3E%3Crect x='232' y='52' width='6' height='8'/%3E%3Crect x='250' y='84' width='6' height='8'/%3E%3Crect x='402' y='96' width='6' height='8'/%3E%3Crect x='456' y='64' width='6' height='8'/%3E%3Crect x='480' y='72' width='6' height='8'/%3E%3C/g%3E%3Cg fill='%23ff3ea5' fill-opacity='.85'%3E%3Crect x='350' y='88' width='24' height='4'/%3E%3Crect x='120' y='74' width='4' height='16'/%3E%3C/g%3E%3Cg fill='%2335d6ff' fill-opacity='.8'%3E%3Crect x='284' y='60' width='20' height='4'/%3E%3Crect x='520' y='112' width='4' height='14'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 640px 240px repeat-x,
    radial-gradient(70% 40% at 50% 100%, rgba(255, 62, 165, 0.32), transparent 70%), radial-gradient(50% 40% at 20% 0%, rgba(40, 90, 220, 0.3), transparent 70%),
    linear-gradient(180deg, #05070f 0%, #0b1226 70%, #1a1236 100%);
}
body[data-room-theme="cyberrain"]::before {
  --t: 300px; animation: gs-fall 0.85s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg stroke='%23a9ddff' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.5'%3E%3Cpath d='M20 10l-4 44M70 120l-4 50M118 60l-4 40M170 200l-4 52M214 20l-4 46M262 140l-4 44M40 230l-4 40M140 260l-4 36M240 250l-4 42M96 170l-4 30'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-room-theme="cyberrain"]::after {
  --t: 200px; animation: gs-fall 1.5s linear infinite; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg stroke='%2335d6ff' stroke-width='1' stroke-linecap='round' stroke-opacity='.55'%3E%3Cpath d='M30 20l-3 34M110 90l-3 38M170 30l-3 34M60 140l-3 36M150 150l-3 32'/%3E%3C/g%3E%3C/svg%3E");
}

/* ───── Neve: noite azul com flocos caindo ───── */
body[data-room-theme="snow"] {
  --bg: #0a1424; --surface: #111e36; --surface-2: #192a48; --surface-3: #223a5e;
  --border: #29426a; --border-bright: #42659c; --text: #f2f8ff; --text-muted: #b4c9e4;
  --signal: #bfe3ff; --signal-dim: #86bde8; --signal-wash: rgba(191, 227, 255, 0.14); --on-signal: #07131f;
  background:
    radial-gradient(18% 24% at 82% 12%, rgba(235, 245, 255, 0.5), rgba(180, 210, 255, 0.16) 45%, transparent 70%), radial-gradient(70% 40% at 50% 110%, rgba(130, 170, 230, 0.3), transparent 70%),
    linear-gradient(180deg, #08101f 0%, #12254a 60%, #274a7c 100%);
}
body[data-room-theme="snow"]::before {
  --t: 400px; animation: gs-fall-l 20s linear infinite;
  background-image:
    radial-gradient(3px 3px at 40px 60px, #fff, transparent 70%), radial-gradient(2px 2px at 180px 30px, #fff, transparent 70%), radial-gradient(3.5px 3.5px at 320px 120px, #fff, transparent 70%),
    radial-gradient(2px 2px at 90px 230px, #fff, transparent 70%), radial-gradient(3px 3px at 250px 290px, #fff, transparent 70%), radial-gradient(2px 2px at 370px 350px, #fff, transparent 70%), radial-gradient(2.5px 2.5px at 20px 370px, #fff, transparent 70%);
}
body[data-room-theme="snow"]::after {
  --t: 277px; animation: gs-fall-l 11s linear infinite; opacity: 0.9;
  background-image: radial-gradient(6px 6px at 60px 50px, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 55%, transparent 100%), radial-gradient(5px 5px at 200px 160px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2) 55%, transparent 100%), radial-gradient(7px 7px at 120px 250px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2) 55%, transparent 100%);
}

/* ───── Matrix: chuva de código verde ───── */
body[data-room-theme="matrix"] {
  --bg: #010a04; --surface: #04140a; --surface-2: #072010; --surface-3: #0b2e18;
  --border: #0d3b1d; --border-bright: #17692f; --text: #e6ffe9; --text-muted: #96d6a2;
  --signal: #2bff6a; --signal-dim: #17c94c; --signal-wash: rgba(43, 255, 106, 0.12); --on-signal: #001505;
  background: radial-gradient(60% 50% at 50% 100%, rgba(0, 160, 60, 0.24), transparent 70%), linear-gradient(180deg, #000402, #02120a);
}
body[data-room-theme="matrix"]::before {
  --t: 420px; animation: gs-fall 9s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg font-family='monospace' font-size='15' fill='%232bff6a'%3E%3Ctext x='14' y='40' fill-opacity='.9'%3Eｱ%3C/text%3E%3Ctext x='14' y='58' fill-opacity='.6'%3Eﾊ%3C/text%3E%3Ctext x='14' y='76' fill-opacity='.35'%3E3%3C/text%3E%3Ctext x='74' y='200' fill-opacity='.9'%3Eﾐ%3C/text%3E%3Ctext x='74' y='218' fill-opacity='.6'%3Eｳ%3C/text%3E%3Ctext x='74' y='236' fill-opacity='.4'%3E7%3C/text%3E%3Ctext x='74' y='254' fill-opacity='.2'%3Eﾈ%3C/text%3E%3Ctext x='134' y='110' fill-opacity='.9'%3Eﾓ%3C/text%3E%3Ctext x='134' y='128' fill-opacity='.55'%3E0%3C/text%3E%3Ctext x='194' y='320' fill-opacity='.9'%3Eｷ%3C/text%3E%3Ctext x='194' y='338' fill-opacity='.6'%3Eﾘ%3C/text%3E%3Ctext x='194' y='356' fill-opacity='.35'%3E9%3C/text%3E%3Ctext x='254' y='60' fill-opacity='.9'%3Eﾗ%3C/text%3E%3Ctext x='254' y='78' fill-opacity='.55'%3Eｽ%3C/text%3E%3Ctext x='254' y='96' fill-opacity='.3'%3E5%3C/text%3E%3Ctext x='314' y='250' fill-opacity='.9'%3Eﾇ%3C/text%3E%3Ctext x='314' y='268' fill-opacity='.55'%3Eﾏ%3C/text%3E%3Ctext x='374' y='150' fill-opacity='.9'%3Eﾄ%3C/text%3E%3Ctext x='374' y='168' fill-opacity='.5'%3E1%3C/text%3E%3Ctext x='374' y='186' fill-opacity='.3'%3Eﾁ%3C/text%3E%3C/g%3E%3C/svg%3E");
}
body[data-room-theme="matrix"]::after {
  --t: 300px; animation: gs-fall 5.5s linear infinite; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg font-family='monospace' font-size='12' fill='%232bff6a'%3E%3Ctext x='40' y='90' fill-opacity='.8'%3Eﾂ%3C/text%3E%3Ctext x='40' y='104' fill-opacity='.4'%3Eｴ%3C/text%3E%3Ctext x='110' y='220' fill-opacity='.8'%3Eﾛ%3C/text%3E%3Ctext x='110' y='234' fill-opacity='.4'%3E2%3C/text%3E%3Ctext x='180' y='40' fill-opacity='.8'%3Eﾔ%3C/text%3E%3Ctext x='180' y='54' fill-opacity='.4'%3Eｹ%3C/text%3E%3Ctext x='250' y='160' fill-opacity='.8'%3Eﾖ%3C/text%3E%3Ctext x='250' y='174' fill-opacity='.4'%3E8%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* ───── Personalizado: foto, GIF ou vídeo que o dono escolhe ───── */
body[data-room-theme="custom"] { background: #000; }
.room-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #000; }
.room-bg img, .room-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)); }

/* animação desligada (Configurações > Animar o fundo) */
body.theme-still::before, body.theme-still::after { animation: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) { body.theme-motion-default::before, body.theme-motion-default::after { animation: none !important; } }

/* seletor de tema na sala: lista rolável e área do tema personalizado */
#room-theme-picker { max-height: 230px; overflow-y: auto; padding: 2px; }
.theme-custom-box { margin-top: 12px; padding: 12px; border: 1px dashed var(--border-bright); border-radius: var(--radius-sm); background: var(--surface-2); }
.theme-custom-box[hidden] { display: none; }
.theme-custom-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.theme-custom-row input[type="url"] { flex: 1; min-width: 0; min-height: 38px; font-size: 0.84rem; }
.theme-custom-row button { flex-shrink: 0; min-height: 38px; padding: 0 12px; font-size: 0.8rem; }
.theme-motion-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.theme-motion-row input { width: auto; min-height: 0; }

/* Celular: o chat ocupa a largura toda (a regra de 340px mais acima vencia o 100% da tela estreita). */
@media (max-width: 960px) {
  .room-chat { width: 100%; }
}


/* ───── páginas que precisam rolar (ex.: painel de administração) ─────
   A regra "home cabe na janela" trava a rolagem de toda página sem
   .in-room; o painel admin tem várias contas LiveKit empilhadas e precisa
   da barra de rolagem normal. */
@media (min-width: 961px) {
  html:has(body.page-scroll), body.page-scroll { height: auto; min-height: 100vh; overflow-y: auto; }
}
body.page-scroll { overflow-y: auto; }

/* botão Vídeo quando há um vídeo que a pessoa não pode trocar */
#video-btn.is-locked { opacity: 0.6; }


/* ───── banner no card de cada participante (igual ao cartão de perfil do canto) ───── */
.participant-chip.has-banner {
  position: relative; isolation: isolate;
  background: var(--banner-bg, var(--surface-2));
  border-color: var(--border);
}
.participant-chip.has-banner:hover { background: var(--banner-bg, var(--surface-2)); border-color: var(--border-bright); }
.participant-chip.has-banner.sharing { background: var(--banner-bg, var(--surface-2)); border-color: var(--tally); box-shadow: inset 0 0 0 1px var(--tally); }
/* GIF/imagem: cobre a linha toda, com um véu escuro pra leitura e texto claro */
.participant-chip.has-banner.profile-banner-image {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: #f4f7f5;
}
.participant-chip.has-banner.profile-banner-image::before {
  display: block; content: ''; position: absolute; inset: 0; z-index: -1;
  left: 0; top: 0; width: auto; height: auto; transform: none;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,11,10,0.82) 0%, rgba(8,11,10,0.58) 55%, rgba(8,11,10,0.3) 100%);
}
.participant-chip.has-banner.profile-banner-image .p-name-main,
.participant-chip.has-banner.profile-banner-image .p-name-text { color: #f4f7f5; }
.participant-chip.has-banner.profile-banner-image .p-substatus:not(.is-live),
.participant-chip.has-banner.profile-banner-image .p-tagline,
.participant-chip.has-banner.profile-banner-image .p-you { color: rgba(244, 247, 245, 0.78); }


/* ═══════════════════════════════════════════════════════════════════════
   v2.13.1 — CELULAR: assistir transmissões
   (fica no fim do arquivo de propósito, pra vencer as regras antigas)
   ═══════════════════════════════════════════════════════════════════════ */

/* Sem mouse não existe "passar o mouse": volume, tela cheia etc. ficam sempre visíveis */
@media (hover: none), (max-width: 960px) {
  .tile-volume-group, .video-controls { opacity: 1; }
  .video-controls button, .tile-volume-group .tile-mute { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .tile-volume { width: 72px; height: 22px; }
  .video-wrap video { touch-action: manipulation; }
}

/* Celular / janela estreita: a transmissão vem PRIMEIRO, depois o chat, depois os participantes
   (antes a lista de participantes ficava em cima e empurrava o vídeo lá pra baixo). */
@media (max-width: 960px) {
  .app-body { display: flex; flex-direction: column; }
  .stage-col { order: 0; padding: 8px; }
  .room-chat { order: 1; height: min(70dvh, 520px); }
  .side-panel { order: 2; }
  .stage-frame { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .stage-frame .corner { display: none; }
  .stage-grid { gap: 8px; }
  .tile.featured .video-wrap, .video-wrap { border-radius: 10px; }
}

/* Celular deitado: a transmissão ocupa a altura toda da janela (é o "virar a tela pra ficar maior") */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 540px) {
  .topbar { padding: 6px 10px; gap: 6px; }
  .stage-col { padding: 4px; }
  .tile.featured .video-wrap, .stage-grid .tile:only-child .video-wrap {
    width: min(100%, calc((100dvh - 56px) * 16 / 9)); max-height: none; margin: 0 auto;
  }
}

/* Tela cheia "por CSS" (quando o navegador não tem tela cheia de verdade) */
body.pseudo-fs-lock { overflow: hidden; }
.video-wrap.pseudo-fs {
  position: fixed !important; inset: 0; z-index: 9999; width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-height: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: #000;
}
/* em tela cheia de verdade o fundo é preto e o vídeo cabe inteiro */
.video-wrap:fullscreen { border-radius: 0; border: 0; background: #000; }
.video-wrap:fullscreen video, .video-wrap.pseudo-fs video { object-fit: contain; width: 100%; height: 100%; }
/* área de segurança do iPhone (notch) nos botões */
.video-wrap.pseudo-fs .video-controls { bottom: calc(10px + env(safe-area-inset-bottom)); right: calc(10px + env(safe-area-inset-right)); }
.video-wrap.pseudo-fs .tile-volume-group { bottom: calc(10px + env(safe-area-inset-bottom)); left: calc(10px + env(safe-area-inset-left)); }

/* v2.13.2 — "Meu perfil" (home): a prévia com foto e banner sumia.
   O corpo do modal é uma coluna com rolagem e o cartão (overflow:hidden) era
   espremido até virar só uma linha quando o conteúdo passava da altura da janela.
   Os filhos não encolhem mais; é o corpo que rola. */
.acct-body > * { flex-shrink: 0; }
.acct-body .pcard-banner { height: 96px; min-height: 96px; }
.acct-body .pcard-avatar { width: 56px; height: 56px; margin-top: -22px; }
.acct-body .pcard-bio { display: block; }


/* ═══════════ ESPAÇOS DE ANÚNCIO (v2.14) ═══════════
   Cada espaço só aparece quando o admin liga um anúncio (atributo hidden some com ele). */
.pm-slot { position: relative; display: block; margin: 0 auto; flex: none; max-width: 100%; }
.pm-slot[hidden] { display: none !important; }
.pm-tag { position: absolute; top: 4px; left: 6px; z-index: 2; padding: 1px 6px; border-radius: 4px; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.pm-frame { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); line-height: 0; }
a.pm-frame:hover { border-color: var(--border-bright); }
.pm-media { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Home: faixa larga embaixo (proporção de 970×90). Em janela baixa ela encolhe em vez de criar rolagem. */
.pm-slot-home { width: min(970px, calc(100% - 48px)); aspect-ratio: 970 / 90; max-height: clamp(40px, 7.5vh, 90px); margin: 0 auto clamp(8px, 2vh, 22px); }
.pm-slot-home .pm-frame { height: 100%; }
@media (max-width: 960px) { .pm-slot-home { width: calc(100% - 32px); max-height: none; margin: 8px auto 16px; } }

/* Sala: discreto, uma faixa fininha (468×60) embaixo do palco */
.pm-slot-room { width: min(468px, 100%); aspect-ratio: 468 / 60; max-height: 60px; margin: 10px auto 0; opacity: 0.92; }
.pm-slot-room .pm-tag { font-size: 0.55rem; top: 3px; left: 4px; }
.pm-slot-room .pm-frame { border-radius: 10px; }
@media (max-width: 960px) { .pm-slot-room { width: min(468px, calc(100% - 16px)); margin: 8px auto 4px; } }

/* painel admin */
.pm-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 12px; }
.pm-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.pm-card h3 { margin: 0; font-size: 0.98rem; }
.pm-card small { color: var(--text-muted); line-height: 1.4; }
.pm-preview { display: grid; place-items: center; min-height: 70px; border: 1px dashed var(--border-bright); border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--text-muted); font-size: 0.8rem; }
.pm-preview img, .pm-preview video { width: 100%; max-height: 140px; object-fit: cover; display: block; }
.pm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pm-row input[type="text"], .pm-row input[type="url"] { flex: 1; min-width: 0; }
.pm-row button { width: auto; padding: 8px 14px; }
.pm-stats { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.pm-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }
.pm-switch input { width: auto; min-height: 0; }

/* Com anúncio na home, o conteúdo nunca é espremido por cima do banner: a faixa vem depois
   e, em janela muito baixa, a página rola um pouco em vez de sobrepor. */
@media (min-width: 961px) {
  body.has-pm-home .lp-hero { flex: 1 0 auto; }
  body.has-pm-home .pm-slot-home { margin-top: clamp(4px, 1vh, 12px); }
}

/* ═══ v2.15 — card da sala limpo, "quem está assistindo", Prime no perfil ═══ */
.viewers-pop {
  position: absolute; right: 8px; bottom: 56px; z-index: 6; min-width: 190px; max-width: min(300px, calc(100% - 16px)); max-height: 60%;
  overflow-y: auto; padding: 10px 12px; border-radius: 12px; line-height: 1.35;
  background: rgba(10, 13, 12, 0.94); border: 1px solid var(--border-bright); color: #f2f5f3; font-size: 0.82rem; box-shadow: var(--shadow-lg);
}
.viewers-pop-title { font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
.viewers-pop-title span { opacity: 0.7; font-weight: 600; }
.viewers-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.viewers-pop li em { opacity: 0.65; font-style: normal; }
.viewers-pop-empty { opacity: 0.7; }
.pp-plan { margin: 8px 14px 0; font-size: 0.8rem; color: var(--text-muted); }
.pp-plan.is-prime { color: var(--prime); }
.pp-plan strong { font-weight: 800; }


/* ═══════════════════════════════════════════════════════════════════════
   v2.16 — CHAT REPAGINADO, aviso "sem áudio" discreto, conexão no cartão da sala
   ═══════════════════════════════════════════════════════════════════════ */

/* aviso "Transmitindo sem áudio": só aparece com o mouse em cima, igual aos outros avisos */
.no-audio-chip { opacity: 0; transition: opacity var(--dur) var(--ease-smooth); pointer-events: none; }
.tile:hover .no-audio-chip, .video-wrap:focus-within .no-audio-chip { opacity: 1; }
@media (hover: none) { .no-audio-chip { opacity: 1; } }

/* "conectado" agora mora no cartão da sala, pequeno e discreto */
.room-conn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.room-conn::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; transition: background var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth); }
.app:has(.frame.is-connected) .room-conn { color: var(--signal); }
.app:has(.frame.is-connected) .room-conn::before { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }

/* ───── chat ───── */
.room-chat { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--bg))); }
.chat-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text); }
.chat-header-title { display: inline-flex; align-items: center; gap: 8px; }
.chat-header-title .ico, .chat-header-title svg { width: 17px; height: 17px; color: var(--signal); }
.chat-header-count { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.chat-header-count:empty { display: none; }

.chat-messages { padding: 14px 12px 10px; gap: 12px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }
.chat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px; color: var(--text-muted); }
.chat-empty::before { content: '💬'; font-size: 1.8rem; opacity: 0.7; }

.chat-msg { display: flex; align-items: flex-end; gap: 9px; padding: 0 2px; border-radius: 0; background: none !important; box-shadow: none !important; filter: none !important; position: relative; }
.chat-msg:hover { background: none !important; filter: none !important; }
.chat-msg.is-cont { margin-top: -9px; }
.chat-av { flex: none; align-self: flex-start; padding: 0; min-height: 0; width: auto; background: none; border: 0; border-radius: 50%; cursor: pointer; line-height: 0; box-shadow: none; transition: transform var(--dur-fast) var(--ease-smooth); }
.chat-av:hover { transform: scale(1.06); background: none; }
.chat-msg .avatar { margin: 0; }
.chat-msg.is-cont .chat-av { visibility: hidden; height: 0; }
.chat-msg.is-cont .chat-av .avatar { height: 0; }
.chat-msg.is-cont .chat-msg-meta { display: none; }

.chat-msg-body { min-width: 0; flex: 0 1 auto; max-width: calc(100% - 80px); display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 3px 4px; max-width: 100%; }
.chat-msg .who { all: unset; box-sizing: border-box; font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; color: var(--text); cursor: pointer; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; padding: 0 2px; }
.chat-msg .who:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.chat-msg .who:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.chat-msg .when { font-family: var(--font-display); font-size: 0.68rem; color: var(--text-muted); opacity: 0.8; }
.chat-msg .p-prime { font-size: 0.78rem; }
.chat-msg .p-role-chip { font-size: 0.62rem; }

.chat-msg-text { margin: 0; padding: 8px 13px; font-size: 0.93rem; line-height: 1.45; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px 18px 18px 18px; word-break: break-word; }
.chat-msg.is-cont .chat-msg-text { border-radius: 6px 18px 18px 6px; }
.chat-msg-text + .chat-msg-image, .chat-msg-text + .chat-msg-gif { margin-top: 6px; }
.chat-msg-image { border-radius: 14px; max-width: min(100%, 260px); }

/* minhas mensagens: do lado direito, em verde */
.chat-msg.own { flex-direction: row-reverse; background: none; }
.chat-msg.own .chat-av { display: none; }
.chat-msg.own .chat-msg-body { align-items: flex-end; margin-left: auto; }
.chat-msg.own .chat-msg-meta { flex-direction: row-reverse; margin: 0 4px 3px 0; }
.chat-msg.own .who { color: var(--text-muted); font-weight: 600; }
.chat-msg.own .chat-msg-text { background: var(--signal-wash); border-color: var(--signal-dim); border-radius: 18px 6px 18px 18px; }
.chat-msg.own.is-cont .chat-msg-text { border-radius: 18px 6px 6px 18px; }

.chat-msg.mentions-me .chat-msg-text { background: rgba(232, 185, 61, 0.13); border-color: rgba(232, 185, 61, 0.55); }
.chat-msg.mentions-me { box-shadow: none !important; }

/* reagir / fixar: aparece ao lado da bolha, só com o mouse */
.msg-actions { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity var(--dur-fast) var(--ease-smooth); background: var(--surface-2); border: 1px solid var(--border-bright); border-radius: 999px; padding: 2px 4px; box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.3)); }
.chat-msg:hover .msg-actions, .chat-msg:focus-within .msg-actions { opacity: 1; }
.chat-msg.own .msg-actions { right: auto; left: 0; }
.msg-pin-toggle, .msg-react-toggle { opacity: 0.85; }
.msg-emoji-picker { top: 30px; right: 0; }
.chat-msg.own .msg-emoji-picker { right: auto; left: 0; }
.msg-reactions { margin-top: 5px; }
.msg-reaction-pill { font-family: var(--font-display); padding: 2px 9px; background: var(--surface-2); }

.chat-pinned { margin: 10px 12px 0; padding: 9px 12px; border: 1px solid rgba(232, 185, 61, 0.45); border-radius: 14px; background: rgba(232, 185, 61, 0.09); }
.chat-typing { padding: 0 18px 6px; font-style: normal; font-size: 0.74rem; }

/* campo de mensagem: uma pílula só, com o botão de enviar redondo */
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px 8px; align-items: center; padding: 12px 14px 14px; border-top: 1px solid var(--border); background: transparent; }
.chat-form #chat-input { grid-column: 1; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.93rem; }
.chat-form #chat-input:focus { border-color: var(--signal-dim); box-shadow: 0 0 0 3px var(--signal-wash); outline: none; }
.chat-form .chat-send { grid-column: 2; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border-radius: 50%; display: grid; place-items: center; }
.chat-form .chat-send .ico, .chat-form .chat-send svg { width: 18px; height: 18px; }
.chat-form .chat-tools { grid-column: 1 / -1; display: flex; gap: 6px; padding-left: 2px; }
.chat-form .chat-tools .chat-tool-btn { border-radius: 999px; background: transparent; border-color: transparent; color: var(--text-muted); }
.chat-form .chat-tools .chat-tool-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.chat-form .chat-tools .chat-gif-btn { border-radius: 999px; background: transparent; border: 1px solid var(--border); }

@media (max-width: 960px) { .chat-msg-body { max-width: calc(100% - 64px); } }

/* v2.16.3 — chat: nada passa da borda, em nenhuma largura de janela */
body.in-room { overflow-x: hidden; max-width: 100%; }
body.in-room .app, body.in-room .app-body { max-width: 100%; min-width: 0; }
.room-chat { box-sizing: border-box; --chat-w: 340px; max-width: 100%; }
.room-chat > * { box-sizing: border-box; max-width: 100%; }
.chat-header, .chat-form, .chat-pinned, .chat-typing { min-width: 0; }
.chat-messages { overflow-x: hidden; min-width: 0; }
.chat-msg { min-width: 0; max-width: 100%; box-sizing: border-box; }
.chat-msg-body { min-width: 0; max-width: calc(100% - 52px); }
.chat-msg.own .chat-msg-body { max-width: 92%; }
.chat-msg-text { max-width: 100%; overflow-wrap: anywhere; }
.chat-msg-gif, .chat-msg-image { max-width: 100% !important; width: auto; height: auto; max-height: 220px; object-fit: contain; }
.chat-header-count { white-space: nowrap; flex-shrink: 0; }
.chat-form #chat-input { min-width: 0; }

/* v2.16.4 — cartão da sala: contagem de pessoas ao lado do nome; sem sobreposição */
.room-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.room-card-top .room-card-name { flex: 1 1 auto; min-width: 0; }
.room-card-count {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); white-space: nowrap;
}
.room-card-count .ico, .room-card-count svg { width: 13px; height: 13px; flex-shrink: 0; }
.room-card-count strong { color: var(--text); font-weight: 600; }
.room-card-meta { flex-wrap: wrap; row-gap: 4px; }
.room-card-seg.badge-clickable { margin: 0; }
.room-card-seg { flex-shrink: 0; }

/* v2.16.4 — reagir/fixar: botõezinhos discretos embaixo da mensagem, ao lado da bolha */
.chat-msg-body { position: relative; }
.chat-msg .msg-actions {
  top: auto; bottom: -9px; right: 6px; left: auto;
  display: inline-flex; gap: 0; padding: 1px 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: none; z-index: 2;
}
.chat-msg.own .msg-actions { right: auto; left: 6px; }
.chat-msg .msg-pin-toggle, .chat-msg .msg-react-toggle {
  font-size: 0.62rem; padding: 1px 3px; line-height: 1; opacity: 0.75;
}
.chat-msg .msg-pin-toggle .ico, .chat-msg .msg-pin-toggle svg { width: 11px; height: 11px; }
.chat-msg .msg-emoji-picker { top: calc(100% + 4px); bottom: auto; right: 0; left: auto; z-index: 5; }
.chat-msg.own .msg-emoji-picker { right: auto; left: 0; }

/* v2.16.7 — reagir/fixar: mini botões embaixo da mensagem (tamanho forçado) */
.chat-msg .msg-actions {
  position: absolute !important; top: 100% !important; bottom: auto !important;
  margin-top: 2px; right: 4px !important; left: auto !important;
  display: inline-flex !important; align-items: center; gap: 0 !important;
  width: auto !important; height: 20px !important; padding: 0 2px !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
}
.chat-msg.own .msg-actions { right: auto !important; left: 4px !important; }
.chat-msg .msg-actions button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 4px; border-radius: 9px;
  font-size: 11px; line-height: 1; color: var(--text-muted); opacity: .7;
}
.chat-msg .msg-actions button:hover { opacity: 1; background: var(--surface-3); color: var(--text); transform: none; }
.chat-msg .msg-actions button svg, .chat-msg .msg-actions button .ico { width: 11px; height: 11px; }
.chat-msg .msg-emoji-picker { top: calc(100% + 24px) !important; }
.chat-msg-body { margin-bottom: 0; }
.chat-msg:hover { padding-bottom: 0; }

/* v2.16.8 — botões de reagir/fixar alinhados à bolha (não ao nome) e sem invadir a mensagem de baixo */
.chat-msg .chat-msg-body { padding-bottom: 16px; }
.chat-msg .msg-reactions:empty { display: none; }
.chat-msg .msg-actions { top: auto !important; bottom: -1px !important; margin-top: 0; left: 4px !important; right: auto !important; }
.chat-msg.own .msg-actions { left: auto !important; right: 4px !important; }
.chat-msg .msg-emoji-picker { top: auto !important; bottom: 18px !important; left: 0 !important; right: auto !important; }
.chat-msg.own .msg-emoji-picker { left: auto !important; right: 0 !important; }
.chat-msg .msg-actions { bottom: 0 !important; height: 16px !important; }
.chat-msg .msg-actions button { height: 16px; }

/* ═══════════ v2.17 — avisos de erro sem faixa vermelha ═══════════ */
#error.error-bar {
  position: fixed; left: 50%; bottom: 24px; top: auto; z-index: 300;
  height: auto; min-height: 0; max-width: min(92vw, 520px); padding: 10px 16px 10px 14px;
  display: block; overflow: visible;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display); font-size: 0.88rem; line-height: 1.4;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-smooth);
}
#error.error-bar.visible { height: auto; opacity: 1; transform: translate(-50%, 0); border-bottom-color: var(--border-bright); }
#error.error-bar::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber, #e8b93d); margin-right: 9px; vertical-align: 1px;
}

/* ═══════════ v2.17 — "Minha conta" ═══════════ */
.acct-modal.acct-bare { padding: 0; overflow: hidden; max-width: 720px; width: min(720px, 94vw); max-height: 92vh; display: flex; flex-direction: column; position: relative; }
.ma-close { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(8,9,12,.55) !important; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18) !important; color: #fff; }
.ma-body { padding: 0 !important; gap: 0 !important; overflow-y: auto; flex: 1; min-height: 0; }
.ma-body > * { flex-shrink: 0; }
.ma-head { position: relative; }
.ma-cover { height: 132px; background: var(--surface-2); background-size: cover; background-position: center; position: relative; }
.ma-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--surface) 100%); pointer-events: none; }
.ma-cover img, .ma-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-id { display: flex; align-items: flex-end; gap: 16px; padding: 0 24px; margin-top: -40px; position: relative; z-index: 2; flex-wrap: wrap; }
.ma-avatar { width: 84px; height: 84px; flex: none; box-shadow: 0 0 0 4px var(--surface); }
.ma-id-text { flex: 1 1 220px; min-width: 0; padding-bottom: 2px; }
.ma-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ma-name { font-family: var(--font-heading); font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.15; }
.ma-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-bright); color: var(--text-muted); white-space: nowrap; }
.ma-tag.is-prime { color: var(--prime, #e8b93d); border-color: var(--prime-dim, rgba(232,185,61,.5)); background: var(--prime-wash, rgba(232,185,61,.1)); }
.ma-tag.is-admin { color: var(--signal); border-color: var(--signal-dim); background: var(--signal-wash); }
.ma-email { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin-top: 3px; word-break: break-all; }
.ma-bio { font-size: 0.9rem; margin-top: 8px; color: var(--text); overflow-wrap: anywhere; }
.ma-detail { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.ma-id-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.ma-btn { width: auto; padding: 9px 16px; font-size: 0.84rem; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; }
.ma-btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-bright); box-shadow: none; font-weight: 600; }
.ma-btn-ghost:hover { background: var(--surface-2); color: var(--text); transform: none; box-shadow: none; }

.ma-tabs { display: flex; gap: 4px; margin: 22px 24px 0; padding: 4px; background: var(--surface-2); border-radius: 999px; width: fit-content; max-width: calc(100% - 48px); }
.ma-tab { background: transparent !important; color: var(--text-muted); box-shadow: none !important; padding: 7px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; transform: none !important; }
.ma-tab.is-on { background: var(--surface-3, var(--surface)) !important; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.35) !important; }
.ma-msg { margin: 8px 24px 0; }
.ma-grid { display: grid; gap: 10px; padding: 14px 24px 6px; }
.ma-empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 28px 12px; border: 1px dashed var(--border-bright); border-radius: 16px; }

.ma-room { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--dur-fast) var(--ease-smooth); }
.ma-room:hover { border-color: var(--border-bright); }
.ma-room-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ma-room-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: #fff; }
.ma-room-main { flex: 1; min-width: 0; }
.ma-room-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ma-room-name { font-weight: 600; font-size: 0.97rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-room-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ma-code { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; transform: none !important; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; padding: 2px 8px; border-radius: 6px; }
.ma-code:hover { border-color: var(--signal-dim) !important; }
.ma-sub { font-size: 0.74rem; color: var(--text-muted); }
.ma-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-bright); color: var(--text-muted); white-space: nowrap; }
.ma-badge.is-public { color: var(--signal); border-color: var(--signal-dim); }
.ma-badge.is-fixed { color: var(--prime, #e8b93d); border-color: var(--prime-dim, rgba(232,185,61,.5)); background: var(--prime-wash, rgba(232,185,61,.1)); }
.ma-enter { flex: none; background: var(--signal); color: #06120b; font-weight: 700; font-size: 0.84rem; padding: 9px 18px; border-radius: 999px; text-decoration: none; transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth); }
.ma-enter:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ma-room-tools { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.ma-mini { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; transform: none !important; padding: 5px 12px; font-size: 0.76rem; font-weight: 600; border-radius: 999px; }
.ma-mini:hover { color: var(--text) !important; border-color: var(--border-bright) !important; background: var(--surface) !important; }
.ma-mini.is-danger:hover { color: var(--tally) !important; border-color: var(--tally) !important; }
.ma-bans { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--text-muted); }
.ma-ban { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ma-foot { padding: 14px 24px 22px; display: flex; justify-content: center; }
.ma-logout { background: transparent !important; color: var(--text-muted) !important; border: none !important; box-shadow: none !important; transform: none !important; font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px; }
.ma-logout:hover { color: var(--tally) !important; }
@media (max-width: 560px) {
  .ma-id { padding: 0 16px; margin-top: -34px; }
  .ma-avatar { width: 68px; height: 68px; }
  .ma-tabs { margin-left: 16px; } .ma-grid, .ma-msg, .ma-foot { padding-left: 16px; padding-right: 16px; }
  .ma-room-top { flex-wrap: wrap; } .ma-enter { margin-left: auto; }
}
.ma-cover:not([class*="profile-banner-"]) { background-color: var(--surface-2); }
.ma-cover.profile-banner-none, .ma-cover.profile-banner-signal { background: linear-gradient(135deg, var(--signal-wash), var(--surface-2)); }
.ma-cover.profile-banner-image { background-size: cover; background-position: center; }
.ma-avatar { font-size: 2.1rem; display: grid; place-items: center; }
.ma-code {
  all: unset; box-sizing: border-box; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--text); padding: 3px 9px; border: 1px solid var(--border-bright); border-radius: 6px; background: var(--surface);
}
.ma-code:hover { border-color: var(--signal-dim); }
.ma-code:focus-visible { outline: 2px solid var(--signal); }

/* ═══════════ v2.17.3 — pedidos de entrada (fila de aprovação) ═══════════ */
.join-requests-panel {
  width: 340px; padding: 0; overflow: hidden; border: 1px solid var(--border-bright); border-radius: 20px;
  background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(232,185,61,.12);
}
.join-requests-panel.visible { display: flex; flex-direction: column; animation: jrIn .28s var(--ease-out-soft, ease-out); }
@keyframes jrIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.join-requests-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text); font-size: .9rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(232,185,61,.10), transparent);
}
.jr-head-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(232,185,61,.14); color: var(--amber, #e8b93d); }
.jr-head-ico .ico, .jr-head-ico svg { width: 17px; height: 17px; }
.jr-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-head-text strong { font-size: .95rem; font-weight: 700; }
.jr-head-text small { font-size: .75rem; color: var(--text-muted); }
.jr-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--amber, #e8b93d); color: #1a1405; }
#join-requests-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.join-request-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 14px;
  transition: background var(--dur-fast) var(--ease-smooth), opacity var(--dur) var(--ease-smooth);
}
.join-request-row:hover { background: var(--surface-2); }
.jr-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1rem; }
.jr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-who .join-request-name { flex: none; font-size: .92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-who small { font-size: .72rem; color: var(--text-muted); }
.join-request-row button { padding: 0; border-radius: 999px; font-weight: 700; transform: none; box-shadow: none; }
.join-request-row .join-req-approve { height: 34px; padding: 0 16px; font-size: .82rem; background: var(--signal); color: #06120b; border: none; }
.join-request-row .join-req-approve:hover { background: #d6fb6a; transform: translateY(-1px); }
.join-request-row .join-req-deny { width: 34px; height: 34px; font-size: .85rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border-bright); }
.join-request-row .join-req-deny:hover { color: var(--tally); border-color: var(--tally); background: rgba(255,90,90,.08); }
.jr-foot { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.jr-foot[hidden] { display: none; }
.jr-foot button { flex: 1; height: 34px; padding: 0; border-radius: 999px; font-size: .8rem; font-weight: 700; box-shadow: none; transform: none; }
.jr-all-approve { background: var(--signal); color: #06120b; border: none; }
.jr-all-deny { background: transparent; color: var(--text-muted); border: 1px solid var(--border-bright); }
.jr-all-deny:hover { color: var(--tally); border-color: var(--tally); background: transparent; }
@media (max-width: 960px) { .join-requests-panel { width: auto; } }

/* v2.17.4 — dono da sala em "Salas ativas" */
.browse-room-owner { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--text-muted); margin-top: 2px; min-width: 0; }
.browse-room-owner span, .browse-room-owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-room-owner .ico, .browse-room-owner svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--prime, #e8b93d); }

/* ═══════════ v2.18 — "Salas ativas" (novo layout) ═══════════ */
.rb-modal { width: min(940px, 94vw); max-width: 940px !important; max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; }
.rb-head { display: flex; align-items: center; gap: 14px; padding: 24px 28px 6px; }
.rb-head-text { flex: 1; min-width: 0; }
.rb-head h2 { font-family: var(--font-heading); font-size: 1.7rem; letter-spacing: -0.02em; margin: 0; }
.rb-head p { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; }
.rb-live { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,90,90,.1); border: 1px solid rgba(255,90,90,.35); color: #ff8d8d; white-space: nowrap; }
.rb-live[hidden] { display: none; }
.rb-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tally, #ff5a5a); box-shadow: 0 0 0 0 rgba(255,90,90,.6); animation: rbPulse 1.6s infinite; flex: none; }
@keyframes rbPulse { 70% { box-shadow: 0 0 0 7px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); } }

.rb-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 28px 14px; }
.rb-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; flex: none; }
.rb-tabs .browse-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-size: .86rem; font-weight: 600; background: transparent; color: var(--text-muted); border: none; box-shadow: none; transform: none; }
.rb-tabs .browse-tab:hover { color: var(--text); background: transparent; }
.rb-tabs .browse-tab.is-active { background: var(--signal); color: #06120b; box-shadow: none; }
.rb-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 800; background: rgba(255,255,255,.1); }
.rb-n:empty { display: none; }
.rb-tabs .browse-tab.is-active .rb-n { background: rgba(6,18,11,.18); }
.rb-search { flex: 1 1 220px; min-width: 0; position: relative; display: block; }
.rb-search .ico, .rb-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.rb-search input { width: 100%; height: 42px; padding: 0 16px 0 40px; border-radius: 999px; font-size: .9rem; }

.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 6px 28px 28px; overflow-y: auto; min-height: 220px; align-content: start; }
.rb-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth); animation: rbIn .35s var(--ease-out-soft, ease-out) both; }
.rb-card:hover { transform: translateY(-3px); border-color: var(--signal-dim); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
@keyframes rbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rb-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, hsl(var(--h, 220) 45% 22%), hsl(calc(var(--h, 220) + 50) 40% 12%)); overflow: hidden; }
.rb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 35%, transparent 60%, rgba(0,0,0,.55)); pointer-events: none; }
.rb-thumb-ico { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.35); }
.rb-thumb-ico .ico, .rb-thumb-ico svg { width: 38px; height: 38px; stroke-width: 1.3; }
.rb-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.rb-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: rgba(10,11,15,.7); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.rb-badge .ico, .rb-badge svg { width: 11px; height: 11px; }
.rb-badge-live { background: rgba(220,40,40,.85); border-color: transparent; }
.rb-badge-live .rb-live-dot { background: #fff; animation: none; box-shadow: none; }
.rb-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(10,11,15,.72); backdrop-filter: blur(6px); color: #fff; }
.rb-count .ico, .rb-count svg { width: 12px; height: 12px; }
.rb-body { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.rb-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-sub { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); min-width: 0; }
.rb-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rb-owner-av { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .65rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 60% 42%), hsl(calc(var(--h) + 50) 55% 28%)); }
.rb-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; max-width: 130px; }
.rb-age { white-space: nowrap; }
.rb-occ { display: flex; gap: 3px; margin-top: 2px; }
.rb-occ i { flex: 1; height: 4px; border-radius: 2px; background: var(--border-bright); }
.rb-occ i.on { background: var(--signal); }
.rb-foot { padding: 10px 16px 16px; display: flex; gap: 8px; }
.rb-join { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: .88rem; font-weight: 700; background: var(--signal); color: #06120b; border: none; box-shadow: none; }
.rb-join .ico, .rb-join svg { width: 15px; height: 15px; }
.rb-join:disabled { background: var(--surface-3, var(--surface)); color: var(--text-muted); cursor: not-allowed; }
.rb-join-go { flex: none; padding: 0 20px; }
.rb-code { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; letter-spacing: .3em; text-align: center; font-size: .9rem; }
.rb-code.is-bad { border-color: var(--tally); }
.rb-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 46px 16px; border: 1px dashed var(--border-bright); border-radius: 20px; color: var(--text-muted); }
.rb-empty .ico, .rb-empty svg { width: 34px; height: 34px; margin-bottom: 6px; opacity: .6; }
.rb-empty strong { color: var(--text); font-size: 1rem; }
.rb-skel .rb-thumb { background: var(--surface-3, var(--surface)); }
.rb-skel .rb-thumb::after { display: none; }
.rb-sk-line { display: block; height: 12px; border-radius: 6px; background: var(--surface-3, var(--surface)); animation: rbSk 1.2s ease-in-out infinite; }
.rb-sk-line.w60 { width: 60%; } .rb-sk-line.w40 { width: 40%; }
.rb-skel .rb-thumb { animation: rbSk 1.2s ease-in-out infinite; }
@keyframes rbSk { 50% { opacity: .45; } }
@media (max-width: 640px) {
  .rb-modal { width: 100vw; max-height: 94vh; border-radius: 24px 24px 0 0; align-self: flex-end; }
  .rb-head { padding: 20px 18px 4px; } .rb-toolbar { padding: 12px 18px; } .rb-grid { padding: 4px 18px 22px; grid-template-columns: 1fr; }
  .rb-live { display: none; }
}

/* ═══════════ v2.19 — reações flutuantes na transmissão ═══════════ */
.tile-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.fx-float { position: absolute; bottom: 6%; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); animation: fxRise var(--dur, 3s) cubic-bezier(.22,.61,.36,1) forwards; will-change: transform, opacity; }
@keyframes fxRise {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  10%  { opacity: 1; transform: translate(calc(var(--dx) * .15), calc(var(--rise, -300px) * .08)) scale(1.15); }
  60%  { opacity: .95; }
  100% { transform: translate(var(--dx), var(--rise, -300px)) scale(1); opacity: 0; }
}
/* A regra global "reduzir movimento" zera toda animação (0,01 ms) e, como a reação termina
   invisível, ela nunca aparecia. Aqui a animação é mantida sempre; com "reduzir movimento"
   vira só um fade curto, com pouco deslocamento. */
.fx-float { animation-duration: var(--dur, 3s) !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
@keyframes fxFade {
  0%   { opacity: 0; transform: scale(.85); }
  15%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px); }
}
@media (prefers-reduced-motion: reduce) { .fx-float { animation-name: fxFade !important; animation-duration: 2s !important; } }
.tile-reactbar {
  position: absolute; left: 50%; bottom: 56px; transform: translate(-50%, 8px); z-index: 7;
  display: flex; gap: 2px; padding: 4px 6px; border-radius: 999px;
  background: rgba(10,11,15,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.tile:hover .tile-reactbar, .tile:focus-within .tile-reactbar, .tile.is-touched .tile-reactbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fx-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; font-size: 19px; border-radius: 50%; transition: transform .12s ease, background .12s ease; }
.fx-btn:hover { background: rgba(255,255,255,.14); transform: scale(1.22); }
.fx-btn:active { transform: scale(.9); }
@media (max-width: 960px) { .tile-reactbar { bottom: 52px; } .tile-reactbar.show, .tile .tile-reactbar { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .fx-btn { width: 38px; height: 38px; } }

/* ═══════════ v2.19 — "Quem joga agora?" ═══════════ */
.chat-playvote { margin: 8px 12px; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(190,240,80,.07), transparent 60%), var(--surface-2); border: 1px solid var(--signal-dim); display: flex; flex-direction: column; gap: 12px; animation: rbIn .3s ease-out both; }
.chat-playvote.is-closed { opacity: .8; border-color: var(--border-bright); }
.pv-head { display: flex; gap: 10px; align-items: flex-start; }
.pv-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--signal-wash); font-size: 1.1rem; flex: none; }
.pv-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pv-title { font-weight: 700; font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere; }
.pv-game { align-self: flex-start; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--signal-wash); color: var(--signal); border: 1px solid var(--signal-dim); }
.pv-by { font-size: .72rem; color: var(--text-muted); }
.pv-edit-title, .pv-edit-game { padding: 6px 10px !important; font-size: .85rem !important; }
.pv-tool { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); font-size: .85rem; }
.pv-tool:hover { background: var(--surface-3, var(--surface)); color: var(--text); }
.pv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 10px; border-radius: 999px; font-size: .86rem; font-weight: 700; box-shadow: none; transform: none; border: 1px solid var(--border-bright); background: transparent; color: var(--text); }
.pv-btn b { font-family: var(--font-mono); font-size: .78rem; opacity: .75; }
.pv-btn:hover:not(:disabled) { background: var(--surface-3, var(--surface)); transform: none; box-shadow: none; }
.pv-yes.is-on { background: var(--signal); color: #06120b; border-color: var(--signal); }
.pv-no.is-on { background: var(--surface-3, #2a2d38); border-color: var(--text-muted); }
.pv-btn:disabled { cursor: default; opacity: .7; }
.pv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-col-title { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.pv-col-title.yes { color: var(--signal); } .pv-col-title.no { color: var(--text-muted); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pv-chip { font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-chip.yes { background: var(--signal-wash); color: var(--signal); border: 1px solid var(--signal-dim); }
.pv-chip.no { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border-bright); }
.pv-none { font-size: .74rem; color: var(--text-muted); opacity: .7; }
.pv-foot { font-size: .72rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 9px; }

/* ═══════════ v2.19 — denunciar ═══════════ */
.pp-report-row { padding: 6px 12px 10px; display: flex; justify-content: flex-end; }
.pp-report { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--text-muted); padding: 5px 10px; border-radius: 999px; }
.pp-report:hover { color: var(--tally); background: rgba(255,90,90,.08); }
.pp-report .ico, .pp-report svg { width: 13px; height: 13px; }
#report-note { width: 100%; resize: vertical; min-height: 70px; }

/* ═══════════ v2.19 — admin: números + denúncias ═══════════ */
.st-range { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.st-range button { padding: 6px 14px; font-size: .8rem; border-radius: 999px; }
.st-range button.is-on { background: var(--signal); color: #06120b; border-color: var(--signal); }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.st-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.st-kpi b { display: block; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; }
.st-kpi span { font-size: .76rem; color: var(--text-muted); }
.st-kpi.is-live b { color: var(--signal); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.st-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px 10px; min-width: 0; }
.st-wide { grid-column: 1 / -1; }
.st-card-title { font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.st-card-title small { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.st-chart { width: 100%; height: 150px; display: block; }
.st-chart text { fill: var(--text-muted); font-size: 10px; font-family: var(--font-mono, monospace); }
.st-chart .bar { fill: var(--signal); }
.st-chart .bar2 { fill: #7c9cff; }
.st-chart .bar:hover, .st-chart .bar2:hover { opacity: .75; }
.st-chart .grid { stroke: var(--border); stroke-width: 1; }
.st-table { margin-top: 14px; overflow-x: auto; }
.st-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.st-table th, .st-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.st-table th { color: var(--text-muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.st-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tally, #ff5a5a); color: #fff; font-size: .7rem; font-weight: 800; margin-left: 6px; vertical-align: 2px; }
.st-badge[hidden] { display: none; }
.rp-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rp-item.is-done { opacity: .6; }
.rp-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rp-top strong { font-size: .95rem; }
.rp-tag { font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-bright); color: var(--text-muted); }
.rp-tag.reason { color: var(--tally, #ff5a5a); border-color: rgba(255,90,90,.4); }
.rp-meta { font-size: .76rem; color: var(--text-muted); }
.rp-note { font-size: .84rem; }
.rp-excerpt { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .78rem; display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow-y: auto; }
.rp-excerpt b { color: var(--text-muted); font-weight: 600; }
.rp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-actions button, .rp-actions a { padding: 6px 12px; font-size: .78rem; border-radius: 999px; }

/* ═══════════ v2.19 — tela inicial viva ═══════════ */
.lp-live { padding: 28px 24px 22px; min-width: 0; }
.lp-live[hidden] { display: none; }
.lp-live-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1rem; }
.lp-live-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--tally, #ff5a5a); animation: rbPulse 1.6s infinite; flex: none; }
.lp-live-count { margin-left: auto; font-size: .78rem; color: var(--text-muted); }
.lp-live-grid { display: flex; flex-direction: column; gap: 10px; }
.lp-live-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth); animation: rbIn .35s ease-out both; }
.lp-live-card:hover { transform: translateY(-2px); border-color: var(--signal-dim); background: var(--surface-2); }
.lp-live-thumb { position: relative; width: 132px; aspect-ratio: 16 / 9; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: rgba(255,255,255,.4); background: linear-gradient(135deg, hsl(var(--h, 220) 45% 24%), hsl(calc(var(--h, 220) + 50) 40% 13%)); }
.lp-live-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-live-thumb .rb-badge { position: absolute; left: 6px; top: 6px; font-size: .58rem; padding: 2px 7px; gap: 5px; }
.lp-live-thumb .rb-live-dot { width: 5px; height: 5px; }
.lp-live-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-live-info strong { font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-live-info small { color: var(--text-muted); font-size: .76rem; display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-live-game { font-weight: 700; font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: var(--signal-wash); color: var(--signal); border: 1px solid var(--signal-dim); flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.lp-live-n { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--text-muted); flex: none; }
.lp-live-n .ico, .lp-live-n svg { width: 13px; height: 13px; }
.lp-live-thumb .ico, .lp-live-thumb svg { width: 26px; height: 26px; }
@media (max-width: 960px) { .lp-live { padding: 8px 0 4px; } .lp-live-thumb { width: 96px; } }
@media (min-width: 961px) and (max-height: 760px) { .lp-live { padding-top: 12px; padding-bottom: 8px; } .lp-live-card:nth-child(n+3) { display: none; } }

/* v2.20 convites */
.inv-welcome{text-align:center;padding:8px 4px 4px}
.inv-crown{font-size:44px;line-height:1;color:#f5b942;margin-bottom:6px}
.inv-welcome h2{margin:0 0 8px;font-size:22px}
.inv-welcome p{margin:0 0 16px;color:var(--text-dim,#9aa0aa);font-size:14px}
.inv-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.iv-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.iv-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim,#9aa0aa)}
.iv-form input[type=number]{width:130px}
.iv-item{border:1px solid var(--border-bright,#333);border-radius:10px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.iv-item.is-off{opacity:.6}
.iv-link{width:100%;font-family:monospace;font-size:12px}

/* ═══════════ v2.21 — PAINEL ADMIN COM ABAS ═══════════ */
.adm-body { background: radial-gradient(1200px 500px at 85% -10%, rgba(61,220,132,.07), transparent 60%), var(--bg); }
.adm-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 28px; max-width: 1320px; margin: 0 auto; padding: 22px 24px 60px; align-items: start; }
.adm-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 18px; padding: 16px 12px 14px; background: linear-gradient(180deg, var(--surface), var(--bg)); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-md); max-height: calc(100vh - 36px); }
.adm-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 10px; border-bottom: 1px solid var(--border); }
.adm-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--signal), #7cf0b0); color: #06120b; box-shadow: 0 6px 20px -6px rgba(61,220,132,.7); flex: none; }
.adm-logo svg, .adm-logo .ico { width: 20px; height: 20px; }
.adm-brand strong { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; }
.adm-brand small { color: var(--text-muted); font-size: .72rem; }
.adm-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.adm-tab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; font-size: .9rem; font-weight: 600; color: var(--text-muted); position: relative; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.adm-tab svg, .adm-tab .ico { width: 18px; height: 18px; flex: none; }
.adm-tab span { flex: 1; }
.adm-tab:hover { background: var(--surface-2); color: var(--text); }
.adm-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.adm-tab.is-on { background: var(--signal-wash); color: var(--signal); box-shadow: inset 0 0 0 1px rgba(61,220,132,.28); }
.adm-tab.is-on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--signal); }
.adm-badge { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .68rem; font-weight: 800; background: var(--tally); color: #fff; }
.adm-badge[hidden] { display: none; }
.adm-side-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.adm-side-foot .lk-back { margin-left: 0; font-size: .8rem; }
.adm-pill { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; font-weight: 600; }
.adm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: admPulse 1.8s infinite; flex: none; }
.adm-pill.is-off .adm-dot { background: var(--tally); animation: none; }
@keyframes admPulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.adm-main { min-width: 0; padding-top: 6px; }
.adm-panel { display: flex; flex-direction: column; gap: 16px; animation: admIn .35s var(--ease-out-soft); }
.adm-panel[hidden] { display: none; }
@keyframes admIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.adm-panel-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.adm-panel-head p { margin: 6px 0 0; color: var(--text-muted); font-size: .92rem; max-width: 62ch; }
.adm-panel[data-solo] > .adm-section > .adm-title { display: none; }
.adm-panel[data-solo] > .adm-section > .adm-lead:first-of-type { display: none; }
.adm-panel > .card { border-radius: 20px; }
.adm-denied .adm-side { display: none; }
.adm-denied .adm-shell { grid-template-columns: 1fr; max-width: 900px; }
.adm-denied .adm-panel-head { display: none; }

/* — ao vivo — */
.lv-kpis { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 12px; }
.lv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; overflow: hidden; }
.lv-kpi-top { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.lv-kpi-top svg, .lv-kpi-top .ico { width: 16px; height: 16px; }
.lv-kpi b { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.lv-kpi small { color: var(--text-muted); font-size: .76rem; }
.lv-kpi b.bump { animation: lvBump .5s var(--ease-out-soft); }
@keyframes lvBump { 30% { transform: scale(1.1); color: var(--signal); } }
.lv-kpi.is-main { background: linear-gradient(135deg, rgba(61,220,132,.16), var(--surface) 70%); border-color: rgba(61,220,132,.35); box-shadow: 0 18px 50px -24px rgba(61,220,132,.5); }
.lv-kpi.is-main b { color: var(--signal); font-size: clamp(2.8rem, 5vw, 4.2rem); }
.lv-kpi.is-main .lv-kpi-top { color: var(--signal); }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr); gap: 12px; }
.lv-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lv-card-head h3 { margin: 0; font-size: 1rem; font-family: var(--font-display); }
.lv-card-head p { margin: 3px 0 0; font-size: .78rem; color: var(--text-muted); }
.lv-legend { display: flex; gap: 12px; font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.lv-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.sw-a { background: var(--signal); } .sw-b { background: #7c9cff; }
.lv-chart { position: relative; }
.lv-svg { width: 100%; height: auto; display: block; }
.lv-svg text { fill: var(--text-muted); font-size: 10px; font-family: var(--font-mono); }
.lv-svg .grid { stroke: var(--border); }
.lv-line-a { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.lv-line-b { fill: none; stroke: #7c9cff; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.lv-dot { fill: var(--signal); stroke: var(--bg); stroke-width: 2; }
.lv-cur { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.lv-tip { position: absolute; top: 4px; pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-bright); border-radius: 10px; padding: 6px 10px; font-size: .74rem; line-height: 1.5; box-shadow: var(--shadow-md); white-space: nowrap; }
.lv-tip[hidden] { display: none; }
.lv-empty { color: var(--text-muted); font-size: .86rem; padding: 26px 0; text-align: center; }
.lv-where { display: flex; flex-direction: column; gap: 16px; }
.lv-wtop { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; margin-bottom: 6px; }
.lv-wtop span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; }
.lv-wtop svg, .lv-wtop .ico { width: 15px; height: 15px; }
.lv-wtop b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lv-bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--signal-dim), var(--signal)); transition: width .6s var(--ease-out-soft); }
.lv-count { font-family: var(--font-display); font-weight: 800; background: var(--signal-wash); color: var(--signal); border-radius: 999px; padding: 3px 12px; font-size: .9rem; }
.lv-rooms { display: flex; flex-direction: column; gap: 8px; }
.lv-room { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 14px; align-items: center; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.lv-room:hover { border-color: var(--signal-dim); transform: translateY(-1px); }
.lv-room-name { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: break-word; }
.lv-room-meta { font-size: .76rem; color: var(--text-muted); margin-top: 2px; }
.lv-room-meta code { font-family: var(--font-mono); }
.lv-tag { font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.lv-tag.pub { background: var(--signal-wash); color: var(--signal); }
.lv-tag.priv { background: rgba(232,185,61,.14); color: var(--amber); }
.lv-room-ppl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.lv-room-ppl b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.lv-room-ppl small { color: var(--text-muted); }
.lv-room-ppl .lv-bar { flex-basis: 100%; margin-top: 4px; }
.lv-go { display: inline-flex; align-items: center; text-decoration: none; padding: 8px 16px; border-radius: 999px; background: var(--signal); color: #06120b; font-weight: 700; font-size: .8rem; }
.lv-go:hover { filter: brightness(1.1); }

/* — seções reaproveitadas dentro das abas — */
.adm-panel .st-chart { height: auto; }
.adm-panel .lk-grid { gap: 14px; }

@media (max-width: 1000px) { .lv-kpis { grid-template-columns: 1fr 1fr; } .lv-kpi.is-main { grid-column: 1 / -1; } .lv-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px 14px 50px; }
  .adm-side { position: sticky; top: 0; z-index: 30; flex-direction: row; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; max-height: none; }
  .adm-brand, .adm-side-foot .lk-back { display: none; }
  .adm-nav { flex-direction: row; overflow-x: auto; flex: 1; scrollbar-width: none; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-tab { padding: 9px 12px; white-space: nowrap; }
  .adm-tab.is-on::before { display: none; }
  .adm-side-foot { padding: 0; border: 0; }
  .adm-pill #adm-pill-text { display: none; }
  .adm-pill { padding: 10px; }
  .lv-room { grid-template-columns: 1fr auto; }
  .lv-room-ppl { grid-column: 1; }
  .lv-go { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 520px) { .lv-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; } .lv-kpi { padding: 12px; border-radius: 16px; } .lv-kpi b { font-size: 1.9rem; } .lv-kpi.is-main b { font-size: 3rem; } .lv-kpi small { display: none; } .lv-kpi-top { font-size: .7rem; } .lv-kpi-top svg, .lv-kpi-top .ico { display: none; } }
@media (max-width: 860px) { .adm-body .account-slot { position: static; display: flex; justify-content: flex-end; padding: 10px 14px 0; } }

.adm-panel .st-kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.adm-panel .st-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .adm-panel .st-grid { grid-template-columns: 1fr; } }
.adm-panel .st-kpi b { font-family: var(--font-display); }
.adm-panel input[type=number], .adm-panel .iv-form input[type=text] { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; font: inherit; }
.adm-panel input[type=number]:focus, .adm-panel .iv-form input:focus { outline: none; border-color: var(--signal-dim); box-shadow: 0 0 0 3px var(--signal-wash); }
.iv-form input[type=text] { flex: 1 1 100%; }
.iv-form label { flex: 1 1 130px; }
.iv-form input[type=number] { width: 100%; }
.adm-main { overflow-x: clip; }
.adm-panel .prime-order { flex-wrap: wrap; }
.adm-panel .adm-add { flex-wrap: wrap; }
.adm-panel .adm-row { flex-wrap: wrap; }

/* v2.22 mensagens não lidas no ícone do chat */
#chat-toggle { position: relative; }
.chat-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--signal); color: #06120b; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; font-variant-numeric: tabular-nums; }
.chat-unread[hidden] { display: none; }
.chat-unread.mention { background: var(--tally); color: #fff; }
.chat-unread.pop { animation: chatUnreadPop .35s var(--ease-out-soft) !important; }
@keyframes chatUnreadPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
#chat-toggle.has-unread, .icon-toolbar #chat-toggle.has-unread { opacity: 1; color: var(--text); }

.pf-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.pf-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--signal); flex: none; }
.pf-check strong { display: block; font-size: .9rem; }
.pf-check small { display: block; color: var(--text-muted); font-size: .76rem; margin-top: 2px; }

/* v2.25 troca automática LiveKit */
.lk-auto { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.lk-auto-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.lk-auto h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1rem; }
.lk-auto p { margin: 0; color: var(--text-muted); font-size: .84rem; max-width: 70ch; }
.lk-switch { position: relative; flex: none; width: 48px; height: 28px; cursor: pointer; }
.lk-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.lk-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-bright); transition: background .2s; }
.lk-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.lk-switch input:checked + span { background: var(--signal); border-color: var(--signal); }
.lk-switch input:checked + span::after { transform: translateX(20px); background: #06120b; }
.lk-switch input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.lk-auto-warn { background: rgba(232,185,61,.12); color: var(--amber); border-radius: 12px; padding: 10px 14px; font-size: .84rem; }
.lk-auto-warn .link { all: unset; cursor: pointer; text-decoration: underline; color: var(--text); }
.lk-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .82rem; }
.lk-log li { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.lk-log time { color: var(--text-muted); font-family: var(--font-mono); font-size: .74rem; }
.lk-log span { color: var(--text-muted); }
.lk-log-empty { font-size: .82rem !important; }
.lk-badge-ex { font-size: .66rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(232,185,61,.16); color: var(--amber); letter-spacing: .04em; margin-left: auto; }

.rp-tag.ban { background: rgba(255,90,90,.16); color: var(--tally); }
.rp-actions button.danger { background: rgba(255,90,90,.14); color: var(--tally); border: 1px solid rgba(255,90,90,.4); }
.bn-head { margin-top: 18px; }
.bn-head h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1rem; }
.bn-head p { margin: 0 0 10px; color: var(--text-muted); font-size: .84rem; }

/* Prévia de sala (admin) */
.lv-clickable{cursor:pointer}
.lv-clickable:hover{background:rgba(255,255,255,.04)}
.lv-go.lv-ghost{background:transparent;border:1px solid var(--border-bright);color:var(--text)}
.rpv-back{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.rpv-back[hidden]{display:none}
.rpv{width:min(460px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--bg-elevated,#15151c);border:1px solid var(--border-bright);border-radius:16px;padding:16px;gap:12px}
.rpv-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rpv-head h3{margin:0;font-size:16px}.rpv-head p{margin:2px 0 0;font-size:12px;opacity:.7}
.rpv-body{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:40px}
.rpv-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04)}
.rpv-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-weight:700;font-size:13px;flex:none}
.rpv-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpv-tags{margin-left:auto;font-size:11px;opacity:.75;text-align:right}
.rpv-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Barra de minutos do LiveKit */
.lk-usage{margin:2px 0 12px}
.lk-usage-top,.lk-usage-sub{display:flex;justify-content:space-between;gap:8px;font-size:.74rem;opacity:.85}
.lk-usage-top b{font-weight:700}
.lk-usage-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0}
.lk-usage-bar i{display:block;height:100%;border-radius:999px;background:var(--green,#3ddc84);transition:width .6s}
.lk-usage-bar.mid i{background:var(--amber,#e8b93d)}
.lk-usage-bar.low i{background:var(--red,#ff5a5f)}
.lk-usage-edit{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:.74rem;padding:0;opacity:.8}