:root {
  color-scheme: dark;
  --fundo: #101217;
  --painel: #171a21;
  --painel-claro: #1d2028;
  --painel-destaque: #282d38;
  --borda: #303540;
  --texto: #f1f2f5;
  --suave: #a5acbb;
  --acento: #f28b62;
  --acento-claro: #ffa17c;
  --ocre: #f4a47f;
  --verde: #80c9a5;
  --erro: #ffa99c;
  --sobre-acento: #201b19;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 2px;
}

* {
  scrollbar-color: var(--borda) transparent;
  scrollbar-width: thin;
}

/* Tela de entrada */

.entrada-tela {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100dvh;
}

.entrada-marca {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(32px, 5vw, 76px);
  overflow: hidden;
  background: #f3ede3;
  color: var(--sobre-acento);
}

.entrada-marca::before,
.entrada-marca::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  right: -310px;
  top: -150px;
  border: 1px solid rgb(197 100 65 / 24%);
  border-radius: 50%;
  pointer-events: none;
}

.entrada-marca::after {
  top: -110px;
  right: -350px;
  background: rgb(242 139 98 / 8%);
}

.entrada-marca h1 {
  width: min(100%, 240px);
  line-height: 0;
  margin-left: -12px;
}

.logo-rodavoz {
  display: block;
  width: 100%;
  height: auto;
}

.sobretitulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.6;
}

.entrada-apresentacao {
  padding: 24px 0;
}

.entrada-apresentacao .sobretitulo {
  color: #93634d;
  margin-bottom: 24px;
}

.entrada-apresentacao h2 {
  max-width: 9ch;
  font-size: clamp(42px, 5.3vw, 78px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.06;
}

.entrada-apresentacao h2 span {
  color: #bc512f;
}

.entrada-apresentacao p {
  max-width: 29ch;
  margin-top: 28px;
  color: #6e655d;
  font-size: 17px;
  line-height: 1.7;
}

.entrada-recursos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgb(32 27 25 / 14%);
  color: #6e655d;
  font-size: 12px;
  font-weight: 600;
}

.entrada-recursos span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: #bc512f;
}

.entrada-painel {
  display: grid;
  place-items: center;
  padding: 56px 32px;
  background: var(--fundo);
}

.entrada-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(100%, 360px);
}

.entrada-cabecalho {
  margin-bottom: 12px;
}

.entrada-cabecalho .sobretitulo {
  margin-bottom: 16px;
  color: var(--acento);
}

.entrada-form h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.entrada-descricao {
  margin-top: 10px;
  color: var(--suave);
  font-size: 14px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.campo label {
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
}

.campo input,
.campo select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel);
  font: inherit;
}

.campo input:focus,
.campo select:focus {
  border-color: var(--ocre);
  outline: none;
  box-shadow: 0 0 0 3px rgb(242 139 98 / 12%);
}

.botao-principal {
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 700;
}

.botao-principal:hover:not(:disabled) {
  background: var(--acento-claro);
}

.botao-link {
  align-self: flex-start;
  padding: 2px 0;
  color: var(--suave);
  font-size: 12px;
}

.botao-link:hover {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.erro {
  color: var(--erro);
  font-size: 14px;
}

.erro:empty {
  display: none;
}

/* Estrutura principal */

.mesa {
  display: grid;
  grid-template-columns: 80px 264px minmax(0, 1fr) 232px;
  height: 100dvh;
}

.trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  overflow-y: auto;
  background: var(--fundo);
}

.botao-servidor {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: var(--painel-claro);
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 700;
  transition: border-radius 120ms ease, background-color 120ms ease;
}

.botao-servidor:hover {
  border-color: var(--borda);
  border-radius: 14px;
  background: var(--painel-destaque);
}

.botao-servidor.ativo {
  border-radius: 14px;
  background: var(--acento);
  color: var(--sobre-acento);
}

.botao-servidor.novidade::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--fundo);
  border-radius: 50%;
  background: var(--ocre);
}

.botao-conversas {
  display: grid;
  place-items: center;
}

/* Mostra apenas o símbolo do logo original, preservando o mesmo arquivo. */
.logo-simbolo {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  filter: brightness(0) invert(1);
}

.logo-simbolo img {
  position: absolute;
  top: -12px;
  left: -6.6px;
  width: 145.65px;
  height: 60.75px;
  max-width: none;
}

.botao-conversas.ativo .logo-simbolo {
  filter: none;
}

.divisor-trilho {
  flex: none;
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: var(--borda);
}

