* { box-sizing:border-box; margin:0 }
[hidden] { display:none !important }
a { color:hsl(var(--accent)); text-decoration:none }
a:hover { color:hsl(var(--accent) / .8) }
body {
  font:14px/1.5 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  background:hsl(var(--background)); color:hsl(var(--foreground));
  height:100vh; overflow:hidden; display:flex; flex-direction:column;
}
button {
  font:inherit; font-weight:500; cursor:pointer; border-radius:var(--radius);
  border:1px solid transparent; padding:0 16px; height:36px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  transition:opacity .15s, background .15s;
}
button:hover { opacity:.9 }
button.outline { background:transparent; color:hsl(var(--foreground)); border-color:hsl(var(--border)) }
button.outline:hover { background:hsl(var(--muted)); opacity:1 }
button.ghost { background:transparent; color:hsl(var(--muted-foreground)) }
button.ghost:hover { background:hsl(var(--muted)); color:hsl(var(--foreground)); opacity:1 }

/* scrollbar fina no tema do app (o padrão do navegador grita no escuro) */
* { scrollbar-width:thin; scrollbar-color:hsl(var(--muted)) transparent }
::-webkit-scrollbar { width:8px; height:8px }
::-webkit-scrollbar-thumb { background:hsl(var(--muted)); border-radius:999px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-corner { background:transparent }
button.destructive { background:hsl(var(--destructive)); color:#fff }
button:focus-visible { outline:2px solid hsl(var(--accent)); outline-offset:2px }

input, select {
  font:inherit; height:36px; padding:0 10px; border-radius:var(--radius);
  background:hsl(var(--background)); color:hsl(var(--foreground));
  border:1px solid hsl(var(--border)); width:100%;
}
input:focus, select:focus { outline:2px solid hsl(var(--ring)); outline-offset:-1px }
label { font-size:13px; font-weight:500; color:hsl(var(--muted-foreground)) }

.card {
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-card); padding:24px;
}
.muted { color:hsl(var(--muted-foreground)) }

/* switch */
.switch { position:relative; width:40px; height:22px; flex:none; cursor:pointer }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.switch span {
  position:absolute; inset:0; border-radius:999px; background:hsl(var(--muted));
  transition:background .15s; pointer-events:none;
}
.switch span::after {
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:hsl(var(--foreground)); transition:transform .15s;
}
.switch input:checked + span { background:hsl(var(--accent)) }
.switch input:disabled { cursor:not-allowed }
.switch input:disabled + span { opacity:.45 }
.switch input:checked + span::after { transform:translateX(18px) }

/* header */
.bar {
  display:flex; align-items:center; gap:10px; padding:10px 20px; flex:none;
  border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--background)); position:sticky; top:0; z-index:5;
}
.bar h1 { font-family:var(--font-display); font-size:19px; font-weight:800;
          letter-spacing:-.03em }
.spacer { flex:1 }
button svg { width:16px; height:16px; flex:none; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
button.icon { width:36px; padding:0 }
.player-ctl { display:flex; align-items:center; gap:4px }

/* abas do header: pílula na ativa, texto apagado nas demais */
.tabs { display:flex; align-items:center; gap:4px; margin-left:8px }
.tab {
  background:transparent; border:none; height:32px; padding:0 14px;
  border-radius:999px; font-size:13px; font-weight:500; font-family:var(--font-sans);
  color:hsl(var(--muted-foreground)); white-space:nowrap;
}
.tab:hover { background:hsl(var(--muted)); color:hsl(var(--foreground)); opacity:1 }
.tab.on { background:hsl(var(--muted)); color:hsl(var(--foreground)) }
@media (max-width:1000px) { .tab { padding:0 10px } }
@media (max-width:780px) {
  .tabs { margin-left:2px; gap:2px }
  .tab { padding:0 8px; font-size:12px }
  .tab[data-tab="jam"] { display:none }   /* apelido longo sai em telas estreitas */
}

/* header apertado: cai por etapas em vez de estourar */
@media (max-width:1280px) {
  #live-stats, #net-stats, .pill .sep { display:none }
  #viewers-pill { max-width:200px }
}
@media (max-width:780px) {
  #viewers-pill { display:none }
}
@media (max-width:780px) {
  .pill span:not(.dot) { display:none }   /* sobra a bolinha piscando */
  .pill { padding:0; width:30px; justify-content:center }
  #who { display:none }                    /* sobra o avatar da inicial */
  .user { padding:0; width:36px; justify-content:center }
  #vol { width:56px }
}
#vol, #fb-seek {
  height:4px; padding:0; border:0; border-radius:999px;
  background:hsl(var(--muted)); appearance:none; cursor:pointer;
}
#vol { width:80px }
#vol::-webkit-slider-thumb, #fb-seek::-webkit-slider-thumb {
  appearance:none; width:12px; height:12px; border-radius:50%;
  background:hsl(var(--accent)); cursor:pointer;
}
#vol:focus, #fb-seek:focus { outline:none }
#vol:focus-visible, #fb-seek:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:4px }
.pill {
  display:flex; align-items:center; gap:8px; height:30px; padding:0 12px;
  border:1px solid hsl(var(--border)); border-radius:999px; font-size:12px;
}
.pill .sep { width:1px; height:12px; background:hsl(var(--border)) }
#viewers-pill { max-width:320px }
#viewers-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dot { width:7px; height:7px; border-radius:50%; background:hsl(var(--destructive));
       animation:pulse 2s infinite }
