/* ZFX Call — identidade ZFX adaptada (Montserrat hospedada, gradiente só como assinatura) */
@font-face { font-family: Montserrat; src: url(/fontes/montserrat-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --fundo-0: #0b100e; --fundo-1: #121917; --fundo-2: #182320; --fundo-3: #1f2b27; --fundo-4: #27352f;
  --tinta: #e6ebe8; --tinta-2: #b4bfb9; --tinta-3: #8a978f; --tinta-4: #5f6c66;
  --linha: #243029; --linha-forte: #324139;
  --marca-a: #00f542; --marca-b: #00c2f0; --marca: linear-gradient(100deg, var(--marca-a), var(--marca-b));
  --acento: #2fd38f; --acento-fundo: rgba(47,211,143,.14); --link: #4ad0ff;
  --perigo: #ef5a46; --perigo-fundo: rgba(239,90,70,.14); --atencao: #f0b429; --ok: #2fd38f;
  --mencao: rgba(240,180,41,.14); --mencao-borda: #f0b429;
  --raio: 8px; --raio-g: 12px; --lateral: 272px; --membros: 240px; --topo: 50px;
  --fonte: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sombra: 0 12px 40px rgba(0,0,0,.45);
}
:root[data-tema="claro"] {
  --fundo-0: #e4e9e6; --fundo-1: #eef2f0; --fundo-2: #ffffff; --fundo-3: #f1f5f3; --fundo-4: #e2e8e5;
  --tinta: #14201d; --tinta-2: #3b4a44; --tinta-3: #65736d; --tinta-4: #94a09a;
  --linha: #dde4e0; --linha-forte: #c8d2cc;
  --acento: #0a7a56; --acento-fundo: rgba(10,122,86,.1); --link: #0a6fa8;
  --perigo: #c6381f; --perigo-fundo: rgba(198,56,31,.1); --mencao: rgba(240,180,41,.18);
  --sombra: 0 12px 40px rgba(20,32,29,.18);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.45; color: var(--tinta); background: var(--fundo-2); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--link); }
::selection { background: rgba(0,194,240,.35); }
[hidden] { display: none !important; }
.vis-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- botões e campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--raio); background: var(--fundo-4); color: var(--tinta); font-weight: 600; font-size: 14px; transition: filter .15s, background .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-primario { background: var(--marca); color: #0b100e; }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-fantasma { background: transparent; color: var(--tinta-2); }
.btn-fantasma:hover { background: var(--fundo-3); color: var(--tinta); }
.btn-icone { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: var(--raio); color: var(--tinta-3); display: inline-flex; align-items: center; justify-content: center; }
.btn-icone:hover { background: var(--fundo-3); color: var(--tinta); }
.btn-icone.ativo { color: var(--acento); }
.btn-icone svg, .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.campo { width: 100%; min-height: 38px; padding: 8px 12px; border-radius: var(--raio); border: 1px solid var(--linha-forte); background: var(--fundo-1); color: var(--tinta); outline: none; }
.campo:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
textarea.campo { resize: vertical; min-height: 80px; }
label.rotulo { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); margin: 14px 0 6px; }
label.rotulo:first-child { margin-top: 0; }
.ajuda { font-size: 12px; color: var(--tinta-3); margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--fundo-4); font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.chip-admin { background: var(--acento-fundo); color: var(--acento); }

svg.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }

/* ---------- avatar ---------- */
.avatar { --m: 160; width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: hsl(var(--m) 55% 42%); position: relative; user-select: none; }
.avatar.p { width: 24px; height: 24px; font-size: 10px; }
.avatar.g { width: 80px; height: 80px; font-size: 30px; }
.avatar .pres { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--fundo-1); background: var(--tinta-4); }
.avatar.p .pres { width: 10px; height: 10px; border-width: 2px; }
.pres.online { background: var(--ok); } .pres.ausente { background: var(--atencao); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr auto; height: 100dvh; }
.lateral { background: var(--fundo-1); display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--linha); }
.principal { display: flex; flex-direction: column; min-width: 0; background: var(--fundo-2); position: relative; }
.membros { width: var(--membros); background: var(--fundo-1); border-left: 1px solid var(--linha); overflow-y: auto; padding: 12px 8px; }
.membros[hidden] { display: none; }
.app.sem-membros .membros { display: none; }