.selo-trilho {
  position: absolute;
  top: -3px;
  right: -3px;
  border: 2px solid var(--fundo);
  box-sizing: content-box;
  font-family: var(--fonte);
}

.lista-vazia {
  padding: 8px;
  color: var(--suave);
  font-size: 13px;
}

.lista-conversas .botao-canal {
  gap: 10px;
  margin-bottom: 2px;
}

.membro-botao {
  width: 100%;
  border-radius: 5px;
  text-align: left;
}

.membro-botao:hover {
  background: var(--painel-claro);
}

.botao-pequeno.alertas-ligados {
  border-color: var(--verde);
  color: var(--verde);
}

.botao-adicionar {
  border: 1px dashed var(--borda);
  background: none;
  color: var(--ocre);
  font-family: var(--fonte);
  font-size: 24px;
  font-weight: 400;
}

.coluna-canais {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--borda);
  background: var(--painel);
}

.cabecalho-servidor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 76px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--borda);
}

.cabecalho-servidor h2 {
  flex: 1 1 100%;
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-pequeno {
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  color: var(--suave);
  font-size: 11px;
  font-weight: 600;
}

.botao-pequeno:hover {
  background: var(--painel-destaque);
}

.lista-canais {
  flex: 1;
  min-height: 0;
  padding: 24px 12px;
  overflow-y: auto;
}

.rotulo-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 12px;
  color: var(--suave);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.botao-novo-canal {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--ocre);
  font-size: 18px;
  line-height: 1;
}

.botao-novo-canal:hover {
  background: var(--painel-destaque);
}

.botao-canal {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin-bottom: 4px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--suave);
  text-align: left;
}

.botao-canal:hover {
  background: var(--painel-claro);
  color: var(--texto);
}

.botao-canal.ativo {
  background: rgb(242 139 98 / 12%);
  color: #ffc5a9;
  box-shadow: inset 2px 0 0 var(--acento);
}

.botao-canal.nao-lido {
  color: var(--texto);
  font-weight: 700;
}

.botao-canal .nome-canal {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selo {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ocre);
  color: var(--sobre-acento);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.rodape-usuario {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 12px;
  border-top: 1px solid var(--borda);
  background: var(--painel);
}

.rodape-usuario .nome {
  flex: 1;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff8ef;
  font-size: 13px;
  font-weight: 700;
}

/* Conversa */

.conversa {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--painel-claro);
}

.cabecalho-conversa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 76px;
  padding: 0 28px;
  border-bottom: 1px solid var(--borda);
  background: var(--painel);
}