#net-dot { animation:none }   /* qualidade não pisca: a cor já diz tudo */
@keyframes pulse { 50% { opacity:.25 } }
.user {
  background:transparent; border:1px solid hsl(var(--border)); color:hsl(var(--foreground));
  height:36px; padding:0 12px 0 6px; gap:8px; font-size:13px; font-weight:500;
}
.user:hover { background:hsl(var(--muted)); opacity:1 }
/* CTA principal do header: pílula âmbar, como no design */
#share {
  height:38px; padding:0 18px; border-radius:var(--radius-pill);
  background:hsl(var(--accent)); color:hsl(var(--primary-foreground)); font-weight:600;
  animation:share-pulse 2.4s ease-out infinite;
}
#share:hover { opacity:.9; animation-play-state:paused }
/* anel que se expande do próprio botão, na cor do CTA */
@keyframes share-pulse {
  0% { box-shadow:0 0 0 0 hsl(var(--accent) / .5) }
  70%, 100% { box-shadow:0 0 0 9px hsl(var(--accent) / 0) }
}
@media (prefers-reduced-motion: reduce) { #share { animation:none } }
main { flex:1; overflow:hidden; display:flex; flex-direction:column }

/* grade estilo youtube */
#grid-live { flex:1; overflow:auto; padding:32px; display:grid; gap:26px 24px;
             background:var(--glow-top);
             grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); align-content:start }
.vid { cursor:pointer }
.vid .thumb {
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-card); overflow:hidden;
  background:hsl(var(--muted)); border:1px solid hsl(var(--border));
  display:grid; place-items:center;
}
.vid .thumb img { width:100%; height:100%; object-fit:cover; display:block }
.vid:hover .thumb { border-color:hsl(var(--accent) / .55); box-shadow:var(--shadow-card) }
.vid .badge {
  position:absolute; left:12px; bottom:12px; background:hsl(var(--destructive));
  color:#fff; font-size:11px; font-weight:600; padding:2px 6px; border-radius:4px;
}
/* duração da transmissão: paralela ao AO VIVO, no canto direito */
.vid .badge.time {
  left:auto; right:12px; background:hsl(var(--surface-2));
  color:hsl(var(--foreground)); font-variant-numeric:tabular-nums;
}
.vid .meta { display:flex; gap:10px; margin-top:10px; align-items:center }
.avatar.sm { width:24px; height:24px; font-size:11px }
.avatar {
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:hsl(var(--muted)); font-weight:600; font-size:14px; text-transform:uppercase;
}
.vid .title { font-size:15px; font-weight:600; letter-spacing:-.01em }
.vid .sub { font-size:12px; color:hsl(var(--muted-foreground)) }
.empty {
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; min-height:60vh; padding:24px;
  background:var(--glow-top); border-radius:var(--radius-card);
}
.empty svg { width:56px; height:56px; fill:none; stroke:hsl(var(--accent) / .8);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:20px }
.empty h4 { font-family:var(--font-display); font-size:28px; font-weight:800;
  letter-spacing:-.02em }
.empty p { font-size:14px; color:hsl(var(--muted-foreground)); margin-top:8px }

/* palco: a composição publicada, do jeito que quem assiste vê */
#stage-wrap { flex:1; display:none; flex-direction:column; align-items:center;
              justify-content:center; gap:10px; padding:10px; background:#000; min-height:0 }
