:root{
  --bg:#0E0E16;
  --surface:#1A1A27;
  --raised:#2B2B3D;
  --line:#2B2B3D;
  --text:#E6E6F0;
  --muted:#8B8BA6;
  --brand:#5B3DFF;
  --brand-2:#8B6CFF;
  --ok:#3BD671;
  --warn:#FFB443;
  --alert:#FF5C7A;
  --display:"Poppins","Segoe UI",sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
/* Regra geral, deliberadamente !important: qualquer elemento com display
   próprio (ex.: display:flex) neutraliza o [hidden] padrão do navegador,
   porque regras de autor batem regras da UA mesmo com especificidade igual.
   Isto garante que hidden=true SEMPRE esconde, em qualquer elemento futuro. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}

.view{min-height:100vh;}

/* ── entrada ── */
#view-entry{display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse at 50% -10%, rgba(91,61,255,.28), transparent 60%);}
.entry-card{width:100%;max-width:360px;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:38px 30px;box-shadow:0 20px 60px -30px rgba(91,61,255,.6);}
.wordmark{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.03em;margin:14px 0 2px;}
.wordmark i{color:var(--brand-2);font-style:normal;}
.tagline{font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brand-2);margin:0 0 28px;}
.field{display:block;text-align:left;margin-bottom:14px;}
.field span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.field input{width:100%;background:var(--raised);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--text);font-size:14px;outline:none;}
.field input:focus{border-color:var(--brand-2);}
.btn{display:block;width:100%;border:none;border-radius:12px;padding:12px;font-weight:600;
  font-size:14px;margin-top:6px;}
.btn-primary{background:linear-gradient(150deg,var(--brand-2),var(--brand));color:#fff;}
.btn-ghost{background:transparent;color:var(--muted);margin-top:10px;}
.btn-ghost:hover{color:var(--text);}
.entry-error{color:var(--alert);font-size:12.5px;margin:14px 0 0;}

.join-log{margin-top:14px;background:#0A0A11;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;text-align:left;}
.join-log-head{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:7px 11px;border-bottom:1px solid var(--line);background:var(--raised);}
#join-log-body{margin:0;padding:9px 11px;max-height:150px;overflow-y:auto;font-family:var(--mono);
  font-size:10.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;}
.log-line{color:var(--muted);}
.log-line.log-ok{color:var(--ok);}
.log-line.log-warn{color:var(--warn);}
.log-line.log-err{color:var(--alert);}

.build-mark{color:#3A3A50;font-family:var(--mono);font-size:9.5px;margin:16px 0 0;}

/* ── sala ── */
#view-room{display:flex;flex-direction:column;}
.room-top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;
  border-bottom:1px solid var(--line);background:var(--surface);}
.room-top-l{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:14px;}
.pill{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--raised);
  border-radius:999px;padding:3px 10px;}
