/* SEELE — a sessão do celular: um painel por vez, a faixa de voz e as abas (F8).
 *
 * Spec: `docs/superpowers/specs/2026-10-09-0.16-celular-design.md`, §2.2 e §9.
 *
 * Os painéis são os do desktop, desenhados pelo `tela-sessao.js` de sempre: esta
 * folha só os reorganiza. A faixa de voz e as abas são montadas pelo
 * `celular-voz.js`, e a faixa aciona os controles do desktop que continuam no
 * DOM, escondidos. Toda regra começa pela marca (G1, em `tests/celular.rs`). */

/* ------------------------------------------------- a moldura do desktop sai
 *
 * A barra da janela (o sistema desenha a dele), a trilha das redes (volta na
 * aba SERVIDOR), o operador (os controles dele vão para a faixa de voz), o
 * rodapé da telemetria (vai para a CHAMADA e para AJUSTES › CONEXÃO) e as portas
 * das gavetas, que no celular são as abas. */

:root[data-casca="celular"] #barra-janela,
:root[data-casca="celular"] #tela-sessao .paineis > .trilha,
:root[data-casca="celular"] #tela-sessao .operador,
:root[data-casca="celular"] #tela-sessao > footer.telemetria,
:root[data-casca="celular"] #tela-sessao .linha-canais,
:root[data-casca="celular"] #tela-sessao .linha-pessoas {
  display: none;
}

/* ------------------------------------------------------------------ a sessão
 *
 * Uma coluna, de cima para baixo: o painel da aba, os avisos da sessão, a faixa
 * de voz (só dentro de uma sala) e as abas. A ordem é a do `order`, e não a do
 * DOM: os avisos vêm antes de `<main>` no desktop, e no celular moram logo
 * acima da faixa, perto do polegar e da voz que eles explicam. O tema do
 * servidor continua escrito neste contêiner, como no desktop. */

:root[data-casca="celular"] #tela-sessao {
  /* `relative` porque as folhas se prendem ao pé dela. */
  position: relative;
  /* As áreas seguras laterais **dentro da sessão**: o quanto delas a sessão
     ainda cobre. Na tela toda, são as do aparelho; com a coluna de uma tela
     grande (abaixo), a margem da coluna já as afasta, e sobra só o que passar
     dela. É o que as superfícies de MOD usam (`celular-folhas.css`), para não
     dependerem do teto da coluna nem perderem largura onde ele já basta. */
  --cel-lado-esq: var(--cel-seguro-esq);
  --cel-lado-dir: var(--cel-seguro-dir);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

:root[data-casca="celular"] #tela-sessao > main.paineis {
  order: 0;
  flex: 1 1 auto;
  min-height: 0;
  /* Um painel por vez, na largura toda: a grade de colunas do desktop não
     cabe, e as gavetas de 900 px também não. */
  display: block;
  position: relative;
  overflow: hidden;
}

:root[data-casca="celular"] #tela-sessao .paineis > .painel {
  display: none;
}

/* A especificidade passa a das gavetas do desktop
   (`#tela-sessao[data-canais="abertos"] .painel-canais`), que posicionariam o
   painel por cima da conversa. */
:root[data-casca="celular"] #tela-sessao[data-aba="servidor"] .paineis > .painel-canais,
:root[data-casca="celular"] #tela-sessao[data-aba="conversa"] .paineis > .painel-linha,
:root[data-casca="celular"] #tela-sessao[data-aba="pessoas"] .paineis > .painel-pessoas {
  display: flex;
  position: static;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
}

:root[data-casca="celular"] #tela-sessao > .cel-topo {
  order: -1;
}

/* Só o painel do meio cede altura. O resto tem a altura do que diz: com a
   CHAMADA cheia, a coluna encolhia também a telemetria, e o MUDO subia. */
:root[data-casca="celular"] #tela-sessao > :is(.cel-topo, #veredito, #aviso-fone, #aviso-audio, #cel-aviso-persistencia, .voz-celular, .cel-abas, .cel-telemetria) {
  flex-shrink: 0;
}

:root[data-casca="celular"] #tela-sessao > :is(#veredito, #aviso-fone, #aviso-audio, #cel-aviso-persistencia) {
  order: 1;
  flex-wrap: wrap;
}

/* O texto de um aviso divide a fileira com o botão enquanto cabe; com o texto do
   sistema grande, o botão desce para debaixo dele, e não encolhe por cima das
   letras (medido no Safari do Simulador: «dispensar» cortado no maior tamanho). */
:root[data-casca="celular"] #tela-sessao > :is(#veredito, #aviso-fone, #aviso-audio, #cel-aviso-persistencia) > .veredito-texto {
  flex: 1 1 12em;
  min-width: 0;
}

:root[data-casca="celular"] #tela-sessao > :is(#veredito, #aviso-fone, #aviso-audio, #cel-aviso-persistencia) > button {
  flex-shrink: 0;
  margin-left: auto;
}

:root[data-casca="celular"] #tela-sessao > .voz-celular {
  order: 2;
}

/* O aviso da resposta do `persist()` (o `celular-entrada.js`) é uma região
   `role="status"` que existe sempre, para o leitor de tela anunciar o que entra
   nela: vazia, não tem altura, e o pé não muda. */
:root[data-casca="celular"] #tela-sessao > #cel-aviso-persistencia:empty {
  padding: 0;
  border: 0;
}

:root[data-casca="celular"] #tela-sessao > .cel-abas {
  order: 3;
}