#stage-wrap.on { display:flex }
#stage { max-width:100%; min-height:0; flex:0 1 auto; touch-action:none; cursor:grab }
#stage.drag { cursor:grabbing }
#cam-ctl { display:flex; align-items:center; gap:12px; flex:none;
           font-size:12px; color:hsl(var(--muted-foreground)) }
#cam-ctl label { display:flex; align-items:center; gap:8px }

#player-wrap { flex:1; background:#000; display:none; min-height:0; position:relative }
#player-wrap.on { display:block }
#player-wrap video { width:100%; height:100%; object-fit:contain; display:block }
/* autoplay bloqueado (iframe do Discord): overlay de desbloqueio por clique */
#watch-start { position:absolute; inset:0; display:grid; place-items:center; z-index:5;
  background:var(--scrim); backdrop-filter:blur(2px);
  color:hsl(var(--foreground)); font:inherit; font-weight:600 }
#player-tools { position:absolute; top:12px; left:12px; z-index:6; display:flex; gap:4px }
#player-tools .ghost { background:var(--scrim); border:1px solid hsl(var(--border)) }
#fixed-loading { position:absolute; inset:0 372px 0 0; z-index:7; display:grid; place-items:center;
  background:var(--scrim); pointer-events:none }
#player-wrap.tv-panel-hidden #fixed-loading { right:0 }
#fixed-loading div { width:min(520px, 72%); text-align:center; font-weight:600 }
#fixed-loading i { display:block; height:12px; margin-top:10px; overflow:hidden; border-radius:999px;
  background:hsl(var(--muted)) }
#fixed-loading i::after { content:''; display:block; height:100%; width:var(--progress); background:hsl(var(--accent)) }
#fixed-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(360px, 92vw);
  background:hsl(var(--surface-2)); border-left:1px solid hsl(var(--border));
  border-radius:0; padding:20px 16px; z-index:4;
  display:flex; flex-direction:column; overflow:hidden;
}
#fixed-panel > * { flex:none }
#fixed-panel .results { flex:none }
/* fila ocupa o restante do painel, rolando dentro de si */
#music-queue { flex:1 1 auto; min-height:60px; overflow:auto }
#music-history { max-height:38%; overflow:auto }
#fixed-panel h3 { font-family:var(--font-display); font-size:17px; font-weight:800;
                  letter-spacing:-.02em; margin-bottom:2px }
#fixed-panel-toggle { position:absolute; top:12px; right:382px; z-index:6 }
#player-wrap.tv-panel-hidden #fixed-panel-toggle { right:12px }

/* canal música: visual centrado, letra rolando (spotify-like).
   right acompanhando o painel lateral: o centro fica no espaço do vídeo,
   não da tela toda (mesma margem da #fixed-bar) */
#music-view { position:absolute; left:0; top:0; bottom:0; right:372px; z-index:3;
  display:none; background:var(--glow-top),
    linear-gradient(180deg, hsl(var(--surface-2)), hsl(var(--background)) 70%) }
#music-view.on { display:flex }
#mv-main { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  padding:28px 24px 16px; overflow:hidden }
#mv-art { width:min(240px, 26vh); aspect-ratio:1; border-radius:var(--radius-card);
  object-fit:cover; box-shadow:var(--shadow-card); flex:none }
#mv-title { font-family:var(--font-display); font-size:22px; font-weight:800;
  letter-spacing:-.02em; margin-top:18px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#mv-sub { font-size:13px; margin-top:2px }
#lyrics { flex:1; width:min(640px, 100%); overflow-y:auto; margin-top:14px;
  /* referencial do offsetTop das linhas: sem isto o auto-scroll mede contra o
     #music-view (absoluto) e rola além da linha atual — a certa fica acima */
  position:relative;
  text-align:center; padding:30vh 12px 96px; scrollbar-width:none }
#lyrics::-webkit-scrollbar { display:none }
/* ligando a faixa: capa esmaece pulsando até o áudio entrar */
#music-view.loading #mv-art { animation:mv-load 1.2s ease-in-out infinite }
@keyframes mv-load { 50% { opacity:.35; filter:saturate(.3) } }
/* canal sem nada tocando: o conteúdo do música sai de cena, fica o convite */
#music-view.empty #mv-main { visibility:hidden }
#fixed-empty {
  position:absolute; inset:0 372px 0 0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  /* brilho centrado do convite sobre o gradiente quente do tema */
  background:
    radial-gradient(ellipse at 50% 42%, hsl(var(--accent) / .08), transparent 55%),
    var(--glow-top),
    hsl(var(--background));
}
#player-wrap.tv-panel-hidden #fixed-empty { inset:0 }
#fixed-empty[hidden] { display:none }
#fixed-empty h4 { font-family:var(--font-display); font-size:24px; font-weight:800;
                  letter-spacing:-.02em }