.room-top-r{display:flex;gap:8px;}
.chip-btn{background:var(--raised);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:7px 12px;font-size:12px;}
.chip-danger{border-color:#3A2230;color:var(--alert);}

.room-toast{margin:10px 18px 0;padding:10px 14px;border-radius:10px;font-size:12.5px;line-height:1.5;
  background:var(--raised);border:1px solid var(--warn);color:var(--text);}
.room-toast.err{border-color:var(--alert);}
.room-toast b{display:block;font-family:var(--display);font-weight:600;font-size:12px;margin-bottom:2px;}

.room-body{flex:1;display:flex;min-height:0;}
.stage{flex:1;padding:18px;overflow:auto;position:relative;}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.tile{position:relative;aspect-ratio:4/3;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.tile video{width:100%;height:100%;object-fit:cover;}
.tile .avatar{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:700;font-size:20px;color:#fff;}
.tile .label{position:absolute;left:9px;bottom:9px;font-size:12px;background:rgba(14,14,22,.7);
  padding:3px 9px;border-radius:999px;display:flex;align-items:center;gap:5px;z-index:1;}
.tile.speaking{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--brand-2);}
.tile .mic-off{color:var(--alert);}

/* selo LIVE (compartilhamento de tela ativo) */
.badge-live{position:absolute;top:9px;left:9px;display:flex;align-items:center;gap:5px;
  background:var(--alert);color:#fff;font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.03em;padding:3px 9px 3px 7px;border-radius:999px;z-index:1;}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:live-pulse 1.4s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.tile.live{cursor:pointer;border-color:var(--alert);}
.tile.live:hover{box-shadow:0 0 0 2px var(--alert);}

/* botão de remover, só visível para o anfitrião */
.kick-btn{position:absolute;top:8px;right:8px;z-index:2;width:22px;height:22px;
  border-radius:50%;border:none;background:rgba(14,14,22,.7);color:var(--muted);
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;}
.kick-btn:hover{background:var(--alert);color:#fff;}
@media (prefers-reduced-motion: reduce){.badge-live .dot{animation:none;}}

/* visão em destaque, tipo Discord: cobre a grade ao focar num compartilhamento */
.spotlight{position:absolute;inset:18px;border-radius:14px;overflow:hidden;
  background:#000;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.spotlight video{width:100%;height:100%;object-fit:contain;background:#000;}
.spotlight-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:linear-gradient(to bottom, rgba(0,0,0,.65), transparent);}
.spotlight-name{font-family:var(--display);font-weight:600;font-size:13px;color:#fff;}
.spotlight-top .chip-btn{margin-left:0;}
.spotlight-top .chip-btn + .chip-btn{margin-left:8px;}
.stage.spotlight-active .tiles{display:none;}

.spotlight-volume{display:flex;align-items:center;gap:6px;color:#fff;}
.spotlight-volume svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}
.spotlight-volume input[type="range"]{width:70px;}

.spotlight-mini-ctrls{display:flex;align-items:center;gap:6px;}
.mini-ctrl{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;}
.mini-ctrl:hover{background:rgba(255,255,255,.18);}
.mini-ctrl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.mini-ctrl.muted{background:var(--alert);border-color:transparent;}
.mini-ctrl[data-on="true"]{background:linear-gradient(150deg,var(--brand-2),var(--brand));border-color:transparent;}

.spotlight-top > :last-child{margin-left:auto;}

.side{width:280px;border-left:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;}
.chat-log{flex:1;overflow:auto;padding:14px;font-size:13px;display:flex;flex-direction:column;gap:10px;}
.chat-msg b{color:var(--brand-2);font-family:var(--display);font-size:12px;}
.chat-msg span{display:block;color:var(--text);margin-top:2px;}
.chat-msg time{font-family:var(--mono);font-size:9.5px;color:var(--muted);}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);}
.chat-form input{flex:1;background:var(--raised);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;color:var(--text);outline:none;}

.controls{display:flex;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--line);
  background:var(--surface);}
.ctrl-group{display:flex;align-items:center;gap:10px;}

.ctrl{
  position:relative;width:46px;height:46px;padding:0;flex:none;
  background:var(--raised);border:1px solid var(--line);border-radius:50%;
  color:var(--text);display:flex;align-items:center;justify-content:center;
  transition:background .14s, border-color .14s, transform .1s;
}
.ctrl:hover{background:#33334A;}
.ctrl:active{transform:scale(.94);}
.ctrl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.ctrl-label{
  position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:var(--muted);white-space:nowrap;
}

/* câmera / tela / ouvir-me: acender em violeta quando ativado */
.ctrl[data-on="true"]{background:linear-gradient(150deg,var(--brand-2),var(--brand));
  border-color:transparent;color:#fff;}

.ctrl-wrap{position:relative;display:flex;align-items:flex-end;}
.ctrl-caret{width:18px;height:18px;margin-left:-10px;margin-bottom:2px;padding:0;flex:none;
  border-radius:50%;border:2px solid var(--surface);background:var(--line);color:var(--text);
  display:flex;align-items:center;justify-content:center;z-index:1;}
.ctrl-caret:hover{background:var(--brand);}
.ctrl-caret svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* menu flutuante genérico: escolha de dispositivo e volume por participante */
.float-menu{position:fixed;z-index:20;min-width:220px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 20px 44px -18px rgba(0,0,0,.7);}
.float-menu-head{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:6px 8px;}
.device-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;font-size:13px;
  color:var(--text);cursor:pointer;}
.device-item:hover{background:var(--raised);}
.device-item .dev-check{width:14px;color:var(--brand-2);flex:none;}
.peer-menu-row{display:flex;align-items:center;gap:8px;padding:8px;font-size:12.5px;color:var(--text-2,var(--text));}
.peer-menu-row input[type="range"]{flex:1;}
#peer-menu-value{font-family:var(--mono);font-size:11px;color:var(--muted);width:38px;text-align:right;flex:none;}

input[type="range"]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:var(--line);outline:none;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--brand-2);cursor:pointer;}
input[type="range"]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;
  background:var(--brand-2);cursor:pointer;}

/* microfone: ícone troca (cortado) e acende em vermelho ao mutar — nunca só cor */
.ctrl .icon-off{display:none;}
#btn-mic.muted{background:var(--alert);border-color:transparent;color:#fff;}
#btn-mic.muted .icon-on{display:none;}
#btn-mic.muted .icon-off{display:block;}

.conn-pill{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;color:var(--muted);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--warn);display:block;}
.dot.ok{background:var(--ok);}
.dot.bad{background:var(--alert);}

@media (max-width:760px){
  .room-body{flex-direction:column;}
  .side{width:100%;height:200px;border-left:none;border-top:1px solid var(--line);}
}