:root {
  --fundo-0: #121316;
  --fundo-1: #17181c;
  --fundo-2: #1e2025;
  --fundo-3: #272a31;
  --linha: #2e313a;
  --texto: #e8e6e1;
  --texto-2: #a3a19b;
  --texto-3: #6f6d68;
  --destaque: #f2a541;
  --destaque-escuro: #c9822a;
  --verde: #4fbf7a;
  --erro: #ef6b5b;
  --raio: 8px;
  --sobre-destaque: #1b1408;       /* texto em cima da cor de destaque (o app escolhe claro ou escuro) */
  --texto-msg: #dcd9d2;
  --realce: rgba(255, 255, 255, .025);
  --realce-forte: rgba(255, 255, 255, .06);
  --sombra: rgba(0, 0, 0, .4);
  --rolagem-forte: #3d414b;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: var(--texto);
}

/* Tema claro (Configurações → Aparência). A cor de destaque vale para os dois temas. */
:root[data-tema="claro"] {
  --fundo-0: #e6e7eb;
  --fundo-1: #f3f4f6;
  --fundo-2: #ffffff;
  --fundo-3: #e2e4e9;
  --linha: #d3d6dc;
  --texto: #1d1f24;
  --texto-2: #4b4f58;
  --texto-3: #7d818a;
  --texto-msg: #272a30;
  --realce: rgba(0, 0, 0, .035);
  --realce-forte: rgba(0, 0, 0, .07);
  --sombra: rgba(0, 0, 0, .18);
  --rolagem-forte: #b9bdc6;
  --verde: #23985a;
  --erro: #d6463a;
  color-scheme: light;
}
:root:not([data-tema="claro"]) { color-scheme: dark; }

/* Barra de rolagem fina e discreta: some no fundo e só fica mais forte ao passar o mouse. */
/* (o Chromium ignora as regras ::-webkit-scrollbar quando scrollbar-color existe; ela fica só para o Firefox) */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--fundo-3) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fundo-3); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-forte); }
::-webkit-scrollbar-button { display: none; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo-1); overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: var(--texto); }

/* dvh: no celular, desconta as barras do navegador que aparecem e somem. */
.tela { height: 100vh; height: 100dvh; }
.so-celular { display: none !important; }
.empurra { margin-left: auto; }

/* ---------- entrada ---------- */
#tela-entrada {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--destaque) 14%, var(--fundo-0)) 0%, var(--fundo-0) 60%);
}
.cartao {
  width: min(420px, calc(100vw - 32px));
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.marca { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; }
.marca-icone {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--destaque); color: var(--sobre-destaque); font-weight: 800;
}
.sub { margin: -6px 0 6px; color: var(--texto-2); line-height: 1.4; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); }
label input, label select, .campo {
  background: var(--fundo-0); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; outline: none; width: 100%;
}
label input:focus, label select:focus, .campo:focus { border-color: var(--destaque); }
.erro { margin: 0; color: var(--erro); font-size: 14px; }
.botoes { display: flex; gap: 10px; margin-top: 6px; }
.botoes button { flex: 1; }
.primario, .secundario, .perigoso {
  padding: 10px 14px; border-radius: var(--raio); border: 0; font-weight: 600;
}
.primario { background: var(--destaque); color: var(--sobre-destaque); }
.primario:hover { background: var(--destaque-escuro); }
.secundario { background: var(--fundo-3); }
.secundario:hover { background: var(--linha); }
.perigoso { background: #5a2520; color: #ffd9d4; }
.perigoso:hover { background: #73302a; }
.link { background: none; border: 0; color: var(--texto-2); text-decoration: underline; padding: 0; align-self: center; }
button:disabled { opacity: .5; cursor: default; }

/* ---------- chat ---------- */
#tela-chat { display: grid; grid-template-columns: 72px 240px 1fr 220px; }
#tela-chat.vazio .coluna-canais, #tela-chat.vazio .coluna-mensagens, #tela-chat.vazio .coluna-membros { display: none; }
.sem-comunidade { grid-column: 2 / -1; display: grid; place-items: center; }

/* trilho de comunidades */
.trilho {
  background: var(--fundo-0); display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 12px 0; overflow-y: auto; border-right: 1px solid var(--linha);
}
.trilho ul { padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trilho-item {
  position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  background: var(--fundo-3); color: var(--texto); transition: border-radius .15s, background .15s;
}
.trilho-item:hover, .trilho-item.ativo { border-radius: 14px; }
.trilho-item.ativo { background: var(--destaque); color: var(--sobre-destaque); }
.trilho-item.ativo::before, .trilho-item.nao-lido::before {
  content: ""; position: absolute; left: -12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--texto);
}
.trilho-item.ativo::before { height: 36px; }
.trilho-item.nao-lido:not(.ativo)::before { height: 8px; }
.trilho-mais { color: var(--verde); font-size: 24px; font-weight: 400; }
.trilho-mais:hover { background: var(--verde); color: var(--fundo-0); }

.coluna-canais, .coluna-membros { background: var(--fundo-2); display: flex; flex-direction: column; min-height: 0; }
.coluna-membros { border-left: 1px solid var(--linha); overflow-y: auto; padding-bottom: 12px; }
.cabecalho-servidor, .cabecalho-canal {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--linha); font-weight: 700;
}
.cabecalho-servidor { position: relative; padding: 0 8px; }
.cabecalho-botao {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 40px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-weight: 700; text-align: left;
}
.cabecalho-botao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho-botao:hover { background: var(--fundo-3); }

.menu {
  position: absolute; top: 48px; left: 8px; right: 8px; z-index: 20;
  background: var(--fundo-0); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 24px var(--sombra);
}
.menu button {
  background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 6px; font-weight: 500;
}
.menu button:hover { background: var(--destaque); color: var(--sobre-destaque); }
.menu button.perigo { color: var(--erro); }
.menu button.perigo:hover { background: var(--erro); color: #fff; }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 2px; }

.titulo-secao {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 12px 6px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--texto-3);
}
.icone {
  background: none; border: 0; color: var(--texto-2); width: 28px; height: 28px; border-radius: 6px; font-size: 16px;
  flex-shrink: 0;
}
.icone:hover { background: var(--fundo-3); color: var(--texto); }
.icone svg { display: block; margin: auto; }

#form-novo-canal { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 6px; }
.tipo-canal { display: flex; gap: 12px; font-size: 13px; color: var(--texto-2); }
.tipo-canal label { flex-direction: row; align-items: center; gap: 4px; cursor: pointer; }
.tipo-canal input { accent-color: var(--destaque); }

/* canais de voz e quem está neles */
#lista-canais li.canal-voz .nome-canal::before { content: "🔊 "; }
#lista-canais li.canal-voz.conectado { color: var(--verde); font-weight: 600; }
#lista-canais li.participantes { display: block; padding: 0 0 4px 22px; cursor: default; min-height: 0; }
#lista-canais li.participantes:hover { background: none; }
.participante { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 14px; color: var(--texto-2); }
.participante .avatar { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 2px transparent; transition: box-shadow .1s; }
.participante.falando .avatar { box-shadow: 0 0 0 2px var(--verde); }
.participante .nome-participante { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participante .estado-voz { font-size: 11px; color: var(--erro); }

/* painel de quem está numa chamada */
.painel-voz { background: var(--fundo-0); border-top: 1px solid var(--linha); padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.painel-voz-linha { display: flex; align-items: center; gap: 8px; }
.painel-voz-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.painel-voz-info strong { color: var(--verde); font-size: 14px; }
.painel-voz-info strong.conectando { color: var(--destaque); }
.painel-voz-info small { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone.desligar { color: var(--erro); }
.icone.desligar:hover { background: var(--erro); color: #fff; }
.painel-voz-botoes { display: flex; gap: 6px; }
.alternar {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px;
  border: 0; border-radius: 6px; background: var(--fundo-3); font-size: 13px;
}
.alternar:hover { background: var(--linha); }
.alternar .risco { display: none; }
.alternar.desligado { color: var(--erro); }
.alternar.desligado .risco { display: inline; }
.alternar.transmitindo { background: var(--verde); color: var(--fundo-0); font-weight: 600; }
/* Três botões não cabem com texto na coluna de canais: ficam só com ícone (o texto vai no "title"). */
.painel-voz-botoes .alternar { padding: 8px 6px; }
.painel-voz-botoes .alternar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* transmissão de tela */
.ao-vivo {
  flex-shrink: 0; border: 0; border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; background: var(--erro); color: #fff;
}
button.ao-vivo:hover, .ao-vivo.assistindo { box-shadow: 0 0 0 2px var(--texto); }
.palco {
  flex: 0 0 auto; height: 58%; min-height: 200px; display: flex; flex-direction: column;
  background: #000; border-bottom: 1px solid var(--linha);
}
.palco video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.palco-barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--fundo-0); }
.palco-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.palco-barra button { padding: 6px 12px; }
/* Tela cheia: a transmissão ocupa tudo; a barra (com "Sair da tela cheia") fica embaixo. */
.palco:fullscreen, .palco.expandido { height: 100%; border: 0; }
.palco.expandido { position: fixed; inset: 0; z-index: 50; }
.grade-telas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.opcao-tela {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid transparent; border-radius: 8px;
  background: var(--fundo-3); text-align: left;
}
.opcao-tela img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }
.opcao-tela span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcao-tela:hover { border-color: var(--linha); }
.opcao-tela.escolhida { border-color: var(--destaque); }
#campo-novo-canal {
  width: 100%; background: var(--fundo-0); border: 1px solid var(--destaque);
  border-radius: 6px; padding: 6px 8px; outline: none;
}

ul { list-style: none; margin: 0; padding: 0 8px; }
#lista-canais { flex: 1; overflow-y: auto; }
#lista-canais li {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; margin: 1px 0; min-height: 32px;
  border-radius: 6px; color: var(--texto-2); cursor: pointer; user-select: none;
}
#lista-canais li .nome-canal { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista-canais li .nome-canal::before { content: "# "; color: var(--texto-3); font-weight: 600; }
#lista-canais li:hover { background: var(--fundo-3); color: var(--texto); }
#lista-canais li.ativo { background: var(--fundo-3); color: var(--texto); font-weight: 600; }
#lista-canais li.nao-lido { color: var(--texto); font-weight: 600; }
#lista-canais li .bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--destaque); margin-right: 6px; }
#lista-canais li .icone { width: 24px; height: 24px; font-size: 13px; visibility: hidden; }
#lista-canais li:hover .icone { visibility: visible; }

.painel-usuario {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--fundo-0); border-top: 1px solid var(--linha);
}
.painel-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.painel-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-nome small { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-nome small.ok { color: var(--verde); }

.avatar {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-weight: 700; font-size: 14px; color: #121316;
}

.coluna-mensagens { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo-1); }
.cerquilha { color: var(--texto-3); font-size: 20px; }
.mensagens { flex: 1; overflow-y: auto; padding: 16px 0 8px; }
.aviso-vazio { color: var(--texto-3); text-align: center; margin-top: 40px; }