/* ------------------------------------------------------------------ as abas */

:root[data-casca="celular"] .cel-abas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* A altura é escrita, e não a que o conteúdo der: a fileira da telemetria
     da CHAMADA entra neste lugar com a mesma, e o MUDO não se mexe. */
  box-sizing: border-box;
  height: calc(var(--cel-abas) + 1px + var(--cel-seguro-pe));
  padding: 0 var(--cel-seguro-dir) var(--cel-seguro-pe) var(--cel-seguro-esq);
  border-top: 1px solid var(--seele-linha);
  background: var(--seele-negro-painel);
}

:root[data-casca="celular"] .cel-aba {
  position: relative;
  min-height: var(--cel-abas);
  display: grid;
  place-items: end center;
  padding: 0 2px 14px;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  color: var(--seele-rotulo-painel);
  font: inherit;
  /* **Com teto**, como a barra de abas do iOS: quatro palavras de oito letras
     numa largura de 390 não crescem com o texto do sistema sem uma cobrir a
     outra (medido a 150 %: 106 px de texto em 98 de aba). O nome inteiro da aba
     continua no leitor de tela, e o conteúdo de cada aba cresce sem teto. */
  font-size: min(calc(var(--seele-t-rotulo) * var(--cel-escala)), 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

:root[data-casca="celular"] .cel-aba[aria-current="page"] {
  color: var(--seele-osso);
  border-top-color: var(--seele-laranja-nerv);
  background: var(--seele-negro-absoluto);
}

/* A aba AJUSTES é a saída do tema: o caminho para «o SEELE desenha» e para
   desligar o MOD que pintou a sessão. Ela lê o núcleo, como o MUDO, e um tema
   ilegível não fecha a porta de sair dele (spec, §6). */
:root[data-casca="celular"] .cel-aba[data-nucleo] {
  font-family: var(--nucleo-pilha);
  color: var(--nucleo-rotulo);
  background: var(--nucleo-painel);
  border-left: 1px solid var(--nucleo-borda);
}

:root[data-casca="celular"] .cel-aba[data-nucleo][aria-current="page"] {
  color: var(--nucleo-texto);
  border-top-color: var(--nucleo-acento);
  background: var(--nucleo-fundo);
}

/* ---------------------------------------------------------- a faixa de voz
 *
 * Do tema na superfície, do núcleo nos três controles. A faixa toma o fundo e a
 * borda do tema como o resto da sessão; MUDO, SURDO e SAIR têm fundo, borda e
 * texto opacos do núcleo, e o contraste deles é medido entre texto e fundo do
 * núcleo, sem depender do que o tema pintou em volta. */

:root[data-casca="celular"] .voz-celular {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: var(--cel-faixa);
  padding: 0 var(--cel-seguro-dir) 0 var(--cel-seguro-esq);
  border-top: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-painel);
}

:root[data-casca="celular"] .voz-sala {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 8px 8px 16px;
  background: none;
  border: 0;
  border-left: 3px solid var(--seele-laranja-nerv);
  color: var(--seele-osso);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

:root[data-casca="celular"] .voz-sala-nome {
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
  letter-spacing: var(--seele-tracking-cartela);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A primeira linha da faixa é uma fileira só, com a altura escrita, nos dois
   estados (a sala, ou o RECOLHER da CHAMADA): a 360 com o texto a 150 %, o
   «PONTE 3/8» quebrava em duas, a faixa crescia, e o MUDO mudava de lugar ao
   abrir a CHAMADA. O nome corta com reticências; a contagem fica inteira. */
:root[data-casca="celular"] .voz-sala-cabeca {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: calc(var(--seele-t-secao) * var(--cel-escala) * 1.25);
  white-space: nowrap;
  overflow: hidden;
}

:root[data-casca="celular"] .voz-sala-cabeca[hidden] {
  display: none;
}

:root[data-casca="celular"] .voz-sala-cabeca > .voz-sala-nome {
  flex: 0 1 auto;
  min-width: 0;
}

:root[data-casca="celular"] .voz-sala-conta {
  flex: 0 0 auto;
  font-family: var(--seele-mono);
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  letter-spacing: 0;
}

:root[data-casca="celular"] .voz-sala-quem {
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  color: var(--seele-rotulo-painel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Com o enlace caído, a frase é a única coisa que importa nesta linha, e ela
   quebra em vez de sair cortada («SEM SOM · RECONEC…», medido a 390). */
:root[data-casca="celular"] .voz-celular[data-caido] .voz-sala-quem {
  white-space: normal;
  overflow: visible;
  line-height: 1.2;
}

/* **A placa do núcleo.** Os três controles moram numa placa opaca do núcleo, e
   não sobre o fundo temado da faixa. É o que torna a borda deles mensurável: a
   WCAG pede 3:1 entre o contorno de um controle e o que está em volta, e
   nenhuma cor de borda alcança 3:1 contra qualquer fundo que um tema escolha
   (medido no protótipo: `linha-forte` sobre o painel dá 1,59:1 já sem tema, e o
   osso sobre um painel claro, 1,01:1). Sobre a placa, a borda é medida contra
   uma cor que o tema não alcança. */
:root[data-casca="celular"] .voz-controles {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  background: var(--nucleo-fundo);
  border-left: 1px solid var(--nucleo-borda);
}

/* Os três controles do núcleo. Nenhuma linha deste bloco lê um `--seele-*` (G6). */
:root[data-casca="celular"] .voz-nucleo {
  display: grid;
  place-items: center;
  gap: 0;
  min-width: 52px;
  min-height: 48px;
  padding: 4px 6px;
  font: inherit;
  font-family: var(--nucleo-pilha);
  /* Cresce com o texto do sistema, com teto: medido no Safari 27 com o tamanho
     de acessibilidade, os rótulos fixos em 10 px deixavam pequenos justamente
     os controles mais importantes da tela. A 1,4× a faixa ainda cabe a 360. */
  font-size: calc(10px * min(var(--cel-escala), 1.4));
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--nucleo-texto);
  background: var(--nucleo-painel);
  border: 2px solid var(--nucleo-rotulo);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

:root[data-casca="celular"] .voz-nucleo .glifo {
  width: calc(18px * min(var(--cel-escala), 1.4));
  height: calc(18px * min(var(--cel-escala), 1.4));
  vertical-align: 0;
}

:root[data-casca="celular"] .voz-nucleo[aria-pressed="true"] {
  color: var(--nucleo-fundo);
  background: var(--nucleo-acento);
  border-color: var(--nucleo-texto);
}

/* SAIR afastado dos outros dois: é o único que desfaz alguma coisa. */
:root[data-casca="celular"] #voz-sair {
  margin-right: 6px;
}

/* O MUDO é o controle mais tocado da tela, e o maior. */
:root[data-casca="celular"] #voz-mudo {
  min-width: 64px;
}

/* SEGURAR PARA FALAR: o mesmo lugar do MUDO, mais largo. O dedo fica parado em
   cima, então nada pode tirá-lo de lá: nem a seleção de texto, nem o menu do
   toque longo do sistema, nem um gesto de rolagem, que cancelaria o toque. */
:root[data-casca="celular"] #voz-mudo[data-modo="segurar"] {
  min-width: 84px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ------------------------------------------------------------------ o topo
 *
 * Em que servidor se está e o estado da conexão, em toda aba: no desktop isso
 * morava na barra da janela. O título é o da aba (o servidor, na SERVIDOR); na
 * CONVERSA e na PESSOAS o cabeçalho ainda é o do desktop, e o título fica vazio. */

:root[data-casca="celular"] .cel-topo {
  padding: calc(var(--cel-seguro-topo) + 8px) calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
  border-bottom: 1px solid var(--seele-linha);
  background: var(--seele-negro-painel);
  color: var(--seele-osso);
}

:root[data-casca="celular"] .cel-topo-sobre {
  margin: 0;
  font-size: calc(var(--seele-t-micro) * var(--cel-escala));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Quebra, e não corta: o estado da conexão mora nesta linha, e com o texto
     do sistema a 150 % as reticências o engoliam (medido no protótipo). */
  overflow-wrap: anywhere;
}

:root[data-casca="celular"] .cel-topo-titulo {
  margin: 4px 0 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: calc(var(--seele-t-titulo) * var(--cel-escala));
  letter-spacing: var(--seele-tracking-cartela);
  text-transform: uppercase;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

:root[data-casca="celular"] .cel-topo-titulo:empty {
  display: none;
}

/* O selo da conexão é do núcleo: um tema não apaga nem falsifica o estado da
   conexão (spec, §6). A cor sai do enum que o desktop põe em `data-padrao`. */
:root[data-casca="celular"] .cel-selo-seguro {
  display: inline-block;
  padding: 0 6px;
  font-family: var(--nucleo-pilha);
  color: var(--nucleo-seguro);
  background: var(--nucleo-fundo);
  border: 1px solid var(--nucleo-borda);
}

:root[data-casca="celular"] .cel-selo-seguro:is([data-padrao="Unverified"], [data-padrao="Offline"]) {
  color: var(--nucleo-alerta);
  border-color: var(--nucleo-alerta);
}

/* ----------------------------------------------------------- a aba SERVIDOR
 *
 * A trilha das redes, deitada no alto, e a coluna de salas e canais do
 * desktop em cartões. */

:root[data-casca="celular"] #tela-sessao[data-aba="servidor"] > main.paineis {
  display: flex;
  flex-direction: column;
}

:root[data-casca="celular"] #tela-sessao[data-aba="servidor"] .paineis > .trilha {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
  overflow-x: auto;
  overflow-y: hidden;
  border-right: 0;
  border-bottom: 1px solid var(--seele-linha);
  scrollbar-width: none;
}

:root[data-casca="celular"] #tela-sessao[data-aba="servidor"] .paineis > .painel-canais {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* O rótulo REDES é o da coluna de 60 px; deitada, a fila de siglas fala por si. */
:root[data-casca="celular"] .trilha .trilha-titulo {
  display: none;
}

:root[data-casca="celular"] .trilha :is(.trilha-item, .trilha-mais) {
  flex: 0 0 auto;
  width: var(--cel-alvo);
  height: var(--cel-alvo);
  border: 1px solid var(--seele-linha-forte);
  border-radius: var(--seele-raio);
}

/* O `+` do desktop vem no apagado, que fica a 4,1:1 do painel: é um controle,
   e lê o rótulo. */
:root[data-casca="celular"] .trilha .trilha-mais {
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] .trilha .trilha-atual {
  border-color: var(--seele-laranja-nerv);
  background: var(--seele-negro-absoluto);
}

:root[data-casca="celular"] .trilha .trilha-outros {
  display: flex;
  gap: 8px;
}

/* A gestão de salas e canais é pelo SEELE no computador; o que fica é a frase
   dita uma vez, embaixo dos canais. A ajuda mora em AJUSTES. */
:root[data-casca="celular"] .painel-canais :is(#nova-voice_room, #nova-linha, #ajuda-abrir, .voice_room-apagar, .linha-controles) {
  display: none;
}

:root[data-casca="celular"] .painel-canais .canais-rolagem {
  padding: 0 calc(16px + var(--cel-seguro-dir)) 24px calc(16px + var(--cel-seguro-esq));
  overscroll-behavior: contain;
}

:root[data-casca="celular"] .painel-canais .canais-cabeca {
  margin: 20px 0 8px;
  padding: 0;
  border: 0;
}

/* Cada sala é um cartão. */
:root[data-casca="celular"] #lista-voice_rooms > .voice_room {
  margin: 0 0 8px;
  padding: 12px;
  gap: 10px;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha);
  border-radius: var(--seele-raio);
  box-shadow: var(--seele-sombra);
}