.cabecalho-conversa h1 {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.simbolo-canal {
  color: var(--suave);
  font-weight: 400;
}

.botao-menu {
  display: none;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 20px;
}

.aviso-conexao,
.aviso {
  padding: 6px 16px;
  font-size: 13px;
}

.aviso-conexao {
  background: var(--ocre);
  color: var(--sobre-acento);
  font-weight: 600;
}

.aviso {
  background: var(--painel-destaque);
  color: var(--texto);
}

.mensagens {
  flex: 1;
  min-height: 0;
  padding: 24px 0 12px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.inicio-canal {
  padding: 32px 28px;
  color: var(--suave);
}

.inicio-canal::before {
  content: "#";
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border: 1px solid rgb(242 139 98 / 20%);
  border-radius: 17px;
  background: rgb(242 139 98 / 8%);
  color: var(--acento);
  font-size: 28px;
  font-weight: 500;
}

.inicio-canal h2 {
  margin-bottom: 8px;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.carregar-anteriores {
  display: block;
  margin: 0 auto 12px;
}

.mensagem {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  padding: 4px 28px;
}

.mensagem:hover {
  background: rgb(0 0 0 / 14%);
}

.mensagem.nova-sequencia {
  margin-top: 22px;
}

.mensagem-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mensagem-autor {
  font-weight: 700;
}

.mensagem-hora {
  color: var(--suave);
  font-size: 12px;
}

.mensagem-texto {
  grid-column: 2;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #d8dce6;
  line-height: 1.65;
}

.mensagem-editada {
  color: var(--suave);
  font-size: 11px;
}

.mencao {
  padding: 0 3px;
  border-radius: 3px;
  background: rgb(217 164 65 / 18%);
  color: var(--ocre);
  font-weight: 600;
}

.mensagem.com-mencao {
  background: rgb(217 164 65 / 8%);
  box-shadow: inset 2px 0 0 var(--ocre);
}

.mensagem.destacada {
  background: rgb(116 181 131 / 16%);
}

.citacao {
  display: flex;
  grid-column: 2;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 3px;
  padding: 1px 0 1px 8px;
  border-left: 2px solid var(--borda);
  color: var(--suave);
  font-size: 13px;
  text-align: left;
}

.citacao-autor {
  flex: none;
  font-weight: 600;
}

.citacao-trecho {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.citacao-apagada {
  font-style: italic;
}

.anexos {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  gap: 8px;
  margin-top: 4px;
}

.anexo-imagem {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
}

.anexo-imagem img {
  display: block;
  max-width: min(100%, 420px);
  max-height: 320px;
}

.anexo-arquivo {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--painel);
  color: var(--texto);
  text-decoration: none;
}

.anexo-arquivo:hover {
  border-color: var(--ocre);
}

.anexo-nome {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anexo-tamanho {
  color: var(--suave);
  font-size: 12px;
}

.reacoes {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.reacao {
  padding: 1px 8px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--painel);
  font-size: 13px;
}

.reacao:hover {
  border-color: var(--suave);
}

.reacao.propria {
  border-color: var(--ocre);
  background: rgb(217 164 65 / 14%);
}

.seletor-reacoes {
  display: flex;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--painel);
}

.opcao-reacao {
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1.2;
}

.opcao-reacao:hover {
  background: var(--painel-destaque);
}

.edicao {
  grid-column: 2;
}

.campo-edicao {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ocre);
  border-radius: 6px;
  background: var(--painel-destaque);
  resize: vertical;
}

.campo-edicao:focus {
  outline: none;
}

.edicao-ajuda {
  margin-top: 3px;
  color: var(--suave);
  font-size: 12px;
}

.acoes-mensagem {
  position: absolute;
  top: -10px;
  right: 14px;
  z-index: 2;
  display: none;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--painel);
}

.mensagem:hover .acoes-mensagem,
.mensagem:focus-within .acoes-mensagem {
  display: flex;
}

.acao-mensagem {
  padding: 2px 8px;
  color: var(--suave);
  font-size: 12px;
}

.acao-mensagem:hover {
  background: var(--painel-destaque);
  color: var(--texto);
}

.acao-perigosa {
  color: var(--erro);
}

.digitando {
  min-height: 20px;
  padding: 0 16px;
  color: var(--suave);
  font-size: 12px;
}

.compositor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 18px;
}

.barra-resposta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--painel);
  color: var(--suave);
  font-size: 13px;
}

.barra-resposta[hidden],
.anexos-pendentes[hidden] {
  display: none;
}

.barra-resposta strong {
  color: var(--texto);
}

.anexos-pendentes {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.anexo-pendente {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  width: 150px;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--painel);
}

.anexo-pendente img,
.anexo-pendente-icone {
  display: grid;
  place-items: center;
  width: 100%;
  height: 70px;
  border-radius: 5px;
  background: var(--painel-destaque);
  color: var(--suave);
  font-size: 12px;
  object-fit: cover;
}

.anexo-pendente .botao-pequeno {
  align-self: flex-start;
}

.linha-compositor {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 7px;
  border: 1px solid #3c424f;
  border-radius: 14px;
  background: var(--painel);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.linha-compositor:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgb(242 139 98 / 8%);
}

.botao-anexar {
  flex: none;
  width: 36px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--suave);
  font-size: 22px;
  line-height: 1;
}

.botao-anexar:hover {
  border-color: var(--ocre);
}

.compositor textarea {
  display: block;
  width: 100%;
  max-height: 160px;
  min-width: 0;
  padding: 9px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  resize: none;
}

.compositor textarea:focus {
  outline: none;
}

.botao-enviar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.botao-enviar:hover:not(:disabled) {
  background: var(--acento-claro);
}

.dica-compositor {
  padding: 0 4px;
  color: var(--suave);
  font-size: 10px;
  text-align: right;
}

.compositor textarea::placeholder {
  color: var(--suave);
}

.vazio {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
}

.vazio h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.vazio .logo-simbolo {
  margin-bottom: 18px;
  transform: scale(1.5);
}

.vazio p {
  max-width: 38ch;
  color: var(--suave);
}

.vazio .botao-principal {
  justify-self: center;
}

/* Membros */

.coluna-membros {
  padding: 28px 12px;
  border-left: 1px solid var(--borda);
  overflow-y: auto;
  background: var(--painel);
}

.membro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}

.membro.offline {
  opacity: 0.55;
}

.busca-de-membros {
  display: block;
  width: calc(100% - 16px);
  margin: 8px 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--painel-claro);
}

.busca-de-membros:focus {
  border-color: var(--ocre);
  outline: none;
}

