@font-face {
  font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(vendor/fonte/nunito-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(vendor/fonte/nunito-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Identidade do Bafafá: tons quentes de ameixa, acento coral/rosa e amarelo do ícone. */
:root {
  --fundo-0: #151118;
  --fundo-1: #1f1923;
  --fundo-2: #271f2c;
  --fundo-3: #332939;
  --fundo-hover: #2f2635;
  --fundo-ativo: #3c3044;
  --fundo-flutuante: #120e15;
  --fundo-painel: #1a1520;
  --borda: #3a2f41;
  --texto: #ece4ef;
  --texto-forte: #fff7f2;
  --texto-suave: #b4a6ba;
  --texto-mudo: #85788c;
  --marca: #f0507a;
  --marca-hover: #d63b66;
  --marca-suave: rgba(240, 80, 122, .16);
  --marca-texto: #ffb3c6;
  --gradiente: linear-gradient(135deg, #ff7a45, #e8378f);
  --verde: #2fc98b;
  --verde-hover: #22a572;
  --vermelho: #ff4d5e;
  --vermelho-hover: #e0384a;
  --amarelo: #ffc94d;
  --link: #ffa36b;
  --mencao-fundo: rgba(255, 201, 77, .09);
  --mencao-borda: #ffc94d;
  --neutro: #4a3e52;
  --neutro-hover: #5c4e65;
  --raio: 12px;
  --fonte: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-mono: Consolas, "Cascadia Code", "Fira Code", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo-2); color: var(--texto); font: 16px/1.375 var(--fonte);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.flex { flex: 1; }
.ic { flex-shrink: 0; display: block; }
.ic .corte { stroke: var(--vermelho); }
.vermelho { color: var(--vermelho) !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--fundo-0); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
#mensagens::-webkit-scrollbar { width: 14px; }
#mensagens::-webkit-scrollbar-thumb { border: 4px solid var(--fundo-2); border-radius: 7px; }
#mensagens::-webkit-scrollbar-track { background: #2b2d31; border: 4px solid var(--fundo-2); border-radius: 7px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 2px 16px; border-radius: 4px; font-size: 14px; font-weight: 500;
  background: var(--neutro); color: #fff; transition: background .15s;
}
.btn:hover { background: var(--neutro-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--marca); }
.btn.primario:hover { background: var(--marca-hover); }
.btn.verde { background: var(--verde); }
.btn.verde:hover { background: var(--verde-hover); }
.btn.perigo { background: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-hover); }
.btn.link { background: none; color: var(--texto); }
.btn.link:hover { text-decoration: underline; }
.btn.perigo-link { background: none; color: var(--vermelho); padding: 2px 4px; }
.btn.perigo-link:hover { text-decoration: underline; }
.btn.largo { width: 100%; }
.btn.pequeno { min-height: 28px; padding: 2px 10px; font-size: 13px; }
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 4px; color: var(--texto-suave);
}
.btn-icone:hover, .btn-icone.ativo { color: var(--texto-forte); background: var(--fundo-hover); }
.btn-mini { display: inline-flex; color: var(--texto-suave); border-radius: 3px; padding: 1px; }
.btn-mini:hover { color: var(--texto-forte); }

/* ---------- carregando / login ---------- */
.tela-cheia {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--fundo-0) radial-gradient(ellipse at top, #6a2340 0%, transparent 60%), var(--fundo-0);
  gap: 16px; color: var(--texto-suave); padding: 16px; overflow: auto;
}
.logo-grande { width: 72px; height: 72px; background: url(icone.svg) center/contain no-repeat; margin: 0 auto; }
#carregando .logo-grande { animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { transform: scale(.88); opacity: .7; } }
.cartao-login {
  width: 100%; max-width: 480px; background: var(--fundo-2); border-radius: 8px; padding: 32px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 16px;
}
.cartao-login h1 { margin: 0; text-align: center; color: var(--texto-forte); font-size: 24px; }
.cartao-login .sub { margin: -12px 0 4px; text-align: center; color: var(--texto-suave); }
.cartao-login label, .modal label {
  display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--texto-suave); letter-spacing: .02em;
}
.cartao-login input, .modal input:not([type=radio]):not([type=color]):not([type=file]), .modal select {
  height: 40px; padding: 0 10px; border: 0; border-radius: 4px; background: var(--fundo-0); font-size: 16px; outline: none;
  text-transform: none; font-weight: 400; color: var(--texto);
}
.cartao-login input:focus, .modal input:focus, .modal select:focus { box-shadow: 0 0 0 2px var(--marca); }
.troca { margin: 0; font-size: 14px; color: var(--texto-suave); }
.erro { margin: 0; color: #ff8a96; font-size: 14px; }

/* ---------- layout ---------- */
#app { display: grid; grid-template-columns: 72px 240px 1fr 240px; height: 100vh; height: 100dvh; }
#app.sem-membros { grid-template-columns: 72px 240px 1fr; }

/* trilho */
#trilho {
  background: var(--fundo-0); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0; overflow-y: auto; scrollbar-width: none;
}
#trilho::-webkit-scrollbar { display: none; }
.trilho-item { position: relative; width: 72px; display: flex; justify-content: center; }
.trilho-icone {
  width: 48px; height: 48px; border-radius: 50%; background: var(--fundo-2); display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: border-radius .15s, background .15s, color .15s; color: var(--texto-forte);
}
.trilho-icone img, .trilho-icone .av { width: 48px !important; height: 48px !important; object-fit: cover; border-radius: 0; }
.trilho-icone .iniciais { font-size: 16px; font-weight: 500; }
.trilho-icone.home { background: var(--fundo-2); }
.trilho-icone.home img { width: 34px !important; height: 34px !important; }
.trilho-item:hover .trilho-icone, .trilho-item.ativo .trilho-icone { border-radius: 16px; background: var(--marca); }
.trilho-item.acao .trilho-icone { color: var(--verde); }
.trilho-item.acao:hover .trilho-icone { background: var(--verde); color: #fff; }
.pilula {
  position: absolute; left: 0; top: 50%; width: 4px; height: 0; margin-top: 0; border-radius: 0 4px 4px 0; background: #fff;
  transition: height .15s, margin .15s;
}
.trilho-item.nao-lido .pilula { height: 8px; margin-top: -4px; }
.trilho-item:hover .pilula { height: 20px; margin-top: -10px; }
.trilho-item.ativo .pilula { height: 40px; margin-top: -20px; }
.emblema {
  position: absolute; right: 10px; bottom: -2px; width: 18px; height: 18px; border-radius: 9px; background: var(--vermelho);
  border: 3px solid var(--fundo-0); font-size: 0;
}
.emblema-voz {
  position: absolute; right: 10px; bottom: -2px; width: 20px; height: 20px; border-radius: 10px; background: var(--verde);
  border: 3px solid var(--fundo-0); display: flex; align-items: center; justify-content: center; color: #fff;
}
.trilho-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--fundo-3); flex-shrink: 0; }

