/* Canal IRIS com o visual escolhido: o console da voz é a única peça
 * escura nos dois modos (como um rádio sobre a mesa); quem fala ganha
 * anel verde no rosto; a entrada traz a onda de som. O resto fica quieto.
 * Claro e escuro pelo aparelho. Nada vem de fora da página. */

/* Escuro é o escolhido (14/10). O claro é um tema inteiro, não o escuro
   invertido: o console da voz continua escuro nos dois, como um rádio. */
:root,
html[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0f1317;
  --coluna: #171c21;
  --conversa: #1e242a;
  --papel: #1e242a;
  --papel-2: #262d34;
  --realce: #2f373f;
  --tinta: #e8edf1;
  --tinta-fraca: #98a6b3;
  --linha: #2c343c;
  --marca: #3fc0c9;
  --marca-tinta: #06282b;
  --marca-suave: #143a3f;
  --vivo: #4ade80;
  --vivo-fundo: #143524;
  --vivo-tinta: #bbf7d0;
  --perigo: #ff8a80;
  --perigo-fundo: #3b1f1d;
  --ok: #4ade80;
  --ok-fundo: #143524;
  --aviso-fundo: #3a3110;
  --aviso-tinta: #ffe9a3;
  --console: #0b232a;
  --console-tinta: #e9f4f5;
  --console-fraca: #8fb6bb;
  --console-linha: rgb(255 255 255 / 0.16);
  --console-botao: rgb(255 255 255 / 0.08);
  --sombra: 0 12px 32px rgb(0 0 0 / 0.45);
  --faixa-fundo: rgba(2, 6, 23, 0.88);
  --faixa-linha: rgba(148, 163, 184, 0.18);
  --faixa-titulo: #f8fafc;
  --faixa-sub: #94a3b8;
  --faixa-botao: #67e8f9;
  --faixa-botao-fundo: rgba(8, 47, 73, 0.32);
  --faixa-botao-borda: rgba(6, 182, 212, 0.32);
  --faixa-botao-ativo-fundo: rgba(8, 47, 73, 0.86);
  --faixa-botao-ativo-borda: rgba(34, 211, 238, 0.9);
  --faixa-acronimo: #7c8ba1;
  --faixa-submarca: #fde68a;
  --raio-botao: 10px;
  --raio-painel: 10px;
  --altura-barra: 0px;
  --teclado: 0px;
}

html[data-tema="claro"] {
  color-scheme: light;
  --fundo: #dfe5ea;
  --coluna: #eef1f4;
  --conversa: #ffffff;
  --papel: #ffffff;
  --papel-2: #eef1f4;
  --realce: #dde3e9;
  --tinta: #14202a;
  --tinta-fraca: #4a5c69;
  --linha: #d3dae1;
  --marca: #0f5c63;
  --marca-tinta: #ffffff;
  --marca-suave: #d8ecee;
  --vivo: #0e6434;
  --vivo-fundo: #e3f5ea;
  --vivo-tinta: #0b5a30;
  --perigo: #b42318;
  --perigo-fundo: #fdecea;
  --ok: #0e6434;
  --ok-fundo: #e3f5ea;
  --aviso-fundo: #fff4d6;
  --aviso-tinta: #5c4200;
  --console: #10303a;
  --console-tinta: #e9f4f5;
  --console-fraca: #9cc2c7;
  --console-linha: rgb(255 255 255 / 0.16);
  --console-botao: rgb(255 255 255 / 0.08);
  --sombra: 0 12px 32px rgb(20 32 42 / 0.14);
  --faixa-fundo: #f4f7f8;
  --faixa-linha: #d3dae1;
  --faixa-titulo: #14202a;
  --faixa-sub: #3e5160;
  --faixa-botao: #0e4f5c;
  --faixa-botao-fundo: #ffffff;
  --faixa-botao-borda: rgba(15, 92, 99, 0.45);
  --faixa-botao-ativo-fundo: #d8ecee;
  --faixa-botao-ativo-borda: #0f5c63;
  --faixa-acronimo: #3d4f5f;
  --faixa-submarca: #8a5a00;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--fundo);
  color: var(--tinta);
}