#fixed-empty p { font-size:13px; margin-top:6px }
.fe-disc {
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  margin-bottom:18px; border:1px solid hsl(var(--border));
  background:hsl(var(--surface-2));
  animation:fe-pulse 2.6s ease-in-out infinite;
}
.fe-disc svg { width:34px; height:34px; fill:none; stroke:hsl(var(--accent));
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
@keyframes fe-pulse {
  0%, 100% { box-shadow:0 0 0 0 hsl(var(--accent) / .22); transform:scale(1) }
  50% { box-shadow:0 0 0 20px hsl(var(--accent) / 0); transform:scale(1.05) }
}
#fixed-bar button:disabled { opacity:.4; cursor:default; transform:none }
#fb-seek:disabled { opacity:.4 }
.lyr { padding:7px 0; font-size:15px; color:hsl(var(--muted-foreground));
  cursor:pointer; border-radius:6px; transition:color .2s, transform .2s }
.lyr:hover { color:hsl(var(--foreground)) }
.lyr.on { color:hsl(var(--accent)); font-weight:600; transform:scale(1.04) }

/* barra de player inferior (spotify-like) */
#fixed-bar {
  position:absolute; left:0; right:372px; bottom:0; z-index:5;
  display:flex; align-items:center; gap:6px; padding:14px 20px 12px;
  background:linear-gradient(transparent, hsl(var(--background)) 38%);
}
#player-wrap.tv-panel-hidden #fixed-bar { right:0 }
#fixed-bar button { flex:none }
#fixed-bar .skip {
  background:transparent; border:none; height:44px; width:44px; padding:0;
  color:hsl(var(--muted-foreground));
}
#fixed-bar .skip:hover { color:hsl(var(--foreground)); opacity:1 }
#fixed-bar .skip svg { width:24px; height:24px; fill:currentColor; stroke:none }
#fb-toggle {
  background:hsl(var(--foreground)); color:hsl(var(--background));
  border:none; height:46px; width:46px; padding:0; border-radius:50%;
  transition:transform .12s;
}
#fb-toggle:hover { transform:scale(1.05); opacity:1 }
#fb-toggle svg { width:22px; height:22px; fill:currentColor; stroke:none }
/* SVG não tem a propriedade/atributo hidden utilizável do JS — classe na régua */
#fb-toggle svg.off { display:none }
#fb-toggle.busy svg { display:none }
#fb-toggle.busy::after {
  content:''; width:18px; height:18px; border-radius:50%;
  border:2.5px solid hsl(var(--background) / .3); border-top-color:hsl(var(--background));
  animation:fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform:rotate(360deg) } }
#fb-seek { flex:1 }
#fixed-bar .muted { font-size:12px; flex:none; width:44px; text-align:center }

/* mini player do canal música: segue tocando fora da aba Música */
#mini-bar {
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:8;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  width:min(560px, calc(100vw - 32px));
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  overflow:hidden;
}
#mini-bar[hidden] { display:none }
#mb-art { width:44px; height:44px; border-radius:8px; object-fit:cover; flex:none;
  background:hsl(var(--muted)) }
#mb-progress { position:absolute; left:0; top:0; height:3px; width:0;
  background:hsl(var(--accent)); transition:width 1s linear }
#mb-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; cursor:pointer }
#mb-title { font-family:var(--font-display); font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#mb-sub { font-size:11px; color:hsl(var(--muted-foreground)) }
#mini-bar .skip { background:transparent; border:none; height:36px; width:36px; padding:0;
  color:hsl(var(--muted-foreground)) }
#mini-bar .skip:hover { color:hsl(var(--foreground)); opacity:1 }
#mini-bar .skip svg { width:20px; height:20px; fill:currentColor; stroke:none }
#mb-toggle {
  background:hsl(var(--accent)); color:hsl(var(--primary-foreground));
  border:none; height:38px; width:38px; padding:0; border-radius:50%; flex:none;
  transition:transform .12s;
}
#mb-toggle:hover { transform:scale(1.05); opacity:1 }
#mb-toggle svg { width:18px; height:18px; fill:currentColor; stroke:none }
#mb-toggle svg.off { display:none }

