/* ===========================================================================
   JAM ON - CAMADA DE CELULAR E TABLET
   Compartilhado por jam-on-composicao-manual.html e jam/index.php.

   REGRA DESTE ARQUIVO: todo seletor comeca por .jm-mobile, que o jam-mobile.js
   poe no <html> SO em aparelho de toque. Sem essa classe nada aqui vale, e o
   desktop fica exatamente como estava - inclusive com a janela estreita, que
   antes caia nas media queries de celular das paginas e mudava o layout de
   quem esta no computador. Ha um teste (teste-mobile.js) que falha se algum
   seletor aqui escapar dessa regra.

   A escolha e PAISAGEM: a grade de compasso e larga por natureza (um compasso
   = 8 celulas por faixa), e em pe nao ha largura para ela. Em pe aparece o
   convite para virar o aparelho; deitado, o layout se compacta no vertical,
   que e o que falta nessa posicao.
   ======================================================================== */

/* --- base: area segura (notch) e toque confortavel ----------------------
   O espaco do rodape fixo e MEDIDO pelo jam-mobile.js (--jm-footer-h). As
   paginas reservavam 200 e 210 px fixos: deitado, isso era quase a tela
   inteira, e em pe nao bastava quando os botoes quebravam em duas linhas. */
.jm-mobile body { padding-bottom: calc(var(--jm-footer-h, 150px) + 14px); }
.jm-mobile .main-studio { padding-bottom: calc(var(--jm-footer-h, 150px) + 14px); }

/* A margem do notch vai onde o conteudo realmente mora, e isso difere entre
   as duas paginas: o jam/index.php tem um app-shell (.main-studio) e a de
   composicao manual poe o conteudo direto no body. Dar padding lateral ao
   body do index.php desencaixaria o rodape, que e fixo e ignora esse padding
   - por isso o jam-mobile.js marca .jm-simples nas paginas sem app-shell. */
.jm-mobile .main-studio {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
}
.jm-mobile.jm-simples body {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
}
.jm-mobile .sticky-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
}

/* Alvo de toque: o dedo nao acerta um botao de 24 px. Minimo de 40 px. */
.jm-mobile button,
.jm-mobile select,
.jm-mobile .chip { min-height: 40px; }
.jm-mobile .chip {
    display: inline-flex; align-items: center;
    padding: 6px 12px; font-size: 0.85em;
}
/* Rolagem horizontal da grade sem arrastar a pagina inteira junto.
   Nao usar -webkit-overflow-scrolling: touch aqui: ele transforma o container
   num camada de rolagem propria do iOS e e um suspeito classico de engolir o
   toque dos filhos - e toque engolido nesta grade significa a tela de notas
   nao abrindo. A inercia ja e o padrao nos navegadores atuais. */
.jm-mobile .scroll-viewport { overscroll-behavior-x: contain; }
.jm-mobile { overflow-x: hidden; }

/* Sem isto o navegador espera ~300 ms (duplo toque para zoom) antes de
   entregar o toque na celula, e o site parece lento para responder. */
.jm-mobile .cell,
.jm-mobile .drum-cell,
.jm-mobile .chip { touch-action: manipulation; }

/* --- barra lateral (so existe no jam/index.php) -------------------------
   As paginas tiravam a lateral fixa so abaixo de 768 px. Um celular deitado
   tem 844 px e um tablet 1024: a lateral de 300 px voltava e o botao de menu
   desaparecia, comendo um terco da tela justamente na posicao de trabalho.
   Aqui isso passa a depender do APARELHO, nao da largura. */
.jm-mobile { --sidebar-width: 0px; }
.jm-mobile .sidebar {
    position: fixed; left: -100%; top: 0; height: 100%;
    width: 85%; max-width: 320px;
    transition: left 0.3s ease; z-index: 2500;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}
.jm-mobile .sidebar.open { left: 0; }
.jm-mobile .sidebar-toggle { display: flex; align-items: center; gap: 6px; }
.jm-mobile .sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.jm-mobile .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
.jm-mobile .sticky-footer { width: 100%; }
.jm-mobile .main-studio { padding-top: 55px; }