/* lateral */
#lateral { background: var(--fundo-1); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#lateral-topo { height: 48px; flex-shrink: 0; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 1.5px 0 rgba(0,0,0,.05); display: flex; align-items: center; }
.topo-titulo { padding: 0 16px; font-weight: 600; color: var(--texto-forte); }
.topo-servidor {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 4px; padding: 0 16px; font-weight: 600; color: var(--texto-forte);
  transition: background .1s;
}
.topo-servidor span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-servidor:hover { background: var(--fundo-hover); }
#lateral-lista { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
.categoria {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 4px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; color: var(--texto-suave); letter-spacing: .02em;
}
.categoria:first-child { padding-top: 8px; }
.canal {
  display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px; margin: 1px 0; border-radius: 4px;
  color: var(--texto-mudo); cursor: pointer; position: relative; text-decoration: none !important; font-weight: 500;
}
.canal .ic-canal { color: var(--texto-mudo); }
.canal:hover { background: var(--fundo-hover); color: var(--texto); }
.canal.ativo { background: var(--fundo-ativo); color: var(--texto-forte); }
.canal.nao-lido { color: var(--texto-forte); }
.canal.nao-lido::before { content: ""; position: absolute; left: -8px; width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: #fff; }
.canal.conectado .ic-canal { color: var(--verde); }
.nome-canal { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal .engrenagem { visibility: hidden; }
.canal:hover .engrenagem, .canal.ativo .engrenagem { visibility: visible; }
.canal.dm { gap: 12px; min-height: 42px; padding: 4px 8px; }
.nome-dm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nome-dm span, .nome-dm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nome-dm small { font-size: 12px; color: var(--texto-mudo); font-weight: 400; }
.em-chamada { color: var(--verde); }
.dica-vazia { color: var(--texto-mudo); font-size: 13px; padding: 8px; }
.voz-lista { padding-left: 28px; }
.voz-membro {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px; margin: 1px 0; border-radius: 4px; color: var(--texto-suave);
  font-size: 14px; cursor: pointer;
}
.voz-membro:hover { background: var(--fundo-hover); color: var(--texto); }
.voz-membro .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-membro .icones { display: flex; align-items: center; gap: 4px; color: var(--texto-mudo); }
.ao-vivo { background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 1px 6px; }
.av-falante { display: inline-flex; border-radius: 50%; transition: box-shadow .1s; }
.av-falante.falando { box-shadow: 0 0 0 2px var(--fundo-1), 0 0 0 4px var(--verde); }

/* avatar */
.av { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; object-fit: cover; flex-shrink: 0; user-select: none; }
.av-wrap { position: relative; flex-shrink: 0; }
.av-wrap .av { width: 100% !important; height: 100% !important; }
.status { position: absolute; right: -2px; bottom: -2px; width: 38%; height: 38%; min-width: 10px; min-height: 10px; border-radius: 50%; border: 3px solid var(--fundo-1); }
.status.on { background: var(--verde); }
.status.off { background: var(--texto-mudo); box-shadow: inset 0 0 0 3px var(--texto-mudo); background: var(--fundo-1); border-color: var(--fundo-1); }

/* painel de voz e usuário */
#painel-voz { background: var(--fundo-painel); border-bottom: 1px solid var(--borda); padding: 8px; }
.pv-linha { display: flex; align-items: center; gap: 4px; }
.pv-info { flex: 1; min-width: 0; cursor: pointer; }
.pv-status { display: flex; align-items: center; gap: 4px; color: var(--verde); font-weight: 600; font-size: 14px; }
.pv-canal { font-size: 12px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-info:hover .pv-canal { text-decoration: underline; }
.pv-botoes { display: flex; gap: 8px; margin-top: 8px; }
.btn-pv { flex: 1; height: 32px; border-radius: 4px; background: var(--fundo-1); display: flex; align-items: center; justify-content: center; color: var(--texto); }
.btn-pv:hover { background: var(--fundo-ativo); }
.btn-pv.ligado { background: var(--verde); color: #fff; }
#painel-usuario { background: var(--fundo-painel); height: 52px; padding: 0 8px; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pu-perfil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 2px; border-radius: 4px; text-align: left; }
.pu-perfil:hover { background: var(--fundo-ativo); }
.pu-perfil .status { border-color: var(--fundo-painel); }
.pu-nomes { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pu-nomes strong { font-size: 14px; color: var(--texto-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-nomes small { font-size: 12px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* principal */
#principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo-2); }
#principal-topo {
  height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 1.5px 0 rgba(0,0,0,.05); z-index: 2;
}
.ic-topo { color: var(--texto-mudo); }
.topo-nome { font-weight: 600; color: var(--texto-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.topo-sep { width: 1px; height: 24px; background: var(--fundo-ativo); margin: 0 4px; }
.topo-desc { color: var(--texto-suave); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.so-celular { display: none; }
#principal-corpo { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* chat */
#chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#mensagens { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 16px; outline: none; overflow-anchor: none; }
.inicio-canal { padding: 16px 16px 8px; margin-top: 16px; }
.inicio-canal h1 { font-size: 32px; margin: 8px 0; color: var(--texto-forte); }
.inicio-canal p { color: var(--texto-suave); margin: 0; }
.inicio-icone { width: 68px; height: 68px; border-radius: 50%; background: var(--fundo-ativo); display: flex; align-items: center; justify-content: center; color: #fff; }
.divisor-dia { display: flex; align-items: center; margin: 24px 16px 8px; height: 0; border-top: 1px solid var(--fundo-ativo); justify-content: center; }
.divisor-dia span { background: var(--fundo-2); padding: 2px 4px; font-size: 12px; font-weight: 600; color: var(--texto-mudo); margin-top: -1px; transform: translateY(-50%); }
.carregando-msgs { display: flex; gap: 6px; justify-content: center; padding: 32px; }
.carregando-msgs.topo { padding: 16px; }
.carregando-msgs span { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-mudo); animation: pulsar 1s infinite; }
.carregando-msgs span:nth-child(2) { animation-delay: .15s; }
.carregando-msgs span:nth-child(3) { animation-delay: .3s; }

.msg { position: relative; padding: 2px 48px 2px 72px; margin-top: 17px; min-height: 44px; word-wrap: break-word; }
.msg.agrupada { margin-top: 0; min-height: 0; }
.msg:hover { background: rgba(2, 2, 2, .06); }
.msg.editando { background: rgba(2, 2, 2, .06); }
.msg.mencao-mim { background: var(--mencao-fundo); }
.msg.mencao-mim::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--mencao-borda); }
.msg.piscar { animation: piscar 1.6s; }
@keyframes piscar { 0%, 60% { background: rgba(240, 80, 122, .22); } }
.msg-avatar { position: absolute; left: 16px; top: 4px; border-radius: 50%; }
.msg-resposta + .msg-avatar { top: 26px; }
.msg-hora-lado { position: absolute; left: 0; width: 64px; text-align: right; font-size: 11px; color: var(--texto-mudo); top: 5px; visibility: hidden; }
.msg:hover .msg-hora-lado { visibility: visible; }
.msg-cabeca { display: flex; align-items: baseline; gap: 8px; }
.msg-autor { font-weight: 500; color: var(--texto-forte); font-size: 16px; }
.msg-autor:hover { text-decoration: underline; }
.msg-hora { font-size: 12px; color: var(--texto-mudo); }
.msg-texto { color: var(--texto); white-space: normal; user-select: text; }
.msg-texto strong { color: var(--texto-forte); }
.editado { font-size: 10px; color: var(--texto-mudo); margin-left: 4px; }
.msg-resposta {
  display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--texto-suave); margin-left: -2px; margin-bottom: 2px;
  position: relative; cursor: pointer; min-width: 0;
}
.msg-resposta::before {
  content: ""; position: absolute; left: -36px; top: 50%; width: 30px; height: 12px;
  border-left: 2px solid var(--neutro); border-top: 2px solid var(--neutro); border-top-left-radius: 6px;
}
.msg-resposta .nome { font-weight: 500; color: var(--texto-forte); opacity: .8; white-space: nowrap; }
.msg-resposta .trecho { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-resposta:hover .trecho { color: var(--texto-forte); }
.codigo { background: var(--fundo-0); border-radius: 3px; padding: 1px 4px; font: 85% var(--fonte-mono); }
.bloco-codigo { background: var(--fundo-1); border: 1px solid var(--borda); border-radius: 4px; padding: 8px; margin: 4px 0; font: 14px/1.4 var(--fonte-mono); white-space: pre-wrap; max-width: 90%; overflow-x: auto; }
.citacao { display: block; border-left: 4px solid var(--neutro); padding-left: 12px; margin: 2px 0; }
.mencao { background: var(--marca-suave); color: var(--marca-texto); border-radius: 3px; padding: 0 2px; font-weight: 500; cursor: pointer; }
.mencao:hover { background: var(--marca); color: #fff; }
.spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; padding: 0 2px; }
.spoiler.revelado { background: rgba(255, 255, 255, .1); color: inherit; cursor: text; }
.anexos { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; align-items: flex-start; }
.anexo-img { max-width: min(400px, 100%); max-height: 300px; border-radius: 8px; cursor: zoom-in; display: block; background: var(--fundo-1); }
.anexo-video { max-width: min(480px, 100%); max-height: 320px; border-radius: 8px; background: #000; }
.anexo-arquivo {
  display: flex; align-items: center; gap: 10px; background: var(--fundo-1); border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px; width: min(432px, 100%); color: var(--link);
}
.anexo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anexo-info a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-info small { color: var(--texto-mudo); font-size: 12px; }
.anexo-info audio { margin-top: 6px; width: 100%; height: 32px; }
.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reacao {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--fundo-1);
  border: 1px solid transparent; font-size: 15px;
}
.reacao span { font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.reacao:hover { border-color: var(--neutro); }
.reacao.minha { background: var(--marca-suave); border-color: var(--marca); }
.reacao.minha span { color: var(--marca-texto); }
.reacao.adicionar { color: var(--texto-suave); visibility: hidden; }
.msg:hover .reacao.adicionar { visibility: visible; }
.msg-acoes {
  position: absolute; right: 14px; top: -16px; display: none; background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.05); z-index: 1;
}
.msg:hover .msg-acoes { display: flex; }
.msg-acoes button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 17px; }
.msg-acoes button:hover { background: var(--fundo-hover); color: var(--texto-forte); }
.msg-acoes button.perigo:hover { color: var(--vermelho); }
.editar-caixa textarea { width: 100%; background: var(--fundo-3); border: 0; border-radius: 8px; padding: 11px 16px; resize: none; outline: none; min-height: 44px; }
.editar-caixa small { font-size: 12px; color: var(--texto-suave); }

#compositor { padding: 0 16px; flex-shrink: 0; }
#compositor-extra { background: var(--fundo-1); border-radius: 8px 8px 0 0; }
#compositor-extra:empty { display: none; }
.barra-resposta { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 14px; color: var(--texto-suave); }
.anexos-pendentes { display: flex; gap: 24px; padding: 20px 10px 10px; overflow-x: auto; border-bottom: 1px solid var(--fundo-ativo); }
.anexo-pendente { position: relative; width: 200px; min-width: 200px; height: 200px; background: var(--fundo-1); border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 0 1px var(--fundo-ativo); }
.anexo-pendente img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 3px; }
.anexo-pendente .arquivo-icone { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); }
.anexo-pendente .nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-pendente .remover { position: absolute; top: -12px; right: -12px; background: var(--fundo-2); width: 30px; height: 30px; border-radius: 6px; box-shadow: 0 0 0 1px var(--fundo-ativo); align-items: center; justify-content: center; }
.anexo-pendente .remover:hover { color: var(--vermelho); }
.progresso { height: 4px; background: var(--fundo-ativo); border-radius: 2px; overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--marca); transition: width .15s; }
#compositor .caixa { display: flex; align-items: flex-start; background: var(--fundo-3); border-radius: 8px; padding: 0 8px 0 4px; }
#compositor.com-extra .caixa { border-radius: 0 0 8px 8px; }
#compositor .caixa .btn-icone { width: 40px; height: 44px; flex-shrink: 0; }
#compositor .caixa .btn-icone:hover { background: none; }
#entrada {
  flex: 1; background: none; border: 0; outline: none; resize: none; padding: 11px 4px; min-height: 44px; max-height: 300px;
  line-height: 1.375; color: var(--texto); overflow-y: auto;
}
#entrada::placeholder { color: var(--texto-mudo); }
#digitando { height: 24px; padding: 0 16px; font-size: 13px; color: var(--texto); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.pontinhos { display: inline-flex; gap: 3px; margin-right: 4px; }
.pontinhos i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto); animation: pulsar 1.2s infinite; }
.pontinhos i:nth-child(2) { animation-delay: .2s; }
.pontinhos i:nth-child(3) { animation-delay: .4s; }
#soltar { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
#soltar div { background: var(--marca); color: #fff; padding: 40px 64px; border-radius: 12px; font-size: 20px; font-weight: 600; border: 2px dashed rgba(255,255,255,.6); }

/* vazio */
#vazio { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vazio-caixa { text-align: center; max-width: 440px; }
.vazio-caixa h2 { color: var(--texto-forte); }
.vazio-caixa p { color: var(--texto-suave); }
.vazio-botoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* palco de voz/vídeo */
#palco { flex: 1; display: flex; flex-direction: column; background: #000; min-height: 0; }
#palco.dividido { flex: 0 0 45%; border-bottom: 1px solid var(--borda); }
#palco-grade {
  flex: 1; min-height: 0; padding: 16px; display: grid; gap: 8px; align-content: center; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); overflow: auto;
}
#palco-grade[data-n="1"] { grid-template-columns: minmax(0, 960px); }
#palco-grade[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 640px)); }
.tile {
  position: relative; aspect-ratio: 16 / 9; background: var(--fundo-1); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; transition: box-shadow .1s; max-height: 100%;
}
.tile.falando { box-shadow: inset 0 0 0 2px var(--verde), 0 0 0 1px var(--verde); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.tile.tela video { object-fit: contain; }
.tile.com-video video { display: block; }
.tile.com-video .tile-av { display: none; }
.tile.espelho video { transform: scaleX(-1); }
.tile-aguarde { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 14px; }
.tile-rotulo {
  position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; border-radius: 4px; padding: 2px 8px;
  font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px);
}
.tile-expandir { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; display: none; align-items: center; justify-content: center; }
.tile:hover .tile-expandir { display: flex; }
#palco-grade.com-foco { display: flex; padding: 8px; }
#palco-grade.com-foco .tile { display: none; }
#palco-grade.com-foco .tile.foco { display: flex; flex: 1; aspect-ratio: auto; height: 100%; cursor: zoom-out; }
#palco-controles { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 16px 24px; }
.btn-redondo { width: 56px; height: 56px; border-radius: 50%; background: var(--fundo-3); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.btn-redondo:hover { background: var(--neutro); }
.btn-redondo.ligado { background: #fff; color: #000; }
.btn-redondo.vermelho { background: var(--vermelho); color: #fff !important; }
.btn-redondo.vermelho:hover { background: var(--vermelho-hover); }
.btn-redondo.vermelho-claro { color: var(--vermelho); background: #fff; }
.btn-redondo .ic .corte { stroke: currentColor; }
.palco-convite { text-align: center; }
.palco-convite h2 { margin: 0 0 4px; color: #fff; }
.palco-convite p { margin: 0 0 16px; color: var(--texto-suave); }

/* membros */
#membros { background: var(--fundo-1); overflow-y: auto; padding: 0 8px 16px; }
.membro { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border-radius: 4px; text-align: left; margin: 1px 0; }
.membro:hover { background: var(--fundo-hover); }
.membro.offline { opacity: .35; }
.membro.offline:hover { opacity: 1; }
.membro-nomes { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.membro-nome { display: flex; align-items: center; gap: 4px; font-weight: 500; color: var(--texto-suave); overflow: hidden; white-space: nowrap; }
.membro:hover .membro-nome { color: var(--texto); }
.membro-nomes small { font-size: 12px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coroa { color: var(--amarelo); display: inline-flex; }

/* camada: popovers e modais */
.popover {
  position: fixed; z-index: 50; background: var(--fundo-flutuante); border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.24);
  animation: surgir .1s ease-out;
}
@keyframes surgir { from { opacity: 0; transform: scale(.96); } }
.popover-menu { padding: 6px 8px; width: 220px; }
.menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 8px; border-radius: 2px; font-size: 14px; font-weight: 500; color: var(--texto-suave); margin: 2px 0; }
.menu button:hover { background: var(--marca); color: #fff; }
.menu button.destaque { color: var(--marca-texto); }
.menu button.destaque:hover { color: #fff; }
.menu button.perigo { color: var(--vermelho); }
.menu button.perigo:hover { background: var(--vermelho); color: #fff; }
.menu-sep { height: 1px; background: var(--borda); margin: 4px; }
.popover-emoji { padding: 8px; }
.emojis { display: grid; grid-template-columns: repeat(10, 36px); gap: 2px; max-height: 260px; overflow-y: auto; }
.emojis button { width: 36px; height: 36px; font-size: 22px; border-radius: 4px; }
.emojis button:hover { background: var(--fundo-3); }
.popover-perfil { width: 300px; overflow: hidden; background: var(--fundo-painel); }
.perfil-banner { height: 60px; }
.perfil-av { margin: -40px 0 0 16px; width: max-content; border: 6px solid var(--fundo-painel); border-radius: 50%; background: var(--fundo-painel); }
.perfil-av .status { border-color: var(--fundo-painel); }
.perfil-corpo { padding: 8px 16px 16px; }
.perfil-corpo h3 { margin: 0; color: var(--texto-forte); font-size: 20px; }
.perfil-usuario { color: var(--texto-suave); font-size: 14px; }
.perfil-recado { font-size: 14px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--fundo-ativo); }
.perfil-tag { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--amarelo); margin: 8px 0 0; }
.perfil-botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; animation: surgir .12s; }
.modal-fundo.escuro { background: rgba(0,0,0,.85); }
.modal {
  background: var(--fundo-2); border-radius: 8px; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.4);
}
.modal.pequeno { max-width: 440px; }
.modal form { display: flex; flex-direction: column; gap: 16px; }
.modal h2 { margin: 0; color: var(--texto-forte); font-size: 22px; }
.modal h3 { margin: 8px 0 0; color: var(--texto-forte); font-size: 16px; }
.modal .sub-titulo { margin-top: 8px; font-size: 18px; }
.centro { text-align: center; }
.modal-texto { margin: 0; color: var(--texto-suave); }
.modal-texto.pequeno { font-size: 13px; }
.modal-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 8px -24px -24px; padding: 16px 24px; background: var(--fundo-1); }
.opcao-grande { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--neutro); border-radius: 8px; font-weight: 600; color: var(--texto-forte); }
.opcao-grande:hover { background: var(--fundo-hover); }
.campo-imagem { display: flex; justify-content: center; }
.ci-previa {
  width: 84px; height: 84px; border-radius: 50%; border: 2px dashed var(--texto-mudo); display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; color: var(--texto-suave); font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ci-previa img { width: 100%; height: 100%; object-fit: cover; }
.ci-previa:hover { border-color: var(--texto); }
.copiar-linha { display: flex; gap: 8px; background: var(--fundo-0); border-radius: 4px; padding: 4px; }
.copiar-linha input { flex: 1; background: none !important; box-shadow: none !important; }
.copiar-linha .btn { min-height: 32px; }
.radios { display: flex; flex-direction: column; gap: 8px; }
.modal label.radio {
  flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; background: var(--fundo-1); border-radius: 4px; cursor: pointer;
  text-transform: none; font-weight: 400; color: var(--texto); font-size: 14px;
}
.radio:has(input:checked) { background: var(--fundo-ativo); }
.radio span { display: flex; flex-direction: column; }
.radio small { color: var(--texto-suave); }
.config-perfil { display: flex; gap: 16px; align-items: flex-start; }
.config-campos { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.modal label.linha { flex-direction: row; align-items: center; gap: 12px; }
.modal input[type=color] { width: 48px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; }
.lightbox { background: none; box-shadow: none; max-width: 90vw; align-items: center; padding: 0; overflow: visible; }
.lightbox img { max-width: 90vw; max-height: calc(100dvh - 80px); border-radius: 4px; }
.lightbox a { color: #fff; opacity: .7; font-size: 14px; }

/* avisos */
#avisos { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.aviso {
  background: var(--fundo-flutuante); color: var(--texto-forte); padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.35);
  font-size: 14px; display: flex; align-items: center; gap: 12px; pointer-events: auto; animation: surgir .15s; transition: opacity .3s;
}
.aviso.saindo { opacity: 0; }
#barra-conexao { position: fixed; top: 0; left: 0; right: 0; background: var(--amarelo); color: #000; text-align: center; font-size: 14px; font-weight: 600; padding: 4px; z-index: 70; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  #app, #app.sem-membros { grid-template-columns: 72px 240px 1fr; }
  #membros { position: fixed; right: 0; top: 48px; bottom: 0; width: 240px; z-index: 10; box-shadow: -4px 0 12px rgba(0,0,0,.3); }
}
@media (max-width: 760px) {
  #app, #app.sem-membros { grid-template-columns: 1fr; }
  #trilho, #lateral { position: fixed; top: 0; bottom: 0; z-index: 20; transform: translateX(-312px); transition: transform .2s; }
  #trilho { left: 0; width: 72px; }
  #lateral { left: 72px; width: min(240px, calc(100vw - 72px)); }
  body.menu-aberto #trilho, body.menu-aberto #lateral { transform: none; }
  body.menu-aberto #principal::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 15; }
  .so-celular { display: inline-flex; }
  #principal-topo { padding-left: 4px; }
  .msg { padding-right: 16px; }
  .msg-acoes { right: 4px; }
  #palco-grade[data-n="2"] { grid-template-columns: 1fr; }
  .config-perfil { flex-direction: column; align-items: center; }
  .config-campos { width: 100%; }
}

/* medidor do microfone (configurações) */
.medidor { height: 10px; flex: none; border-radius: 4px; background: var(--fundo-0); overflow: hidden; }
.medidor i { display: block; height: 100%; width: 0; background: var(--verde); transition: width .05s linear; }
.medidor { position: relative; }
.medidor i { background: var(--neutro); }
.medidor i.passa { background: var(--verde); }
.medidor b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--amarelo); border-radius: 1px; }
.campo-sensibilidade { display: flex; flex-direction: column; gap: 8px; }
.campo-sensibilidade .rotulo-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texto-suave); letter-spacing: .02em; }
.campo-sensibilidade .rotulo-linha small { text-transform: none; font-weight: 400; letter-spacing: 0; }
.campo-sensibilidade input[type=range] { width: 100%; accent-color: var(--marca); margin: 0; }
.campo-sensibilidade .dica-medidor { color: var(--texto-suave); font-size: 12px; }
.campo-sensibilidade .btn { align-self: flex-start; }
.verde-txt { color: var(--verde); font-weight: 600; }