/* dialog */
dialog {
  margin:auto;   /* o * { margin:0 } acima mata o padrão que centraliza */
  border:1px solid hsl(var(--border)); border-radius:var(--radius-card);
  background:hsl(var(--card)); color:hsl(var(--foreground));
  padding:24px; width:min(560px, 92vw); max-height:86vh; overflow:auto;
  box-shadow:var(--shadow-card);
}
dialog::backdrop { background:var(--scrim); backdrop-filter:blur(4px) }
dialog h3 { font-family:var(--font-display); font-size:20px; font-weight:800;
            letter-spacing:-.02em; margin-bottom:4px }
dialog .desc { font-size:13px; color:hsl(var(--muted-foreground)); margin-bottom:20px }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px }

/* sala de músicos */
.jam-warn {
  background:hsl(var(--warning) / .12); border:1px solid hsl(var(--warning) / .4);
  border-radius:var(--radius); padding:10px 14px; font-size:13px; margin-bottom:16px;
}
/* pílulas de quem está na sala: acendem quando detecta voz */
#jam-pills { display:flex; flex-wrap:wrap; gap:8px }
.pill-jam {
  display:inline-flex; align-items:center; gap:8px; padding:5px 14px 5px 10px;
  border-radius:var(--radius-pill); background:hsl(var(--surface-2));
  border:1px solid hsl(var(--border));
  font-size:13px; font-weight:500; transition:border-color .12s, box-shadow .12s;
}
.pill-jam .pdot { width:8px; height:8px; border-radius:50%; flex:none;
  background:hsl(var(--muted-foreground)); transition:background .12s }
.pill-jam.talking { border-color:hsl(var(--success)); box-shadow:0 0 8px hsl(var(--success) / .35) }
.pill-jam.talking .pdot { background:hsl(var(--success)) }
.pill-jam input[type=range] { display:none; width:64px; height:4px; padding:0; border:0;
  appearance:none; background:hsl(var(--border)); border-radius:999px }
.pill-jam input[type=range]::-webkit-slider-thumb { appearance:none; width:10px; height:10px;
  border-radius:50%; background:hsl(var(--foreground)) }
.pill-jam:hover input[type=range] { display:inline }
/* canal 🎸 Sala: conexão no centro, quem está na sala no painel da direita
   (mesmo esquema do #music-view + #fixed-panel) */
#jam-view { position:absolute; left:0; top:0; bottom:0; right:372px; z-index:3;
  display:none; background:var(--glow-top),
    linear-gradient(180deg, hsl(var(--surface-2)), hsl(var(--background)) 70%) }
#jam-view.on { display:flex }
#jam-main { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:28px 24px; overflow:auto }
#jam-card { width:min(420px, 100%) }
#jam-panel { position:absolute; top:0; right:0; bottom:0; width:min(360px, 92vw);
  background:hsl(var(--surface-2)); border-left:1px solid hsl(var(--border));
  padding:20px 16px; overflow:auto; z-index:4 }
#jam-panel h3 { font-family:var(--font-display); font-size:17px; font-weight:800;
                letter-spacing:-.02em; margin-bottom:2px }
.jam-gain { display:flex; align-items:center; gap:8px }
.jam-gain input[type=range] { flex:1; height:4px; padding:0; border:0;
  appearance:none; background:hsl(var(--border)); border-radius:999px }
.jam-gain input[type=range]::-webkit-slider-thumb { appearance:none; width:12px; height:12px;
  border-radius:50%; background:hsl(var(--foreground)) }
.jam-gain .jg-val { font-size:12px; width:34px; text-align:center; flex:none }
.jg-meter { width:56px; height:4px; border-radius:999px; background:hsl(var(--border));
  overflow:hidden; flex:none }