.grupo, .linha-extra { position: relative; }
.grupo { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 6px 20px; margin-top: 10px; }
.grupo:hover, .linha-extra:hover { background: var(--realce); }
.grupo .avatar { width: 40px; height: 40px; grid-row: span 2; font-size: 16px; }
.grupo-topo { display: flex; align-items: baseline; gap: 8px; }
.grupo-topo strong { font-weight: 600; }
.grupo-topo time { font-size: 12px; color: var(--texto-3); }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; color: var(--texto-msg); }
.linha-extra { padding: 2px 20px 2px 74px; }
.texto.pendente { opacity: .5; }
.texto.falhou { color: var(--erro); }
/* barra de ações da mensagem: reações rápidas, mais emojis e Apagar */
.acoes-msg {
  position: absolute; top: -14px; right: 16px; visibility: hidden; z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 8px;
}
.grupo:hover .acoes-msg, .linha-extra:hover .acoes-msg { visibility: visible; }
.acao-emoji {
  background: none; border: 0; border-radius: 6px; width: 30px; height: 28px; padding: 0; font-size: 17px; line-height: 1;
}
.acao-emoji:hover { background: var(--fundo-3); }
.acao-mais { font-size: 15px; color: var(--texto-2); }
.apagar-msg {
  background: none; border: 0; border-radius: 6px; font-size: 12px; padding: 5px 8px; color: var(--erro);
}
.apagar-msg:hover { background: var(--erro); color: #fff; }

.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reacao {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px;
  background: var(--fundo-2); border: 1px solid var(--linha); font-size: 13px; color: var(--texto-2);
}
.reacao:hover:not(:disabled) { border-color: var(--texto-3); }
.reacao:disabled { cursor: default; }
.reacao.minha { background: color-mix(in srgb, var(--destaque) 14%, transparent); border-color: var(--destaque); color: var(--destaque); }
.reacao-emoji { font-size: 16px; line-height: 1; }

/* seletor de emojis */
.seletor-emoji {
  position: fixed; z-index: 45; width: 340px; height: 380px; display: flex; flex-direction: column;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.emoji-abas { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--linha); overflow-x: auto; flex-shrink: 0; }
.emoji-aba { background: none; border: 0; border-radius: 6px; font-size: 18px; width: 34px; height: 32px; padding: 0; flex-shrink: 0; }
.emoji-aba:hover { background: var(--fundo-3); }
.emoji-grade { position: relative; flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.emoji-titulo {
  position: sticky; top: 0; padding: 8px 2px 4px; background: var(--fundo-2);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--texto-3); text-transform: uppercase;
}
.emoji-lista { display: grid; grid-template-columns: repeat(8, 1fr); }
.emoji { background: none; border: 0; border-radius: 6px; font-size: 22px; height: 38px; padding: 0; line-height: 1; }
.emoji:hover { background: var(--fundo-3); }

/* ajustes de áudio: medidor do microfone */
.medidor { height: 10px; border-radius: 5px; background: var(--fundo-0); overflow: hidden; }
.medidor-barra { height: 100%; width: 0; background: var(--verde); transition: width .06s linear; }
.modal p.dica { font-size: 13px; }
.modal p.dica.erro { color: var(--erro); }

.area-envio { padding: 0 20px 6px; }
.caixa-envio {
  display: flex; align-items: flex-end; gap: 4px; background: var(--fundo-3); border-radius: 10px; padding: 4px 6px;
}
.caixa-envio .icone { width: 36px; height: 36px; margin-bottom: 2px; }
#campo-mensagem {
  flex: 1; resize: none; max-height: 200px; background: none;
  border: 0; padding: 10px 6px; outline: none; line-height: 1.4;
}
#campo-mensagem:disabled { opacity: .6; cursor: not-allowed; }

/* arquivos esperando para ir junto com a mensagem */
.anexos-pendentes {
  display: flex; gap: 8px; padding: 10px; margin-bottom: 6px; overflow-x: auto;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 10px;
}
.pendente {
  position: relative; flex-shrink: 0; width: 120px; padding: 6px; border-radius: 8px; background: var(--fundo-3);
  display: flex; flex-direction: column; gap: 4px;
}
.pendente .miniatura {
  height: 80px; border-radius: 6px; background: var(--fundo-0) center / cover no-repeat;
  display: grid; place-items: center; color: var(--texto-3);
}
.pendente .nome-pendente { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendente .progresso { height: 4px; border-radius: 2px; background: var(--fundo-0); overflow: hidden; }
.pendente .progresso span { display: block; height: 100%; background: var(--destaque); transition: width .15s; }
.pendente.pronto .progresso span { background: var(--verde); }
.pendente.erro .nome-pendente { color: var(--erro); }
.pendente .tirar {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--erro); color: #fff; font-size: 12px; line-height: 22px; padding: 0;
}

.soltar-aqui {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fundo-0) 85%, transparent); border: 3px dashed var(--destaque);
  font-size: 22px; font-weight: 700; color: var(--destaque); pointer-events: none;
}

/* anexos dentro das mensagens */
.anexos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
.corpo { min-width: 0; }
.anexo-imagem {
  display: block; max-width: min(400px, 100%); max-height: 300px; height: auto; border-radius: 8px;
  background: var(--fundo-3); cursor: zoom-in; object-fit: contain;
}
.anexo-arquivo {
  display: flex; align-items: center; gap: 12px; width: min(380px, 100%); padding: 10px 12px;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 8px;
}
.anexo-arquivo svg { flex-shrink: 0; color: var(--destaque); }
.anexo-arquivo .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anexo-arquivo .info strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-arquivo .info small { color: var(--texto-3); }

.visualizador { align-items: center; }
.visualizador img { max-width: 100%; max-height: calc(100vh - 200px); border-radius: 8px; object-fit: contain; }
.modal.imagem { width: auto; max-width: min(1100px, 100%); }
.digitando { height: 20px; font-size: 12px; color: var(--texto-2); padding: 2px 4px; }