/* foto de perfil */
.campo-imagem.grande .ci-previa { width: 128px; height: 128px; font-size: 13px; }
.av-falante { position: relative; }
.pu-sem-foto { position: absolute; left: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--fundo-painel); cursor: pointer; }
.pu-sem-foto:hover { background: var(--marca-hover); }
.perfil-botoes .btn + .btn { margin-top: 0; }

/* recorte de foto */
.modal.recorte { max-width: 420px; align-items: stretch; }
.recorte-area { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #000; }
.recorte-area canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.recorte-area canvas.arrastando { cursor: grabbing; }
.recorte-mascara { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -1px; }
.modal label.recorte-zoom { flex-direction: row; align-items: center; gap: 12px; max-width: 320px; width: 100%; margin: 0 auto; }
.recorte-zoom input { flex: 1; accent-color: var(--marca); }

/* login pelo Discord */
.btn.discord { background: #5865f2; color: #fff; gap: 10px; min-height: 44px; font-size: 15px; text-decoration: none; }
.btn.discord:hover { background: #4752c4; text-decoration: none; }
.btn.discord.pequeno { min-height: 32px; font-size: 13px; align-self: flex-start; }
.divisor-ou { display: flex; align-items: center; gap: 12px; color: var(--texto-mudo); font-size: 12px; margin-top: 4px; }
.divisor-ou::before, .divisor-ou::after { content: ""; flex: 1; height: 1px; background: var(--fundo-ativo); }

/* convite */
.cartao-convite { display: flex; align-items: center; gap: 14px; background: var(--fundo-1); border-radius: 8px; padding: 14px 16px; }
.cartao-convite > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.cartao-convite small { color: var(--texto-suave); font-size: 12px; }
.cartao-convite strong { color: var(--texto-forte); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-icone { width: 56px; height: 56px; border-radius: 16px; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-weight: 600; }
.cc-icone img { width: 100%; height: 100%; object-fit: cover; }
.cartao-convite.invalido { color: #ff8a96; font-size: 14px; display: block; }


/* ===================== Formas do Bafafá ===================== */
body { font-size: 15.5px; letter-spacing: .005em; }
.btn { border-radius: 999px; font-weight: 700; padding: 2px 20px; }
.btn.primario { background: var(--gradiente); }
.btn.primario:hover { background: var(--gradiente); filter: brightness(1.08); }
.btn-icone, .btn-mini { border-radius: 10px; }

/* trilho: ícones em quadrado arredondado fixo, anel de destaque no lugar da "pílula" */
#trilho { gap: 10px; padding: 14px 0; }
.pilula { display: none; }
.trilho-icone { border-radius: 16px !important; background: var(--fundo-2); transition: box-shadow .15s, transform .15s, background .15s; }
.trilho-item:hover .trilho-icone { transform: translateY(-1px); background: var(--fundo-3); }
.trilho-item.ativo .trilho-icone { box-shadow: 0 0 0 2px var(--fundo-0), 0 0 0 4px var(--marca); background: var(--fundo-3); }
.trilho-item:not(.acao):hover .trilho-icone .iniciais, .trilho-item.ativo .iniciais { color: #fff; }
.trilho-icone.home { background: var(--gradiente) !important; }
.trilho-icone.home img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.trilho-item.nao-lido::after { content: ""; position: absolute; top: -2px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--amarelo); border: 3px solid var(--fundo-0); }
.trilho-item.acao .trilho-icone { background: transparent; border: 2px dashed var(--neutro); color: var(--verde); }
.trilho-item.acao:hover .trilho-icone { border-color: var(--verde); background: transparent; color: var(--verde); }
.trilho-sep { width: 28px; height: 3px; border-radius: 2px; background: var(--fundo-3); }

/* lateral: títulos de seção sem caixa-alta, itens arredondados */
.categoria { text-transform: none; font-size: 13px; font-weight: 800; letter-spacing: 0; color: var(--texto-suave); padding: 18px 10px 6px; }
.canal { border-radius: 10px; font-weight: 600; }
.canal.ativo { background: var(--fundo-ativo); box-shadow: inset 3px 0 0 var(--marca); }
.canal.nao-lido::before { left: auto; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--amarelo); }
.topo-servidor, .topo-titulo { font-weight: 800; font-size: 16px; }
#lateral-topo { box-shadow: none; border-bottom: 1px solid var(--borda); }
#principal-topo { box-shadow: none; border-bottom: 1px solid var(--borda); }
.topo-nome { font-weight: 800; }
#painel-usuario, #painel-voz { background: var(--fundo-painel); }
#painel-usuario { margin: 8px; border-radius: 14px; height: 56px; }
#painel-voz { margin: 8px 8px 0; border-radius: 14px; border: 1px solid var(--borda); }
.pv-status { color: var(--verde); }

/* mensagens */
.msg { padding-left: 76px; }
.msg-avatar { left: 18px; }
.msg-avatar .av, .msg-avatar img { border-radius: 14px !important; }
.msg-autor { font-weight: 800; }
.msg-hora { font-weight: 600; }
.msg:hover, .msg.editando { background: rgba(255, 255, 255, .025); }
.msg-acoes { border-radius: 12px; overflow: hidden; background: var(--fundo-3); border-color: var(--borda); top: -18px; }
.reacao { border-radius: 999px; }
.reacao.minha { background: var(--marca-suave); border-color: var(--marca); }
.mencao { border-radius: 6px; }
.divisor-dia { border-top-style: dashed; }
.divisor-dia span { background: var(--fundo-2); border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.inicio-icone { background: var(--gradiente); border-radius: 22px; }
#compositor .caixa { border-radius: 16px; border: 1px solid var(--borda); }
#compositor.com-extra .caixa { border-radius: 0 0 16px 16px; }
#compositor-extra { border-radius: 16px 16px 0 0; }

/* membros */
.membro { border-radius: 10px; }
.membro .av, .membro img.av { border-radius: 12px !important; }

/* palco */
#palco { background: #0e0b10; }
.tile { border-radius: 16px; }
.btn-redondo { border-radius: 18px; }

/* camada */
.popover, .modal { border-radius: 18px; border: 1px solid var(--borda); }
.modal-rodape { border-radius: 0 0 18px 18px; }
.menu button { border-radius: 8px; }
.menu button:hover { background: var(--marca); }
.popover-perfil .perfil-banner { background: var(--gradiente) !important; }
.perfil-av { border-radius: 24px; }
.perfil-av .av, .perfil-av img { border-radius: 20px !important; }
.aviso { border-radius: 14px; border: 1px solid var(--borda); }

/* login */
.tela-cheia { background: radial-gradient(1200px 600px at 10% -10%, rgba(255, 122, 69, .35), transparent 60%),
  radial-gradient(900px 600px at 110% 110%, rgba(232, 55, 143, .35), transparent 60%), var(--fundo-0); }
.cartao-login { border-radius: 24px; border: 1px solid var(--borda); background: var(--fundo-1); }
.cartao-login h1 { font-weight: 900; letter-spacing: -.01em; }
.cartao-login input, .modal input:not([type=radio]):not([type=color]):not([type=file]), .modal select { border-radius: 12px; border: 1px solid var(--borda); }
.cartao-login label, .modal label, .campo-sensibilidade .rotulo-linha { text-transform: none; font-size: 13px; letter-spacing: 0; font-weight: 800; }

/* fotos em quadrado arredondado (marca do Bafafá) */
.av { border-radius: 32% !important; }
.av-falante { border-radius: 34%; }
.av-falante.falando { box-shadow: 0 0 0 2px var(--fundo-1), 0 0 0 4px var(--verde); }
.status { border-radius: 50%; }
.ci-previa { border-radius: 32%; }
.recorte-mascara { border-radius: 32%; }
.tile .av { border-radius: 30% !important; }

/* reordenar bate-papos e salas */
.canal[draggable="true"] { cursor: grab; }
.canal.arrastando { opacity: .45; }
.canal.alvo-acima { box-shadow: inset 0 3px 0 var(--marca); }
.canal.alvo-abaixo { box-shadow: inset 0 -3px 0 var(--marca); }
.linha-ordem { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--texto-suave); }
.linha-ordem span { flex: 1; }

/* doações */
#faixa-doacao { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; background: linear-gradient(90deg, rgba(255,122,69,.18), rgba(232,55,143,.18)); border-bottom: 1px solid var(--borda); font-size: 14px; flex-wrap: wrap; }
#faixa-doacao.batida { background: rgba(47, 201, 139, .14); }
#faixa-doacao.admin { background: var(--fundo-painel); }
.faixa-txt { flex: 1; min-width: 200px; }
.faixa-txt strong { color: var(--texto-forte); }
.faixa-barra { display: inline-block; width: 160px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; flex-shrink: 0; }
.faixa-barra i { display: block; height: 100%; background: var(--gradiente); border-radius: 99px; transition: width .4s; }
.faixa-barra.grande { width: 100%; height: 12px; }
.faixa-fechar { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); }
.faixa-fechar:hover { background: rgba(255,255,255,.08); color: var(--texto-forte); }
.pix-caixa { display: flex; gap: 16px; align-items: center; background: var(--fundo-1); border: 1px solid var(--borda); border-radius: 16px; padding: 14px; }
.pix-qr { width: 150px; height: 150px; flex-shrink: 0; background: #fff; border-radius: 12px; padding: 6px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 12px; text-align: center; }
.pix-qr svg { width: 100%; height: 100%; display: block; }
.pix-dados { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pix-dados strong { color: var(--texto-forte); font-size: 18px; }
.pix-dados small { color: var(--texto-suave); font-size: 12px; word-break: break-all; }
.pix-dados .btn { align-self: flex-start; }
.doacao-form { display: flex !important; flex-direction: row !important; align-items: flex-end; gap: 12px !important; flex-wrap: wrap; }
.doacao-form label:first-child { flex: 1; min-width: 120px; }
.doacao-form label.linha { padding-bottom: 10px; }
.doacao-lista { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.doacao-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--fundo-1); font-size: 14px; }
.doacao-quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doacao-quem small { color: var(--texto-mudo); }
.doacao-valor { font-weight: 800; color: var(--verde); }
.modal textarea { background: var(--fundo-0); border: 1px solid var(--borda); border-radius: 12px; padding: 10px; color: var(--texto); resize: vertical; font: inherit; text-transform: none; font-weight: 400; }
@media (max-width: 760px) { .faixa-barra { width: 100px; } .pix-caixa { flex-direction: column; align-items: stretch; } .pix-qr { align-self: center; } }

/* mensagens temporárias */
.aviso-sumir { margin-top: 10px !important; display: inline-block; background: var(--fundo-1); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--texto-suave) !important; }
.aviso-sumir strong { color: var(--texto); }
.chip-sumir { font-size: 12px; font-weight: 700; color: var(--texto-suave); background: var(--fundo-1); border: 1px solid var(--borda); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* status */
.status.online { background: var(--verde); }
.status.ausente { background: var(--amarelo); }
.status.ocupado { background: var(--vermelho); }
.status.ocupado::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; background: var(--fundo-1); border-radius: 1px; }
.status.invisivel, .status.off { background: var(--fundo-1); box-shadow: inset 0 0 0 3px var(--texto-mudo); }
.status.solta { position: static; display: inline-block; width: 12px; height: 12px; min-width: 12px; min-height: 12px; border: 0; flex-shrink: 0; position: relative; }
.popover-status { width: 280px; }
.item-status { justify-content: flex-start !important; gap: 10px; align-items: flex-start !important; text-align: left; }
.item-status span:last-child { display: flex; flex-direction: column; }
.item-status small { font-weight: 500; font-size: 12px; opacity: .8; }
.item-status.atual { background: var(--fundo-ativo); }
.item-status .status.solta { margin-top: 4px; }
.form-atividade { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px; }
.form-atividade label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--texto-suave); }
.form-atividade input { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-0); color: var(--texto); font: inherit; outline: none; }
.form-atividade input:focus { box-shadow: 0 0 0 2px var(--marca); }
.atalhos-atividade { display: flex; flex-wrap: wrap; gap: 4px; }
.atalhos-atividade button { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--fundo-3); color: var(--texto); margin: 0 !important; width: auto !important; }
.atalhos-atividade button:hover { background: var(--marca) !important; color: #fff; }
.linha-botoes { display: flex; justify-content: flex-end; gap: 6px; }
.linha-botoes .btn { width: auto !important; margin: 0 !important; }

/* fixar e buscar */
.selo-fixada { color: var(--amarelo); display: inline-flex; margin-left: 2px; }
.busca-topo { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--fundo-0); border: 1px solid var(--borda); color: var(--texto-mudo); width: 200px; transition: width .15s; }
.busca-topo:focus-within { width: 260px; box-shadow: 0 0 0 2px var(--marca); color: var(--texto); }
.busca-topo input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 13px; color: var(--texto); }
.popover-lista { width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; }
.painel-titulo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; padding: 6px 8px 10px; color: var(--texto-forte); }
.painel-rodape { font-size: 12px; color: var(--texto-mudo); padding: 8px; margin: 0; }
.resultado { display: flex; gap: 10px; width: 100%; text-align: left; padding: 8px; border-radius: 12px; }
.resultado:hover { background: var(--fundo-3); }
.resultado-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.resultado-topo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.resultado-topo small { color: var(--texto-mudo); font-size: 11px; }
.resultado-texto { font-size: 14px; color: var(--texto); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@media (max-width: 760px) { .busca-topo { width: 36px; padding: 0 9px; } .busca-topo:focus-within { width: 170px; } }

/* enquetes */
.enquete { margin-top: 6px; max-width: 460px; background: var(--fundo-1); border: 1px solid var(--borda); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.enquete-pergunta { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--texto-forte); margin-bottom: 4px; }
.enquete-pergunta .ic { color: var(--marca); }
.enquete-opcao { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 12px; border-radius: 12px; background: var(--fundo-3); text-align: left; border: 1px solid transparent; }
.enquete-opcao:hover { border-color: var(--neutro-hover); }
.enquete-opcao.minha { border-color: var(--marca); }
.enquete-barra { position: absolute; inset: 0 auto 0 0; background: var(--marca-suave); transition: width .3s; }
.enquete-opcao.minha .enquete-barra { background: rgba(240, 80, 122, .3); }
.enquete-marca { position: relative; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--neutro-hover); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; flex-shrink: 0; }
.enquete-opcao.minha .enquete-marca { background: var(--marca); border-color: var(--marca); }
.enquete-texto { position: relative; flex: 1; }
.enquete-num { position: relative; font-size: 12px; font-weight: 800; color: var(--texto-suave); white-space: nowrap; }
.enquete-rodape { font-size: 12px; color: var(--texto-mudo); margin-top: 2px; }
.enquete-campos { display: flex; flex-direction: column; gap: 10px; }
.form-enquete [data-mais-opcao] { align-self: flex-start; }