/* --- EM PE: cabe pouco, entao o essencial fica maior ------------------- */
@media (orientation: portrait) {
    .jm-mobile .controls-row { flex-wrap: wrap; }
    .jm-mobile .controls-row button { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .jm-mobile .modal-grid { grid-template-columns: repeat(3, 1fr); }
    .jm-mobile .instrument-select { max-width: 110px; }
}

/* --- DEITADO: a posicao de trabalho ------------------------------------
   Aqui a tela tem largura e falta ALTURA (um celular deitado tem ~390 px de
   altura). Tudo que e enfeite sai, e o que e grade fica. */
@media (orientation: landscape) {
    .jm-mobile {
        --cell-height-std: 30px;
        --cell-height-drum: 24px;
        --col-width: 36px;
        --total-col-width: 38px;
        --row-gap: 2px;
    }
    /* o titulo grande custa ~60 px de altura e nao ajuda a compor */
    .jm-mobile header,
    .jm-mobile h1 { display: none; }

    .jm-mobile .card { padding: 8px; margin-bottom: 10px; }
    .jm-mobile .track-container { margin-bottom: 8px; }
    .jm-mobile .track-header { padding: 4px 8px; gap: 6px; }
    .jm-mobile .track-title { font-size: 0.7em; min-width: 60px; }
    .jm-mobile .track-labels-col { width: 58px; }
    .jm-mobile .drum-row-label { font-size: 0.6em; padding-right: 5px; }
    .jm-mobile .vol-slider { width: 50px; }
    .jm-mobile .instrument-select { max-width: 120px; font-size: 0.72em; padding: 2px 4px; }

    /* rodape numa fita so, para nao roubar altura da grade */
    .jm-mobile .sticky-footer { padding: 6px 8px; gap: 4px; }
    .jm-mobile .controls-row { gap: 6px; flex-wrap: nowrap; }
    .jm-mobile .controls-row button { padding: 9px 4px; font-size: 0.74em; min-height: 40px; }
    .jm-mobile .btn-util { padding: 7px 4px; font-size: 0.7em; }
    .jm-mobile .btn-undo { padding: 6px; font-size: 0.72em; margin: 0; }

    /* painel de letra compacto: o campo cresce quando recebe o foco */
    .jm-mobile #vocalPanel { padding: 7px; margin-bottom: 10px; }
    .jm-mobile #vocalPanel .vp-linha { gap: 6px; margin-bottom: 5px; }
    .jm-mobile #letraInput { min-height: 40px; font-size: 0.85em; transition: min-height 0.15s; }
    .jm-mobile #letraInput:focus { min-height: 84px; }

    /* A linha de silabas fica grudada em cima das celulas de voz, e aqui a
       altura e preciosa: as etiquetas em no maximo 2 faixas de rolagem e a
       dica em no maximo 2 linhas, senao ela empurra as celulas para fora. */
    .jm-mobile #chipsRow { padding: 2px 0 4px; }
    .jm-mobile #chipsArea { max-height: 72px; overflow-y: auto; }
    .jm-mobile #vocalDica {
        font-size: 0.68em; margin-top: 3px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* janelas (seletor de nota, projetos): nunca mais altas que a tela */
    .jm-mobile .modal,
    .jm-mobile .pm-modal { max-height: 88vh; padding: 10px; }
    .jm-mobile .modal-grid { grid-template-columns: repeat(6, 1fr); gap: 5px; }
    .jm-mobile .modal-option { padding: 9px 4px; font-size: 0.8em; }
}

/* Telas curtas de verdade (celular deitado, ~360 a 420 px de altura). */
@media (orientation: landscape) and (max-height: 460px) {
    .jm-mobile {
        --cell-height-std: 26px;
        --cell-height-drum: 20px;
    }
    .jm-mobile .card { margin-bottom: 8px; }
    .jm-mobile #vocalPanel label { font-size: 0.72em; }
    .jm-mobile .modal-grid { grid-template-columns: repeat(8, 1fr); }
}

/* --- convite para virar o aparelho --------------------------------------
   Criado pelo jam-mobile.js (nao mexe no HTML das duas paginas). So aparece
   em pe, e e dispensavel: quem quiser ficar em pe continua usando o site. */
.jm-mobile #jmGirar {
    position: fixed; inset: 0; z-index: 4000;
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center;
    background: rgba(8, 10, 20, 0.96);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.jm-mobile.jm-retrato:not(.jm-girar-dispensado) #jmGirar { display: flex; }
.jm-mobile #jmGirar .jm-fone {
    width: 56px; height: 92px;
    border: 3px solid currentColor; border-radius: 10px;
    color: #5eead4;
    animation: jm-virar 2.2s ease-in-out infinite;
}
@keyframes jm-virar {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
}
.jm-mobile #jmGirar h2 { margin: 0; font-size: 1.1em; color: #5eead4; }
.jm-mobile #jmGirar p { margin: 0; max-width: 30em; font-size: 0.9em; line-height: 1.45; color: #cbd5e1; }
.jm-mobile #jmGirar button {
    flex: 0 0 auto; min-width: 180px; padding: 12px 18px;
    background: #5eead4; color: #000; border: none; border-radius: 8px;
    font-weight: bold; font-size: 0.95em;
}
.jm-mobile #jmGirar .jm-ignorar {
    background: none; color: #94a3b8; border: none;
    font-size: 0.82em; text-decoration: underline; min-width: 0; padding: 6px;
    font-weight: normal;
}
/* Sem suporte a virar sozinho (iPhone, por exemplo): o botao de tela cheia
   nao tem o que fazer, entao sai de cena e fica so o convite. */
.jm-mobile:not(.jm-pode-travar) #jmGirar .jm-tela-cheia { display: none; }