#lista-membros .titulo-secao { padding-top: 16px; }
#lista-membros li {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
#lista-membros li:hover { background: var(--fundo-3); }
#lista-membros li.offline { opacity: .45; }
#lista-membros .avatar { position: relative; width: 30px; height: 30px; font-size: 13px; }
.texto-membro { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nome-membro { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recado-membro { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.link-baixar { align-self: center; color: var(--destaque); font-size: 13px; }

/* convite: endereço e link de download, cada um com "Copiar" */
.linha-copiar { display: flex; align-items: center; gap: 8px; }
.linha-copiar > span { flex-shrink: 0; width: 92px; color: var(--texto-2); font-size: 13px; }
.linha-copiar code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
  background: var(--fundo-0); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
.linha-copiar button { padding: 6px 10px; }

/* ---------- perfil ---------- */
/* Foto de perfil: o círculo continua o mesmo; a imagem preenche (o pontinho de online fica por cima). */
.avatar.com-foto { background: var(--fundo-3); position: relative; }
.avatar.com-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.clicavel { cursor: pointer; }
strong.clicavel:hover { text-decoration: underline; }
.painel-usuario .painel-nome, .painel-usuario > .avatar { cursor: pointer; }
.painel-usuario:hover .painel-nome strong { text-decoration: underline; }

.perfil-cartao {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  margin: -22px -22px 4px; padding: 0 22px 12px; border-bottom: 1px solid var(--linha);
}
.perfil-faixa { height: 72px; margin: 0 -22px; background: var(--fundo-3); border-radius: 14px 14px 0 0; }
.avatar.perfil-foto {
  width: 84px; height: 84px; font-size: 34px; margin-top: -42px;
  border: 5px solid var(--fundo-2); box-sizing: content-box;
}
.perfil-nomes { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.perfil-nomes strong { font-size: 20px; }
.perfil-usuario { color: var(--texto-3); }
.perfil-recado { margin: 6px 0 0 !important; color: var(--texto) !important; }
.perfil-online { color: var(--verde); margin-top: 4px; }
.perfil-offline { color: var(--texto-3); margin-top: 4px; }
.etiqueta { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--fundo-3); color: var(--destaque); }

/* ---------- janelas sobrepostas ---------- */
.fundo-modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.modal.largo { width: min(760px, 100%); }
/* As partes não encolhem: se não couber, a janela rola (senão o conteúdo vaza por baixo do rodapé). */
.modal > * { flex-shrink: 0; }
.modal h2 { margin: 0; font-size: 19px; }
.modal h3 { margin: 4px 0 0; font-size: 13px; color: var(--texto-2); letter-spacing: .04em; }
.modal p { margin: 0; color: var(--texto-2); line-height: 1.4; }
.modal .rodape { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.separador { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; width: 100%; }
.linha-form { display: flex; gap: 10px; align-items: flex-end; }
.linha-form > label { flex: 1; }

.codigo-convite {
  font-family: Consolas, monospace; font-size: 26px; letter-spacing: .12em; text-align: center;
  background: var(--fundo-0); border: 1px dashed var(--destaque); border-radius: var(--raio); padding: 14px;
  user-select: all;
}

.editor-cargos { display: grid; grid-template-columns: 200px 1fr; gap: 16px; min-height: 360px; }
.lista-cargos { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--linha); padding-right: 12px; }
.lista-cargos button {
  display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0;
  padding: 7px 8px; border-radius: 6px;
}
.lista-cargos button:hover { background: var(--fundo-3); }
.lista-cargos button.ativo { background: var(--fundo-3); font-weight: 600; }
.lista-cargos .novo { color: var(--verde); margin-bottom: 6px; }
.ponto-cor { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--texto-3); }
.detalhe-cargo { display: flex; flex-direction: column; gap: 12px; }
.permissao {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linha);
}
.permissao strong { font-weight: 600; font-size: 14px; }
.permissao small { color: var(--texto-3); grid-column: 1; }
.permissao input { grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; accent-color: var(--destaque); }
input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--linha); background: var(--fundo-0); border-radius: 6px; }

.cargo-check { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 6px 0; color: var(--texto); font-size: 14px; }
.cargo-check input { width: 18px; height: 18px; flex-shrink: 0; padding: 0; accent-color: var(--destaque); }

.versao { margin: 0; text-align: center; font-size: 12px; color: var(--texto-3); }

/* aviso de atualização do app */
.barra-atualizacao {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 55;
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; max-width: calc(100vw - 32px);
  background: var(--fundo-0); border: 1px solid var(--verde); border-radius: 10px; box-shadow: 0 8px 24px var(--sombra);
}
.barra-atualizacao button { padding: 6px 12px; }

/* aviso rápido */
.aviso {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--fundo-0); border: 1px solid var(--linha); border-left: 4px solid var(--destaque);
  border-radius: var(--raio); padding: 10px 16px; box-shadow: 0 8px 24px var(--sombra); max-width: 90vw;
}
.aviso.erro-aviso { border-left-color: var(--erro); }

@media (max-width: 1100px) {
  #tela-chat { grid-template-columns: 64px 200px 1fr 180px; }
  .editor-cargos { grid-template-columns: 160px 1fr; }
}
@media (min-width: 761px) and (max-width: 820px) {
  #tela-chat { grid-template-columns: 64px 190px 1fr; }
  .coluna-membros { display: none; }
}

/* ---------- celular: uma coluna por vez ----------
   #tela-chat[data-vista] = "lista" (comunidades + canais), "conversa" ou "membros". */