/* A sala em que se está: borda do acento e a marca escrita. **Sem o
   preenchimento laranja-fraco do desktop**: as cores de estado derivadas do tema
   só garantem 4,5:1 sobre o fundo e o painel, e sobre o tom fraco do acento
   caíam a 3,8:1 (medido no protótipo). */
:root[data-casca="celular"] #lista-voice_rooms > .voice_room.aberto {
  background: var(--seele-negro-painel);
  border-color: var(--seele-laranja-nerv);
  border-left-width: 3px;
}

:root[data-casca="celular"] #lista-voice_rooms .canal-cabeca {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
}

:root[data-casca="celular"] #lista-voice_rooms .voice_room-nome {
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
}

/* A ocupação e quem está dentro vêm no apagado do desktop, a 4,1:1 do painel
   já sem tema. No celular, o rótulo do painel, que o tema também alcança. */
:root[data-casca="celular"] #lista-voice_rooms .voice_room-ocupacao {
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  color: var(--seele-rotulo-painel);
}

/* As marcas vão para o fim da cabeça, depois do espaço. */
:root[data-casca="celular"] #lista-voice_rooms .canal-cabeca .espaco {
  flex: 1 1 auto;
}

:root[data-casca="celular"] .cel-marca {
  font-size: calc(var(--seele-t-micro) * var(--cel-escala));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
}