/* GIFs */
.popover-gif { width: min(420px, calc(100vw - 32px)); padding: 10px; }
.gifs { display: flex; flex-direction: column; gap: 8px; }
.gifs-busca { width: 100% !important; }
.gifs-grade { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; gap: 6px; height: 330px; overflow-y: auto; align-content: start; }
.gifs-grade .painel-rodape { grid-column: 1 / -1; }
.gif-item { border-radius: 10px; overflow: hidden; background: var(--fundo-3); height: 100%; min-height: 0; padding: 0; border: 0; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-item:hover { outline: 2px solid var(--marca); }
.gifs-rodape { font-size: 11px; color: var(--texto-mudo); text-align: right; }
.anexo-gif { max-width: min(300px, 100%); height: auto; cursor: default; }

/* transmissão */
button.ao-vivo { cursor: pointer; }
button.ao-vivo:hover { filter: brightness(1.15); text-decoration: underline; }
.voz-espectadores { font-size: 12px; color: var(--texto-mudo); padding: 2px 10px 6px; }
.tile-rotulo small { font-weight: 600; opacity: .8; margin-left: 4px; }
.tile-rotulo .ao-vivo { font-size: 10px; }
.tile-volume { position: absolute; right: 8px; bottom: 8px; display: none; align-items: center; gap: 6px; background: rgba(0,0,0,.65); color: #fff; padding: 4px 8px; border-radius: 10px; }
.tile:hover .tile-volume:not([hidden]) { display: flex; }
.tile-volume input { width: 90px; accent-color: var(--marca); }
.palco-assistindo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; color: var(--texto-suave); font-weight: 700; }
.palco-plateia { color: var(--texto-suave); font-size: 13px; margin-top: 8px !important; }
.palco-convite .vazio-botoes { margin-top: 0; }

/* ---------- painel de administração ---------- */
.modal.painel-admin { max-width: 720px; }
.modal.painel-admin h2 { display: flex; align-items: center; gap: 8px; }
.trilho-item.acao.admin .trilho-icone { color: #ffc84a; }
.adm-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.adm-cartao { background: var(--fundo-1); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.adm-cartao strong { font-size: 24px; color: var(--texto-forte); line-height: 1.1; }
.adm-cartao span { font-size: 12px; color: var(--texto-mudo); }
.adm-abas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.adm-aba { background: none; border: 0; color: var(--texto-suave); font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.adm-aba.ativa { background: var(--fundo-3); color: var(--texto-forte); }
.adm-busca { margin-left: auto; min-width: 0; flex: 0 1 200px; }
.adm-lista { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.adm-linha { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.adm-linha[hidden] { display: none; }
.adm-linha:hover { background: var(--fundo-1); }
.adm-linha.banido { opacity: .6; }
.adm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-info strong { color: var(--texto-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-info small { color: var(--texto-mudo); font-size: 12px; }
.adm-on { color: var(--verde); }
.adm-selo { font-size: 10px; font-weight: 800; text-transform: uppercase; background: var(--fundo-3); color: var(--texto-suave); padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.adm-selo.perigo { background: var(--vermelho); color: #fff; }
.adm-icone { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; background: var(--fundo-3); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.adm-icone img { width: 100%; height: 100%; object-fit: cover; }
.adm-linha .btn { flex: none; }

.perfil-desde { font-size: 13px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--fundo-ativo); color: var(--texto-suave); display: flex; flex-direction: column; gap: 2px; }
.perfil-desde span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-mudo); }

/* ---------- procurar pessoa ---------- */
.btn-procurar-pessoa { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--fundo-1); color: var(--texto-mudo); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.btn-procurar-pessoa:hover { color: var(--texto-forte); }
.busca-pessoa { width: 100%; }
.lista-pessoas { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.pessoa-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pessoa-item:hover { background: var(--fundo-1); }
.pessoa-item .nome-dm { flex: 1; min-width: 0; }
.pessoa-acao { color: var(--texto-mudo); }
.pessoa-item:hover .pessoa-acao { color: var(--marca); }
.adm-linha .btn .ic { vertical-align: -2px; }