body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.marca-bloco {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.entrada-marca {
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.2rem;
}

.logo-iris {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.marca-nome {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.servidor-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem 0.85rem;
  margin: 0 0 0.2rem;
}

.servidor-marca .logo-iris { width: 56px; height: 56px; }
.servidor-marca .marca-nome { font-size: 0.95rem; text-align: center; }

h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h2 { margin: 0; font-size: 1.02rem; font-weight: 650; }
h3 { margin: 0; }

.grupo-titulo {
  margin: 0.7rem 0.95rem 0.25rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--tinta-fraca);
}

/* ----- entrada ----- */

.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.cartao {
  width: 100%;
  max-width: 440px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 20px;
  padding: 32px 28px 28px;
  box-shadow: var(--sombra);
}

.onda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  margin: 0 0 14px;
}

.onda span {
  width: 6px;
  height: var(--altura, 40%);
  border-radius: 3px;
  background: var(--marca);
  transform-origin: center;
}

.onda span:nth-child(1) { --altura: 35%; }
.onda span:nth-child(2) { --altura: 70%; }
.onda span:nth-child(3) { --altura: 100%; }
.onda span:nth-child(4) { --altura: 55%; }
.onda span:nth-child(5) { --altura: 85%; }
.onda span:nth-child(6) { --altura: 45%; }
.onda span:nth-child(7) { --altura: 25%; }

@media (prefers-reduced-motion: no-preference) {
  .onda span { animation: onda 1.6s ease-in-out infinite alternate; }
  .onda span:nth-child(2) { animation-delay: -0.2s; }
  .onda span:nth-child(3) { animation-delay: -0.5s; }
  .onda span:nth-child(4) { animation-delay: -0.9s; }
  .onda span:nth-child(5) { animation-delay: -0.3s; }
  .onda span:nth-child(6) { animation-delay: -1.1s; }
  .onda span:nth-child(7) { animation-delay: -0.7s; }
  @keyframes onda { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
}

.entrada-sub {
  margin: 0.5rem 0 1.2rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.entrada .cartao h1 { text-align: center; }

label { display: block; margin: 0.95rem 0 0.35rem; font-weight: 600; font-size: 0.95rem; }

input, textarea {
  width: 100%;
  padding: 0.78rem 0.9rem;
  font: inherit;
  color: inherit;
  background: var(--coluna);
  border: 1px solid var(--linha);
  border-radius: var(--raio-botao);
}

textarea { resize: none; min-height: 48px; }

input::placeholder, textarea::placeholder { color: var(--tinta-fraca); opacity: 0.8; }

input:focus-visible, textarea:focus-visible, .botao:focus-visible, .sala-cabeca:focus-visible, .canal-texto:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

/* ----- botoes: palavra sempre; toque >= 44px ----- */

.botao {
  font: inherit;
  font-weight: 600;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-botao);
  padding: 0.7rem 1rem;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

.botao:hover { background: var(--realce); }
.botao:disabled { opacity: 0.55; cursor: default; }

.botao.principal {
  color: var(--marca-tinta);
  background: var(--marca);
  border-color: var(--marca);
  border-radius: 999px;
}

.botao.principal.curto { width: auto; margin: 0; }
.cartao .botao.principal { width: 100%; margin-top: 1.5rem; min-height: 50px; font-size: 1.0625rem; }
.botao.largo { margin: 0 0 12px; width: 100%; }

.botao.discreto {
  flex: none;
  font-weight: 550;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  white-space: nowrap;
  background: transparent;
  border-radius: 999px;
}

.botao.perigo { color: var(--perigo); }
.botao.perigo:hover { background: var(--perigo-fundo); border-color: var(--perigo); }

.aviso {
  margin: 0 0 12px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--raio-botao);
  background: var(--aviso-fundo);
  color: var(--aviso-tinta);
  font-size: 0.95rem;
}

.aviso.erro { margin-top: 1rem; background: var(--perigo-fundo); color: var(--perigo); }
.aviso.disco { margin: 0 12px 8px; }
.aviso.ok { background: var(--ok-fundo); color: var(--vivo-tinta); }

/* ----- salas / mesa ----- */

.salas {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 0 calc(var(--altura-barra, 0px) + var(--teclado, 0px));
  max-width: 100%;
  overflow: hidden;
  background: var(--fundo);
}

/* Faixa de 68 px, a mesma altura do cabeçalho dos módulos da IRIS.
   O chat começa logo abaixo: a marca grande saiu da coluna. */
.topo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  margin: 0;
  padding: 0 18px;
  flex: none;
  min-width: 0;
  border-bottom: 1px solid var(--faixa-linha);
  background: var(--faixa-fundo);
  color: var(--faixa-titulo);
}

