/*
 * Celular: o que o painel faz de diferente no toque (GUIA §10). Carregue por último, depois do ia.css; o que é de uma
 * tela ou módulo só fica no CSS dela. Nasceu no dealer-portal (src/styles/celular.css), onde também estão os exemplos
 * de tela (Início com ações de um toque, ficha de veículo como anúncio, contatos com ligar e WhatsApp).
 * Comportamento em react/celular/: teclado.ts (data-teclado), puxar.ts, Conexao.tsx, instalar.ts, imagem.ts,
 * compartilhar.ts, gestos.ts, adiantar.ts.
 */

/* ═════════ toque ═════════ */

/* sem o quadrado cinza do toque do Safari: a resposta é o :active de cada peça */
html { -webkit-tap-highlight-color: transparent; }
/* toque duplo não aproxima em botão, link e controle: o toque vira clique na hora */
a, button, label, summary, select, [role='button'], [role='tab'], [role='switch'] { touch-action: manipulation; }

@media (hover: none) and (pointer: coarse) {
  /* cartão que é link afunda um pouco sob o dedo, como botão */
  .ui-cartao--interativo:active { transform: scale(0.985); transition-duration: var(--t-1); }
  .atalho:active, .painel-nav-item:active, .busca-item:active { background: var(--int-suave); }

  /* campos com 16 px: abaixo disso o iPhone aproxima a tela ao focar e não volta sozinho */
  :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea) { font-size: 16px; }
  .busca-campo input { font-size: var(--fs-18); }
}

/* ═════════ bordas do aparelho (app na tela inicial, iPhone com recorte) ═════════ */

@media (max-width: 599px) {
  /* instalado na tela inicial (status bar translúcida), a barra de status fica por cima: o topo desce o que ela ocupa */
  .painel-topo { padding-top: max(10px, env(safe-area-inset-top)); }
  .painel-area > .painel-faixa:first-child { padding-top: max(9px, env(safe-area-inset-top)); }
  .painel-area > .painel-faixa:first-child ~ .painel-topo { padding-top: 10px; }
  .painel-topo[data-recolhido='true'] { transform: translateY(-100%); }

  /* folhas e gavetas: nunca atrás da barra de status nem do risco do iPhone */
  .ui-folha, .ui-dialogo { max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + 12px)); }
  .ui-folha > :last-child, .ui-dialogo > :last-child { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .ui-folha .ui-dialogo-corpo, .ui-dialogo .ui-dialogo-corpo { overscroll-behavior: contain; }

  /* o rodapé da página sai: a doca cobre o fim da tela e a assinatura mora no fim do menu (.painel-folha-assinatura) */
  .painel-rodape { display: none; }
  .painel-conteudo { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }

  /* tela de entrar (Showroom) */
  .entrar:not(.showroom-secao) .entrar-conteudo { min-height: 100dvh; padding-top: max(20px, env(safe-area-inset-top) + 8px); }
}

.painel-folha-assinatura { display: none; }
@media (max-width: 599px) {
  .painel-folha-assinatura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 16px 4px 4px;
    border-top: 1px solid var(--ln);
    color: var(--tx-3);
    font-size: var(--fs-12);
  }
  .painel-folha-assinatura .painel-rodape-marca { width: 132px; }
}

/* ═════════ teclado aberto (react/celular/teclado.ts marca data-teclado no <html>) ═════════ */

/* a doca e o botão flutuante descem para fora da tela; no Android eles subiriam com o teclado e cobririam o campo */
.painel-doca { transition: left var(--t-4) var(--mola-firme), right var(--t-4) var(--mola-firme), padding var(--t-4) var(--mola-firme), transform var(--t-camada) var(--mola-suave), opacity var(--t-3) var(--saida); }
.ui-fab { transition: padding var(--t-4) var(--mola-firme), gap var(--t-4) var(--mola-firme), bottom var(--t-4) var(--mola-firme), transform var(--t-camada) var(--mola-suave), opacity var(--t-3) var(--saida); }
.ui-fab:active { transform: scale(0.96); transition-duration: var(--t-1); }
html[data-teclado] .painel-doca,
html[data-teclado] .ui-fab {
  transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-sai) var(--recolher), opacity var(--t-sai) ease;
}
@media (max-width: 599px) {
  html[data-teclado] .barra-salvar { bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* ═════════ alvos pequenos do kit, no toque ═════════ */
@media (pointer: coarse) {
  /* interruptor: o dedo acerta num alvo de 44 px (o desenho continua o mesmo), e o texto ao lado também liga */
  .ui-interruptor { position: relative; }
  .ui-interruptor::before { content: ''; position: absolute; inset: -10px -6px; }
  .ui-linha-interruptor-texto { cursor: pointer; }
}
@media (max-width: 599px) {
  /* o avatar do topo é o menu da conta: alvo de 44 px */
  .painel-avatar { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .painel-busca { flex-basis: 44px; width: 44px; height: 44px; }
}

/* ═════════ conexão e puxar para atualizar (react/celular/Conexao.tsx, puxar.ts) ═════════ */

/* sem sinal: pílula de vidro no topo, entra descendo 8 px e sai esmaecendo (GUIA §8) */
.conexao {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  top: calc(max(10px, env(safe-area-inset-top)) + 64px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--tx);
  transition: transform var(--t-camada) var(--mola-suave), opacity var(--t-3) var(--saida);
}
@starting-style { .conexao { opacity: 0; transform: translate(-50%, -8px) scale(0.97); } }
.conexao[data-saindo] { opacity: 0; transform: translate(-50%, -4px) scale(0.98); transition: transform var(--t-sai) var(--recolher), opacity var(--t-sai) ease; }
.conexao svg { flex: none; }
.conexao[data-estado='fora'] svg { color: var(--aviso); }
.conexao[data-estado='ok'] svg { color: var(--ok); }

/* puxar para atualizar: a linha de luz acende da esquerda conforme o dedo desce; soltando cheia, corre como a de
   "abrindo" (keyframes do app: uma escala de 0 a 1 que esmaece no fim) */
.puxar {
  position: fixed;
  z-index: calc(var(--z-toast) + 1);
  left: 0;
  right: 0;
  top: env(safe-area-inset-top);
  height: 2px;
  background: var(--nucleo);
  box-shadow: 0 0 10px var(--brilho);
  transform-origin: left;
  transform: scaleX(var(--puxado, 0));
  opacity: min(1, calc(var(--puxado, 0) * 3));
  pointer-events: none;
}
.puxar[data-atualizando] { opacity: 1; animation: puxar-corre 1.1s var(--saida) infinite; }
@keyframes puxar-corre { from { transform: scaleX(0); opacity: 1; } 80% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }