/* ============================================================================ * mobile-adaptive.css — camada final de USABILIDADE no celular e no tablet. * ---------------------------------------------------------------------------- * Carregado por ULTIMO no (depois de mobile-responsive.css). * REGRA: tudo aqui vive dentro de @media (telas <= 900px), então o layout de * desktop não muda em nada. * * Conserta três causas reais do "site fica gigante e não dá para clicar": * 1. 100vh no iOS/Android inclui a área coberta pela barra do navegador, * então o rodapé e os botões de baixo ficavam fora da tela. * 2. Campo com fonte < 16px faz o Safari/Chrome do celular dar ZOOM * automático ao tocar — a página "cresce" e o usuário se perde. * 3. Ícones/botões pequenos (16-29px) são impossíveis de acertar com o dedo, * e elementos decorativos mais largos que a tela deixavam arrastar de lado. * ========================================================================== */ /* --------------------------------------------------------------------------- * 1. ALTURA REAL DA TELA (barra do navegador não corta mais o rodapé) * ------------------------------------------------------------------------- */ @supports (height: 100dvh) { @media (max-width: 900px) { body, .app, .sidebar, .auth-overlay, .main-content, .page-wrapper, .page, #page-tts, .studio-portal { height: 100dvh; max-height: 100dvh; } html, body { overflow-x: hidden; } } } /* Reserva o espaço da barra inferior do iPhone (gesto/home) e da superior. */ @media (max-width: 900px) { .app, .main-content, .page-wrapper { padding-bottom: env(safe-area-inset-bottom, 0px); } .topbar, .topbar-inner { padding-top: env(safe-area-inset-top, 0px); } } /* --------------------------------------------------------------------------- * 2. MATA O ZOOM AUTOMÁTICO DO CELULAR (fonte mínima de 16px nos campos) * ------------------------------------------------------------------------- */ @media (max-width: 900px) { input, select, textarea, [contenteditable="true"] { font-size: 16px !important; line-height: 1.35; } /* campos de busca e nomes curtos não precisam parecer enormes por causa disso */ input::placeholder, textarea::placeholder { font-size: 14px; } /* rótulos e textos auxiliares seguem o tamanho normal do app */ label, .hint, .field-hint, small { font-size: 12.5px; } } /* --------------------------------------------------------------------------- * 3. ALVOS DE TOQUE CONFORTÁVEIS (mínimo 44px, padrão de acessibilidade) * ------------------------------------------------------------------------- */ @media (max-width: 900px) { .btn, .btn-primary, .btn-secondary, button:not(.no-touch-target), .nav-item, .tab, .sidebar-item, .filter-chip, .chip { min-height: 44px; touch-action: manipulation; } /* ícones soltos de ação (menu, notificações, copiar, fechar…) */ .icon-btn, .icon-button, button > .material-icons-round, button > .material-symbols-outlined, .material-icons-round.action, .action-icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* o botão que abre o menu precisa estar sempre acessível e acima do conteúdo */ #mobile-menu-btn { position: relative; z-index: 60; min-width: 44px; min-height: 44px; } } /* --------------------------------------------------------------------------- * 4. NADA PODE ARRASTAR A TELA PARA O LADO * ------------------------------------------------------------------------- */ @media (max-width: 900px) { svg#fx-wires, .voice-vfx-image, [class*="vfx"]:not(.no-touch-target), .auth-orb, .wsc-flash { max-width: 100vw !important; overflow: hidden; pointer-events: none; } .page, .page-wrapper, .card, .panel, .section { max-width: 100%; overflow-x: hidden; } /* tabelas e blocos largos rolam DENTRO do próprio bloco, sem empurrar a página */ table, .table-wrap, pre, .code-block { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* --------------------------------------------------------------------------- * 5. ROLAGEM E ARRASTO FLUIDOS NO DEDO * ------------------------------------------------------------------------- */ @media (max-width: 900px) { .page-wrapper, .main-content, .sidebar-nav, .modal-body, .chat-messages { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } /* o menu lateral pode ser arrastado com o dedo */ .sidebar { touch-action: pan-y; } } /* --------------------------------------------------------------------------- * 6. GRIDS LARGOS COLAPSAM EM TELA PEQUENA (evita conteúdo espremido) * ------------------------------------------------------------------------- */ @media (max-width: 900px) { .plans-grid, .cards-grid, .card-grid, .features-grid, .providers-grid, .tu-grid, .gallery-grid { grid-template-columns: 1fr !important; } .two-columns, .layout-columns { grid-template-columns: 1fr !important; } } @media (min-width: 601px) and (max-width: 900px) { .plans-grid, .cards-grid, .card-grid, .features-grid, .providers-grid, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }