/* ============================================================================
   FLUXXI no CELULAR  (fase 2, parte B)
   ----------------------------------------------------------------------------
   Irmão de estilo.css e pele.css: SÓ media queries de <=720px. Nenhuma regra
   daqui vale no desktop, e é isso que faz as suítes de tela do desktop
   continuarem verdes SEM EDIÇÃO — a prova de que o celular não vazou.

   As decisões (fechadas no plano, não aqui):

   1. PADRÃO MENSAGEIRO. Três colunas espremidas num celular não são um painel,
      são um quebra-cabeça. O Atendimento vira PILHA de três telas com voltar:
      fila -> conversa -> ficha. Uma tela por vez, como todo aplicativo de
      mensagem que a recepcionista já sabe usar.
   2. NAVEGAÇÃO EMBAIXO, onde o dedo está. O chassi escuro da esquerda não
      encolhe: ele vira barra inferior com os quatro destinos do dia + "mais".
      O topo fino escuro carrega o nome do produto, o voltar e o SINO — o sino
      continua visível em toda tela, como no desktop.
   3. iPHONE É PRIMEIRA CLASSE. `100dvh` (o `100vh` do Safari mente e esconde o
      composer atrás da barra do navegador) e `env(safe-area-inset-*)` no topo e
      no rodapé, senão o traço do iPhone come o botão de enviar.
   4. ALVO DE 44px. Abaixo disso o dedo erra, e errar num painel de atendimento
      quer dizer mandar mensagem para a pessoa errada.
   ========================================================================== */

/* 🚨 OS ELEMENTOS DO CELULAR NASCEM ESCONDIDOS.
   Eles são criados no DOM SEMPRE (o `celular.js` não sabe o tamanho da tela na
   hora de montar), e o `.app` do desktop é um grid de duas colunas: um `<header>`
   e um `<nav>` soltos ali dentro viram ITENS DO GRID e desmontam a tela inteira.
   Foi o que aconteceu na primeira rodada — a suíte de tela do DESKTOP reprovou
   com "o cabeçalho intercepta o clique", que é a cara de um elemento invisível
   deitado por cima de tudo. Aparecer é privilégio do celular, e só dele. */
.topo-celular,
.barra-celular,
.folha-menu,
.veu {
  display: none;
}