.jg-meter i { display:block; height:100%; width:0; background:hsl(var(--success)); transition:width .12s }
#jam-chat { width:min(560px,100%); flex:1; min-height:0; display:flex; flex-direction:column; padding:0 }
#jam-msgs { flex:1; overflow:auto; display:flex; flex-direction:column; gap:4px; padding:12px }
.jam-msg { font-size:13px; line-height:1.45; word-wrap:break-word }
.jam-msg b { margin-right:6px; color:hsl(var(--muted-foreground)) }
.jam-msg.me b { color:hsl(var(--accent)) }
#jam-msg-form { display:flex; gap:8px; padding:12px; border-top:1px solid hsl(var(--border)) }
/* card do /yt: player compartilhado da sala */
#jam-yt-dock { flex:none; border-bottom:1px solid hsl(var(--border)) }
#jam-yt-dock .jam-yt { margin:0; border:0; border-radius:0 }
.jam-yt { border:1px solid hsl(var(--border)); border-radius:var(--radius-media); overflow:hidden;
  background:hsl(var(--card)); margin:4px 0 }
.jam-yt .jy-title { font-size:12px; font-weight:600; padding:8px 10px 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.jam-yt .jy-frame { position:relative; aspect-ratio:16/9; background:#000 }
.jam-yt .jy-frame iframe, .jam-yt .jy-frame img { width:100%; height:100%; object-fit:cover; display:block }
.jam-yt .jy-start { position:absolute; inset:0; display:grid; place-items:center;
  background:var(--scrim); color:hsl(var(--foreground)); font:inherit; font-weight:600 }
.jam-yt .jy-ctl { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12px }
.jam-yt .jy-ctl .jy-seek { flex:1; height:4px; padding:0; border:0; appearance:none;
  background:hsl(var(--border)); border-radius:999px }
.jam-yt .jy-ctl .jy-seek::-webkit-slider-thumb { appearance:none; width:12px; height:12px;
  border-radius:50%; background:hsl(var(--foreground)) }
.jam-yt .jy-ctl .muted { font-variant-numeric:tabular-nums; flex:none }
#jam-main.joined { justify-content:flex-start }

#sources { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
           gap:10px; margin:16px 0; max-height:230px; overflow:auto }
#sources figure {
  cursor:pointer; padding:6px; border-radius:var(--radius-media);
  border:2px solid transparent; background:hsl(var(--muted)); transition:border-color .12s;
}
#sources figure:hover { border-color:hsl(var(--accent) / .5) }
#sources figure.sel { border-color:hsl(var(--accent)) }
#sources img { width:100%; aspect-ratio:16/10; object-fit:cover;
               border-radius:calc(var(--radius-media) - 4px); background:#000 }
#sources figcaption { font-size:11px; margin-top:5px; color:hsl(var(--muted-foreground));
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* carregando as fontes do compartilhar: skeleton no lugar da miniatura */
#sources figure.loading { position:relative; aspect-ratio:16/10 }
#cookies-file { width:100%; color:hsl(var(--muted-foreground)) }
.err { color:hsl(var(--destructive)); font-size:13px; min-height:1.2em }

/* skeleton da miniatura */
.skeleton { position:absolute; inset:0; background:
  linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--border)) 50%, hsl(var(--muted)) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite }
@keyframes shimmer { to { background-position:-200% 0 } }

/* toast: um por vez; a borda esquerda conta o tipo (vermelho erro, âmbar
   info/ação, amarelo aviso). Sem hex: só tokens do tema. */