.faixa-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid var(--faixa-linha);
}

.faixa-marca .irisWelcomeLogoMark {
  width: 25px;
  height: 25px;
  opacity: 1;
  flex: none;
  animation: wLogoSpin 12s linear infinite;
}

.faixa-marca .irisBrandText {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 0;
}

.faixa-marca .irisWelcomeLogo { gap: 1px; }

.faixa-marca .irisWelcomeLogo span {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
  opacity: 1;
  animation: none;
  filter: none;
}

html[data-tema="claro"] .marca-iris .irisWelcomeFullName {
  color: #3d4f5f;
}

html[data-tema="claro"] .marca-iris .irisTopSub,
html[data-tema="claro"] .faixa-gaveta .irisTopSub {
  color: #8a5a00;
  text-shadow: none;
}

html[data-tema="claro"] .irisAcronimo b:nth-child(1) { color: #92600a; }
html[data-tema="claro"] .irisAcronimo b:nth-child(2) { color: #157a32; }
html[data-tema="claro"] .irisAcronimo b:nth-child(3) { color: #0e7490; }
html[data-tema="claro"] .irisAcronimo b:nth-child(4) { color: #6d28d9; }

.faixa-marca .irisAcronimo,
.faixa-gaveta .irisAcronimo {
  margin: 2px 0 0;
  font-size: 7.5px;
  color: var(--faixa-acronimo);
  letter-spacing: 0.25px;
  white-space: nowrap;
}

.irisAcronimo b { font-weight: 900; }
.irisAcronimo b:nth-child(1) { color: #fbbf24; }
.irisAcronimo b:nth-child(2) { color: #4ade80; }
.irisAcronimo b:nth-child(3) { color: #22d3ee; }
.irisAcronimo b:nth-child(4) { color: #a78bfa; }

.faixa-marca .irisTopSub {
  margin-top: 1px;
  font-size: 6.5px;
  letter-spacing: 0.8px;
  color: var(--faixa-submarca);
  text-shadow: none;
  white-space: nowrap;
}

.faixa-contexto {
  min-width: 0;
  flex: 0 1 auto;
  max-width: 46%;
}

.faixa-contexto strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--faixa-titulo);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#faixa-sub {
  display: block;
  margin-top: 2px;
  color: var(--faixa-sub);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faixa-espaco { flex: 1 1 auto; min-width: 8px; }

.topo-acoes {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  flex: none;
}

.topo .botao {
  min-height: 32px;
  min-width: 0;
  padding: 2px 10px;
  border: 1px solid var(--faixa-botao-borda);
  border-radius: 8px;
  background: var(--faixa-botao-fundo);
  color: var(--faixa-botao);
  font-size: 12px;
  font-weight: 800;
}

.topo .botao.tema {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 44px;
  padding: 3px 8px;
  line-height: 1;
}

.topo .botao.tema[aria-pressed="true"] {
  border-color: var(--faixa-botao-ativo-borda);
  background: var(--faixa-botao-ativo-fundo);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18);
}

.tema-icone { display: flex; }
.tema-icone svg { width: 14px; height: 14px; display: block; }
.tema-palavra { font-size: 9px; font-weight: 800; }

.faixa-gaveta { display: none; }

.faixa-gaveta .irisTopSub {
  color: var(--faixa-submarca);
  text-shadow: none;
}

.resumo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0.1rem 0 0;
  color: var(--tinta-fraca);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resumo::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vivo);
  box-shadow: 0 0 0 3px var(--vivo-fundo);
}

.resumo.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.resumo.sr-only::before { content: none; }

.mesa {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 220px);
  gap: 8px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.painel, .conversa {
  background: var(--papel);
  min-width: 0;
  overflow: hidden;
}

.canais {
  border-radius: var(--raio-painel);
  border-right: 1px solid var(--linha);
  background: var(--coluna);
}

.pessoas-lado {
  border-radius: var(--raio-painel);
  border-left: 1px solid var(--linha);
  background: var(--coluna);
}

.conversa { background: var(--conversa); }

.canais, .pessoas-lado {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.canais .lista-salas, .canais .lista-texto {
  flex: 0 1 auto;
}

.painel-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 4px;
}

.lista-salas, .lista-texto, .lista-conectados, .pessoas {
  list-style: none;
  margin: 0;
  padding: 0 8px 12px;
  display: grid;
  gap: 2px;
}

.sala {
  background: transparent;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}

.sala.atual > .sala-cabeca { box-shadow: inset 3px 0 0 var(--vivo); background: var(--realce); }

.sala-cabeca, .canal-texto {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.65rem 0.8rem;
  min-height: 44px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
}

.sala-cabeca:hover, .canal-texto:hover { background: var(--realce); }

.sala-nome, .canal-nome {
  font-weight: 700;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sala-acao { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--marca); }
.sala.atual .sala-acao { color: var(--vivo-tinta); background: var(--vivo-fundo); padding: 2px 8px; border-radius: 999px; }

.canal-texto.atual {
  background: var(--realce);
  box-shadow: inset 3px 0 0 var(--vivo);
}

.pessoas { padding: 0 0.45rem 0.5rem 0.7rem; gap: 1px; }

.pessoa, .conectado {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  min-height: 44px;
  border-radius: 6px;
  font-size: 0.95rem;
  min-width: 0;
  color: var(--tinta);
}

.pessoa-nome, .conectado > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pessoa .avatar, .conectado .avatar {
  order: -1;
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

.pessoa.falando, .conectado.falando { font-weight: 600; }

.pessoa.falando .avatar, .conectado.falando .avatar {
  box-shadow: 0 0 0 2px var(--coluna), 0 0 0 4px var(--vivo);
}

.pessoa-nota, .conectado-nota {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46%;
}

.pessoa.falando .pessoa-nota, .conectado.falando .conectado-nota {
  color: var(--vivo-tinta);
  font-weight: 600;
}

.vazia { margin: 0; padding: 0.35rem 1rem 0.75rem; color: var(--tinta-fraca); font-size: 0.9rem; }

/* ----- avatar ----- */

.avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca);
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
  user-select: none;
}

/* ----- conversa ----- */

.conversa {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.conversa-topo {
  padding: 12px 16px;
  border-bottom: 1px solid var(--linha);
  flex: none;
}

.mais-antigas { margin: 8px auto; }

.mensagens {
  list-style: none;
  margin: 0;
  padding: 12px 16px 8px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  min-width: 0;
}

.mensagem {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 10px;
  min-width: 0;
}

.mensagem.continua { gap: 0 10px; margin-top: -8px; }
.mensagem.continua .avatar { visibility: hidden; height: 0; }
.mensagem.continua .mensagem-meta { display: none; }

.mensagem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.mensagem-autor { font-weight: 700; }
.mensagem-hora { color: var(--tinta-fraca); font-size: 0.82rem; }

.mensagem-corpo {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mensagem-corpo a { color: var(--marca); overflow-wrap: anywhere; word-break: break-word; }
.mensagem.apagada .mensagem-corpo { color: var(--tinta-fraca); font-style: italic; }

.anexos { margin: 8px 0 0; display: grid; gap: 8px; min-width: 0; }

.anexos img, .anexos video {
  display: block;
  max-width: min(100%, 420px);
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: var(--coluna);
}

.anexos video { min-height: 140px; width: 100%; }

.anexos button.foto-abre {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  min-height: 44px;
  color: var(--marca);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 6px;
}

.botao-apagar { margin-top: 6px; }

.conversa-vazia {
  margin: auto 16px;
  padding: 18px 12px 24px;
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 1rem;
}

.estado-envio {
  margin: 0;
  padding: 8px 16px;
  color: var(--aviso-tinta);
  background: var(--aviso-fundo);
  font-size: 0.95rem;
}

.estado-envio.erro { color: var(--perigo); background: var(--perigo-fundo); }
.estado-envio.ok { color: var(--vivo-tinta); background: var(--ok-fundo); }

.escrever {
  flex: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha);
  background: var(--papel);
}

.escrever-acoes { display: flex; gap: 8px; margin-top: 8px; }
.escrever-acoes .botao { flex: 1; }
.escrever-acoes .botao.principal { flex: 0 0 auto; }

/* ----- o console da voz: barra Discord no rodapé da lista de canais ----- */

.aviso-mudo {
  margin: 0 12px 8px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--console);
  color: #e9f4f5;
  font-size: 0.9rem;
  font-weight: 650;
  text-align: center;
  z-index: 16;
}

.barra {
  position: sticky;
  bottom: 0;
  flex: none;
  margin-top: auto;
  padding: 0;
  background: transparent;
  z-index: 15;
  max-width: 100%;
  overflow: hidden;
}

.barra-icones { min-width: 0; }
.botao.icone-voz { overflow: hidden; }

.barra-dentro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  color: var(--console-tinta);
  background: var(--console);
  border-top: 1px solid var(--console-linha);
}

.barra-eu {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.barra-eu .avatar {
  width: 36px;
  height: 36px;
  background: #1a4a52;
  color: #e9f4f5;
}

.barra-eu-texto { min-width: 0; flex: 1; }

.barra-nome {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--console-tinta);
}

.onde-estou {
  display: block;
  min-width: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b6d6da;
}

.barra-icones {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
}

.botao.icone-voz {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 2px;
  color: var(--console-tinta);
  background: var(--console-botao);
  border-color: var(--console-linha);
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.botao.icone-voz:hover { background: rgb(255 255 255 / 0.14); }
.botao.icone-voz:focus-visible { outline-color: #fff; }
.botao.icone-voz.perigo { color: #ffb4ad; }
.botao.icone-voz.perigo:hover { background: rgb(255 120 110 / 0.18); border-color: #ffb4ad; }
.botao.icone-voz.aberto { color: #04210f; background: var(--vivo); border-color: var(--vivo); }
.botao.icone-voz[aria-pressed="true"]:not(.riscado) {
  color: #04210f;
  background: var(--vivo);
  border-color: var(--vivo);
}

.icone-figura {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
}

.icone-figura svg {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
}

.icone-figura .risco { display: none; }
.botao.icone-voz.riscado .risco { display: block; }
.botao.icone-voz.riscado { color: #ffb4ad; }

.icone-palavra {
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: 0;
  color: inherit;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.botao.modo {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  border-radius: 8px;
  width: 100%;
  margin: 0 0 6px;
}

.botao.modo[aria-pressed="true"] {
  color: var(--marca-tinta);
  background: var(--marca);
  border-color: var(--marca);
}

/* ----- tela de ajustes de voz ----- */

.ajustes-voz {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgb(7 16 22 / 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}

.ajustes-caixa {
  width: min(520px, 100%);
  max-height: min(92dvh, 720px);
  overflow: auto;
  background: var(--console);
  color: var(--console-tinta);
  border-radius: 16px 16px 10px 10px;
  padding: 14px 16px 20px;
}

.ajustes-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ajustes-caixa h2 { color: var(--console-tinta); }
.ajustes-caixa h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #d5eef0;
}

.ajustes-bloco {
  padding: 12px 0;
  border-top: 1px solid var(--console-linha);
}

.ajustes-caixa label { color: #d5eef0; }
.ajustes-caixa select, .ajustes-caixa input[type="range"] {
  background: #12343c;
  color: var(--console-tinta);
  border-color: var(--console-linha);
  min-height: 44px;
  height: 44px;
}
.ajustes-caixa select { padding: 0 10px; font-size: 1rem; }
.ajustes-caixa input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
}
.ajustes-caixa input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #12343c;
  border-radius: 999px;
}
.ajustes-caixa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--vivo);
}

.ajustes-caixa .botao {
  color: var(--console-tinta);
  background: var(--console-botao);
  border-color: var(--console-linha);
}

.ajustes-caixa .botao.discreto { background: transparent; }
.ajustes-nota { margin: 6px 0; font-size: 0.88rem; color: #b6d6da; }

.checa {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 550;
}

.checa input { width: auto; accent-color: var(--vivo); }

.nivel {
  height: 10px;
  border-radius: 999px;
  background: #12343c;
  overflow: hidden;
  margin: 6px 0 10px;
}

.nivel span {
  display: block;
  height: 100%;
  width: calc(var(--nivel, 0) * 100%);
  background: var(--vivo);
}

.ajuste-pessoa {
  position: fixed;
  z-index: 23;
  width: min(280px, calc(100vw - 24px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 12px;
  background: var(--console);
  color: var(--console-tinta);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.ajuste-pessoa-nome { margin: 0 0 8px; font-weight: 700; }
.ajuste-pessoa input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  height: 48px;
  margin: 8px 0;
  background: transparent;
  border: 0;
}
.ajuste-pessoa input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #12343c;
  border-radius: 999px;
}
.ajuste-pessoa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--vivo);
}
.ajuste-pessoa .botao { width: 100%; margin-top: 8px; min-height: 48px; color: var(--console-tinta); background: var(--console-botao); border-color: var(--console-linha); }

/* ----- foto ampliada ----- */

.ampliada {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(10 20 28 / 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}

.ampliada img {
  max-width: 100%;
  max-height: calc(100dvh - 120px);
  object-fit: contain;
}

/* ----- celular: gavetas ----- */

@media (max-width: 719px) {
  /* Uma linha só: logo, IRIS, nome da sala com reticências e sol ou lua.
     O resto (sigla, Central, Trocar de nome, Sair) fica na gaveta. */
  .topo {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    padding: 0 8px;
    overflow: hidden;
  }
  .faixa-marca {
    padding-right: 0;
    border-right: 0;
    gap: 4px;
  }
  .faixa-marca .irisAcronimo,
  .faixa-marca .irisTopSub,
  #faixa-sub,
  .faixa-extra,
  .faixa-espaco { display: none !important; }
  .faixa-marca .irisWelcomeLogoMark { width: 22px; height: 22px; }
  .faixa-marca .irisWelcomeLogo span { font-size: 16px; }
  .faixa-contexto { flex: 1 1 auto; max-width: none; min-width: 0; }
  .topo-acoes {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    flex: none;
  }
  .topo-acoes .botao {
    width: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 2px 6px;
    font-size: 11px;
  }
  html[data-tema="escuro"] #botao-tema-escuro,
  html[data-tema="claro"] #botao-tema-claro { display: none !important; }
  .faixa-gaveta.so-celular {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 4px;
  }
  .faixa-gaveta .irisAcronimo,
  .faixa-gaveta .irisTopSub { white-space: normal; }
  .faixa-gaveta .botao { width: 100%; min-height: 44px; }

  .mesa {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
  }
  .conversa { flex: 1; min-height: 0; border-radius: 0; }

  .so-celular { display: inline-flex; }

  .canais, .pessoas-lado {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-width: 100%;
    z-index: 12;
    border-radius: 0;
    padding-bottom: calc(var(--altura-barra, 0px) + 12px);
    border: 0;
  }

  .barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--teclado, 0px);
    width: 100%;
    z-index: 16;
  }

  /* Sem transform: ele prende a barra do microfone e ela some junto com a
     gaveta. O deslize é pelo left/right, e a barra fica no pé da tela. */
  .canais { left: -110%; right: auto; transform: none; }
  .pessoas-lado { right: -110%; left: auto; transform: none; }
  .canais.aberta { left: 0; }
  .pessoas-lado.aberta { right: 0; }

  .salas.gaveta-aberta::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(10 20 28 / 0.55);
    z-index: 11;
  }

  .escrever {
    position: sticky;
    bottom: calc(var(--altura-barra, 0px) + var(--teclado, 0px));
    z-index: 4;
  }
}

@media (min-width: 720px) {
  .so-celular { display: none !important; }
  /* .marca-iris vem depois e põe display:flex; sem !important o cabeçalho
     repetia a marca ao lado da coluna no computador. */
  .marca-topo { display: none !important; }
  .resumo { margin: 0; }
}

@media (min-width: 900px), (min-width: 620px) and (max-height: 520px) {
  .salas { padding: 0; }
  .mesa { padding: 0; }
}

@media (min-width: 720px) {
  .ajustes-voz { align-items: center; }
  .ajustes-caixa { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .canais, .pessoas-lado, .pessoa, .conectado, .onda span,
  .irisWelcomeLogoMark, .irisWelcomeFullName, .irisWelcomeLogo span {
    transition: none;
    animation: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pessoa, .conectado, .botao { transition: background-color 120ms ease, box-shadow 120ms ease; }
  .canais, .pessoas-lado { transition: left 180ms ease, right 180ms ease; }
}

/* ----- marca da IRIS (copiada do projeto; letra, fonte e cor iguais) ----- */

.irisWelcomeLogo {
  display: flex;
  gap: 6px;
  line-height: 1;
}

.irisWelcomeLogo span {
  font-size: clamp(64px, 12vw, 110px);
  font-weight: 900;
  font-family: 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.12em;
  display: inline-block;
  opacity: 0;
  animation: wLetterIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.wLogoI {
  background: linear-gradient(160deg, #fef3c7 8%, #fbbf24 28%, #b45309 52%, #f59e0b 72%, #fde68a 92%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(251,191,36,0.6)) drop-shadow(0 0 50px rgba(251,191,36,0.2));
  animation-delay: 0.5s !important;
}
.wLogoR {
  background: linear-gradient(160deg, #dcfce7 8%, #4ade80 28%, #15803d 52%, #22c55e 72%, #bbf7d0 92%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(34,197,94,0.6)) drop-shadow(0 0 50px rgba(34,197,94,0.2));
  animation-delay: 0.7s !important;
}
.wLogoI2 {
  background: linear-gradient(160deg, #cffafe 8%, #22d3ee 28%, #0e7490 52%, #06b6d4 72%, #a5f3fc 92%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(6,182,212,0.6)) drop-shadow(0 0 50px rgba(6,182,212,0.2));
  animation-delay: 0.9s !important;
}
.wLogoS {
  background: linear-gradient(160deg, #ede9fe 8%, #a78bfa 28%, #6d28d9 52%, #8b5cf6 72%, #c4b5fd 92%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(139,92,246,0.6)) drop-shadow(0 0 50px rgba(139,92,246,0.2));
  animation-delay: 1.1s !important;
}

@keyframes wLetterIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.irisWelcomeFullName {
  font-size: clamp(13px, 2vw, 17px);
  color: #94a3b8;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  animation: wFadeUp 0.6s ease 1.5s forwards;
}

.irisWelcomeLogoMark {
  width: 72px;
  height: 72px;
  opacity: 0;
  animation: wFadeUp 0.6s ease 0.3s forwards, wLogoSpin 12s linear infinite;
  filter: drop-shadow(0 0 12px rgba(34,197,94,0.4)) drop-shadow(0 0 24px rgba(6,182,212,0.2));
}

@keyframes wLogoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.irisTopSub {
  margin: 1px 0 0;
  font-size: 8.5px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(253, 230, 138, 0.7), 0 0 16px rgba(253, 230, 138, 0.3);
}

.irisTopIdentity .irisWelcomeLogo,
.fieldIrisIdentity .irisWelcomeLogo {
  gap: 1px;
}

.irisTopIdentity .irisWelcomeLogo span,
.fieldIrisIdentity .irisWelcomeLogo span {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
  opacity: 1;
  animation: none;
}

.marca-iris {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.marca-iris .irisWelcomeFullName {
  opacity: 1;
  animation: none;
  margin: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.marca-iris .irisWelcomeLogoMark {
  opacity: 1;
  flex: none;
}

.marca-iris .irisTopSub {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.marca-topo.marca-iris {
  align-items: flex-start;
  text-align: left;
}

/* Cadastro cabe também no celular; a senha da equipe não muda aqui. */
dialog#janela-conta { width: min(92vw, 460px); max-height: 90vh; overflow: auto; border-radius: 16px; padding: 24px; background: var(--papel); color: var(--tinta); border:1px solid var(--linha); }
#form-conta { display: grid; gap: 12px; } #form-conta [hidden] { display:none; }
#form-conta input, #modo-entrada { padding:12px; font:inherit; border-radius:8px; max-width:100%; }
dialog::backdrop { background: #000a; }