/* Algoraver — Responsive overrides
 * Loaded after style.css. Three breakpoints: tablet (<=1024), mobile (<=768), small (<=480).
 * Strategy: keep desktop layout untouched, progressively compact for smaller screens.
 */

/* ---------- Universal hardening (apply at all sizes) ---------- */

/* Prevent iOS auto-zoom on focused inputs (font < 16px triggers zoom) */
input, select, textarea {
    font-size: 16px;
}

/* Allow content to break long horizontal flows */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Tap-friendly hit areas on critical interactive elements (≥36px on mobile) */
@media (hover: none) and (pointer: coarse) {
    .btn, button, .toolbar-group .btn { min-height: 36px; }
    .btn-tap, .btn-record, .btn-session-rec, .btn-perform, .btn-logout { min-height: 36px; }
}

/* ---------- Tablet — <= 1024px ---------- */
@media (max-width: 1024px) {
    .container { padding: 8px; }
    header { gap: 8px; }
    .header-left, .header-center, .header-right { gap: 6px; }
    .title { font-size: 16px; }
    .bpm-input { width: 48px; }
    .master-gain-slider { max-width: 80px; }
    .shortcut-hint { display: none; }
}

/* ---------- Mobile — <= 768px ---------- */
@media (max-width: 768px) {
    /* HEADER — let it wrap and split into two rows */
    header {
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 6px;
        padding: 6px 8px;
    }
    .header-left {
        flex: 1 1 100%;
        order: 1;
        justify-content: space-between;
    }
    .header-center {
        flex: 1 1 60%;
        order: 3;
    }
    .header-right {
        flex: 1 1 100%;
        order: 2;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .title { font-size: 18px; letter-spacing: 1px; }
    .bpm-control { gap: 4px; }
    .bpm-input { width: 44px; padding: 2px 4px; }
    .bpm-label { display: none; }
    .key-display { gap: 4px; flex-wrap: wrap; }
    .key-label { display: none; }
    .key-select { font-size: 14px; padding: 2px 4px; }
    .master-gain-wrap { flex: 1 1 auto; min-width: 100px; }
    .master-label { display: none; }
    .master-gain-slider { max-width: 100%; flex: 1; }
    .status-text { display: none; }
    /* Less critical mobile features hidden — keep core flow */
    .btn-perform, .btn-session-rec { display: none; }
    .btn-record, .btn-logout { padding: 4px 8px; font-size: 11px; }

    /* MAIN container */
    main { padding: 0 4px; }

    /* BLOCKS — full width, allow internal horizontal scroll for code */
    #blocks-container { padding: 0; }
    .block, .block-container, [class*="block-wrap"] {
        width: 100% !important;
        max-width: 100vw;
        margin: 6px 0;
    }
    .block-header, [class*="block-header"], [class*="track-header"] {
        flex-wrap: wrap;
        gap: 4px;
    }
    /* CodeMirror editor */
    .cm-editor, .cm-content { font-size: 13px !important; }
    .cm-scroller { overflow-x: auto; }

    /* TOOLBAR — stack rows, allow wrapping inside groups */
    .toolbar { padding: 4px; }
    .toolbar-row { flex-wrap: wrap; gap: 4px; }
    .toolbar-group { flex-wrap: wrap; gap: 4px; padding: 4px; }
    .toolbar-group-labeled { flex: 1 1 auto; min-width: 0; }
    .toolbar-group-tag { font-size: 10px; }
    .toolbar-fill { display: none; } /* spacer not useful when wrapping */
    .toolbar-sep { display: none; }
    /* Smaller buttons in mobile toolbar */
    .toolbar .btn { font-size: 11px; padding: 4px 8px; }
    /* Hide the EXPERT/BEGINNER toggle on mobile — saves space, expert is default */
    .btn-mode-toggle { display: none; }

    /* MODALS — fit screen */
    .onboarding-modal,
    .onboarding-content,
    .producer-panel,
    .audition-panel,
    .coach-panel,
    .chopper-panel,
    .snippets-panel,
    .scenes-panel,
    .mixer-panel,
    .glossary-panel,
    .preset-manager,
    .loop-builder-panel,
    .timeline-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto;
    }

    /* Onboarding buttons stack on small screens */
    .onboarding-actions { flex-wrap: wrap; gap: 8px; }
    .onboarding-actions .btn { flex: 1 1 auto; min-width: 80px; }

    /* STATUS BAR — compact */
    .status-bar { padding: 4px; gap: 4px; flex-wrap: wrap; }
    .status-bar .shortcut-hint { display: none; }

    /* SUGGESTION BAR */
    .suggestion-bar { flex-wrap: wrap; padding: 6px; }

    /* Reduce CRT effects intensity on mobile (they were sized for desktop monitors) */
    .crt-vignette { background: none; }
    .crt-curve { box-shadow: none; }
}