#toast {
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 12px) scale(.98);
  display:flex; align-items:center; gap:14px;
  background:hsl(var(--surface-2)); border:1px solid hsl(var(--border));
  border-left:3px solid hsl(var(--destructive)); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:14px 18px; font-size:13px;
  max-width:min(560px, calc(100vw - 32px));
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:20;
}
#toast.on { opacity:1; transform:translate(-50%, 0); pointer-events:auto; cursor:pointer }
#toast.info { border-left-color:hsl(var(--accent)) }
#toast.warning { border-left-color:hsl(var(--warning)) }
#toast span { line-height:1.45 }
#toast button {
  height:32px; padding:0 14px; font-size:12px; font-weight:600; flex:none;
  background:hsl(var(--accent)); color:hsl(var(--primary-foreground)); border:none;
  border-radius:var(--radius);
}
#toast button:hover { opacity:.9 }
/* tremidinha só enquanto toca a abertura */
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0) }
  25%     { transform: translate(-1.5px,1px) rotate(-1.5deg) }
  50%     { transform: translate(1.5px,-1px) rotate(1.5deg) }
  75%     { transform: translate(-1px,-1.5px) rotate(1deg) }
}
body.intro #brand, body.intro button { animation: shake .18s infinite }
@media (prefers-reduced-motion: reduce) { body.intro #brand, body.intro button { animation: none } }

/* lives fixas: busca e fila */
.results { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; max-height:240px; overflow:auto }
.results button {
  display:flex; gap:10px; align-items:center; justify-content:flex-start; height:auto; padding:6px;
  background:transparent; color:hsl(var(--foreground)); border-color:transparent;
  text-align:left; font-weight:400;
}
.results button:hover { background:hsl(var(--muted)); opacity:1 }
.results img { width:80px; aspect-ratio:16/9; object-fit:cover;
                border-radius:var(--radius-media); flex:none; background:#000 }
.results .r-title { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.results .r-sub { font-size:12px; color:hsl(var(--muted-foreground)) }
/* loading no botão de resultado: spinner no lugar da thumb enquanto add/toca */
.results button:disabled { opacity:.6; cursor:default }
.spinner { width:18px; height:18px; border-radius:50%; flex:none; margin:0 31px;
  border:2px solid hsl(var(--muted-foreground)); border-top-color:transparent;
  animation:spin .8s linear infinite }
@keyframes spin { to { transform:rotate(1turn) } }
.now {
  display:flex; gap:10px; align-items:center; border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:8px; margin-bottom:12px; background:hsl(var(--muted) / .5);
}
.now img { width:64px; aspect-ratio:16/9; object-fit:cover;
           border-radius:var(--radius-media); flex:none; background:#000 }
.now .bar-pos { height:4px; border-radius:999px; background:hsl(var(--muted)); margin-top:6px; overflow:hidden }
.now .bar-pos i { display:block; height:100%; background:hsl(var(--accent)) }
#music-queue { display:flex; flex-direction:column; gap:2px; overflow:visible; max-height:none }
.q-item {
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:var(--radius);
  cursor:pointer;
}
.q-item:hover { background:hsl(var(--muted)) }
.q-item.now { background:hsl(var(--accent) / .12) }
.q-item.now .q-title { color:hsl(var(--accent)) }
.q-item.loading { animation:mv-load 1.2s ease-in-out infinite }
#music-queue img, #music-history-list img {
  width:44px; height:44px; border-radius:var(--radius-media);
  object-fit:cover; flex:none; background:#000 }
.q-title { display:block; min-width:0; font-size:13px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.q-sub { display:block; font-size:12px; color:hsl(var(--muted-foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#music-queue .q-x { cursor:pointer; color:hsl(var(--muted-foreground)); padding:0 4px }
#music-queue .q-x:hover { color:hsl(var(--destructive)) }
#music-history-list .q-item { text-decoration:none; color:inherit }


/* ── chat por transmissão: seção no painel fixo + painel próprio pra ──────
   streams de pessoas (mesmo encaixe/visual do #fixed-panel) ────────────── */
#chat-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(360px, 92vw);
  background:hsl(var(--surface-2)); border-left:1px solid hsl(var(--border));
  padding:20px 16px; overflow:auto; z-index:4;
  display:flex; flex-direction:column;
}
#chat-panel[hidden] { display:none }
#chat-panel h3 { font-family:var(--font-display); font-size:17px; font-weight:800;
                 letter-spacing:-.02em; margin-bottom:2px }
#chat-panel .desc { font-size:12px }
.chat-msgs { flex:1; min-height:120px; overflow:auto; display:flex;
             flex-direction:column; gap:6px; padding:6px 0 }
#chat-panel .chat-msgs { flex:1 }
.chat-msg { font-size:13px; line-height:1.45; overflow-wrap:anywhere }
.chat-msg b { margin-right:6px; color:hsl(var(--foreground)) }
.chat-form { display:flex; gap:8px; padding-top:8px }
.chat-form input { flex:1; min-width:0 }
.chat-form button { flex:none }
/* TV: FAB do chat sobre o vídeo (acompanha o recolher do painel fixo) */
#chat-fab { position:absolute; bottom:16px; right:16px; z-index:6;
  background:var(--scrim); border:1px solid hsl(var(--border)) }
/* canais fixos: o FAB vive no vídeo, ao lado do painel lateral */
#player-wrap.tv-panel #chat-fab { right:382px }
#player-wrap.tv-panel.tv-panel-hidden #chat-fab { right:12px }
#chat-fab .badge {
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px;
  display:grid; place-items:center; padding:0 4px; border-radius:999px;
  background:hsl(var(--destructive)); color:#fff; font-size:10px; font-weight:700;
}

/* atualização pronta: chama atenção no canto sem interromper a transmissão */
#update-btn { color:hsl(var(--primary)); animation:update-pulse 2s ease-in-out infinite }
@keyframes update-pulse { 50% { opacity:.45 } }
@media (prefers-reduced-motion:reduce) { #update-btn { animation:none } }

/* ── mobile / PWA ────────────────────────────────────────────────────────
   No celular só existe assistir e câmera (getDisplayMedia não existe no iOS
   e é irregular no Android): o botão de tela some por .no-screenshare, posto
   no boot. O resto é a mesma UI em uma coluna — os painéis laterais de 360px
   viram gaveta embaixo, que é o único lugar onde cabem em 390px de tela. */

/* 100vh no iOS conta a barra de URL que some ao rolar: dvh é a altura real */
@supports (height:100dvh) { body { height:100dvh } }
body.no-screenshare #share { display:none }
/* sem o CTA de tela, a câmera vira o botão principal — e ganha rótulo */
body.no-screenshare #share-cam {
  width:auto; padding:0 16px; border-color:transparent; font-weight:600;
  border-radius:var(--radius-pill);
  background:hsl(var(--accent)); color:hsl(var(--primary-foreground));
}
body.no-screenshare #share-cam::after { content:'Câmera' }

@media (max-width:640px) {
  /* toque: abaixo de 16px o iOS dá zoom ao focar o campo */
  input, select, textarea { font-size:16px }

  /* header em duas linhas: marca + ações em cima, abas rolando embaixo */
  .bar { flex-wrap:wrap; gap:8px; padding:8px 12px;
         padding-top:calc(8px + env(safe-area-inset-top)) }
  .bar h1 { font-size:17px }
  .spacer { display:none }   /* com wrap, o empurrão viraria quebra de linha */
  .tabs { order:10; flex-basis:100%; margin-left:0; gap:4px;
          overflow-x:auto; scrollbar-width:none }
  .tabs::-webkit-scrollbar { display:none }
  .tab { padding:0 12px; font-size:13px; height:34px }
  .tab[data-tab="jam"] { display:inline-flex }   /* na linha própria cabe */
  #live-pill { order:9 }

  /* grade: uma coluna cheia, sem o respiro de desktop */
  #grid-live { padding:16px; gap:18px 14px;
               grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)) }
  .empty { min-height:46vh }
  .empty h4 { font-size:22px }

  /* painéis laterais viram gaveta inferior */
  #fixed-panel, #chat-panel, #jam-panel {
    top:auto; left:0; right:0; bottom:0; width:auto; height:58%;
    border-left:0; border-top:1px solid hsl(var(--border));
    border-radius:var(--radius-card) var(--radius-card) 0 0;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  }
  /* o vídeo sobe pro espaço que sobra em vez de ficar atrás da gaveta */
  #player-wrap.tv-panel video { height:42% }
  #player-wrap.tv-panel.tv-panel-hidden video { height:100% }
  #music-view, #jam-view { right:0; bottom:58% }
  #fixed-empty, #fixed-loading { inset:0 0 58% 0 }
  #fixed-bar { right:0; bottom:58%; padding:10px 14px }
  #player-wrap.tv-panel-hidden #music-view,
  #player-wrap.tv-panel-hidden #jam-view { bottom:0 }
  #player-wrap.tv-panel-hidden #fixed-bar { bottom:0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom)) }
  #fixed-panel-toggle, #player-wrap.tv-panel-hidden #fixed-panel-toggle { right:12px }
  #chat-fab, #player-wrap.tv-panel #chat-fab,
  #player-wrap.tv-panel.tv-panel-hidden #chat-fab {
    right:12px; bottom:calc(12px + env(safe-area-inset-bottom)) }
  #fixed-bar .skip { height:40px; width:40px }
  #mv-art { width:min(180px, 22vh) }
  #mv-title { font-size:18px }
  #mv-main { padding:16px 16px 8px }
  #lyrics { padding:24vh 12px 72px }

  /* diálogos: coluna única e tela quase cheia */
  dialog { width:min(560px, 94vw); padding:18px; max-height:88vh }
  .opts { grid-template-columns:1fr; gap:12px }
  .actions button { flex:1 }

  #mini-bar { width:calc(100vw - 16px);
              bottom:calc(8px + env(safe-area-inset-bottom)) }
  #toast { bottom:calc(16px + env(safe-area-inset-bottom));
           max-width:calc(100vw - 24px) }
}