/* ============================================================================
 * mobile-fixes-pwa — correções para 17 bugs identificados em docs/mobile-audit.md
 * ----------------------------------------------------------------------------
 * Este arquivo é carregado por último (em public/index.html) e contém APENAS
 * media queries @media (max-width: 767px) e (max-width: 480px). Não toca em
 * regras de desktop. Cada bloco tem comentário com o ID do bug e a justificativa.
 *
 * Mapa de bugs (cross-ref docs/mobile-audit.md):
 *   C1+C2+C8+A6  — topbar com altura fixa vazando
 *   C3          — toast persistente bloqueando CTA
 *   C4          — textarea TTS não expande
 *   C5          — editor-footer "Limpar" cortado
 *   C6          — ícones quadrados colados + min 44x44px
 *   C7          — hamburger menu (drawer)
 *   A1          — history empty state
 *   A2+A3+A4    — plans / admin-only toggle
 *   M1+M2+M3    — scroll-padding, charts, BETA modal
 * ============================================================================ */

/* ===========================================================
 * GLOBAL — overflow-x: hidden para evitar scroll lateral
 * (defesa em profundidade caso algum filho vaze em < 768px)
 * =========================================================== */
html, body {
  /* Em mobile, garante que NENHUM elemento cause scroll horizontal */
  overflow-x: hidden;
  /* max-width: 100% em todos os filhos diretos do body para reforçar */
}
body > * {
  max-width: 100vw;
}

/* ===========================================================
 * C1+C2+C8+A6 — TOPBAR COM ALTURA FIXA (60px) VAZAVA
 * --------------------------------------------------------
 * Bug raiz: CSS:2130 (`.topbar { height: var(--topbar-h); }`)
 * é 60px fixo, mas conteúdo (5 pills + 4 buttons + credits)
 * não cabe em < 500px. O que quebrava para 2ª linha VAZAVA
 * sobre o <main> cobrindo título/input/textarea.
 *
 * Fix: trocar `height` por `min-height` em mobile, permitir
 * wrap, e dar z-index/position corretos.
 * =========================================================== */
@media (max-width: 767px) {
  .topbar {
    /* min-height em vez de height: o conteúdo pode crescer */
    min-height: 56px !important;
    height: auto !important;
    /* wrap já está setado no bloco @media existente, reforçamos aqui */
    flex-wrap: wrap;
    /* Garante que NADA do topbar vaze para o conteúdo */
    overflow: visible;
    /* Position relativa + z-index acima do <main> é crítico */
    position: relative !important;
    z-index: 50;
  }

  .topbar-left,
  .topbar-right {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .topbar-right {
    /* Permite quebrar e ocupar a segunda linha toda */
    width: 100%;
    justify-content: flex-start;
  }

  /* Provider pills — em mobile vira esteira horizontal com scroll
     (mais legível que empilhar vertical). Garante que o carrossel
     não cause overflow no body. */
  .provider-status-topbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 100%;
    /* Evita scroll snap agressivo */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* Limita a esteira e impede que empurre os outros botões */
    max-width: 100%;
  }
  .provider-status-topbar::-webkit-scrollbar {
    height: 2px;
  }
  .provider-status-topbar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
  }

  /* Esconde os labels "TOP VOZES" / "TUTORIAL" / "NOTIFICAÇÕES" em < 480px
     — só sobra o ícone, garantindo que os 3 botões caibam */
  .vh-topbar-label,
  .bonus-notification-btn span:last-child:not(.material-icons-round):not(.bonus-notification-count) {
    display: none !important;
  }

  /* Esconde o texto de credits em mobile muito pequeno, mantém só ícone */
  .topbar-credits {
    font-size: 0.85rem;
  }
  .topbar-credits #topbar-credits {
    /* Em < 380px esconde o número, deixa só o bolt icon */
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* CRÍTICO: garante que o <main> comece abaixo do topbar com respiro
     suficiente — o conteúdo nunca mais fica atrás da topbar */
  .main-content,
  .page-wrapper {
    padding-top: 4px !important;
  }
}

/* ===========================================================
 * C3 — TOAST PERSISTENTE BLOQUEANDO CTA
 * --------------------------------------------------------
 * Bug: toast aparecia no canto inferior direito e sobrepunha
 * o botão "Limpar Roteiro" (footer do editor TTS). Mobile não
 * tem como dispensar, e o container do toast capturava cliques.
 *
 * Fix: pointer-events: none no container (cliques passam), o
 * toast individual volta a ter pointer-events: auto, posição
 * central inferior respeitando safe-area-inset-bottom, e largura
 * total para leitura fácil.
 * =========================================================== */
.toast-container {
  /* Cliques passam através do container, mas cada toast ainda recebe */
  pointer-events: none;
}

.toast {
  /* Cada toast individual reativa o pointer (caso queira fechar no futuro) */
  pointer-events: auto;
}