.lateral-cab { height: var(--topo); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--linha); font-weight: 800; font-size: 16px; }
.lateral-cab .marca { background: var(--marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lateral-cab .btn-icone { margin-left: auto; }
.lateral-busca { margin: 10px 10px 4px; }
.lateral-busca .btn { width: 100%; justify-content: flex-start; font-weight: 500; color: var(--tinta-3); background: var(--fundo-0); min-height: 32px; }
.lateral-nav { flex: 1; overflow-y: auto; padding: 6px 8px 12px; scrollbar-width: thin; }
.secao { margin-top: 14px; }
.secao-cab { display: flex; align-items: center; gap: 4px; padding: 4px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); cursor: pointer; user-select: none; border-radius: 6px; }
.secao-cab:hover { color: var(--tinta); }
.secao-cab svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform .15s; }
.secao.fechada .secao-cab svg { transform: rotate(-90deg); }
.secao.fechada .secao-corpo > .canal:not(.nao-lido):not(.ativo) { display: none; }
.secao-cab .mais { margin-left: auto; opacity: 0; width: 20px; height: 20px; }
.secao-cab:hover .mais { opacity: 1; }
.canal { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; color: var(--tinta-3); cursor: pointer; font-weight: 500; position: relative; min-width: 0; }
.canal:hover { background: var(--fundo-3); color: var(--tinta); }
.canal.ativo { background: var(--fundo-4); color: var(--tinta); }
.canal.nao-lido { color: var(--tinta); font-weight: 700; }
.canal.nao-lido::before { content: ""; position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: var(--tinta); }
.canal .ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: .8; }
.canal .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--perigo); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.canal .acoes { display: none; gap: 2px; }
.canal:hover .acoes { display: flex; }
.canal .acoes .btn-icone { width: 22px; height: 22px; }
.canal .acoes svg { width: 15px; height: 15px; }
.voz-part { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 30px; color: var(--tinta-3); font-size: 13px; border-radius: 6px; }
.voz-part.falando .avatar { box-shadow: 0 0 0 2px var(--ok); }
.voz-part .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-part .ico-est { width: 14px; height: 14px; stroke: var(--tinta-4); fill: none; stroke-width: 2; }
.voz-part .ico-est.on { stroke: var(--acento); }
.voz-part .ico-est.off { stroke: var(--perigo); }