:root[data-casca="celular"] .cel-marca-aqui {
  color: var(--seele-padrao-azul);
}

:root[data-casca="celular"] :is(.cel-marca-cheia, .cel-marca-senha) {
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] .cel-marca .glifo {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

/* Quem está dentro, numa fileira que quebra. */
:root[data-casca="celular"] #lista-voice_rooms .voice_room-dentro {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
}

:root[data-casca="celular"] #lista-voice_rooms .voice_room-pessoa {
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] #lista-voice_rooms .voice_room-pessoa-marca {
  margin-left: 0;
}

/* «ninguém aqui» no tom da linha forte some num fundo escuro; é texto, e lê o
   rótulo. */
:root[data-casca="celular"] #lista-voice_rooms .voice_room-vazio {
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] #lista-voice_rooms .voice_room-entrar {
  min-height: var(--cel-alvo);
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
}

:root[data-casca="celular"] .cel-sala-entrar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

:root[data-casca="celular"] .cel-entrar-mudo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  letter-spacing: 0.12em;
}

/* Os canais: uma fileira de 52 por canal, o canal aberto marcado na borda. */
:root[data-casca="celular"] #lista-linhas .linha {
  min-height: 52px;
  padding: 8px 4px 8px 12px;
  font-size: calc(var(--seele-t-corpo) * var(--cel-escala));
  border-bottom: 1px solid var(--seele-linha);
}

/* O nome de um canal fechado vem no apagado do desktop, a 4,1:1 do painel; o
   aberto, no osso. */
:root[data-casca="celular"] #lista-linhas .linha .linha-rotulo {
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] #lista-linhas .linha.aberto .linha-rotulo {
  color: var(--seele-osso);
}

/* O que o celular não faz, dito onde o controle estaria. */
:root[data-casca="celular"] .cel-fora {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--seele-linha-forte);
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  color: var(--seele-osso);
}

:root[data-casca="celular"] .cel-fora .rotulo {
  display: block;
  margin-bottom: 4px;
}

/* ----------------------------------------------------------- a aba CONVERSA
 *
 * A conversa do desktop no tamanho do polegar. O cabeçalho do canal continua o
 * do desktop, logo abaixo do topo, porque ele carrega a região de MOD
 * `canal.cabecalho`; o nome do canal é texto, e a busca tem 44 de alvo. */

:root[data-casca="celular"] #vista-conversa .linha-barra {
  min-height: 52px;
  gap: 8px;
  padding: 4px calc(8px + var(--cel-seguro-dir)) 4px calc(16px + var(--cel-seguro-esq));
  background: var(--seele-negro-painel);
}

:root[data-casca="celular"] #vista-conversa #linha-nome {
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
  color: var(--seele-osso);
  text-decoration: none;
  cursor: default;
}

:root[data-casca="celular"] #vista-conversa #botao-buscar {
  width: var(--cel-alvo);
  height: var(--cel-alvo);
}

:root[data-casca="celular"] #vista-conversa #form-busca {
  flex-wrap: wrap;
  padding: 4px calc(8px + var(--cel-seguro-dir)) 4px calc(16px + var(--cel-seguro-esq));
}

/* As mensagens: o avatar ocupa as duas fileiras (o autor e a hora em cima, o
   texto embaixo), e o `remover` sai da fileira para a folha da mensagem. */
:root[data-casca="celular"] #lista-mensagens {
  padding: 12px calc(16px + var(--cel-seguro-dir)) 16px calc(16px + var(--cel-seguro-esq));
  overscroll-behavior: contain;
}

:root[data-casca="celular"] #lista-mensagens .mensagem {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  padding-left: 0;
  cursor: pointer;
}

:root[data-casca="celular"] #lista-mensagens .moderar-remover {
  display: none;
}

/* O autor no osso e a hora no rótulo do painel: o apagado do desktop é, pelo
   próprio token, «4,11:1 só texto grande». */
:root[data-casca="celular"] #lista-mensagens .mensagem-autor {
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  color: var(--seele-osso);
}

:root[data-casca="celular"] #lista-mensagens .mensagem.propria .mensagem-autor {
  color: var(--seele-padrao-azul);
}

:root[data-casca="celular"] #lista-mensagens .mensagem-hora {
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] #lista-mensagens .mensagem .corpo {
  font-size: calc(var(--seele-t-corpo) * var(--cel-escala));
  color: var(--seele-osso);
}

/* **A mensagem que não foi gravada é do núcleo.** A placa de alerta lê só
   `--nucleo-*`: um tema não apaga o aviso de que algo se perdeu, nem as duas
   saídas dele (G6). */
:root[data-casca="celular"] #lista-mensagens :is([data-envio="falhou"], [data-envio="sem-resposta"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  font-family: var(--nucleo-pilha);
  color: var(--nucleo-texto);
  background: var(--nucleo-alerta-fundo);
  border-left: 3px solid var(--nucleo-alerta);
}

:root[data-casca="celular"] #lista-mensagens :is([data-envio="falhou"], [data-envio="sem-resposta"]) .envio-frase {
  flex: 1 0 100%;
  color: var(--nucleo-texto);
}

:root[data-casca="celular"] #lista-mensagens :is([data-envio="falhou"], [data-envio="sem-resposta"]) .envio-acao {
  min-height: var(--cel-alvo);
  padding: 0 12px;
  font-family: var(--nucleo-pilha);
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  letter-spacing: 0.12em;
  color: var(--nucleo-texto);
  background: var(--nucleo-fundo);
  border: 1px solid var(--nucleo-rotulo);
}

/* O compositor: o `+` do celular, a caixa, e o ENVIAR de tracking curto. O
   `+` do desktop fica escondido, e é ele que a folha ANEXAR aperta. */
:root[data-casca="celular"] #form-mensagem {
  gap: 8px;
  padding: 8px calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] #form-mensagem #botao-anexar,
:root[data-casca="celular"] #form-mensagem .prompt {
  display: none;
}

:root[data-casca="celular"] .cel-anexar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--cel-alvo);
  height: var(--cel-alvo);
  padding: 0;
  color: var(--seele-osso);
  background: none;
  border: 1px solid var(--seele-linha-forte);
  border-radius: var(--seele-raio);
  cursor: pointer;
}

:root[data-casca="celular"] #form-mensagem .compor-caixa {
  min-height: var(--cel-alvo);
  min-width: 0;
}

/* O alvo é o campo, e não a caixa em volta dele: 44 de altura já na primeira
   fileira. */
:root[data-casca="celular"] #form-mensagem #campo-mensagem {
  box-sizing: border-box;
  min-height: var(--cel-alvo);
  padding-block: 11px;
  font-size: var(--cel-letra-de-campo);
}

:root[data-casca="celular"] #form-mensagem .compor-enviar {
  min-height: var(--cel-alvo);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------ a aba PESSOAS
 *
 * A lista do desktop, na largura toda e no tamanho do polegar. O sinal fica
 * em número, barra e palavra (specs/06: nunca só cor); o volume sai da linha
 * e vai para a folha da pessoa. */

:root[data-casca="celular"] .painel-pessoas .pessoas-cartela {
  padding: 10px calc(16px + var(--cel-seguro-dir)) 10px calc(16px + var(--cel-seguro-esq));
  /* A contagem desce para debaixo de PESSOAS quando não cabe ao lado: com o
     texto do sistema no maior tamanho, o «VOZ» passava da tela. */
  flex-wrap: wrap;
  row-gap: 2px;
}

:root[data-casca="celular"] #lista-roster {
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root[data-casca="celular"] #lista-roster .roster-sala {
  padding: 12px calc(16px + var(--cel-seguro-dir)) 6px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] #lista-roster .roster-sala-nome {
  color: var(--seele-osso);
}

:root[data-casca="celular"] #lista-roster .pessoa {
  position: relative;
  min-height: 56px;
  gap: 4px;
  padding: 10px calc(16px + var(--cel-seguro-dir)) 10px calc(16px + var(--cel-seguro-esq));
  cursor: pointer;
}

/* Quem fala: a borda do fósforo, e **sem o fundo** do desktop. Sobre o tom
   fraco do fósforo, o rótulo cai a 3,5:1 (medido na bancada). */
:root[data-casca="celular"] #lista-roster .pessoa.falando {
  background: none;
}

/* O nome é texto: abrir a folha é tocar a linha. */
:root[data-casca="celular"] #lista-roster .pessoa-nome-porta {
  pointer-events: none;
}

:root[data-casca="celular"] #lista-roster .pessoa-nome {
  font-size: calc(var(--seele-t-corpo) * var(--cel-escala));
}

