/* SEELE — as folhas do celular (F8).
 *
 * Spec: `docs/superpowers/specs/2026-10-09-0.16-celular-design.md`, §2.4.
 *
 * A folha nasce presa ao pé da sessão, sobre um véu. Corte seco (specs/07): ela
 * aparece, e não desliza. Toda regra começa pela marca (G1). */

:root[data-casca="celular"] .cel-veu {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--seele-negro-absoluto);
  opacity: 0.72;
}

:root[data-casca="celular"] .cel-folha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: 85%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-top: 2px solid var(--seele-laranja-nerv);
  background: var(--seele-negro-painel);
  color: var(--seele-osso);
  padding-bottom: var(--cel-seguro-pe);
}

:root[data-casca="celular"] .cel-folha-cabeca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cel-alvo);
  padding: 14px calc(8px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
  border-bottom: 1px solid var(--seele-linha);
}

/* A alça: só desenho, e não um controle. Quem fecha é a resposta, o véu ou o
   voltar. */
:root[data-casca="celular"] .cel-folha-cabeca::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 40px;
  margin-left: -20px;
  border-top: 2px solid var(--seele-linha-forte);
}

:root[data-casca="celular"] .cel-folha-titulo {
  margin: 0;
  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;
}

:root[data-casca="celular"] .cel-folha-corpo {
  overflow-y: auto;
  padding: 12px calc(16px + var(--cel-seguro-dir)) 16px calc(16px + var(--cel-seguro-esq));
}

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

:root[data-casca="celular"] .cel-folha-campo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cel-alvo);
  margin-top: 6px;
  padding: 8px 12px;
  color: var(--seele-osso);
  background: var(--seele-negro-absoluto);
  border: 1px solid var(--seele-linha-forte);
  border-radius: var(--seele-raio);
}

:root[data-casca="celular"] .cel-folha-acoes {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

/* O texto da mensagem, citado na folha dela: até seis fileiras, e o resto
   cortado, porque a folha é das ações e não da leitura. */
:root[data-casca="celular"] .cel-folha-citacao {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-left: 10px;
  border-left: 2px solid var(--seele-linha-forte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A folha da pessoa: o sinal numa fileira, e o volume com o número escrito. */
:root[data-casca="celular"] .cel-folha-sinal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 16px;
}

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

:root[data-casca="celular"] .cel-folha-sinal-estado {
  font-size: calc(var(--seele-t-rotulo) * var(--cel-escala));
  letter-spacing: 0.12em;
  color: var(--seele-rotulo-painel);
}

:root[data-casca="celular"] .cel-folha-campo-volume {
  display: grid;
  gap: 6px;
}

:root[data-casca="celular"] .cel-folha-deslizante {
  width: 100%;
  min-height: var(--cel-alvo);
  accent-color: var(--seele-laranja-nerv);
}

/* ------------------------------------------- as superfícies de MOD (§7)
 *
 * Nenhuma superfície de MOD cobre a faixa de voz nem as abas: o MUDO, o SAIR e
 * AJUSTES, que é o único caminho para desligar um MOD no celular, ficam sempre à
 * mão. Achado no protótipo: o diálogo do ESTILO em tela cheia cobria os três. Os
 * palcos moram na sessão, do alto até o pé dela (`--cel-pe`, medido pelo
 * celular-folhas.js); no desktop eles são `fixed` sobre a janela inteira. */

/* A página imersiva cobre o conteúdo, e não o pé nem o topo. O palco das
   páginas mora no `main.paineis`, que no celular já é `relative` e já termina
   acima do pé: o `inset: 0` é o painel inteiro. */
:root[data-casca="celular"] #tela-sessao .palco-de-paginas:has(> [data-imersiva="sim"]:not([hidden])) {
  position: absolute;
  inset: 0;
}

:root[data-casca="celular"] #tela-sessao .palco-de-paginas > .pagina-de-mod[data-imersiva="sim"] {
  flex: 1 1 auto;
  min-height: 0;
}

/* A folha (API 6) e o painel (até a API 5), que ela substitui: uma folha de
   baixo, na largura toda, que sobe do alto do pé e cresce até o alto do
   painel. O palco dos painéis mora no `main.paineis`, que já termina acima do
   pé. Medido antes: na CONVERSA ela caía no fluxo e cobria a faixa; na aba
   SERVIDOR ficava com os 300 px da coluna do desktop. */
:root[data-casca="celular"] #tela-sessao .palco-de-paineis:has(> :is(.folha-de-mod, .painel-de-mod):not([hidden])) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  z-index: 25;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

:root[data-casca="celular"] #tela-sessao .palco-de-paineis > :is(.folha-de-mod, .painel-de-mod) {
  width: 100%;
  max-width: none;
  min-height: 0;
  border-top: 2px solid var(--seele-laranja-nerv);
}

/* O diálogo: tela cheia acima do pé, com as ações embaixo. */
:root[data-casca="celular"] #tela-sessao .camada-de-mod {
  position: absolute;
  inset: 0 0 var(--cel-pe, 0px) 0;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

:root[data-casca="celular"] #tela-sessao .camada-de-mod[data-modal="nao"] {
  align-items: flex-end;
}

:root[data-casca="celular"] #tela-sessao .dialogo-de-mod {
  max-width: none;
  max-height: none;
  width: 100%;
  padding-top: var(--cel-seguro-topo);
}

:root[data-casca="celular"] #tela-sessao .camada-de-mod[data-modal="nao"] .dialogo-de-mod {
  max-height: 85%;
  padding-top: 0;
}

/* As áreas seguras laterais (deitado, a ilha vai para um lado), pelas próprias
   superfícies, e não pelo teto da coluna: medido pela F3 (16/10), com o teto
   revertido as quatro desenhavam a 25 px da borda. `--cel-lado-*` é o quanto das
   áreas a sessão ainda cobre (`celular-sessao.css`): zero quando a coluna já
   as afasta, e a superfície não perde largura à toa. A página soma à margem
   que já tem. */
:root[data-casca="celular"] #tela-sessao :is(.dialogo-de-mod, .folha-de-mod, .painel-de-mod) {
  padding-left: var(--cel-lado-esq);
  padding-right: var(--cel-lado-dir);
}

:root[data-casca="celular"] #tela-sessao .pagina-de-mod {
  padding-left: calc(var(--mod-margem) + var(--cel-lado-esq));
  padding-right: calc(var(--mod-margem) + var(--cel-lado-dir));
}

/* Os avisos, numa fila na faixa de baixo, acima do pé. */
:root[data-casca="celular"] #tela-sessao .avisos-de-mod {
  position: absolute;
  left: calc(8px + var(--cel-seguro-esq));
  right: calc(8px + var(--cel-seguro-dir));
  bottom: calc(var(--cel-pe, 0px) + 8px);
  max-width: none;
}

/* ------------------------------------------- as camadas sobre a sessão
 *
 * Spec §2.4 e §2.5. A queda, o alerta e a confirmação são as caixas do
 * desktop, redesenhadas pela casca: a queda vira uma faixa no alto, o alerta
 * fica em largura cheia, e a confirmação é uma folha de baixo. */

/* A queda: uma faixa no alto, em largura cheia, e não uma caixa sobre a
   conversa (specs/07: a sessão esmaece e continua legível). A camada do
   desktop já não intercepta o toque fora da caixa, e o `.na-bateria` dele
   esmaece a sessão embaixo. */
:root[data-casca="celular"] #bateria.camada-bateria {
  align-items: flex-start;
  justify-content: stretch;
}

:root[data-casca="celular"] #bateria .bateria-caixa {
  width: 100%;
  max-width: none;
  border-width: 0 0 var(--seele-b-forte);
}

:root[data-casca="celular"] #bateria .bateria-cabeca {
  padding: calc(var(--cel-seguro-topo) + 8px) calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] #bateria .bateria-nome {
  font-size: calc(var(--seele-t-secao) * var(--cel-escala));
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

:root[data-casca="celular"] #bateria .bateria-corpo {
  gap: 12px;
  padding: 8px calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
}

:root[data-casca="celular"] #bateria #bateria-conta {
  font-size: calc(40px * var(--cel-escala));
}

:root[data-casca="celular"] #bateria .bateria-dizeres {
  gap: 2px;
}

/* «2 tentativas» não precisa de rótulo embaixo de RECONECTANDO; a frase de que
   o SEELE já está tentando fica, porque ela é a resposta a «posso apressar?». */
:root[data-casca="celular"] #bateria .bateria-pe .rotulo {
  display: none;
}

:root[data-casca="celular"] #bateria .bateria-pe {
  gap: 2px;
  padding: 0 calc(16px + var(--cel-seguro-dir)) 8px calc(16px + var(--cel-seguro-esq));
}

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

/* O alerta em largura cheia. A porta de moderar dele não aparece: moderar é
   pelo SEELE no computador (O QUE O CELULAR NÃO FAZ). */