.rodape-usuario { background: var(--fundo-0); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.painel-voz { background: var(--fundo-3); border-radius: var(--raio); padding: 8px 10px; }
.painel-voz .estado { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.painel-voz .estado b { color: var(--ok); }
.painel-voz .canal-nome { font-size: 12px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-voz .botoes { display: flex; gap: 4px; margin-top: 6px; }
.painel-voz .botoes .btn-icone { flex: 1; background: var(--fundo-4); }
.painel-voz .botoes .btn-icone.ativo { background: var(--acento-fundo); color: var(--acento); }
.painel-voz .botoes .btn-icone.sair { color: var(--perigo); }
.eu { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--raio); }
.eu .textos { flex: 1; min-width: 0; cursor: pointer; }
.eu .textos:hover { opacity: .85; }
.eu .apelido { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu .sub { font-size: 12px; color: var(--tinta-3); }
.eu .btn-icone { width: 32px; height: 32px; }
.eu .btn-icone.off { color: var(--perigo); }

/* ---------- topo e conteúdo ---------- */
.topo { height: var(--topo); display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--linha); flex: none; }
.topo .ico { width: 22px; height: 22px; stroke: var(--tinta-3); fill: none; stroke-width: 2; flex: none; }
.topo h1 { font-size: 16px; margin: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .topico { color: var(--tinta-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--linha-forte); padding-left: 10px; margin-left: 2px; flex: 1; }
.topo .acoes { margin-left: auto; display: flex; gap: 2px; }
.topo .busca-campo { width: 180px; min-height: 30px; padding: 4px 10px; transition: width .15s; }
.topo .busca-campo:focus { width: 280px; }
.menu-btn { display: none; }
.conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.lista-msgs { flex: 1; overflow-y: auto; padding: 16px 0 8px; scrollbar-width: thin; }
.msg { display: grid; grid-template-columns: 56px 1fr; padding: 2px 16px 2px 0; position: relative; }
.msg:hover { background: rgba(0,0,0,.14); }
:root[data-tema="claro"] .msg:hover { background: rgba(0,0,0,.035); }
.msg.inicio { margin-top: 14px; }
.msg > :not(.av):not(.hora-lateral):not(.ico) { grid-column: 2; }
.msg .av { grid-column: 1; grid-row: 1 / span 6; align-self: start; justify-self: center; margin-top: 2px; }
.msg.com-resposta .av { grid-row: 2 / span 6; }
.msg .hora-lateral { grid-column: 1; grid-row: 1 / span 6; font-size: 10px; color: var(--tinta-4); text-align: center; visibility: hidden; align-self: start; padding-top: 4px; }
.msg:hover .hora-lateral { visibility: visible; }
.msg .cab { display: flex; align-items: baseline; gap: 8px; }
.msg .autor { font-weight: 700; cursor: pointer; }
.msg .autor:hover { text-decoration: underline; }
.msg .autor.adm { color: var(--acento); }
.msg .hora { font-size: 11px; color: var(--tinta-4); }
.msg .corpo { word-break: break-word; white-space: pre-wrap; color: var(--tinta); }
.msg .corpo code { font-family: var(--mono); font-size: 13px; background: var(--fundo-0); padding: 1px 5px; border-radius: 4px; }
.msg .corpo pre { background: var(--fundo-0); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; overflow-x: auto; margin: 4px 0; white-space: pre; }
.msg .corpo pre code { background: none; padding: 0; }
.msg .corpo blockquote { margin: 2px 0; padding-left: 10px; border-left: 3px solid var(--linha-forte); color: var(--tinta-2); }
.msg .corpo .mencao { background: rgba(0,194,240,.18); color: var(--link); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.msg .corpo .mencao.minha { background: var(--mencao); color: var(--atencao); }
.msg.mencionado { background: var(--mencao); box-shadow: inset 3px 0 0 var(--mencao-borda); }
.msg .editado { font-size: 10px; color: var(--tinta-4); }
.msg.apagada .corpo { color: var(--tinta-4); font-style: italic; }
.msg.sistema { grid-template-columns: 56px 1fr; color: var(--tinta-3); font-size: 13px; }
.msg.sistema .ico { justify-self: center; width: 18px; height: 18px; stroke: var(--tinta-4); fill: none; stroke-width: 2; }
.msg .resposta { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-3); margin-bottom: 2px; cursor: pointer; }
.msg .resposta::before { content: ""; width: 24px; height: 10px; border: 2px solid var(--linha-forte); border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; margin-left: -34px; margin-top: 8px; }
.msg .resposta b { color: var(--tinta-2); }
.msg .resposta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.msg .anexos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.msg .anexos img { max-width: min(400px, 100%); max-height: 300px; border-radius: var(--raio); display: block; cursor: zoom-in; background: var(--fundo-0); }
.msg .anexos video, .msg .anexos audio { max-width: min(480px, 100%); border-radius: var(--raio); }
.msg .arquivo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--fundo-1); color: var(--tinta); text-decoration: none; max-width: 100%; }
.msg .arquivo svg { width: 20px; height: 20px; stroke: var(--tinta-3); fill: none; stroke-width: 2; }
.msg .arquivo small { color: var(--tinta-3); }
.msg .reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reacao { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--linha-forte); background: var(--fundo-1); font-size: 13px; }
.reacao.minha { border-color: var(--link); background: rgba(0,194,240,.12); }
.reacao b { font-size: 12px; color: var(--tinta-2); }
.msg .ferr { position: absolute; right: 16px; top: -14px; display: none; gap: 0; background: var(--fundo-1); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.msg:hover .ferr, .msg.menu-aberto .ferr { display: flex; }
.msg .ferr .btn-icone { width: 30px; height: 30px; border-radius: 0; }
.msg .ferr .btn-icone svg { width: 17px; height: 17px; }
.msg .fixada-tag { font-size: 10px; color: var(--atencao); margin-left: 4px; }
.divisor { display: flex; align-items: center; gap: 10px; margin: 14px 16px 2px; color: var(--tinta-4); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.divisor.novo { color: var(--perigo); } .divisor.novo::before, .divisor.novo::after { background: var(--perigo); }
.msg .editor { grid-column: 2; }
.msg .editor .campo { min-height: 60px; }
.msg .editor .dicas { font-size: 11px; color: var(--tinta-3); margin-top: 4px; }
.msg .editor .dicas a { cursor: pointer; }
.vazio { padding: 40px 32px; color: var(--tinta-3); }
.vazio h2 { color: var(--tinta); margin: 0 0 6px; font-size: 24px; }
.vazio .ico { width: 56px; height: 56px; stroke: var(--tinta-4); fill: none; stroke-width: 1.5; margin-bottom: 10px; display: block; }
.carregando { text-align: center; color: var(--tinta-4); font-size: 12px; padding: 10px; }
.pular { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--fundo-4); box-shadow: var(--sombra); }

.compor { padding: 0 16px 14px; flex: none; position: relative; }
.digitando { height: 20px; font-size: 12px; color: var(--tinta-3); padding: 2px 4px; }
.digitando b { color: var(--tinta-2); }
.compor .caixa { background: var(--fundo-3); border-radius: var(--raio); border: 1px solid transparent; }
.compor .caixa:focus-within { border-color: var(--linha-forte); }
.compor .resp-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: var(--tinta-3); border-bottom: 1px solid var(--linha); }
.compor .resp-bar b { color: var(--tinta); }
.compor .resp-bar .btn-icone { margin-left: auto; width: 24px; height: 24px; }
.compor .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 0; }
.compor .chip-anexo { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--fundo-1); border: 1px solid var(--linha); border-radius: var(--raio); font-size: 12px; max-width: 220px; }
.compor .chip-anexo img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.compor .chip-anexo .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compor .chip-anexo .btn-icone { width: 22px; height: 22px; }
.compor .linha { display: flex; align-items: flex-end; gap: 4px; padding: 4px 6px 4px 4px; }
.compor textarea { flex: 1; background: none; border: 0; outline: none; resize: none; padding: 10px 8px; max-height: 50vh; min-height: 42px; line-height: 1.4; font-size: 15px; }
.compor .btn-icone { width: 36px; height: 36px; margin-bottom: 3px; }
.compor .btn-enviar { color: var(--acento); }
.compor .dica { font-size: 11px; color: var(--tinta-4); padding: 4px 4px 0; display: flex; gap: 12px; }
.compor.arrastando .caixa { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.sugestoes { position: absolute; left: 16px; right: 16px; bottom: 100%; margin-bottom: 4px; background: var(--fundo-1); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: var(--sombra); max-height: 240px; overflow-y: auto; z-index: 5; padding: 4px; }
.sugestoes .item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.sugestoes .item.sel, .sugestoes .item:hover { background: var(--fundo-3); }
.sugestoes .item small { color: var(--tinta-3); margin-left: auto; }

/* ---------- membros ---------- */
.membros .grupo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); padding: 12px 8px 4px; }
.membro { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; cursor: pointer; color: var(--tinta-2); }
.membro:hover { background: var(--fundo-3); color: var(--tinta); }
.membro.offline { opacity: .5; }
.membro .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.membro .nome.adm { color: var(--acento); }
.membro .sub { font-size: 11px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- palco de voz ---------- */
.palco { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--fundo-0); }
.palco .grade { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 14px; align-content: center; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: auto; }
.palco .grade.foco { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.palco .grade.foco .tile:not(.em-foco) { display: none; }
.palco .grade.foco .faixa { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.palco .grade.foco .faixa .tile { display: block; width: 180px; min-height: 100px; flex: none; }
.tile { position: relative; background: var(--fundo-3); border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; min-height: 140px; border: 2px solid transparent; cursor: pointer; }
.tile.falando { border-color: var(--ok); }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.tela video { object-fit: contain; }
.tile .rotulo { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.55); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tile .rotulo svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; }
.tile .rotulo svg.off { stroke: var(--perigo); }
.tile .avatar.g { box-shadow: 0 0 0 0 var(--ok); transition: box-shadow .15s; }
.tile.falando .avatar.g { box-shadow: 0 0 0 4px var(--ok); }
.palco .barra { flex: none; display: flex; justify-content: center; gap: 8px; padding: 12px; border-top: 1px solid var(--linha); background: var(--fundo-1); }
.palco .barra .btn { min-width: 48px; height: 48px; border-radius: 50%; padding: 0; background: var(--fundo-4); }
.palco .barra .btn svg { width: 22px; height: 22px; }
.palco .barra .btn.on { background: var(--acento); color: #0b100e; }
.palco .barra .btn.off { background: var(--perigo); color: #fff; }
.palco .barra .btn.sair { background: var(--perigo); color: #fff; width: auto; border-radius: 24px; padding: 0 18px; }
.palco .antes { flex: 1; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--tinta-3); }
.palco .antes h2 { color: var(--tinta); margin: 10px 0 4px; }
.palco .antes .quem { display: flex; gap: -8px; justify-content: center; margin: 14px 0; }
.palco .antes .quem .avatar { margin: 0 -4px; border: 2px solid var(--fundo-0); }

/* ---------- diálogos, menus, toasts ---------- */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; padding: 16px; }
.dialogo { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--fundo-2); border: 1px solid var(--linha-forte); border-radius: var(--raio-g); box-shadow: var(--sombra); }
.dialogo.largo { width: min(820px, 100%); }
.dialogo .cab { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
.dialogo .cab h2 { font-size: 18px; margin: 0; flex: 1; }
.dialogo .cab .btn-icone { margin-left: auto; }
.dialogo .corpo { padding: 8px 20px 16px; }
.dialogo .pe { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--linha); }
.dialogo .pe .esq { margin-right: auto; }
.menu { position: fixed; z-index: 60; min-width: 190px; background: var(--fundo-1); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: var(--sombra); padding: 4px; }
.menu .it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 6px; text-align: left; font-weight: 500; font-size: 14px; }
.menu .it:hover { background: var(--fundo-3); }
.menu .it.perigo { color: var(--perigo); }
.menu .it svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; }
.emojis { position: fixed; z-index: 60; width: 300px; background: var(--fundo-1); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: var(--sombra); padding: 8px; }
.emojis .campo { margin-bottom: 6px; min-height: 32px; }
.emojis .grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 200px; overflow-y: auto; }
.emojis .grade button { font-size: 20px; height: 34px; border-radius: 6px; }
.emojis .grade button:hover { background: var(--fundo-3); }
.toasts { position: fixed; top: 12px; right: 12px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100% - 24px)); }
.toast { background: var(--fundo-1); border: 1px solid var(--linha-forte); border-left: 4px solid var(--acento); border-radius: var(--raio); padding: 10px 14px; font-size: 14px; box-shadow: var(--sombra); animation: entra .18s ease-out; }
.toast.erro { border-left-color: var(--perigo); }
.toast.aviso { border-left-color: var(--atencao); }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
.perfil-card { display: flex; gap: 14px; align-items: center; }
.perfil-card .textos { min-width: 0; }
.perfil-card h3 { margin: 0; font-size: 18px; }
.perfil-card .sub { color: var(--tinta-3); font-size: 13px; }
.lista-simples { display: flex; flex-direction: column; gap: 4px; }
.lista-simples .li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio); background: var(--fundo-1); border: 1px solid var(--linha); }
.lista-simples .li .cresce { flex: 1; min-width: 0; }
.lista-simples .li .sub { font-size: 12px; color: var(--tinta-3); }
.lista-simples .li select { min-height: 30px; padding: 2px 6px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; }
.abas button { padding: 8px 12px; font-weight: 700; color: var(--tinta-3); border-bottom: 2px solid transparent; }
.abas button.ativa { color: var(--tinta); border-image: var(--marca) 1; border-bottom: 2px solid; }
.matiz { width: 100%; }
input[type=range].matiz { -webkit-appearance: none; height: 10px; border-radius: 5px; background: linear-gradient(90deg, hsl(0 55% 42%), hsl(60 55% 42%), hsl(120 55% 42%), hsl(180 55% 42%), hsl(240 55% 42%), hsl(300 55% 42%), hsl(360 55% 42%)); }
.tela-login { height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 20% -10%, rgba(0,245,66,.08), transparent), radial-gradient(1000px 500px at 100% 100%, rgba(0,194,240,.1), transparent), var(--fundo-2); }
.tela-login .cartao { width: min(420px, 100%); background: var(--fundo-1); border: 1px solid var(--linha); border-radius: 16px; padding: 32px; text-align: center; }
.tela-login h1 { margin: 12px 0 4px; font-size: 28px; }
.tela-login h1 b { background: var(--marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tela-login p { color: var(--tinta-3); margin: 0 0 20px; }
.tela-login .btn { width: 100%; min-height: 44px; }
.tela-login .pe { margin-top: 18px; font-size: 12px; color: var(--tinta-4); }
.admin { padding: 20px; overflow-y: auto; flex: 1; }
.admin h2 { margin: 0 0 12px; }
.admin table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin th, .admin td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.admin th { font-size: 11px; text-transform: uppercase; color: var(--tinta-3); }
.admin .tbl-wrap { overflow-x: auto; }
.busca-res { flex: 1; overflow-y: auto; padding: 12px 0; }
.busca-res .cab-canal { padding: 10px 16px 2px; font-size: 12px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; }
.busca-res .msg { cursor: pointer; }
.rede { position: absolute; top: var(--topo); left: 0; right: 0; z-index: 3; background: var(--atencao); color: #1a1200; text-align: center; font-size: 13px; font-weight: 700; padding: 4px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 80; display: grid; place-items: center; cursor: zoom-out; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--raio); }

/* ---------- celular ---------- */
.veu-lateral { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(var(--lateral), 85vw); z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: none; }
  .app.lateral-aberta .lateral { transform: none; box-shadow: var(--sombra); }
  .app.lateral-aberta .veu-lateral { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39; }
  .membros { position: fixed; inset: 0 0 0 auto; z-index: 40; transform: translateX(100%); transition: transform .2s; }
  .app.membros-abertos .membros { transform: none; box-shadow: var(--sombra); }
  .menu-btn { display: inline-flex; }
  .topo .topico { display: none; }
  .topo .busca-campo { width: 120px; }
  .msg { grid-template-columns: 48px 1fr; padding-right: 10px; }
  .msg .ferr { display: none !important; }
  .compor { padding: 0 8px 8px; }
  .compor textarea { font-size: 16px; }
  .compor .dica { display: none; }
  .palco .grade { grid-template-columns: 1fr; }
  .dialogo { max-height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }