/* ═══════════════════════════════════════════════════════════════════════════
   V4 RESPONSIVE — All breakpoint overrides
   Async-loaded — desktop layout renders correctly from critical.css alone
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - TABLET
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .v4-translator {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .v4-swap-container {
        order: 2;
        padding: var(--v4-space-2) 0;
    }
    
    /* Mobile/Tablet: show vertical arrows (stacked layout) */
    .v4-swap-icon-desktop { display: none; }
    .v4-swap-icon-mobile { display: block; }
    
    .v4-swap-btn:hover .v4-swap-icon-mobile {
        transform: rotate(180deg);
    }
    
    .v4-panel-text { order: 1; }
    .v4-panel-morse { order: 3; }
    
    .v4-tap-container {
        grid-template-columns: 1fr;
        gap: var(--v4-space-4);
    }
    
    .v4-tap-pad {
        max-width: 300px;
    }
    
    .v4-control-panel {
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .v4-main {
        padding: var(--v4-space-4);
    }
    
    .v4-nav-links {
        display: none;
    }
    
    .v4-theme-dropdown {
        display: none;
    }
    
    .v4-mobile-menu-btn {
        display: flex;
    }
    
    .v4-mobile-drawer {
        display: block;
    }

    .v4-title-line2 {
        font-size: var(--v4-text-2xl);
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       MODE TABS - Mobile: Always fit in single row, equal widths
       ═══════════════════════════════════════════════════════════════════ */
    .v4-mode-selector {
        flex-wrap: nowrap;
        gap: var(--v4-space-1);
        padding: var(--v4-space-1);
    }
    
    .v4-mode-tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: var(--v4-space-2) var(--v4-space-2);
        gap: var(--v4-space-1);
    }
    
    /* Hide text labels on mobile, show only icons */
    .v4-mode-tab span {
        display: none;
    }
    
    .v4-mode-tab svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       MEDIA BAR (Playback Controls) - Mobile: 4-row structured layout
       Row 1: Play, Stop, Loop, Volume (100% width)
       Row 2: Progress bar (100% width)
       Row 3: WPM Stepper (100% width)
       Row 4: WPM Presets (100% width)
       ═══════════════════════════════════════════════════════════════════ */
    .v4-media-bar {
        padding: var(--v4-space-3);
    }
    
    .v4-media-main {
        display: flex;
        flex-wrap: wrap;
        gap: var(--v4-space-3);
        align-items: center;
    }
    
    /* ── Row 1: Play, Stop, Loop, Volume ── */
    .v4-hero-play {
        order: 1;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    
    .v4-hero-play svg {
        width: 18px;
        height: 18px;
    }
    
    #stop-btn {
        order: 2;
        flex-shrink: 0;
    }
    
    #loop-btn {
        order: 3;
        flex-shrink: 0;
    }
    
    .v4-media-btn {
        width: 36px;
        height: 36px;
    }
    
    .v4-media-volume {
        order: 4;
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
    }
    
    /* Volume slider: expand width but preserve gradient fill behavior */
    .v4-media-volume .v4-volume-slider {
        width: 100%;
        max-width: 140px;
        min-width: 60px;
    }
    
    /* ── Row 2: Progress Bar (100% width) ── */
    .v4-media-progress {
        order: 5;
        flex: 0 0 100%;
        width: 100%;
    }
    
    /* ── Row 3: WPM Stepper (100% width, centered content) ── */
    .v4-media-wpm {
        order: 6;
        flex: 0 0 100%;
        width: 100%;
        justify-content: center;
        padding: var(--v4-space-2) var(--v4-space-3);
    }
    
    /* ── Row 4: WPM Presets (100% width) ── */
    .v4-wpm-presets {
        order: 7;
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        gap: var(--v4-space-1);
    }
    
    .v4-wpm-preset {
        flex: 1;
        text-align: center;
        padding: var(--v4-space-2) var(--v4-space-1);
        font-size: var(--v4-text-xs);
    }
    
    /* P2: SOS card adjustments for mobile */
    .v4-preset-btn.v4-preset-sos {
        grid-column: span 1;
    }

    /* ═══════════════════════════════════════════════════════════════════
       OPTIONS BAR (Output/Export/Configure) - Mobile: Stacked sections
       ═══════════════════════════════════════════════════════════════════ */
    .v4-options-bar {
        display: flex;
        flex-direction: column;
        gap: var(--v4-space-2);
        padding: var(--v4-space-3);
    }
    
    /* Output toggle - full width on mobile */
    .v4-output-row {
        width: 100%;
    }
    
    .v4-output-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .v4-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: var(--v4-space-2) var(--v4-space-2);
        font-size: var(--v4-text-xs);
        gap: var(--v4-space-1);
    }
    
    .v4-toggle-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* Actions row - Export left, Settings right */
    .v4-actions-row {
        padding-top: var(--v4-space-2);
    }
    
    .v4-export-group .v4-action-btn span,
    .v4-settings-btn span {
        display: none; /* Icon only on mobile */
    }
    
    .v4-export-group .v4-action-btn {
        width: auto;
        height: auto;
        padding: var(--v4-space-2);
        border: 1px solid var(--v4-border-dim);
        background: var(--v4-bg-base);
    }
    
    .v4-settings-btn {
        padding: var(--v4-space-2);
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       PRESETS GRID - Mobile: Prevent morse code overflow
       ═══════════════════════════════════════════════════════════════════ */
    .v4-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .v4-preset-btn {
        min-width: 0;
        overflow: hidden;
    }
    
    /* Truncate long morse codes and remove spaces for compactness */
    .v4-preset-morse {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        font-size: calc(var(--v4-text-xs) * 0.85);
        letter-spacing: -0.02em;
    }
    
    .v4-ref-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    
    .v4-reference-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .v4-reference-tabs {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .v4-ref-tab {
        flex: 1;
        text-align: center;
    }
    
    .v4-decoder-controls {
        flex-direction: column;
    }
    
    .v4-decoder-btn {
        width: 100%;
        justify-content: center;
    }
    
    .v4-settings-panel {
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - SMALL MOBILE (Extra tight screens)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    /* Mode tabs: icon-only, tighter */
    .v4-mode-tab {
        padding: var(--v4-space-2);
    }
    
    .v4-mode-tab svg {
        width: 18px;
        height: 18px;
    }
    
    /* Playback: even more compact */
    .v4-hero-play {
        width: 44px;
        height: 44px;
    }
    
    .v4-hero-play svg {
        width: 18px;
        height: 18px;
    }
    
    /* WPM presets: stack on very small screens */
    .v4-wpm-presets {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--v4-space-1);
    }
    
    .v4-wpm-preset {
        padding: var(--v4-space-1);
        font-size: 0.65rem;
    }
    
    /* Output toggle: icon only on very small screens */
    .v4-toggle-btn {
        padding: var(--v4-space-2);
    }
    
    .v4-toggle-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Presets grid: smaller text */
    .v4-preset-name {
        font-size: calc(var(--v4-text-sm) * 0.9);
    }
    
    .v4-preset-morse {
        font-size: 0.6rem;
    }
    
    /* Mobile drawer themes: 2 columns on very small screens */
    .v4-mobile-themes .v4-theme-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}