@media (max-width: 760px) {
  .so-celular { display: flex !important; }
  /* 16px nos campos: abaixo disso o iPhone dá zoom ao tocar. */
  input, textarea, select, label input, .campo { font-size: 16px; }

  #tela-chat { grid-template-columns: 64px 1fr; grid-template-rows: 100%; }
  #tela-chat .coluna-mensagens, #tela-chat .coluna-membros { grid-column: 1 / -1; grid-row: 1; }
  #tela-chat[data-vista="lista"] .coluna-mensagens,
  #tela-chat[data-vista="lista"] .coluna-membros,
  #tela-chat[data-vista="conversa"] .trilho,
  #tela-chat[data-vista="conversa"] .coluna-canais,
  #tela-chat[data-vista="conversa"] .coluna-membros,
  #tela-chat[data-vista="membros"] .trilho,
  #tela-chat[data-vista="membros"] .coluna-canais,
  #tela-chat[data-vista="membros"] .coluna-mensagens { display: none; }
  .coluna-membros { border-left: 0; }

  /* Respeita o entalhe e a barra de gestos do iPhone. */
  .trilho { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
  .cabecalho-servidor, .cabecalho-canal { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
  .painel-usuario { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .area-envio { padding: 0 8px max(6px, env(safe-area-inset-bottom)); }
  .cabecalho-canal { padding-left: 4px; gap: 6px; }

  /* Alvos maiores para o dedo. */
  #lista-canais li { min-height: 44px; font-size: 16px; }
  .icone { width: 40px; height: 40px; }
  #lista-membros li { min-height: 48px; }
  .grupo { padding: 6px 12px; grid-template-columns: 36px 1fr; gap: 0 10px; }
  .grupo .avatar { width: 36px; height: 36px; }
  .linha-extra { padding: 2px 12px 2px 58px; }
  .anexo-imagem { max-width: 100%; }

  /* Sem mouse não há "passar por cima": toque na mensagem para ver reações e Apagar; o ✕ dos canais fica sempre visível. */
  .acoes-msg { top: -18px; right: 8px; }
  .grupo:hover .acoes-msg, .linha-extra:hover .acoes-msg { visibility: hidden; }
  .acao-emoji { width: 38px; height: 36px; font-size: 20px; }
  .apagar-msg { padding: 8px 10px; font-size: 14px; }
  .reacao { padding: 4px 10px; }
  .selecionada { background: var(--realce-forte); }
  .selecionada .acoes-msg, .grupo.selecionada:hover .acoes-msg, .linha-extra.selecionada:hover .acoes-msg { visibility: visible; }

  /* Seletor de emojis preso embaixo, na largura da tela. */
  .seletor-emoji {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; height: 52dvh;
    border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  #lista-canais li .icone { visibility: visible; width: 32px; height: 32px; }

  .menu { left: 8px; right: 8px; }
  .menu button { padding: 12px; font-size: 16px; }
  .fundo-modal { padding: 0; align-items: end; }
  .modal, .modal.largo, .modal.imagem {
    width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  .editor-cargos { grid-template-columns: 1fr; min-height: 0; }
  .lista-cargos { border-right: 0; border-bottom: 1px solid var(--linha); padding: 0 0 8px; flex-direction: row; flex-wrap: wrap; }
  .linha-form { flex-wrap: wrap; }
  .barra-atualizacao { top: max(12px, env(safe-area-inset-top)); }
  .palco { height: 42%; }
  .palco-barra { flex-wrap: wrap; }
}

/* Celular de lado ou telas baixas: tela de entrada pode rolar. */
@media (max-height: 560px) {
  #tela-entrada { overflow-y: auto; place-items: start center; padding: 16px 0; }
}

/* ---------- status (bolinha no canto da foto) ---------- */
.com-status { position: relative; flex-shrink: 0; display: inline-flex; }
/* Bolinha do status no canto de baixo da foto, com um anel da cor do fundo para "recortar" a foto. */
.bolinha-status {
  position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--fundo-1); background: var(--texto-3); box-sizing: content-box;
}
#lista-membros li:hover .bolinha-status { border-color: var(--fundo-3); }
.bolinha-status.online { background: var(--verde); }
.bolinha-status.ausente { background: #e0b03a; }
.bolinha-status.ocupado { background: var(--erro); }
.bolinha-status.invisivel { background: var(--texto-3); }
.painel-usuario .bolinha-status { border-color: var(--fundo-0); }

/* ---------- menções ---------- */
.mencao {
  background: color-mix(in srgb, var(--destaque) 18%, transparent); color: var(--destaque);
  border-radius: 4px; padding: 0 3px; font-weight: 600; cursor: pointer;
}
.mencao:hover { background: color-mix(in srgb, var(--destaque) 30%, transparent); }
.grupo.mencionado, .linha-extra.mencionado {
  background: color-mix(in srgb, var(--destaque) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--destaque);
}
.sugestoes-mencao {
  margin: 0 0 6px; background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto;
  box-shadow: 0 8px 24px var(--sombra);
}
.sugestoes-mencao .titulo-secao { padding: 2px 6px 4px; }
.sugestao {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 6px;
  background: transparent; text-align: left;
}
.sugestao .avatar { width: 26px; height: 26px; font-size: 11px; }
.sugestao small { color: var(--texto-3); }
.sugestao.ativa, .sugestao:hover { background: var(--fundo-3); }
.canal-mencao {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--erro); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.trilho-item.com-mencao { box-shadow: 0 0 0 2px var(--erro); }

/* ---------- responder e editar ---------- */
.barra-resposta {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; margin-bottom: 6px;
  background: var(--fundo-2); border-left: 3px solid var(--destaque); border-radius: 6px; font-size: 13px; color: var(--texto-2);
}
.texto-resposta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texto-resposta strong { color: var(--texto); }
.barra-resposta .icone { width: 24px; height: 24px; font-size: 12px; }
.citacao {
  display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--texto-2); margin: 2px 0 2px;
  min-width: 0; cursor: pointer;
}
.citacao::before { content: "↪"; color: var(--texto-3); }
.citacao strong { color: var(--texto); flex-shrink: 0; }
.citacao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citacao.apagada { font-style: italic; cursor: default; }
.editado { font-size: 11px; color: var(--texto-3); margin-left: 4px; }
.piscar { animation: piscar 1.4s ease-out; }
@keyframes piscar { 0%, 30% { background: color-mix(in srgb, var(--destaque) 22%, transparent); } 100% { background: transparent; } }
.campo-editando { box-shadow: 0 0 0 2px var(--destaque); }

/* ---------- figurinhas ---------- */
.figurinha-msg { display: block; width: 160px; height: 160px; object-fit: contain; margin: 4px 0; cursor: pointer; }
.figurinha-msg.pendente { opacity: .5; }
.seletor-figurinha { width: 360px; }
.figurinhas-grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; overflow-y: auto; max-height: 320px;
}
.figurinha-item { position: relative; aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; padding: 4px; }
.figurinha-item:hover { background: var(--fundo-3); }
.figurinha-item img { width: 100%; height: 100%; object-fit: contain; }
.figurinha-item .tirar {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  background: var(--erro); color: #fff; font-size: 11px; line-height: 20px; visibility: hidden;
}
.figurinha-item:hover .tirar { visibility: visible; }
.figurinha-nova {
  aspect-ratio: 1; border: 2px dashed var(--linha); border-radius: 8px; background: transparent; color: var(--texto-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px;
}
.figurinha-nova:hover { border-color: var(--destaque); color: var(--destaque); }
.figurinha-nova b { font-size: 24px; line-height: 1; }
.figurinhas-vazio { padding: 4px 12px 10px; font-size: 13px; color: var(--texto-3); }
.figurinha-grande { display: block; width: 240px; height: 240px; object-fit: contain; margin: 0 auto; }

/* ---------- configurações ---------- */
.opcoes-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opcao-tema {
  border: 2px solid var(--linha); border-radius: var(--raio); padding: 10px 8px; background: var(--fundo-1);
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px;
}
.opcao-tema.escolhida { border-color: var(--destaque); }
.amostra-tema { width: 100%; height: 34px; border-radius: 5px; border: 1px solid var(--linha); }
.amostra-tema.escuro { background: linear-gradient(90deg, #121316 30%, #1e2025 30%); }
.amostra-tema.claro { background: linear-gradient(90deg, #e6e7eb 30%, #ffffff 30%); }
.amostra-tema.sistema { background: linear-gradient(135deg, #121316 50%, #ffffff 50%); }
.cores-destaque { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cor-destaque {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; padding: 0;
  box-shadow: 0 0 0 1px var(--linha);
}
.cor-destaque.escolhida { border-color: var(--texto); }
.cores-destaque input[type=color] { width: 40px; height: 32px; padding: 0; border: 0; background: transparent; }
.opcoes-status { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opcao-status {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--fundo-1); text-align: left; font-size: 13px;
}
.opcao-status .bolinha-status { position: static; border: 0; width: 10px; height: 10px; flex-shrink: 0; }
.opcao-status small { display: block; color: var(--texto-3); font-size: 11px; }
.opcao-status.escolhida { border-color: var(--destaque); }
.apagar-msg.acao-texto:hover { background: var(--fundo-3); color: var(--texto); }
.figurinha-item > .figurinha-item { width: 100%; height: 100%; }
.video-pip-chamada { position: fixed; right: 0; bottom: 0; width: 48px; height: 27px; opacity: .01; pointer-events: none; z-index: -1; }
.valor-volume { color: var(--texto-3); font-weight: 400; }
.participante.clicavel:hover { background: var(--realce-forte); color: var(--texto); }
.modal input[type=range] { width: 100%; accent-color: var(--destaque); }

/* ---------- sala da chamada (no centro, no lugar da conversa) ---------- */
.coluna-mensagens { position: relative; }
.titulo-sala { display: none; font-weight: 700; }
.titulo-sala::before { content: "🔊 "; font-weight: 400; }
.alternar-sala {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 0; border-radius: 999px; background: var(--fundo-3); color: var(--texto); font-weight: 600;
}
.alternar-sala:hover { background: var(--linha); }
.alternar-sala .bolinha-ao-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.coluna-mensagens.com-sala .mensagens,
.coluna-mensagens.com-sala .area-envio,
.coluna-mensagens.com-sala .cerquilha,
.coluna-mensagens.com-sala #nome-canal-atual { display: none; }
.coluna-mensagens.com-sala .titulo-sala { display: inline; }
.coluna-mensagens.com-sala { background: var(--fundo-0); }
.coluna-mensagens.com-sala .palco { flex: 1 1 auto; height: auto; border-bottom: 0; }
.sala { display: flex; flex-direction: column; min-height: 0; background: var(--fundo-0); }
.sala:not(.com-palco) { flex: 1 1 auto; }
.sala-grade {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px;
}
.bloco-sala {
  position: relative; flex: 0 0 auto; width: var(--largura-bloco, 320px); aspect-ratio: 16 / 9;
  display: grid; place-items: center; overflow: hidden; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-bloco, var(--fundo-3)) 55%, var(--fundo-2)), color-mix(in srgb, var(--cor-bloco, var(--fundo-3)) 25%, var(--fundo-1)));
  outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .12s;
}
.bloco-sala.falando { outline-color: var(--verde); }
.bloco-sala .avatar.avatar-sala {
  width: clamp(48px, calc(var(--largura-bloco, 320px) * .22), 120px); height: auto; aspect-ratio: 1;
  font-size: clamp(20px, calc(var(--largura-bloco, 320px) * .09), 48px); box-shadow: 0 4px 18px var(--sombra);
}
.etiqueta-sala {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta-sala .icone-estado { color: #ff8a7a; }
.selo-clipes {
  position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600;
}
.bloco-tela { background: #000; }
.bloco-tela video { width: 100%; height: 100%; object-fit: contain; display: block; }
.bloco-tela .ao-vivo { position: absolute; left: 10px; top: 10px; }
.bloco-tela .dica-bloco { color: #cfcfcf; font-size: 14px; }
.bloco-tela .assistir-bloco {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45);
  color: #fff; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .12s;
}
.bloco-tela:hover .assistir-bloco { opacity: 1; }
.bloco-tela.minha { cursor: default; }
.bloco-sala.assistindo { outline-color: var(--destaque); }
/* Com uma transmissão aberta, as pessoas viram uma faixa embaixo dela. */
.sala.com-palco .sala-grade { flex: 0 0 auto; flex-wrap: nowrap; justify-content: safe center; align-content: stretch; padding: 10px 12px; }
.sala.com-palco .bloco-sala { width: 168px; }
.sala-controles { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px 16px; }
.botao-sala {
  position: relative; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--fundo-3); color: var(--texto);
}
.botao-sala:hover { background: var(--linha); }
.botao-sala .risco { display: none; }
.botao-sala.desligado { background: color-mix(in srgb, var(--erro) 22%, var(--fundo-3)); color: var(--erro); }
.botao-sala.desligado .risco { display: inline; }
.botao-sala.ligado { background: var(--verde); color: var(--fundo-0); }
.botao-sala.vermelho { width: 64px; border-radius: 24px; background: var(--erro); color: #fff; }
.botao-sala.vermelho:hover { filter: brightness(1.1); }
.coluna-mensagens:fullscreen, .coluna-mensagens.expandida { background: var(--fundo-0); }
.coluna-mensagens.expandida { position: fixed; inset: 0; z-index: 50; }
/* Volume da transmissão, na barra do palco */
.volume-palco { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--texto-2); font-size: 13px; }
.volume-palco input { width: 96px; padding: 0; border: 0; background: none; accent-color: var(--destaque); }
.volume-palco .valor-volume { min-width: 3.2em; font-size: 12px; }
/* Aviso de clipes ligados (na lista da coluna de canais) */
.selo-clipe-lista { font-size: 11px; color: var(--erro); }
.aviso-clipe .botoes { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .sala-controles { gap: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .botao-sala { width: 44px; height: 44px; }
  .volume-palco input { width: 70px; }
  .alternar-sala span.texto-alternar { display: none; }
}
/* Janela do clipe salvo */
.video-clipe { width: 100%; max-height: 50vh; border-radius: var(--raio); background: #000; }
.botao-link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--raio); color: var(--texto); text-decoration: none; font-weight: 600; }

/* ---------- fase 16 ---------- */
/* Duas transmissões lado a lado no palco */
.palco-telas { flex: 1; min-height: 0; display: flex; gap: 4px; background: #000; }
.tela-palco { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.tela-palco video { flex: 1; min-width: 0; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.topo-tela-palco {
  position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff;
  opacity: 0; transition: opacity .15s;
}
.tela-palco:hover .topo-tela-palco, .topo-tela-palco:focus-within { opacity: 1; }
.topo-tela-palco .palco-titulo { font-size: 13px; }
.topo-tela-palco .volume-palco { color: #ddd; }
.topo-tela-palco .volume-palco input { width: 70px; }
.topo-tela-palco button { padding: 2px 8px; }
@media (hover: none) { .topo-tela-palco { opacity: 1; } }
@media (max-width: 760px) { .palco-telas { flex-direction: column; } }
/* Prévia: botões "Assistir" e "Lado a lado" por cima */
.bloco-tela .assistir-bloco { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bloco-tela .assistir-bloco button { padding: 6px 12px; font-size: 13px; }
.sala.com-palco .bloco-tela .assistir-bloco button { padding: 4px 8px; font-size: 12px; }
/* Ícones de mudo / sem áudio / silenciado */
.icone-voz { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--erro); }
.icone-voz.silenciado { color: var(--texto-3); }
.etiqueta-sala .icone-voz { color: #ff8a7a; }
.etiqueta-sala .icone-voz.silenciado { color: #cfcfcf; }
/* Anel verde no meu avatar (painel de baixo) enquanto eu falo */
#avatar-eu .avatar { transition: box-shadow .1s; }
#avatar-eu.falando .avatar { box-shadow: 0 0 0 2px var(--fundo-0), 0 0 0 4px var(--verde); }
/* Em qual chamada a pessoa está */
.chamada-membro { color: var(--verde); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-chamada {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px;
  padding: 8px 10px; border-radius: var(--raio); background: color-mix(in srgb, var(--verde) 14%, var(--fundo-3));
  color: var(--texto); font-size: 13px;
}
.perfil-chamada button { padding: 4px 12px; }
/* Prévia da transmissão dentro do perfil */
.caixa-previa-perfil { position: relative; }
.caixa-previa-perfil .ao-vivo { position: absolute; left: 8px; top: 8px; }
.previa-perfil { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: var(--raio); cursor: pointer; }

/* ---------- fase 17: Início, amigos, conversas diretas e ligação ---------- */
/* Barra lateral: botão Início, separador e o símbolo de "você está numa chamada aqui" */
.trilho-envolto { position: relative; display: flex; justify-content: center; }
.trilho-inicio { color: var(--texto-2); }
.trilho-inicio:hover { color: var(--texto); }
.trilho-separador { width: 32px; height: 2px; margin: 0; border: 0; border-radius: 1px; background: var(--linha); flex-shrink: 0; }
.selo-chamada-trilho {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verde); color: var(--fundo-0);
  border: 3px solid var(--fundo-0); pointer-events: none;
}
.contador-trilho {
  position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--erro); color: #fff; font-size: 11px; font-weight: 800; line-height: 14px; text-align: center;
  border: 3px solid var(--fundo-0); pointer-events: none;
}
/* Coluna da esquerda no Início */
#tela-chat.inicio #titulo-canais, #tela-chat.inicio #form-novo-canal, #tela-chat.inicio #lista-canais { display: none; }
#tela-chat.inicio .cabecalho-servidor svg { display: none; }
#tela-chat.inicio #botao-menu-comunidade { pointer-events: none; }
.lista-inicio { flex: 1; overflow-y: auto; padding-top: 8px; }
.lista-inicio .item-inicio {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 1px 0; min-height: 42px;
  border-radius: 6px; color: var(--texto-2); cursor: pointer; user-select: none;
}
.lista-inicio .item-inicio:hover { background: var(--fundo-3); color: var(--texto); }
.lista-inicio .item-inicio.ativo { background: var(--fundo-3); color: var(--texto); font-weight: 600; }
.lista-inicio .item-inicio.nao-lido { color: var(--texto); font-weight: 600; }
.lista-inicio .nome-canal { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-inicio .icone-amigos { width: 34px; text-align: center; font-size: 18px; }
.lista-inicio .em-ligacao { font-size: 13px; }
.lista-inicio .vazio-inicio { padding: 4px 12px; }
.lista-inicio .titulo-secao .icone { visibility: visible; }
/* Cabeçalho da conversa direta: botão Ligar */
.ligar-dm {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 0; border-radius: 999px; background: var(--verde); color: var(--fundo-0); font-weight: 700;
}
.ligar-dm:hover { filter: brightness(1.08); }
.ligar-dm + .alternar-sala { margin-left: 8px; }
/* Perfil na coluna da direita (conversa direta) */
.perfil-lateral { padding: 12px 8px; }
.perfil-lateral .perfil-cartao { margin: 0; padding: 0 12px 12px; border-radius: 14px; background: var(--fundo-2); }
.perfil-lateral .perfil-faixa { margin: 0 -12px; }
/* Página de amigos */
.coluna-mensagens.com-amigos .mensagens, .coluna-mensagens.com-amigos .area-envio { display: none; }
.coluna-mensagens.com-sala .pagina-amigos { display: none; }
.pagina-amigos { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px 20px; }
.abas-amigos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aba-amigos { padding: 6px 12px; border: 0; border-radius: 6px; background: none; color: var(--texto-2); font-weight: 600; }
.aba-amigos:hover { background: var(--fundo-3); color: var(--texto); }
.aba-amigos.ativa { background: var(--fundo-3); color: var(--texto); }
.aba-amigos.aba-adicionar { background: var(--verde); color: var(--fundo-0); }
.aba-amigos.aba-adicionar.ativa { background: none; color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.lista-amigos { display: flex; flex-direction: column; }
.linha-amigo {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--linha);
  border-radius: 8px; cursor: pointer; text-align: left; background: none; color: var(--texto); width: 100%;
}
.linha-amigo:hover { background: var(--fundo-2); border-top-color: transparent; }
.texto-amigo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.texto-amigo small { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes-amigo { display: flex; gap: 8px; }
.acao-amigo {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fundo-3); color: var(--texto); font-size: 15px;
}
.acao-amigo:hover { background: var(--linha); }
.acao-amigo.aceitar { color: var(--verde); font-weight: 800; }
.acao-amigo.perigo:hover { background: var(--erro); color: #fff; }
.vazio-amigos { padding: 24px 8px; text-align: center; }
.adicionar-amigo h3 { margin: 4px 0; }
.linha-adicionar { display: flex; gap: 8px; margin: 10px 0; }
.linha-adicionar input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--linha);
  background: var(--fundo-0); color: var(--texto); outline: none;
}
.linha-adicionar input:focus { border-color: var(--verde); }
.dica.ok { color: var(--verde); }
.lista-escolha { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.linha-amigo.escolha { border: 0; }
.botoes-amizade { align-items: center; }
.etiqueta-amigo { color: var(--verde); font-weight: 700; font-size: 13px; }
/* Ligação chegando */
.ligacao-chegando {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 300px; max-width: calc(100vw - 32px);
  border-radius: 16px; background: var(--fundo-2); border: 1px solid var(--linha); box-shadow: 0 12px 40px var(--sombra);
  animation: chegando .25s ease-out;
}
@keyframes chegando { from { opacity: 0; transform: translate(-50%, -12px); } }
.ligacao-chegando .avatar.avatar-ligacao { width: 52px; height: 52px; font-size: 22px; animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--verde) 35%, transparent); } }
.texto-ligacao { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.texto-ligacao span { color: var(--texto-2); font-size: 13px; }
.botoes-ligacao { display: flex; gap: 10px; }
.botao-ligacao { width: 46px; height: 46px; border: 0; border-radius: 50%; font-size: 18px; color: #fff; }
.botao-ligacao.atender { background: var(--verde); }
.botao-ligacao.recusar { background: var(--erro); }
.botao-ligacao:hover { filter: brightness(1.1); }
/* Escolher a duração do clipe */
.opcoes-duracao { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.opcoes-duracao button { padding: 14px; font-size: 15px; }
@media (max-width: 760px) {
  .pagina-amigos { padding: 10px 12px 16px; }
  .ligar-dm span { display: none; }
}
#lista-membros .perfil-lateral .avatar.perfil-foto { width: 72px; height: 72px; font-size: 30px; margin-top: -36px; border-color: var(--fundo-2); }

/* ---------- fase 18: links, prévia, fixadas, busca, mensagem de voz e avisos ---------- */
/* Botões do cabeçalho (busca, fixadas, ligar, chamada/conversa) agrupados à direita */
.acoes-cabecalho { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.acoes-cabecalho > .ligar-dm, .acoes-cabecalho > .alternar-sala { margin-left: 0; }
.acoes-cabecalho + .empurra { margin-left: 6px; }
.coluna-mensagens.com-sala #botao-busca, .coluna-mensagens.com-sala #botao-fixadas { display: none; }
/* Links e prévia */
.link-msg { color: var(--destaque); text-decoration: none; word-break: break-all; }
.link-msg:hover { text-decoration: underline; }
.previa-link {
  display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 440px; margin-top: 6px; padding: 10px 12px;
  border-left: 4px solid var(--destaque); border-radius: 6px; background: var(--fundo-2);
}
.previa-link.com-miniatura { grid-template-columns: 1fr 80px; align-items: start; }
.previa-textos { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.previa-site { color: var(--texto-3); font-size: 12px; }
.previa-titulo { color: var(--destaque); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.previa-titulo:hover { text-decoration: underline; }
.previa-descricao { margin: 0; color: var(--texto-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.previa-imagem { display: block; width: 100%; border-radius: 6px; object-fit: cover; background: var(--fundo-3); }
.previa-link.com-miniatura .previa-imagem { width: 80px; height: 80px; }
.previa-video { position: relative; display: block; }
.previa-video .previa-imagem { aspect-ratio: 16 / 9; }
.previa-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .7); color: #fff; font-size: 20px; padding-left: 4px;
}
.previa-video:hover .previa-play { background: #e33; }
/* Fixadas */
.selo-fixada { display: inline-block; margin-bottom: 2px; color: var(--texto-3); font-size: 11px; font-weight: 600; }
.lista-itens { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.item-fixada, .item-busca {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--raio); background: var(--fundo-3);
  text-align: left; color: var(--texto); border: 0; width: 100%;
}
.item-busca { cursor: pointer; }
.item-busca:hover { background: var(--linha); }
.topo-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topo-item .avatar { width: 24px; height: 24px; font-size: 11px; }
.topo-item time { color: var(--texto-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
.item-fixada .texto, .item-busca .texto { color: var(--texto-msg); white-space: pre-wrap; overflow-wrap: anywhere; }
.canal-busca { color: var(--texto-3); font-size: 12px; }
.linha-busca { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-busca input, .linha-busca select {
  flex: 1 1 180px; min-width: 0; padding: 10px 12px; border-radius: var(--raio); border: 1px solid var(--linha);
  background: var(--fundo-0); color: var(--texto); outline: none;
}
.linha-busca input:focus, .linha-busca select:focus { border-color: var(--destaque); }
/* Gravando mensagem de voz */
.barra-gravacao {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 12px;
  border-radius: var(--raio); background: var(--fundo-2); border: 1px solid var(--erro);
}
.ponto-gravando { width: 10px; height: 10px; border-radius: 50%; background: var(--erro); animation: piscando 1s ease-in-out infinite; }
@keyframes piscando { 50% { opacity: .25; } }
.tempo-gravacao { font-variant-numeric: tabular-nums; font-weight: 700; }
.texto-gravacao { flex: 1; min-width: 0; color: var(--texto-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-gravacao button { padding: 6px 12px; }
/* Player de áudio (mensagem de voz e arquivos de som) */
.anexo-audio {
  display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 8px 12px; border-radius: 22px; background: var(--fundo-2);
}
.tocar-audio {
  flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--destaque); color: var(--sobre-destaque);
  font-size: 13px; font-weight: 800;
}
.meio-audio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nome-audio { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-audio { width: 100%; accent-color: var(--destaque); padding: 0; margin: 0; }
.tempo-audio { flex-shrink: 0; color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.marca-voz { font-size: 14px; }
.avisos-fechado { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .acoes-cabecalho { gap: 2px; }
  .texto-gravacao { display: none; }
}
/* Vídeo enviado: capa com ▶ e, depois de tocar, o player dentro da conversa */
.anexo-video { position: relative; display: inline-block; max-width: min(420px, 100%); }
.capa-video {
  position: relative; display: block; width: min(420px, 100%); aspect-ratio: 16 / 9; border: 0; border-radius: var(--raio);
  background: linear-gradient(135deg, var(--fundo-3), var(--fundo-0)); color: #fff; cursor: pointer;
}
.capa-video:hover .previa-play { background: var(--destaque); color: var(--sobre-destaque); }
.capa-video .info-video {
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55);
  font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-anexo { display: block; max-width: min(420px, 100%); max-height: 340px; border-radius: var(--raio); background: #000; }
.baixar-video { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 6px; }