/* ---------- Small mobile — <= 480px ---------- */
@media (max-width: 480px) {
    /* HEADER — even more compact */
    header { padding: 4px 6px; }
    .title { font-size: 16px; letter-spacing: 0.5px; }
    .header-center { flex: 1 1 100%; order: 4; justify-content: center; }
    .header-right .btn { padding: 3px 6px; font-size: 10px; }

    /* TOOLBAR groups — single row each, scrolling horizontally if needed */
    .toolbar-group { flex: 1 1 100%; }
    .toolbar-group-labeled { padding: 6px; border-radius: 4px; }
    .toolbar .btn { padding: 6px 8px; font-size: 11px; }

    /* CodeMirror — even smaller font for narrow screens */
    .cm-editor, .cm-content { font-size: 12px !important; }

    /* Block headers — buttons may overflow horizontally */
    .block-header, [class*="track-header"] { overflow-x: auto; padding-bottom: 4px; }

    /* Onboarding modal — tighter padding */
    .onboarding-modal, .onboarding-content { padding: 16px !important; }
    .onboarding-title { font-size: 16px !important; }

    /* Hide CRT scanlines effect on very small screens (perf + readability) */
    .scanlines { opacity: 0.2; }

    /* Cleanup matrix rain — full opacity reduction for clarity */
    #matrix-rain { opacity: 0.08; }
}

/* ---------- Touch device specific ---------- */
@media (hover: none) and (pointer: coarse) {
    /* Replace hover-only effects with active state */
    .btn:active { opacity: 0.8; transform: scale(0.97); }
    /* Tooltip system based on hover is unusable on touch — hide tooltips */
    [data-tooltip]::after, [data-tooltip]::before { display: none !important; }
}

/* ---------- Landscape mobile (phones in landscape) ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    /* Free vertical space — collapse header to single row, reduce spacing */
    header { flex-wrap: nowrap; padding: 2px 6px; }
    .header-left, .header-center, .header-right { flex: 0 1 auto; }
    .title { font-size: 14px; }
    /* Hide secondary toolbar row */
    .toolbar-row-secondary { display: none; }
}

/* ============================================================
 * Pass 2 — Polish (2026-05-06)
 * ============================================================ */

/* ---------- Pass 2 — Header row 2 cleanup ---------- */
@media (max-width: 768px) {
    .header-right {
        align-items: center;
        gap: 6px;
    }
    /* Status indicators tightly grouped */
    .ws-dot, .status-dot, #record-indicator {
        flex: 0 0 auto;
    }
    /* REC button consistent sizing with LOGOUT */
    .btn-record, .btn-logout {
        font-size: 11px;
        padding: 4px 10px;
        line-height: 1.2;
        flex: 0 0 auto;
    }
    /* Hide record duration text on small screens (still visible after recording starts) */
    #record-duration { font-size: 10px; }
}

/* ---------- Pass 2 — Track header scroll fade indicator ---------- */
@media (max-width: 768px) {
    .block-controls {
        position: relative;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE10+ */
    }
    .block-controls::-webkit-scrollbar { display: none; }
    /* Fade gradient on right edge as scroll cue */
    .block-header {
        position: relative;
    }
    .block-header::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 28px;
        background: linear-gradient(to right, transparent, #000 90%);
        pointer-events: none;
        opacity: 0.85;
        z-index: 2;
    }
    /* Buttons in track header keep tap-friendly height */
    .block-btn { min-height: 32px; min-width: 32px; }
}

/* ---------- Pass 2 — Tour tooltip mobile (inline styles override) ---------- */
@media (max-width: 768px) {
    #tour-tooltip {
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        padding: 14px !important;
        font-size: 13px !important;
    }
    #tour-tooltip h3, #tour-tooltip h4 {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    /* Tour buttons — readable size, !important to win against inline styles */
    #tour-skip, #tour-prev, #tour-next {
        font-size: 11px !important;
        padding: 8px 14px !important;
        min-height: 36px !important;
    }
    #tour-next {
        font-weight: bold !important;
    }
    /* Pagination dots — compact */
    #tour-tooltip [class*="progress"] > *,
    #tour-tooltip [style*="border-radius"][style*="background"] {
        width: 5px !important;
        height: 5px !important;
    }
}

/* ---------- Pass 2 — Welcome modal SKIP visibility ---------- */
@media (max-width: 768px) {
    .onboarding-content { padding: 18px !important; }
    .onboarding-title { font-size: 18px !important; margin-bottom: 8px !important; }
    .onboarding-subtitle { font-size: 13px !important; line-height: 1.4 !important; }
    .onboarding-glyph { font-size: 36px !important; }
    /* Onboarding action row — full-width buttons stacked or side-by-side */
    .onboarding-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .onboarding-actions button,
    .onboarding-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 40px;
        font-size: 12px;
    }
    /* Make SKIP visually distinct but still secondary */
    .onboarding-actions button[onclick*="skip"],
    .onboarding-actions .btn-skip,
    .onboarding-skip {
        opacity: 1 !important;
        border: 1px dashed rgba(0, 255, 0, 0.5) !important;
    }
    /* Step dots compact */
    .onboarding-dots { gap: 4px; }
    .onboarding-dot { width: 8px !important; height: 8px !important; }
}