@media (max-width: 767px) {
  .toast-container {
    /* Central inferior: menos chance de cobrir CTA do footer */
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  .toast {
    /* Toast ocupa largura quase total em mobile */
    max-width: none;
    width: 100%;
    /* Padding generoso + ícone acima do texto = leitura fácil */
    padding: 12px 16px;
    font-size: 0.88rem;
    border-radius: 10px;
  }
}

/* ===========================================================
 * C4 — TEXTAREA TTS NÃO EXPANDE EM MOBILE
 * --------------------------------------------------------
 * Bug: textarea com `flex: 1` mas o container `.tts-editor`
 * em < 768px não dava `min-height`, então ficava ~140px e a
 * metade inferior da tela ficava vazia (settings panel
 * forçava scroll).
 *
 * Fix: garantir min-height no editor + textarea em mobile,
 * e que o .tts-layout permita scroll vertical interno.
 * =========================================================== */
@media (max-width: 767px) {
  .tts-layout {
    /* Permite scroll vertical dentro do editor quando textarea
       é menor que o conteúdo total (settings panel em baixo) */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .tts-editor {
    /* Garante que o editor TTS ocupe pelo menos a altura útil
       menos o settings panel (que vira ~50vh em mobile) */
    min-height: calc(100vh - 56px - 50vh) !important;
    /* Border-right do desktop some */
    border-right: none !important;
  }

  .editor-area textarea {
    /* Em mobile, textarea tem min-height para não ficar anã */
    min-height: 220px;
    padding: 16px;
    font-size: 1rem;
  }
}

/* ===========================================================
 * C5 — EDITOR FOOTER (char count + Limpar + Gerar) CORTADO
 * --------------------------------------------------------
 * Bug: em 320px o char count (5+ elementos inline) colava com
 * "Limpar Roteiro" e "Gerar áudio". O "Limpar" saía pela borda
 * direita e "100.000" (créditos disponíveis) ficava atrás do
 * botão.
 *
 * Fix: em < 480px, o footer empilha em 2 linhas (info + ações),
 * cada bloco ocupa 100%, "Gerar áudio" vira full-width.
 * =========================================================== */
@media (max-width: 480px) {
  .editor-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 12px;
  }
  .char-count {
    /* Permite wrap dos 5+ elementos do char count */
    flex-wrap: wrap;
    font-size: 0.78rem;
    row-gap: 4px;
    justify-content: flex-start;
  }
  .editor-actions {
    /* Empilha Limpar + Gerar em coluna, ambos full-width */
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 8px;
  }
  .editor-actions .btn-clear-script,
  .editor-actions .btn-generate {
    width: 100% !important;
    justify-content: center;
  }
}

/* ===========================================================
 * C6 — ÍCONES QUADRADOS COLADOS + MIN 44x44
 * --------------------------------------------------------
 * Bug: 3 botões do Video Hub (TOP VOZES, TUTORIAL, NOTIFICAÇÕES)
 * em mobile tinham `height: 38px` (CSS:13214) < mínimo Apple
 * HIG 44x44px. Os badges de notificação ainda sobrepunham
 * filtros do history.
 *
 * Fix: min-height 44px + min-width 44px em todos os vh-topbar-btn,
 * gap 10px para não colar, e garante que bonus-notification-btn
 * também atinja o mínimo.
 * =========================================================== */
@media (max-width: 767px) {
  .vh-topbar-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    height: 44px;
    padding: 0 10px;
  }
  .bonus-notification-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    height: 44px;
    width: 44px;
  }
  .topbar-right {
    gap: 10px !important;
  }
}

/* ===========================================================
 * C7 — HAMBURGER MENU (drawer)
 * --------------------------------------------------------
 * Verificação manual/script: #mobile-menu-btn já tem
 * `display: flex` em < 768px (CSS:11442) e o app.js (linha
 * 1786) faz toggle de `.open` no sidebar. Confirmado
 * funcional. Reforço: z-index alto para sobrepor tudo,
 * e área de toque mínima 44x44.
 * =========================================================== */
@media (max-width: 767px) {
  #mobile-menu-btn {
    /* Mantém o que já existe + reforço de z-index e toque */
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 60;
    position: relative;
  }
  /* Garante que o backdrop bloqueia cliques em elementos atrás */
  .sidebar-backdrop {
    z-index: 199;
    /* Cursor pointer para feedback visual */
    cursor: pointer;
  }
}

/* ===========================================================
 * A1 — HISTORY EMPTY STATE
 * --------------------------------------------------------
 * Bug: "Nenhum item" aparecia no centro vertical, mas com
 * top do fold coberto pela topbar que vazava (C1 resolvido).
 * Agora garantimos padding-top + min-height adequado.
 * =========================================================== */
@media (max-width: 767px) {
  .history-layout,
  #page-history {
    padding-top: 8px;
  }
  .history-empty,
  .td-empty,
  .empty-state {
    min-height: calc(100vh - 200px) !important;
    padding: 24px 16px;
  }
}