/* O resumo do diagnóstico sai: ele repete o número que o sinal já diz, e no
   celular o toque é da linha, e não dele. Fica o sinal numa fileira só, o
   número e a barra, com a palavra do estado no canto. */
:root[data-casca="celular"] #lista-roster .pessoa-diagnostico-resumo {
  display: none;
}

:root[data-casca="celular"] #lista-roster .pessoa-diagnostico {
  margin-top: 0;
}

:root[data-casca="celular"] #lista-roster .pessoa-sync {
  display: inline-flex;
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  color: var(--seele-osso);
}

:root[data-casca="celular"] #lista-roster .pessoa-diagnostico .barra {
  display: inline-block;
  margin-left: 8px;
}

:root[data-casca="celular"] #lista-roster .pessoa-rodape {
  position: absolute;
  top: 12px;
  right: calc(16px + var(--cel-seguro-dir));
}

:root[data-casca="celular"] #lista-roster .pastilha[data-estado="escuta"] {
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] #lista-roster input.volume {
  display: none;
}

/* ------------------------------------------------------------- a CHAMADA
 *
 * Por cima da sessão, entre o topo (que segura o selo da conexão) e a faixa de
 * voz, que fica onde estava. A fileira da telemetria entra no lugar das abas,
 * com a mesma altura, e é por isso que o MUDO não se mexe. */

:root[data-casca="celular"] #tela-sessao[data-chamada] > .cel-abas {
  display: none;
}

:root[data-casca="celular"] .cel-telemetria {
  display: none;
}

:root[data-casca="celular"] #tela-sessao[data-chamada] > .cel-telemetria {
  order: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* A altura das abas, escrita do mesmo jeito: o MUDO fica no mesmo lugar. */
  box-sizing: border-box;
  height: calc(var(--cel-abas) + 1px + var(--cel-seguro-pe));
  padding: 0 var(--cel-seguro-dir) var(--cel-seguro-pe) var(--cel-seguro-esq);
  border-top: 1px solid var(--seele-linha);
  background: var(--seele-negro-painel);
}

:root[data-casca="celular"] .cel-telemetria-celula {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  border-top: 2px solid transparent;
  border-left: 1px solid var(--seele-linha);
}

:root[data-casca="celular"] .cel-telemetria-celula:first-child {
  border-left: 0;
}

:root[data-casca="celular"] .cel-telemetria-celula .rotulo {
  /* Com teto, como as abas: quatro rótulos numa largura de 390. */
  font-size: min(calc(var(--seele-t-micro) * var(--cel-escala)), 11px);
}

:root[data-casca="celular"] .cel-telemetria-valor {
  font-size: min(calc(var(--seele-t-dado) * var(--cel-escala)), 14px);
  color: var(--seele-osso);
  white-space: nowrap;
}

:root[data-casca="celular"] #vista-chamada {
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root[data-casca="celular"] #vista-chamada .vista-chamada-barra {
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] #vista-chamada .chamada-palco {
  margin: 0;
  border-left: 0;
  border-right: 0;
}

/* A cabeça do palco quebra fileira, e o TELA CHEIA não encolhe abaixo do nome
   dele: com o texto do sistema a 150 %, a fileira única do desktop passava da
   tela. */
:root[data-casca="celular"] #vista-chamada .chamada-palco-cabeca {
  flex-wrap: wrap;
  row-gap: 4px;
}

:root[data-casca="celular"] #vista-chamada .chamada-palco-razao {
  min-width: 0;
  overflow-wrap: anywhere;
}

:root[data-casca="celular"] #palco-cheia {
  flex-shrink: 0;
}

:root[data-casca="celular"] #palco-escolha,
:root[data-casca="celular"] #palco-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:root[data-casca="celular"] #palco-escolha[hidden],
:root[data-casca="celular"] #palco-controles[hidden] {
  display: none;
}

/* «VER —» vem no apagado do desktop, a 4,1:1. A escolha marcada continua a do
   desktop, escura sobre o acento. */
:root[data-casca="celular"] #palco-escolha button:not([aria-pressed="true"]) {
  color: var(--seele-osso);
}

:root[data-casca="celular"] #palco-volume {
  min-height: var(--cel-alvo);
  accent-color: var(--seele-laranja-nerv);
}

/* **O palco dos MODs** (`chamada.palco`, F3): com ele à frente, a grade sai,
   como no desktop. A regra do desktop perde para a grade em duas colunas
   desta casca, que vem depois com a mesma especificidade. O palco da
   transmissão fica: é o aviso de quem compartilha e a escolha das telas. */
:root[data-casca="celular"] #vista-chamada[data-palco-de-mods] > #chamada-grade {
  display: none;
}

/* A barra do palco quebra fileira (o «PALCO DE …» com dois MODs, o texto do
   sistema maior) e respeita as bordas do aparelho. */
:root[data-casca="celular"] .palco-de-mods-barra {
  flex-wrap: wrap;
  row-gap: 4px;
  padding: 4px calc(16px + var(--cel-seguro-dir)) 4px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] .palco-de-mods-quem {
  flex: 1 1 12ch;
}

/* A grade em duas colunas, cada cartão numa placa opaca. O volume das dez
   celas do desktop sai do cartão: ele mora na folha da pessoa. */
:root[data-casca="celular"] #chamada-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px calc(16px + var(--cel-seguro-dir)) 16px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] #chamada-grade > .chamada-cartao {
  min-width: 0;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha);
  cursor: pointer;
}

