/* === FAP · CSS de VOZ partilhado (index.html + admin.html) ===
   Fonte única do estilo do painel de voz. Usa os tokens (--edge, --panel-2, --cyan…)
   definidos no :root de cada página. Passo (a) da partilha do componente chat/voz. */
.voice{margin-top:10px;border:1px solid var(--edge);border-radius:12px;background:var(--panel-2);padding:9px 11px}
.vhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vhead .vt{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--cyan)}
.vhead .vt svg{width:13px;height:13px}
.vhead .sp{flex:1}
.vbtn{padding:8px 14px;border:0;border-radius:10px;cursor:pointer;font-weight:600;font-size:13px;color:#fff;background:var(--accent);transition:filter .15s}
.vbtn:hover{filter:brightness(1.08)}
.vbtn.join{background:var(--ok)}
.vbtn.leave{background:var(--danger)}
.vbtn.mic{background:#1c3350;border:1px solid var(--edge);color:var(--txt)}
.vbtn.mic.muted{background:var(--danger);border-color:var(--danger);color:#fff}
.vbtn svg{width:15px;height:15px;vertical-align:-2px}
.vstat{color:var(--muted);font-size:11.5px;margin-top:7px;min-height:14px}
.vstat.bad{color:#ff9090}
.vparts{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:9px}
.vpart{display:inline-flex;align-items:center;gap:6px;font-family:Consolas,Menlo,monospace;font-size:12.5px;padding:4px 9px 4px 7px;border:1px solid var(--edge);border-radius:20px;background:var(--panel)}
.vpart .dot{width:9px;height:9px;border-radius:50%;background:#33475e;flex:none;transition:box-shadow .1s,background .1s}
.vpart.talk .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.28)}
.vpart.me{border-color:#2f5c8a}
.vpart .tag{color:var(--muted);font-size:10px}
.vpart .vmini{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--edge);border-radius:7px;background:#152536;color:var(--muted);cursor:pointer}
.vpart .vmini svg{width:13px;height:13px}
.vpart .vmini.off{background:var(--danger);border-color:var(--danger);color:#fff}
.vpart .vvol{width:62px;height:4px;accent-color:var(--cyan);cursor:pointer}
.vpart .vmutedico{display:inline-flex;align-items:center;color:var(--danger);margin-left:1px}
.vpart .vq{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px;margin-left:1px;color:var(--muted)}
.vpart .vq i{width:3px;background:currentColor;border-radius:1px;opacity:.28}
.vpart .vq i:nth-child(1){height:5px}.vpart .vq i:nth-child(2){height:8px}.vpart .vq i:nth-child(3){height:11px}
.vpart .vq.q3,.vpart .vq.q2{color:var(--ok)}.vpart .vq.q1{color:var(--warn)}.vpart .vq.q0{color:var(--danger)}
.vpart .vq.q3 i,.vpart .vq.q2 i:nth-child(-n+2),.vpart .vq.q1 i:nth-child(1),.vpart .vq.q0 i:nth-child(1){opacity:1}
.vmyq{display:inline-flex;align-items:flex-end;gap:1.5px;height:12px;margin-right:3px;color:var(--muted);cursor:help}
.vmyq i{width:3px;background:currentColor;border-radius:1px;opacity:.28}
.vmyq i:nth-child(1){height:5px}.vmyq i:nth-child(2){height:8px}.vmyq i:nth-child(3){height:12px}
.vmyq.q3,.vmyq.q2{color:var(--ok)}.vmyq.q1{color:var(--warn)}.vmyq.q0{color:var(--danger)}
.vmyq.q3 i,.vmyq.q2 i:nth-child(-n+2),.vmyq.q1 i:nth-child(1),.vmyq.q0 i:nth-child(1){opacity:1}
.vpart .vmutedico svg{width:13px;height:13px}
.vpart .vkick{color:var(--warn);border-color:#3a2f1a}
.vpart .vkick.on{background:var(--warn);border-color:var(--warn);color:#151005}
.vpart .vexpel{color:var(--danger);border-color:#3a1a1a}
.vpart .vexpel:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.voice{position:relative}
.vgear{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--edge);border-radius:8px;background:var(--panel-2);color:var(--muted);cursor:pointer}
.vgear:hover{border-color:var(--cyan);color:var(--cyan)}
.vgear.on{border-color:var(--cyan);color:var(--cyan);background:rgba(224,181,63,.12)}
.vgear svg{width:16px;height:16px}
.vibtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--edge);border-radius:9px;background:var(--panel-2);color:var(--txt);cursor:pointer}
.vibtn:hover{border-color:var(--cyan)}
.vibtn svg{width:18px;height:18px}
.vibtn.off{background:var(--danger);border-color:var(--danger);color:#fff}
/* Definicoes de voz num popover (roda dentada) — position:fixed p/ nao ser cortado pelo overflow do painel */
.vdevs{position:fixed;z-index:50;width:min(290px,92vw);display:none;flex-direction:column;gap:11px;
  padding:13px;background:var(--panel);border:1px solid var(--edge-2);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.55);
  max-height:calc(100vh - 20px);overflow-y:auto}
.vdevs.open{display:flex}
.vdevs label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}
.vdevs select{max-width:170px;padding:5px 7px;border-radius:8px;border:1px solid var(--edge);background:var(--panel);color:var(--txt);font-size:12px}
.vdevs select:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(224,181,63,.15)}
.vmeter{position:relative;flex:1 1 120px;min-width:110px;height:8px;border-radius:5px;background:#0d1a26;border:1px solid var(--edge);overflow:hidden;align-self:center}
.vmeterbar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--muted);transition:width .05s linear}
.vmeterbar.on{background:var(--ok)}
.vmeterthr{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--cyan);opacity:.85}
.vmodebtn{font:700 11px system-ui,sans-serif;padding:4px 9px;border:1px solid var(--edge);border-radius:8px;background:var(--panel-2);color:var(--muted);cursor:pointer}
.vmodebtn:hover{border-color:var(--cyan);color:var(--txt)}
.vmodebtn.arm{background:var(--warn);color:#151005;border-color:var(--warn)}
.vseg{display:inline-flex;border:1px solid var(--edge);border-radius:8px;overflow:hidden}
.vsegbtn{font:700 11px system-ui,sans-serif;padding:5px 10px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.vsegbtn+.vsegbtn{border-left:1px solid var(--edge)}
.vsegbtn.active{background:rgba(224,181,63,.16);color:var(--cyan)}
.vsegbtn:not(.active):hover{color:var(--txt)}