.carregar-membros {
  display: block;
  margin: 8px auto;
}

.membro-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.membro-dono {
  color: var(--ocre);
  font-size: 11px;
  font-weight: 600;
}

.avatar-presenca {
  position: relative;
}

.avatar-presenca.online::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--painel);
  border-radius: 50%;
  background: var(--verde);
}

/* Voz e vídeo */

.rotulo-voz {
  padding-top: 16px;
}

.lista-participantes {
  margin: 0 0 6px;
  padding: 2px 8px 2px 26px;
  list-style: none;
}

.participante {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--suave);
  font-size: 13px;
}

.participante .avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
}

.participante .membro-nome {
  flex: 1;
}

.participante.falando {
  color: var(--texto);
}

.participante.falando .avatar {
  box-shadow: 0 0 0 2px var(--verde);
}

.etiqueta-voz {
  color: var(--suave);
  font-size: 11px;
}

.painel-voz {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--borda);
}

.painel-voz-titulo {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
}

.painel-voz-titulo strong {
  color: var(--verde);
  font-size: 13px;
}

.painel-voz-titulo span {
  color: var(--suave);
  font-size: 12px;
}

.painel-voz .controles-voz {
  justify-content: flex-start;
  gap: 4px;
}

.painel-voz .botao-controle {
  flex: 1 1 auto;
  padding: 4px 6px;
  font-size: 12px;
}

.conversa.em-chamada .mensagens,
.conversa.em-chamada .digitando,
.conversa.em-chamada .compositor {
  display: none;
}

.palco {
  display: none;
}

.conversa.em-chamada .palco {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px;
}