:root[data-casca="celular"] #chamada-grade .chamada-volume {
  display: none;
}

/* Em duas colunas, a cabeça do cartão quebra: a identidade numa fileira, os
   estados na outra. Lado a lado, a 360, o nome e a nota ficavam com 3 px. */
:root[data-casca="celular"] #chamada-grade .chamada-cartao-topo {
  flex-wrap: wrap;
}

:root[data-casca="celular"] #chamada-grade .chamada-cartao-identidade {
  flex: 1 1 100%;
}

:root[data-casca="celular"] #chamada-grade .chamada-cartao-quem .nota {
  white-space: normal;
  overflow-wrap: anywhere;
}

:root[data-casca="celular"] #chamada-grade .chamada-pastilha[data-estado="escuta"] {
  color: var(--seele-rotulo-painel);
}

/* ------------------------------------------------------------ a aba AJUSTES
 *
 * A tela de CONFIGURAÇÕES do desktop, entre o topo e a faixa de voz, sem o véu
 * de camada: a lista de seções numa página, e cada seção noutra. O tema do
 * servidor não a alcança, como no desktop: ela é filha de `body`, e o tema mora
 * em `#tela-sessao`. */

:root[data-casca="celular"] #tela-server {
  top: var(--cel-ajustes-topo, 0px);
  bottom: var(--cel-ajustes-pe, 0px);
  padding: 0;
  background: var(--seele-negro-absoluto);
}

:root[data-casca="celular"] #tela-server::before {
  display: none;
}

:root[data-casca="celular"] #tela-server > .server {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  border: 0;
}

:root[data-casca="celular"] #tela-server :is(.server-coluna, .server-corpo) {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
}

:root[data-casca="celular"] #tela-server[data-cel-pagina="lista"] .server-corpo,
:root[data-casca="celular"] #tela-server[data-cel-pagina="secao"] .server-coluna {
  display: none;
}

/* A saída de AJUSTES é outra aba; o VOLTAR do desktop sai, e o «‹ AJUSTES»
   volta à lista. */
:root[data-casca="celular"] #tela-server #server-fechar {
  display: none;
}

:root[data-casca="celular"] .cel-ajustes-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--seele-osso);
  background: none;
  border: 1px solid var(--seele-linha-forte);
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  letter-spacing: var(--seele-tracking-rotulo);
  cursor: pointer;
}

/* A coluna do celular: SEU PERFIL no alto, e a lista na ordem do spec. Os
   grupos do desktop (e o que só o app faz, que ficou neles) não aparecem. */
:root[data-casca="celular"] #tela-server .server-coluna > :is(.server-marca, .server-grupo, ul.server-secoes) {
  display: none;
}

/* A região `operador.barra`, abaixo de SEU PERFIL (F3, passo 8b): fechada e
   com teto de altura, para um MOD não empurrar a gestão de MODs para fora do
   alcance. 96 até a medida do iPhone (M3) dar a altura certa. */
:root[data-casca="celular"] #tela-server #operador-mods {
  /* A coluna de AJUSTES é flex: sem isto, ela espremia a região até o padding
     (medido: 16 px, com o conteúdo inteiro rolando lá dentro). */
  flex-shrink: 0;
  box-sizing: border-box;
  max-height: 96px;
  overflow-x: hidden;
  overflow-y: auto;
  contain: paint;
  padding: 8px calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
  border-bottom: 1px solid var(--seele-linha);
  /* O fundo e a tinta da coluna, que sem tema não mudam nada. Com o tema da
     região, são os dela: o painel atrás, e a tinta resolvida aqui, onde a
     região escreve os tokens. Uma caixa que não declara cor herda a cor já
     resolvida acima, e a contribuição de um MOD ficava com a tinta do produto
     sobre o painel da região (medido: 1,09:1 com uma região clara). */
  color: var(--seele-osso);
  background: var(--seele-negro-painel);
}

:root[data-casca="celular"] #tela-server #operador-mods[hidden] {
  display: none;
}

:root[data-casca="celular"] .cel-perfil {
  display: grid;
  gap: 8px;
  padding: 16px calc(16px + var(--cel-seguro-dir)) 16px calc(16px + var(--cel-seguro-esq));
  border-bottom: 1px solid var(--seele-linha);
}

:root[data-casca="celular"] .cel-perfil-placa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
}

/* Sobre a capa de quem usa, o retrato e o apelido ficam numa placa opaca do
   painel: o contraste é o de sem capa, contra qualquer capa (medido na
   bancada, `capa-do-operador`, como a F3 mede a barra do desktop). */
:root[data-casca="celular"] .cel-perfil-placa[data-com-capa] :where(.cel-perfil-retrato, .cel-perfil-apelido) {
  background-color: var(--seele-negro-painel);
}

:root[data-casca="celular"] .cel-perfil-retrato {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  color: var(--seele-osso);
  border: 1px solid var(--seele-linha-forte);
}

:root[data-casca="celular"] .cel-perfil-apelido {
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
  color: var(--seele-osso);
  overflow-wrap: anywhere;
}

:root[data-casca="celular"] .cel-ajustes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* SOBRE e SAIR DO SERVIDOR são ações, e não seções: o mesmo desenho de uma
   `.server-secao`, sem a classe que o `abrirSecao` do desktop percorre. */
