/* ---------- tela de transmissão (destaque de tela ou câmera) ---------- */
/* Três tamanhos: pequena (janela que se arrasta), média (área central livre) e tela cheia.
   Pequena e média não cobrem a página: o mapa, as salas, o chat e a barra de baixo continuam clicáveis. */
#spotlight {
  position: fixed; z-index: 9;
  display: flex; flex-direction: column;
  background: rgba(5, 6, 12, .94); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
}
#spotlight video { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#spotlight video.mirror { transform: scaleX(-1); }

.tt-barra { order: -1; flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tt-nome { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-tamanhos { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-2); }
.tt-botao { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.tt-botao:hover { background: var(--surface-3); color: var(--text); }
.tt-botao[aria-pressed="true"] { background: rgba(168, 85, 247, .2); color: var(--accent); }
.tt-botao svg { width: 18px; height: 18px; }
.tt-fechar:hover { background: rgba(255, 77, 109, .14); color: var(--danger); }
/* Som da transmissão (mudo + volume até 200%), entre o nome e os tamanhos; só para a tela de outra pessoa. */
.tt-som { padding: 0 4px; }
.tt-som .cv-mudo { color: var(--muted); }
.tt-som .cv-mudo:hover { color: var(--text); }
.tt-som.mudo .cv-mudo { color: var(--danger); }

/* Média: entre a coluna de salas + card de voz, o painel lateral, os cartões (top vem de ui.js) e a barra de baixo. */
#spotlight[data-tamanho="media"] { top: 180px; left: calc(var(--largura-salas, 244px) + 24px); right: 12px; bottom: 80px; }
body.panel-open #spotlight[data-tamanho="media"] { right: 354px; }
body:has(#panel.com-chat:not([hidden])) #spotlight[data-tamanho="media"] { right: 428px; }
body.editing #spotlight[data-tamanho="media"] { left: 324px; }

/* Pequena: janela flutuante acima dos painéis; left/top vêm do arraste (limitado à tela). */
#spotlight[data-tamanho="pequena"] {
  z-index: 28; right: auto; bottom: auto; width: min(360px, calc(100vw - 16px));
  border-radius: 12px; cursor: grab; touch-action: none; user-select: none;
}
#spotlight[data-tamanho="pequena"] video { flex: none; height: auto; aspect-ratio: 16 / 9; }
/* Sem vídeo (câmera desligada ou transmissão carregando), a janela mantém o tamanho. */
#spotlight[data-tamanho="pequena"]:has(> video[hidden])::after { content: ""; display: block; aspect-ratio: 16 / 9; background: #000; }
#spotlight[data-tamanho="pequena"] .tt-barra { padding: 3px 3px 3px 10px; font-size: 13px; }
#spotlight[data-tamanho="pequena"] .tt-botao { width: 28px; height: 28px; cursor: pointer; }
#spotlight[data-tamanho="pequena"] .tt-botao svg { width: 16px; height: 16px; }
/* Na pequena o volume encolhe e o número sai (fica no título e no leitor de tela); arrastar a barra não move a janela. */
#spotlight[data-tamanho="pequena"] .tt-som { gap: 4px; padding: 0; }
#spotlight[data-tamanho="pequena"] .tt-som .cv-mudo { width: 28px; height: 28px; cursor: pointer; }
#spotlight[data-tamanho="pequena"] .tt-som .cv-mudo svg { width: 16px; height: 16px; }
#spotlight[data-tamanho="pequena"] .tt-som .cv-barra { width: 64px; }
#spotlight[data-tamanho="pequena"] .tt-som .cv-numero { display: none; }
#spotlight.tt-arrastando { cursor: grabbing; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }

/* Tela cheia: pela Fullscreen API ou, se ela faltar, cobrindo a janela do navegador. */
#spotlight[data-tamanho="cheia"] { z-index: 55; inset: 0; border: 0; border-radius: 0; background: #000; }
#spotlight[data-tamanho="cheia"] .tt-barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 10px 14px 28px;
  background: linear-gradient(rgba(5, 6, 12, .88), rgba(5, 6, 12, 0)); border: 0; transition: opacity .2s ease-out;
}
#spotlight[data-tamanho="cheia"] .tt-tamanhos { background: rgba(28, 25, 48, .85); }
#spotlight[data-tamanho="cheia"] .tt-som { padding: 2px 6px; border-radius: 10px; background: rgba(28, 25, 48, .85); }
#spotlight[data-tamanho="cheia"] .tt-som .cv-barra { width: 120px; }
#spotlight.tt-ocioso { cursor: none; }
#spotlight.tt-ocioso .tt-barra:not(:has(:focus-visible)) { opacity: 0; pointer-events: none; }

@media (max-width: 520px) {
  /* Celular: na média e na cheia o número do volume sai para o nome da transmissão caber. */
  #spotlight .tt-som .cv-numero { display: none; }
  #spotlight .tt-som .cv-barra, #spotlight[data-tamanho="cheia"] .tt-som .cv-barra { width: 72px; }
}

@media (max-width: 820px) {
  /* Sem coluna lateral: a média vai de borda a borda e para acima do card de voz. */
  #spotlight[data-tamanho="media"], body.panel-open #spotlight[data-tamanho="media"],
  body:has(#panel.com-chat:not([hidden])) #spotlight[data-tamanho="media"], body.editing #spotlight[data-tamanho="media"] {
    left: 8px; right: 8px; bottom: calc(80px + var(--altura-painel-voz, 0px));
  }
}