/* ============================================================================ * mobile-responsive.css — Camada final de responsividade (celular + tablet). * ---------------------------------------------------------------------------- * Carregado por ULTIMO no (depois de suno.css / minimax-tutorial.css / * top-users.css) para vencer a cascata das telas novas adicionadas apos o * mobile-fixes.css original. * * REGRA DE OURO: TODAS as regras aqui ficam dentro de @media (telas <= X). * Isso garante que o layout DESKTOP nao muda em nada — apenas celular/tablet * recebem os ajustes. Complementa (nao substitui) o mobile-fixes.css. * * Alvos: * - Tela Suno / Minimax Music (#page-suno-music): grid fixo 300px que * nao rolava e cortava conteudo no celular. * - Modais novos (top-users .tu-*, tutorial .mmtut-*): seguranca de altura. * - Alvos de toque (44px) para botoes novos. * - Guarda contra overflow horizontal das secoes novas. * ============================================================================ */ /* ===================================================================== * TABLET (<= 1024px) — colapsos preventivos de grids largos * ===================================================================== */ @media (max-width: 1024px) { /* Suno em tablet retrato: coluna de criacao mais estreita para sobrar espaco util ao workspace (o colapso total vem no bloco <= 900px). */ .suno-layout { grid-template-columns: 260px 1fr; } } /* ===================================================================== * TELA SUNO / MINIMAX MUSIC (<= 900px) — alinhado ao breakpoint do suno.css * -------------------------------------------------------------------- * Bug: #page-suno-music tem height:100% (fixo). Quando o suno.css colapsa * o .suno-layout para height:auto no mobile, o container-pai continuava * travado em 100% e CORTAVA o conteudo (usuario nao conseguia rolar nem * selecionar). Aqui liberamos a altura para o .page-wrapper rolar tudo. * ===================================================================== */ @media (max-width: 900px) { /* Deixa a pagina crescer conforme o conteudo -> .page-wrapper rola. */ #page-suno-music { height: auto !important; min-height: 100%; overflow: visible !important; } .suno-layout { grid-template-columns: 1fr !important; height: auto !important; overflow: visible !important; /* Espaco para o player fixo no rodape nao cobrir o ultimo conteudo. */ padding-bottom: 88px; } /* Coluna de criacao: sem borda lateral e sem scroll proprio (flui na pagina). */ .suno-creator { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07); overflow-y: visible !important; padding: 16px 14px 20px; } /* Workspace/historico: cresce com o conteudo em vez de altura fixa de 50vh. */ .suno-workspace { height: auto !important; min-height: 42vh; overflow: visible !important; } /* Lista de faixas flui na rolagem da pagina (sem scroll aninhado curto). */ .suno-track-list { overflow-y: visible !important; } /* Header/filtros do workspace podem quebrar em duas linhas. */ .suno-workspace-header { flex-wrap: wrap; padding: 12px 16px; gap: 8px; } .suno-workspace-search { margin-left: 0; min-width: 0; flex: 1 1 100%; } /* Player global fixo no rodape (respeitando safe-area do iOS). */ .suno-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; height: auto; min-height: 64px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 10px; } /* Em tela estreita o bloco de volume rouba muito espaco: esconde. */ .suno-player-volume { display: none; } .suno-player-info { min-width: 90px; max-width: 42vw; } } /* ===================================================================== * CELULAR / TABLET RETRATO (<= 768px) — polimento geral das telas novas * ===================================================================== */ @media (max-width: 768px) { /* --- Guarda contra scroll horizontal vindo das secoes novas --- */ .suno-layout, .suno-creator, .suno-workspace, .suno-workspace-header, .suno-workspace-filters { max-width: 100%; } /* --- Alvos de toque (Apple HIG 44px) para botoes novos --- */ .suno-tab-btn, .suno-filter-btn, .suno-audio-btn, .suno-vocal-btn { min-height: 40px; } .suno-create-btn { min-height: 48px; } .suno-track-action-btn, .suno-player-btn { min-width: 40px; min-height: 40px; } /* Botoes de topbar das features novas: mesmo minimo dos demais. */ .tu-topbar-btn, .minimax-tutorial-trigger { min-height: 40px; } /* --- Modal TOP USER (.tu-*): garante que cabe e rola --- */ .tu-box { width: calc(100vw - 20px) !important; max-height: 88vh; } .tu-header { padding: 14px 16px; } .tu-title { font-size: 17px; } .tu-tabs { padding: 12px 14px 0; flex-wrap: wrap; } .tu-comments, .tu-body { padding-left: 14px; padding-right: 14px; } /* Linha do ranking: numeros de credito nao espremem o nome. */ .tu-item { grid-template-columns: 34px 30px 1fr auto; gap: 8px; padding: 9px 10px; } .tu-close { min-width: 44px; min-height: 44px; } /* --- Tutorial Minimax (.mmtut-*): seguranca de altura em telas baixas --- */ .mmtut-card { max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mmtut-slides { min-height: 220px; } .mmtut-btn-prev, .mmtut-btn-next { min-height: 44px; } } /* ===================================================================== * CELULAR PEQUENO (<= 480px) — compactacoes finais * ===================================================================== */ @media (max-width: 480px) { /* Suno: abas e chips um pouco menores para caber sem overflow. */ .suno-tab-btn { font-size: 11px; padding: 8px 4px; } .suno-creator { padding: 14px 12px 18px; } .suno-workspace-filters { padding: 10px 14px; gap: 6px; } /* Player: nome/estilo ocupam menos, priorizando os controles. */ .suno-player-info { max-width: 38vw; } /* TOP USER: cabecalho e abas empilham confortavelmente. */ .tu-header-left { gap: 8px; } .tu-fire { font-size: 24px; } .tu-tab { font-size: 12.5px; padding: 9px 8px; } }