/* Senhas Web — adaptações da página web/PWA sobre o css/app.css.
 * O app.css é CÓPIA FIEL do da extensão e não é tocado; tudo que é
 * específico da web (áreas seguras do celular, larguras pequenas,
 * comportamento de app instalado) vive só aqui, carregado depois. */

/* Sem "puxar para atualizar" nem encadeamento de rolagem: num cofre,
 * um gesto errado não pode recarregar a página e bloquear o app. */
html { overscroll-behavior: none; }
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  /* Respeita a área segura no topo (notch) sem empurrar o desenho. */
  padding-top: env(safe-area-inset-top, 0px);
}

/* Barras fixas inferiores acima da barra de gestos/home do celular. */
.bottombar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.selbar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* Faixa do modo captura abaixo da área segura. */
.capture-banner { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }

/* Campos com 16px no mínimo: abaixo disso o iOS dá zoom automático ao
 * focar. (Os .field do app.css já têm 16px; isto cobre os demais.) */
input, select, textarea { font-size: max(16px, 1em); }

/* Alvos de toque confortáveis no celular. */
.alpha-index span { padding: 1.5px 0; }

/* Telas estreitas (360–430px): o desenho é o mesmo, só respira melhor. */
@media (max-width: 430px) {
  .wrap { padding: 14px 12px 104px; }
  #view-list .wrap { padding-right: 30px; }
  h1.big { font-size: 30px; }
  .tile { padding: 12px; }
  .tile .name { font-size: 16px; }
  .code-num { font-size: 19px; letter-spacing: 1px; }
  .code-card { padding: 12px 13px; gap: 10px; }
  .selbar .inner { gap: 8px; padding: 9px 10px; }
  .selbar .pill-btn { padding: 8px 11px; font-size: 13.5px; }
  .menu-pop { min-width: 224px; right: 8px; }
  .dialog { padding: 18px; }
  .center-box { margin-top: 6vh; }
}

/* Desktop: o app.css já centraliza numa coluna de 560px; aqui só um
 * respiro vertical a mais para a página não "grudar" no topo. */
@media (min-width: 700px) {
  .center-box { margin-top: 12vh; }
}

/* Botões desabilitados durante chamadas da conta online. */
.wide-btn:disabled, .pill-btn:disabled { opacity: .55; pointer-events: none; }

/* Mensagem de status da tela da conta. */
#syncMsg { min-height: 20px; }