@media (max-width: 720px) {
  /* ---------------------------------------------------------------- chassi */
  .topo-celular {
    display: flex;
  }
  .barra-celular {
    display: flex;
  }
  /* Folha e véu voltam a obedecer ao `.oculto` (que é `display:none !important`). */
  .folha-menu,
  .veu {
    display: block;
  }
  html,
  body {
    height: 100dvh;
    overflow: hidden;
    /* Rolagem elástica do iOS arrastando a página inteira embaixo da barra fixa
       é o jeito mais rápido de a tela parecer quebrada. */
    overscroll-behavior: none;
  }
  .app {
    grid-template-columns: 1fr;
    height: 100dvh;
    /* topo fino + conteúdo + barra de baixo */
    grid-template-rows: auto 1fr auto;
  }
  /* A coluna escura da esquerda não existe no celular: ela virou as duas
     barras. O menu inteiro dela mora na folha do "mais". */
  .caixa {
    display: none;
  }

  .topo-celular {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 9px) 12px 9px;
    background: var(--tinta);
    color: var(--tinta-txt);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 45;
  }
  .topo-celular .wordmark {
    font-size: 13px;
    letter-spacing: 0.22em;
  }
  .topo-celular .titulo-celular {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--creme);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topo-celular .bt-topo {
    flex: none;
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--tinta-txt);
    font-size: 13px;
    font-weight: 600;
    padding: 0 10px;
  }
  .topo-celular .bt-topo:active {
    background: rgba(255, 255, 255, 0.1);
  }
  .topo-celular .bt-topo svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* O sino sai do canto flutuante e entra na barra de cima: no celular, um
     botão flutuante em cima do conteúdo cobre justo a primeira conversa. */
  .sino {
    /* 🚨 `relative`, nunca `static`: o crachá é `absolute` e se ancora no primeiro
       ancestral POSICIONADO. Com o sino em `static` ele pulava para a barra
       inteira e aparecia cortado no canto da tela — visível só no print. */
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .sino svg {
    stroke: var(--tinta-txt);
    width: 21px;
    height: 21px;
  }
  .sino.tem svg {
    stroke: var(--creme);
  }
  .badge-sino {
    top: 4px;
    right: 4px;
  }

  .barra-celular {
    display: flex;
    align-items: stretch;
    background: var(--tinta);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07);
    z-index: 45;
  }
  .barra-celular button {
    flex: 1;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--tinta-txt2);
    font-size: 10.5px;
    font-weight: 600;
    position: relative;
    padding: 6px 2px;
  }
  .barra-celular button svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .barra-celular button[aria-current] {
    color: var(--creme);
  }
  /* A massa escura não cabe aqui (o fundo já é escuro): quem marca o destino
     ativo é um traço claro em cima, o mesmo vocabulário das abas da fila. */
  .barra-celular button[aria-current]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: var(--creme);
    border-radius: 0 0 2px 2px;
  }
  .barra-celular .badge {
    position: absolute;
    top: 5px;
    right: 50%;
    margin-right: -22px;
    min-width: 17px;
    padding: 0 4px;
    height: 15px;
    line-height: 15px;
    font-size: 9.5px;
  }

  /* 🚨 O CRACHÁ DO SINO DENTRO DA BARRA DE CIMA. Ele era posicionado em -5px
     para fora do botão, o que no desktop cai dentro do papel e no celular cai
     FORA DA TELA: no print de 390px ele aparecia cortado pela borda de cima.
     Dentro da barra ele encosta, não sangra — e o anel branco vira escuro,
     porque o fundo aqui é o chassi, não o papel. */
  .badge-sino {
    top: 2px;
    right: 2px;
    box-shadow: 0 0 0 2px var(--tinta);
  }

  /* A faixa do modo de teste comia um terço da tela do celular: cinco linhas de
     texto e os dois atalhos quebrando palavra por palavra. Ela continua dizendo
     tudo, em corpo menor e com os botões numa linha só. */
  .faixa-relogio {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    padding: 7px 10px;
    margin-bottom: 9px;
  }
  .faixa-relogio span {
    flex: 1 1 100%;
  }
  .faixa-relogio button {
    margin-left: 0;
    font-size: 11.5px;
    min-height: 32px;
  }
  .faixa-relogio button + button {
    margin-left: 14px;
  }

  /* ---------------------------------------------------------------- vistas */
  .tela {
    padding: 12px 12px 10px;
    min-height: 0;
  }
  .chapeu {
    margin-bottom: 10px;
    /* 🚨 A reserva do canto do sino (38px, ver estilo.css) NÃO vale aqui: no
       celular o sino saiu do canto flutuante e entrou na barra de cima. Manter a
       reserva roubaria 38px da largura do cabeçalho por nada — e no celular
       largura é o recurso mais escasso que existe. */
    padding-right: 0;
  }
  .chapeu h1 {
    font-size: 21px;
  }
  .chapeu p {
    font-size: 12px;
  }
  /* "ao vivo" e outros enfeites do cabeçalho não pagam a largura que custam. */
  .chapeu .direita .vivo {
    display: none;
  }

  /* ------------------------------------------- a PILHA do atendimento */
  .tres {
    display: block;
    position: relative;
  }
  /* Uma tela por vez. O painel escondido sai do fluxo, não fica "atrás":
     painel invisível ainda rolável embaixo do de cima faz a rolagem pular. */
  .tres > .painel {
    display: none;
    height: 100%;
  }
  .tres[data-etapa='fila'] > .painel:nth-child(1),
  .tres[data-etapa='conversa'] > .painel:nth-child(2),
  .tres[data-etapa='ficha'] > .painel:nth-child(3) {
    display: flex;
  }
  /* A regra velha de 860px escondia painel irmão com `+ .painel`; aqui a pilha
     manda, e ela precisa poder mostrar o segundo e o terceiro. */
  .tres .painel + .painel {
    display: none;
  }
  .tres[data-etapa='conversa'] > .painel:nth-child(2),
  .tres[data-etapa='ficha'] > .painel:nth-child(3) {
    display: flex;
  }

  /* ------------------------------------------------------- fila e composer */
  .fila-topo {
    padding: 12px 13px 10px;
  }
  .fila-atalhos .bt,
  .busca-linha .funil,
  .busca input {
    min-height: 44px;
  }
  /* As abas de situação em CARROSSEL: no celular elas não quebram em duas
     fileiras, deslizam. A fileira que quebra empurra a fila para baixo justo na
     tela onde sobra menos altura. */
  .abas-fila {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 16px;
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
  }
  .abas-fila::-webkit-scrollbar {
    display: none;
  }
  .aba-fila {
    flex: none;
    font-size: 13.5px;
    padding-bottom: 8px;
  }
  .aba-fila.discreta {
    font-size: 13px;
  }
  /* A dica de teclado é de quem tem teclado. */
  .pele-teclas {
    display: none;
  }
  .item {
    padding: 13px 14px;
  }
  .item .l1 b {
    font-size: 15px;
  }

  /* O composer: alvo grande e o traço do iPhone respeitado. */
  .compositor {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .campo {
    gap: 6px;
    padding: 6px 8px;
  }
  /* 16px no campo de texto não é gosto: abaixo disso o Safari DÁ ZOOM na página
     ao focar, e a tela toda entorta. */
  .campo textarea,
  .campo-texto,
  .busca input,
  select.campo-texto {
    font-size: 16px;
  }
  .ic-fantasma {
    width: 44px;
    height: 44px;
  }
  .ic-fantasma svg {
    width: 21px;
    height: 21px;
  }
  #bt-enviar {
    min-height: 44px;
  }
  .pop-rapidas {
    width: min(300px, calc(100vw - 32px));
    right: -6px;
  }
  .micbar {
    padding: 10px;
  }
  .micbar .bt {
    min-height: 40px;
  }
  .fio {
    padding: 12px;
  }
  .bolha {
    max-width: 88%;
  }

  /* ----------------------------------------------- folhas de tela cheia */
  /* Gaveta, filtros e menu "mais" viram FOLHA que sobe do pé da tela. É o
     gesto que o celular ensinou a todo mundo, e caber tudo é mais importante
     que centralizar bonito. */
  .gaveta {
    padding: 0;
    place-items: end stretch;
  }
  .gaveta .cartao {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gaveta .cartao footer {
    position: sticky;
    bottom: 0;
    background: var(--papel);
  }
  .gaveta .cartao footer .bt {
    min-height: 46px;
    flex: 1;
    justify-content: center;
  }

  .fila-filtros {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 78dvh;
    overflow: auto;
    z-index: 60;
    border-radius: 16px 16px 0 0;
    margin: 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(20, 16, 10, 0.28);
  }
  .cx {
    min-height: 44px;
    font-size: 14px;
  }
  .cx input {
    width: 20px;
    height: 20px;
  }
  .grupo-filtro .cxs {
    gap: 2px 18px;
  }

  .gaveta-sino {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-height: 80dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .notif {
    min-height: 52px;
  }

  /* O menu "mais": o chassi inteiro numa folha. */
  .folha-menu {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--tinta);
    border-radius: 16px 16px 0 0;
    max-height: 82dvh;
    overflow: auto;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 44px rgba(4, 7, 9, 0.5);
  }
  .folha-menu .nav {
    padding: 0;
    overflow: visible;
  }
  .folha-menu .nav button {
    min-height: 48px;
    font-size: 15px;
  }
  .folha-menu .cab {
    color: var(--tinta-txt2);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 11px 10px;
  }
  .veu {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 13, 0.5);
    z-index: 55;
  }

  /* -------------------------------------------------- tabelas viram cartões */
  /* Tabela de 5 colunas num celular é rolagem lateral e ninguém acha nada. Cada
     linha vira um cartão com o RÓTULO antes do dado — sem o rótulo, "18/07" e
     "3" soltos num cartão não querem dizer nada.
     Quem estampa o rótulo em cada célula é o `celular.js`, copiando do `thead`:
     assim vale para as tabelas que existem e para as que vierem, sem repetir o
     nome da coluna em dois lugares. */
  .rolo table thead {
    display: none;
  }
  .rolo table,
  .rolo table tbody,
  .rolo table tr,
  .rolo table td {
    display: block;
    width: auto;
  }
  .rolo table tr {
    background: var(--papel);
    border: 1px solid var(--linha2);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 9px;
  }
  .rolo table td {
    border: 0;
    padding: 3px 0;
    text-align: left !important;
  }
  .rolo table td[data-rotulo]:not(:empty)::before {
    content: attr(data-rotulo) ': ';
    color: var(--aco);
    font-size: 11.5px;
    font-weight: 600;
  }
  .rolo table td:first-child {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 3px;
  }
  /* A coluna dos botões perde o rótulo e vira a fileira de ações do cartão. */
  .rolo table td:last-child:has(.bt) {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .rolo table td .bt {
    min-height: 40px;
  }

  .kpis {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .kpi .v {
    font-size: 24px;
  }
  .interno {
    grid-template-columns: 1fr;
  }
  .pessoa-cartao {
    min-height: 44px;
  }
  .versao-rodape {
    display: none;
  }
}

/* Tela curta e deitada (celular de lado): a barra de baixo come altura demais
   quando sobram 380px de tela. Ela encolhe, não desaparece. */
@media (max-width: 900px) and (max-height: 460px) {
  .barra-celular button {
    min-height: 44px;
    font-size: 0;
    gap: 0;
  }
  .barra-celular button svg {
    width: 20px;
    height: 20px;
  }
  .barra-celular .badge {
    font-size: 9px;
    top: 3px;
  }
}