:root[data-casca="celular"] #banner .alerta-caixa {
  width: 100%;
  max-width: none;
  border-left: 0;
  border-right: 0;
}

:root[data-casca="celular"] #banner #alerta-ejetar {
  display: none;
}

:root[data-casca="celular"] #banner #banner-fechar {
  min-width: var(--cel-alvo);
  min-height: var(--cel-alvo);
}

/* A confirmação é uma folha de baixo, como as do celular: presa ao pé, em
   largura cheia, com a borda vermelha de quem pergunta antes de um ato sem
   volta, e as ações em largura cheia, com o verbo inteiro. */
:root[data-casca="celular"] #moderar.camada-moderar {
  align-items: flex-end;
}

:root[data-casca="celular"] #moderar .moderar-caixa {
  width: 100%;
  max-width: none;
  max-height: 85%;
  border: 0;
  border-top: var(--seele-b-forte) solid var(--seele-vermelho-alerta);
  padding-bottom: var(--cel-seguro-pe);
}

:root[data-casca="celular"] #moderar .moderar-confirmacao {
  padding: 16px calc(16px + var(--cel-seguro-dir)) 16px calc(16px + var(--cel-seguro-esq));
}

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

:root[data-casca="celular"] #moderar .moderar-botoes button {
  width: 100%;
  min-height: var(--cel-alvo);
}

/* O verbo primeiro, embaixo do polegar; o CANCELAR depois. */
:root[data-casca="celular"] #moderar #moderar-confirmar {
  order: -1;
}

/* ---------------------------------------------------- a prévia do tema
 *
 * D-estilo-1. O VER NA SESSÃO mora no cabeçalho do diálogo, ao lado do
 * FECHAR, e tem o desenho dele. O selo é do núcleo, como o MUDO: diz que o que
 * se vê não é o tema do servidor, e um tema em prévia não o repinta. Ele é do
 * pé da sessão, no fluxo, logo acima da faixa, como os avisos do produto: o
 * `--cel-pe` o conta, e os palcos dos MODs ficam acima dele. Medido antes,
 * solto por cima do pé: o aviso de um MOD o cobria inteiro, VOLTAR junto, e
 * ele cobria os 56 px de baixo de uma folha de MOD. O do desktop, no alto e
 * sem clique, sai: este diz o mesmo, e é por onde se volta. */
:root[data-casca="celular"] #selo-da-previa {
  display: none;
}

:root[data-casca="celular"] .dialogo-de-mod-cabecalho > .cel-ver-na-sessao {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 44px;
  padding: 2px 12px;
  border: 1px solid var(--seele-laranja-nerv);
  background: transparent;
  color: var(--seele-osso);
  font: inherit;
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  letter-spacing: 0.08em;
}

/* Os dois à direita, juntos: as duas margens automáticas dividiriam o vão. */
:root[data-casca="celular"] .dialogo-de-mod-cabecalho > .cel-ver-na-sessao:not([hidden]) + .superficie-de-mod-sair {
  margin-left: 0;
}

:root[data-casca="celular"] .cel-ver-na-sessao[hidden] {
  display: none;
}

:root[data-casca="celular"] #tela-sessao > .cel-selo-da-previa[data-nucleo] {
  order: 1;
  flex-shrink: 0;
  margin: 0 calc(8px + var(--cel-seguro-dir)) 8px calc(8px + var(--cel-seguro-esq));
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  font-family: var(--nucleo-pilha);
  font-size: calc(var(--seele-t-dado) * var(--cel-escala));
  letter-spacing: 0.12em;
  color: var(--nucleo-texto);
  background: var(--nucleo-painel);
  border: 1px solid var(--nucleo-acento);
}

:root[data-casca="celular"] .cel-selo-da-previa[data-nucleo][hidden] {
  display: none;
}

:root[data-casca="celular"] .cel-selo-da-previa[data-nucleo] > span {
  flex: 1 1 auto;
  padding-block: 8px;
}

:root[data-casca="celular"] .cel-selo-da-previa[data-nucleo] > button {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--nucleo-fundo);
  background: var(--nucleo-acento);
}

:root[data-casca="celular"] .cel-selo-da-previa[data-nucleo] > button[hidden] {
  display: none;
}

/* ------------------------------------------- o pessoa.detalhes na folha
 *
 * As seções que um MOD acrescenta ao perfil da pessoa, na folha dela, uma
 * embaixo da outra (o `celular-folhas.js` as monta). Sem contribuição, nada. */
:root[data-casca="celular"] .cel-folha-detalhes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

:root[data-casca="celular"] .cel-folha-detalhe {
  min-width: 0;
}