/* Celular e tablet (25/10/2026): sem zoom sozinho, sem rolagem para o lado, bordas do iPhone e o encaixe das telas.
   Carregado pelo layout.php depois do app.css (e do admin.css); as folhas de cada página vêm depois, então aqui as
   regras que precisam vencer usam um seletor um pouco mais forte. Só layout: nenhuma ferramenta muda de formato. */

/* ---------- zoom e toque ---------- */
/* toque duplo e pinça não dão zoom (pan-x pan-y = rolar sim, zoom não); o manipulation fica para o Safari antigo */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; touch-action: pan-x pan-y; }
/* nada passa da largura da tela: o que vazar é cortado em vez de criar rolagem para o lado (clip não quebra o sticky) */
html, body { overflow-x: clip; }

/* o iPhone dá zoom ao tocar num campo com letra menor que 16 px: no celular e no tablet todo campo tem 16 px */
@media (max-width: 900px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
  select, textarea { font-size: 16px !important; }
  button, a, label, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
}

/* ---------- bordas do iPhone (viewport-fit=cover): entalhe na horizontal e a barrinha de baixo ---------- */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.appnav { padding-left: env(safe-area-inset-left, 0px); }
.appnav-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.toasts { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.composer-wrap { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.prompt-wrap { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) {
  .prompt-wrap { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
  .has-shell .prompt-wrap, .has-shell .tool-page .prompt-wrap { left: max(8px, env(safe-area-inset-left, 0px)); }
}

/* ---------- Studio (Imagem, Vídeo, Áudio, Editor): barra de cima em duas linhas ---------- */
/* 1ª linha: ferramenta, projeto, tema, créditos e ☰; 2ª: baixar, compartilhar, busca e enviar */
@media (max-width: 720px) {
  .tool-page .topbar .project-switch { flex: 1 1 0; min-width: 0; }
  .tool-page .topbar .project-switch .select { width: 100%; max-width: none; min-width: 0; text-overflow: ellipsis; }
  .studio #btn-upload { order: 21; padding: 8px 12px; }
}

/* página de vendas: a barra "Começar grátis" de baixo fica acima da barrinha do iPhone */
@media (max-width: 720px) { .lp-sticky { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- menus, popovers e janelas ---------- */
/* menu de opções (showMenu, api.js): nunca mais largo que a tela; o texto longo quebra a linha */
.menu { max-width: calc(100vw - 16px); }
.menu button { white-space: normal; }
/* selo dentro do botão lima (ex.: "6 livre(s)" nas Estações): texto escuro sobre o lima, não sobre o cinza */
.btn-primary .tag { background: rgba(0, 0, 0, .14); border-color: rgba(0, 0, 0, .18); color: inherit; }
@media (max-width: 720px) {
  /* popovers da barra do Studio (formato, modelo, voz): a largura toda da barra, em vez de 300 px encostados na direita */
  .prompt-wrap .popover { align-self: stretch; width: auto; max-width: 760px; left: 0; right: 0; }
  .prompt-wrap .popover .btn, .prompt-wrap .popover button { min-width: 0; }
  /* abas dentro das janelas: uma linha só (rolam para o lado) e os botões do rodapé descem em vez de vazar */
  .modal-box .tabs button, .modal-box .tabs a { white-space: nowrap; flex-shrink: 0; }
  .modal-foot { flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { white-space: normal; text-align: center; }
  /* Admin → Gastos: os períodos rolam para o lado em vez de passar da tela */
  .inline-tabs { display: flex; margin: 8px 0 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  /* tabelas do Admin rolam por dentro: colunas com largura mínima para o texto não virar uma palavra por linha */
  body.page-admin .table th:not(:first-child), body.page-admin .table td:not(:first-child) { min-width: 104px; }
  body.page-admin .table { overscroll-behavior-x: contain; }
}

/* painéis e tabelas comuns (Minha conta, Planos): menos borda no celular para a tabela caber sem rolar para o lado */
@media (max-width: 560px) {
  .panel { padding: 16px 14px; border-radius: 16px; }
  .table th, .table td { padding: 8px 4px; }
  .table .btn-small { padding: 6px 9px; }
  .table .admin-actions { flex-direction: column; align-items: stretch; }
}

/* janelas de tela cheia (foto aberta, Ctrl+K do Admin): a altura que se vê no celular, sem a parte atrás da barra do navegador */
.modal, .modal-lightbox .lb, .adm-cmdk { height: 100vh; height: 100dvh; }
.lb-media img, .lb-media video { max-height: calc(100dvh - 96px); }
@media (max-width: 900px) { .lb-side { max-height: 40dvh; } }

/* galeria no celular: os botões do card ficam sempre à vista no alto, então o selo "Enviada" desce para o canto de baixo */
@media (max-width: 720px) { .card-tag-up { top: auto; bottom: 8px; } }

/* ---------- Chat IA: a caixa de mensagem cabe em 360 px com o nome do modelo à vista ---------- */
@media (max-width: 600px) {
  .composer-wrap { padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer { padding: 10px 10px 8px; border-radius: 20px; }
  .chat .composer-row { gap: 4px; }
  .chat .model-btn { flex: 0 1 auto; min-width: 64px; padding: 6px 9px; gap: 6px; }
}