:root[data-casca="celular"] .cel-ajustes-acao {
  width: 100%;
  min-height: 48px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font: inherit;
  text-align: left;
  color: var(--seele-osso);
  background: none;
  border: none;
  border-bottom: 1px solid var(--seele-linha);
  border-left: 2px solid transparent;
  cursor: pointer;
}

/* A linha MODS DESTE SERVIDOR é a saída do tema (spec, §6): ela lê o núcleo,
   como a aba AJUSTES. */
:root[data-casca="celular"] #tela-server #secao-mods {
  font-family: var(--nucleo-pilha);
  color: var(--nucleo-texto);
  background: var(--nucleo-painel);
  border-left: 2px solid var(--nucleo-acento);
}

:root[data-casca="celular"] #tela-server #server-modo-aberto {
  display: none;
}

/* Os cartões dos modos partem de 130 vezes a escala, e dividem a fileira por
   igual como antes: a 1, dois cabem lado a lado a 360 e a 390; com o texto do
   sistema grande, cada um toma a fileira, em vez de partir o SEGURAR no meio. */
:root[data-casca="celular"] #tela-server .server-modo {
  flex-basis: calc(130px * var(--cel-escala));
}

/* CONEXÃO: as sete medidas numa grade de duas colunas, que vira uma quando o
   texto do sistema não cabe em duas (a 1, o mínimo de 150 dá duas a 360 e a
   480). */
:root[data-casca="celular"] .cel-medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(150px * var(--cel-escala))), 1fr));
  gap: 12px;
  margin: 0;
}

:root[data-casca="celular"] .cel-medida {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--seele-linha);
}

:root[data-casca="celular"] .cel-medida dd {
  margin: 0;
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
  color: var(--seele-osso);
}

/* O QUE O CELULAR NÃO FAZ: os dois grupos da lista canônica. */
:root[data-casca="celular"] .cel-fora-grupo {
  margin-bottom: 20px;
}

:root[data-casca="celular"] .cel-fora-grupo ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

:root[data-casca="celular"] .cel-fora-grupo li {
  padding: 12px 0;
  border-bottom: 1px solid var(--seele-linha);
  color: var(--seele-osso);
}

:root[data-casca="celular"] .cel-fora-grupo strong {
  display: block;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  letter-spacing: var(--seele-tracking-cartela);
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
}

:root[data-casca="celular"] .cel-fora-grupo p {
  margin: 4px 0 0;
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  line-height: 1.5;
}

/* O link para baixar o app: um alvo de 44, na cor de ação, sublinhado porque
   sai da página. */
:root[data-casca="celular"] .cel-baixar {
  display: flex;
  align-items: center;
  min-height: var(--cel-alvo);
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  letter-spacing: 0.18em;
  color: var(--seele-laranja-nerv);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- o aparelho
 *
 * O teclado do sistema: a sessão ocupa só o que se vê acima dele, as abas saem
 * e a faixa de voz sobe para logo abaixo do topo, com o MUDO à mão. O
 * compositor, no fim da conversa, fica colado ao teclado. */

:root[data-casca="celular"] #tela-sessao[data-teclado] {
  height: var(--cel-visivel);
  transform: translateY(var(--cel-visivel-topo, 0px));
}

:root[data-casca="celular"] #tela-sessao[data-teclado] > .cel-abas {
  display: none;
}

:root[data-casca="celular"] #tela-sessao[data-teclado] > .cel-topo {
  order: -3;
}

:root[data-casca="celular"] #tela-sessao[data-teclado] > .voz-celular {
  order: -2;
}

/* Numa tela grande (um tablet, ou a escolha à mão), a coluna de um celular
   grande no meio, com as abas presas a ela: quatro abas de 320 px para uma
   palavra de oito letras não servem a ninguém. */
@media (min-width: 600px) {
  :root[data-casca="celular"] #tela-sessao {
    width: 100%;
    max-width: var(--cel-coluna);
    margin-inline: auto;
    --cel-lado-esq: max(0px, calc(var(--cel-seguro-esq) - max(0px, (100vw - var(--cel-coluna)) / 2)));
    --cel-lado-dir: max(0px, calc(var(--cel-seguro-dir) - max(0px, (100vw - var(--cel-coluna)) / 2)));
    border-left: 1px solid var(--seele-linha);
    border-right: 1px solid var(--seele-linha);
  }

  :root[data-casca="celular"] #tela-server {
    left: max(0px, calc((100vw - var(--cel-coluna)) / 2));
    right: max(0px, calc((100vw - var(--cel-coluna)) / 2));
  }
}

/* Deitado, com uma tela no palco, a CHAMADA põe o palco em todo o espaço acima
   da faixa: o topo, a barra da chamada, a grade e a telemetria saem. A faixa
   fica, com o MUDO: o palco nunca a cobre. */
@media (orientation: landscape) and (max-height: 500px) {
  :root[data-casca="celular"] #tela-sessao[data-chamada]:has(#palco[data-transmitindo="sim"]) > :is(.cel-topo, .cel-telemetria) {
    display: none;
  }

  :root[data-casca="celular"] #tela-sessao[data-chamada] #vista-chamada:has(#palco[data-transmitindo="sim"]) > :not(#palco) {
    display: none;
  }

  :root[data-casca="celular"] #tela-sessao[data-chamada] #vista-chamada > #palco[data-transmitindo="sim"] {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* O botão que abre os ajustes do microfone do sistema: uma página não os abre,
   e a ponte recusa o pedido. A nota do bloco diz onde a permissão fica. */
:root[data-casca="celular"] #boot-microfone-ajustes {
  display: none;
}