/* ===========================================================
 * A2+A3 — API DASHBOARD BETA MODAL (cobre primeiro fold)
 * Plans indisponível
 * --------------------------------------------------------
 * Bug: api-dashboard abria com modal BETA ocupando o primeiro
 * fold em iPhone SE/12. A página tem link "Voltar ao app"
 * que em mobile embedded (iframe) já some. Adicionamos:
 *  - max-height + overflow-y no modal
 *  - padding-top suficiente no shell
 *  - fallback visível para plans
 * =========================================================== */
@media (max-width: 767px) {
  .apidash-shell {
    padding: 12px 12px 96px !important;
  }
  .apidash-beta-bg {
    /* Bg 100% opaco no mobile para o card "flutuar" sem mostrar conteudo atras */
    background: rgba(3, 3, 4, 0.97) !important;
    backdrop-filter: blur(10px) !important;
  }
  .apidash-beta-card {
    /* Garante que cabe na viewport e o botão fica acessível */
    max-height: 85vh !important;
    overflow-y: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    padding: 24px 18px 20px !important;
    /* Background opaco sólido (overrides gradient semi-transparente) */
    background-color: #161924 !important;
    background-image: none !important;
    border: 1px solid rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85) !important;
  }
  .apidash-beta-card h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
    color: #f3f4f6 !important;
  }
  .apidash-beta-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #c9c4d2 !important;
  }
  .apidash-beta-card .apidash-btn.primary {
    position: sticky;
    bottom: 0;
    background: #6d28d9 !important;
    width: 100%;
    margin-top: 12px;
  }
  .apidash-row {
    flex-direction: column;
    align-items: stretch !important;
  }
  .apidash-input,
  .apidash-select,
  .apidash-textarea {
    width: 100% !important;
    max-width: none !important;
  }
  .apidash-table {
    font-size: 0.82rem;
  }
  .apidash-table th,
  .apidash-table td {
    padding: 8px 6px;
  }
}

/* Plans page — fallback visível quando API falha */
@media (max-width: 767px) {
  #page-plans {
    padding: 12px;
  }
  .plans-error,
  .plans-fallback {
    text-align: center;
    padding: 32px 16px;
  }
}

/* ===========================================================
 * A4 — TOGGLE ADMIN-ONLY EM PLANS (público)
 * --------------------------------------------------------
 * Bug: toggle "Compra Online" (admin) aparecia em /plans
 * para todos os usuários.
 *
 * Fix: esconder elementos com `data-admin-only` (e a classe
 * `.admin-only-block` usada pelo admin-checkout-control) quando
 * o body não tem `data-is-admin`. O JS deve setar
 * body.dataset.isAdmin = 'true' em login admin.
 * =========================================================== */
body:not([data-is-admin="true"]) [data-admin-only],
body:not([data-is-admin="true"]) .admin-only-block {
  display: none !important;
}

/* ===========================================================
 * M1 — MY-ACCOUNT BOTÃO SALVAR CORTADO EM 390px
 * --------------------------------------------------------
 * Bug: botão "Salvar" no rodapé de my-account aparecia só
 * com o topo do gradiente visível.
 *
 * Fix: scroll-padding-bottom + padding-bottom no container
 * para o botão ter espaço.
 * =========================================================== */
@media (max-width: 767px) {
  html, body {
    scroll-padding-bottom: 96px;
  }
  #page-my-account,
  .my-account-layout,
  .my-account-page {
    padding-bottom: 96px !important;
  }
  .my-account-actions,
  .account-save-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #030304);
    padding: 12px;
    z-index: 10;
  }
}

/* ===========================================================
 * M2 — ADMIN CHARTS CANVAS SEM MIN-HEIGHT
 * --------------------------------------------------------
 * Bug: card "Consumo de Créditos" mostrava seletor + botão
 * "Atualizar Gráficos" mas o canvas em si ficava vazio/
 * pequeno em mobile.
 *
 * Fix: min-height no wrapper do chart + lazy-load via
 * width responsivo.
 * =========================================================== */
@media (max-width: 767px) {
  .chart-wrap,
  .admin-chart-wrap,
  .chart-container,
  canvas.chartjs-render-monitor {
    min-height: 220px !important;
    max-width: 100%;
  }
  /* Garante que canvas não vaze do card */
  canvas {
    max-width: 100% !important;
  }
}

/* ===========================================================
 * M3 — BETA MODAL PADDING
 * Já tratado em A2+A3.
 * =========================================================== */

/* ===========================================================
 * DEFESA EM PROFUNDIDADE — safe-area iOS (notch)
 * Aplica padding-bottom a containers fixos em mobile para
 * respeitar a barra de gestos do iOS.
 * =========================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .toast-container {
      bottom: max(12px, env(safe-area-inset-bottom));
    }
    .editor-footer {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}