.grade-chamada {
  display: grid;
  flex: 1;
  grid-auto-rows: minmax(150px, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.ladrilho {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--painel);
  box-shadow: inset 0 0 0 1px var(--borda);
}

.ladrilho.falando {
  box-shadow: inset 0 0 0 3px var(--verde);
}

.ladrilho video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ladrilho.proprio video {
  transform: scaleX(-1);
}

.ladrilho-avatar .avatar {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

.ladrilho-nome,
.ladrilho-mudo {
  position: absolute;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgb(15 10 7 / 75%);
  font-size: 12px;
  font-weight: 600;
}

.ladrilho-nome {
  left: 8px;
  max-width: calc(100% - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ladrilho-mudo {
  right: 8px;
  color: var(--erro);
}

.controles-voz {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.botao-controle {
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--painel);
  font-size: 13px;
  font-weight: 600;
}

.botao-controle:hover:not(:disabled) {
  background: var(--painel-destaque);
}

.botao-controle:disabled {
  color: var(--suave);
  cursor: not-allowed;
}

.botao-controle.ligado {
  border-color: var(--verde);
  color: var(--verde);
}

.botao-controle.desligado {
  border-color: var(--erro);
  color: var(--erro);
}

.botao-controle.sair-chamada {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
}

.botao-controle.sair-chamada:hover {
  background: var(--acento-claro);
}

/* Administração */

.links-de-entrada {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.campo[hidden] {
  display: none;
}

.botao-conta {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px;
  border-radius: 6px;
  text-align: left;
}

.botao-conta:hover {
  background: var(--painel-destaque);
}

.acoes-do-titulo {
  margin-left: auto;
}

.botao-anexar[hidden] {
  display: none;
}

.compositor textarea:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.membro-silenciado {
  color: var(--erro);
  font-size: 11px;
  font-weight: 600;
}

.botao-perigoso {
  padding: 8px 12px;
  border: 1px solid var(--erro);
  border-radius: 6px;
  color: var(--erro);
  font-weight: 600;
}

.botao-perigoso:hover {
  background: rgb(255 171 150 / 12%);
}

.perfil-topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perfil-topo .avatar {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.perfil-topo .erro {
  font-size: 13px;
}

.perfil-membro h3,
.secao-ajuste h3,
.editor-de-cargo h3 {
  font-size: 14px;
  font-weight: 700;
}

.fichas-de-cargo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fichas-de-cargo li {
  padding: 2px 9px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  font-size: 13px;
}

.fichas-de-cargo .sem-cargo {
  border: 0;
  padding: 0;
  color: var(--suave);
}

.lista-de-cargos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opcao-marcavel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.opcao-marcavel:has(input:disabled) {
  color: var(--suave);
}

.acoes-perfil {
  justify-content: flex-start;
}

dialog.dialogo-grande {
  width: min(calc(100vw - 32px), 720px);
  height: min(calc(100dvh - 32px), 640px);
  padding: 0;
}

dialog.dialogo-grande[open] {
  display: flex;
  flex-direction: column;
}

.topo-dos-ajustes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--borda);
}

.topo-dos-ajustes h2 {
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abas {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 8px 20px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--borda);
}

.aba {
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  color: var(--suave);
  font-weight: 600;
}

.aba.ativa {
  border-bottom-color: var(--acento);
  color: var(--texto);
}

.corpo-dos-ajustes {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.corpo-dos-ajustes > .botao-principal {
  align-self: flex-start;
}

.secao-ajuste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.secao-ajuste .campo {
  width: 100%;
}

.secao-ajuste p {
  color: var(--suave);
}

.ajuda-de-ajustes {
  color: var(--suave);
}

.lista-ajustes,
.lista-registro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-ajustes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--painel-claro);
}

.lista-ajustes .botao-perigoso {
  padding: 3px 8px;
  font-size: 12px;
}

.nome-do-cargo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.ponto-de-cor {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.acoes-do-cargo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.item-empilhado {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-empilhado small {
  color: var(--suave);
}

.lista-registro li {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--painel-claro);
}

.registro-detalhes {
  color: var(--suave);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.lista-registro time {
  color: var(--suave);
  font-size: 12px;
}

.editor-de-cargo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-de-cargo fieldset {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.editor-de-cargo legend {
  padding: 0 4px;
  color: var(--suave);
  font-size: 12px;
  font-weight: 600;
}

.amostras-de-cor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.amostra {
  width: 26px;
  height: 26px;
  border: 2px solid var(--borda);
  border-radius: 50%;
}

.amostra.escolhida {
  outline: 2px solid var(--texto);
  outline-offset: 1px;
}

/* Diálogos */

dialog {
  width: min(calc(100vw - 32px), 400px);
  max-height: calc(100dvh - 32px);
  padding: 28px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--painel);
  color: var(--texto);
  box-shadow: 0 24px 80px rgb(0 0 0 / 40%);
}

dialog::backdrop {
  background: rgb(8 10 15 / 75%);
  backdrop-filter: blur(5px);
}

.dialogo-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dialogo-form h2 {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 700;
}

.dialogo-form > p {
  color: var(--suave);
}

.dialogo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.botao-secundario {
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--suave);
}

.botao-secundario:hover {
  background: var(--painel-destaque);
  color: var(--texto);
}

.codigo-convite {
  padding: 10px 12px;
  border: 1px dashed var(--ocre);
  border-radius: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 18px;
  text-align: center;
  user-select: all;
}

@media (max-width: 1000px) {
  .mesa {
    grid-template-columns: 72px 232px minmax(0, 1fr);
  }

  .coluna-membros {
    display: none;
  }
}

@media (max-width: 720px) {
  .entrada-tela {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .entrada-marca {
    gap: 20px;
    padding: 24px;
  }

  .entrada-marca h1 {
    width: 180px;
  }

  .entrada-apresentacao {
    padding: 8px 0 16px;
  }

  .entrada-apresentacao .sobretitulo {
    display: none;
  }

  .entrada-apresentacao h2 {
    max-width: 13ch;
    font-size: clamp(36px, 9vw, 50px);
  }

  .entrada-apresentacao p {
    max-width: 34ch;
    margin-top: 16px;
    font-size: 14px;
  }

  .entrada-recursos {
    display: none;
  }

  .entrada-painel {
    padding: 40px 24px;
  }

  .entrada-cabecalho .sobretitulo {
    margin-bottom: 10px;
  }

  .entrada-form {
    gap: 20px;
  }

  .mesa {
    grid-template-columns: minmax(0, 1fr);
  }

  .botao-menu {
    display: block;
  }

  .cabecalho-conversa {
    min-height: 64px;
    gap: 8px;
    padding: 0 12px;
  }

  .inicio-canal {
    padding: 24px 20px;
  }

  .mensagem {
    padding-right: 16px;
    padding-left: 16px;
  }

  .compositor {
    padding: 0 12px max(12px, env(safe-area-inset-bottom));
  }

  .dica-compositor {
    display: none;
  }

  .trilho,
  .coluna-canais {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: none;
  }

  .trilho {
    left: 0;
    width: 72px;
  }

  .coluna-canais {
    left: 72px;
    width: min(calc(100vw - 72px), 280px);
    box-shadow: 8px 0 24px rgb(0 0 0 / 45%);
  }

  .mesa.menu-aberto .trilho {
    display: flex;
  }

  .mesa.menu-aberto .coluna-canais {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}