/* ============================================================================
   OPENMARK MOBILE RESPONSIVE STYLES
   ============================================================================
   
   This file contains ALL mobile-specific styles for the OpenMark UI.
   It is completely separate from styles.css to maintain clean separation.
   
   IMPORTANT FOR FUTURE DEVELOPERS:
   - All styles here are wrapped in media queries
   - Desktop styles remain in styles.css (the default)
   - Mobile styles ONLY apply at smaller screen widths
   - This file should be loaded AFTER styles.css
   
   ============================================================================
   DESIGN BASELINE: iPhone 12 Pro (390 x 844px)
   ============================================================================
   
   The primary design target is 390px width (iPhone 12 Pro in Chrome DevTools).
   All mobile layouts should be tested at this width first.
   
   KEY DESIGN PRINCIPLES:
   
   1. USE FLEXBOX WITH WRAP
      For row-based data (scores, metrics, stats), use:
        display: flex;
        flex-wrap: wrap;
      This ensures content stacks vertically on narrower screens (<390px)
      instead of being cut off.
   
   2. USE PERCENTAGE-BASED SPACING
      Avoid fixed pixel margins (e.g., margin-left: 20px).
      Instead use percentage-based values (e.g., padding: 0 4%).
      This allows the UI to "breathe" on wider phones (like Samsung S20 Ultra
      at 412px) without additional code.
   
   3. HORIZONTAL SCROLL FOR TABLES
      For data tables that won't fit at 390px:
        - Set container to overflow-x: auto
        - Make first column (Model Name) position: sticky
      This allows users to swipe through data safely.
   
   4. MINIMUM TOUCH TARGETS
      All interactive elements must be at least 44x44px for accessibility.
   
   ============================================================================
   
   BREAKPOINTS:
   - 768px and below: Mobile phones (primary target)
   - 480px and below: Small phones (extra compact adjustments)
   - 1024px and below: Tablets (hide non-essential table columns)
   
   STRUCTURE:
   1. CSS Variables for mobile
   2. Hamburger Menu & Mobile Navigation
   3. Header & Guest Banner adjustments
   4. Main Layout (hide sidebar, full-width content)
   5. Modals (full-screen/bottom-sheet on mobile)
   6. Forms & Inputs (touch-friendly)
   7. Benchmark Tab
   8. Results Tables (horizontal scroll with sticky column)
   9. Footer
   10. Utility classes
   
   ============================================================================ */

/* ============================================================================
   1. MOBILE CSS VARIABLES
   ============================================================================ */
:root {
    --mobile-header-height: 56px;
    --mobile-padding: 16px;
    --mobile-touch-target: 44px; /* Minimum touch target size */
}


/* ============================================================================
   2. HAMBURGER MENU & MOBILE NAVIGATION
   ============================================================================ */

/* Hamburger button - hidden on desktop, shown on mobile */
.mobile-menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    margin: 5px auto;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Hamburger animation when open */
.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile navigation overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile slide-out menu */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--bg-secondary);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding-top: var(--mobile-header-height);
    flex-direction: column;
}

.mobile-nav.active {
    transform: translateX(0);
}

body[data-theme="dark"] .mobile-nav {
    background: #0a0a0a;
}

.mobile-nav-header {
    padding: 20px var(--mobile-padding);
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px var(--mobile-padding);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    min-height: var(--mobile-touch-target);
}

.mobile-nav-item:active {
    background: var(--bg-primary);
}

.mobile-nav-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
}

/* Smaller nav items for legal links */
.mobile-nav-item-small {
    padding: 10px var(--mobile-padding);
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 40px;
}

.mobile-nav-item-small svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Divider in mobile nav */
.mobile-nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: 12px var(--mobile-padding);
}

/* Footer section in mobile nav */
.mobile-nav-footer {
    margin-top: auto;
    padding: 20px var(--mobile-padding);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mobile-nav-badge img {
    height: 24px;
    opacity: 0.7;
}

.mobile-nav-copyright {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.6;
}


/* ============================================================================
   3. TABLET BREAKPOINT (1024px)
   Hide less important columns in results
   ============================================================================ */
@media (max-width: 1024px) {
    /* Ensure hidden elements stay hidden */
    #billing-history-view.hidden {
        display: none !important;
    }
}


/* ============================================================================
   4. MOBILE BREAKPOINT (768px and below)
   Main mobile layout changes
   ============================================================================ */
@media (max-width: 768px) {
    
    /* --- Body & Layout --- */
    html, body {
        overflow-x: hidden;
    }
    
    body {
        font-size: 16px; /* Prevent zoom on input focus in iOS */
    }
    
    /* --- Header --- */
    .header-content {
        padding: 0 var(--mobile-padding);
        height: var(--mobile-header-height);
    }
    
    /* Show hamburger menu */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-nav-overlay,
    .mobile-nav {
        display: block;
    }
    
    /* Adjust header-left to include hamburger */
    .header-left {
        gap: 8px;
    }
    
    /* Smaller logo on mobile */
    .app-logo {
        height: 28px;
    }
    
    .app-logo svg {
        height: 28px;
    }
    
    /* Hide test mode indicator on mobile (too small) */
    .test-mode-indicator {
        display: none;
    }
    
    /* Credits badge - compact */
    .credits-badge {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
    
    .credits-label {
        display: none; /* Hide "credits" text, show just number */
    }
    
    /* Hide tier badge text on mobile */
    .header-tier-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    
    /* User dropdown adjustments */
    .user-dropdown {
        right: 0;
        min-width: 200px;
    }
    
    /* --- Guest Mode Banner --- */
    /* Stack vertically and make more compact on mobile */
    .guest-mode-banner {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        padding: 8px 4%;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        z-index: 99;
    }
    
    .guest-banner-text {
        font-size: 0.8rem;
        gap: 6px;
    }
    
    /* Hide "Exploring OpenMark" text on very small screens, keep icon */
    .guest-signin-btn {
        font-size: 0.75rem;
        padding: 4px 10px;
        white-space: nowrap;
    }
    
    /* Adjust header to accommodate banner below */
    header {
        position: relative;
    }
    
    /* Add space for guest banner when present */
    body.guest-mode .container {
        margin-top: 40px;
    }
    
    /* --- Footer --- HIDE on mobile, content moved to side menu */
    .app-footer {
        display: none !important;
    }

    /* --- PWA Install Banner - mobile adjustments --- */
    .pwa-install-banner {
        top: 8px;
        max-width: calc(100% - 24px);
        border-radius: 10px;
    }

    .pwa-install-content {
        gap: 10px;
        padding: 10px 12px;
    }

    .pwa-install-icon {
        width: 24px;
        height: 24px;
    }

    .pwa-install-text {
        font-size: 0.8rem;
    }

    .pwa-install-sub {
        font-size: 0.7rem;
    }

    .pwa-install-action {
        padding: 7px 16px;
        font-size: 0.8rem;
    }
    
    /* --- Toast/Status Notifications - TOP CENTER of screen --- */
    .status-bar {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        top: 70px !important; /* Below header */
        bottom: auto !important;
        max-width: calc(100% - 24px) !important;
        width: auto !important;
        min-width: 200px;
        font-size: 0.8rem;
        padding: 10px 16px;
        border-radius: 8px;
        z-index: 10000;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .status-bar.status-success,
    .status-bar.status-error,
    .status-bar.status-warning,
    .status-bar.status-info {
        animation: slideDownMobile 0.25s ease-out;
    }
    
    @keyframes slideDownMobile {
        from {
            transform: translateX(-50%) translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
    }
    
    /* --- Main Container --- */
    .container {
        flex-direction: column;
    }
    
    /* --- Task Rail (Sidebar) --- */
    /* Hide by default on mobile, show when .active */
    .task-rail {
        display: none;
        position: fixed;
        top: var(--mobile-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - var(--mobile-header-height));
        height: calc(100dvh - var(--mobile-header-height));
        height: calc(var(--app-height, 100vh) - var(--mobile-header-height));
        z-index: 998;
        border-right: none;
    }
    
    .task-rail.mobile-active {
        display: flex;
    }
    
    /* Task rail toggle becomes visible on mobile header */
    .mobile-tasks-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-primary);
    }
    
    /* --- Workspace --- */
    .workspace {
        width: 100%;
        min-height: calc(100vh - var(--mobile-header-height));
        min-height: calc(100dvh - var(--mobile-header-height));
        min-height: calc(var(--app-height, 100vh) - var(--mobile-header-height));
    }
    
    /* --- Main Tabs --- */
    .main-tabs {
        padding: 0 8px;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .main-tab {
        flex: 1;
        min-width: 80px;
        padding: 12px 8px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    /* --- Mobile Task Strip --- */
    .mobile-task-strip {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        scrollbar-width: none;          /* Firefox */
        min-height: 34px;
    }
    .mobile-task-strip::-webkit-scrollbar { display: none; }
    
    .mobile-task-strip:empty {
        display: none !important;
    }
    
    .task-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 12px;
        border-radius: 999px;
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        font-size: 0.75rem;
        color: var(--text-secondary);
        cursor: pointer;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 0;
        transition: all 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .task-pill:active {
        transform: scale(0.96);
    }
    
    .task-pill.active {
        border-color: var(--primary);
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary);
        font-weight: 600;
    }
    
    body[data-theme="dark"] .task-pill.active {
        background: rgba(99, 102, 241, 0.18);
    }
    
    .task-pill .pill-sample {
        font-size: 0.65rem;
        opacity: 0.6;
    }
    
    .mobile-task-strip-empty {
        font-size: 0.75rem;
        color: var(--text-muted, #888);
        opacity: 0.6;
        padding: 2px 4px;
    }
    
    /* --- View Sections --- */
    .view-section {
        padding: 0;
    }
    
    .view-wrapper {
        padding: 0;
    }
    
    /* --- Panels --- */
    .left-panel,
    .right-panel {
        width: 100%;
        padding: var(--mobile-padding);
    }
    
    /* Stack panels vertically */
    #view-creator {
        flex-direction: column;
    }
    
    .panel-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    /* Mode switcher - full width on mobile */
    .mode-switcher {
        width: 100%;
        justify-content: stretch;
    }

    .mode-tab {
        /* auto-width so the wider Templates tab fits alongside the modes */
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        text-align: center;
        padding: 6px 8px;
        font-size: 0.75rem;
    }
    
    /* --- Forms --- */
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        font-size: 0.9rem;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 12px;
        min-height: var(--mobile-touch-target);
    }
    
    textarea {
        min-height: 120px;
    }
    
    /* YAML editor: don't let an empty editor fill the whole viewport —
       keep the action buttons (Validate, Copy from Preview…) within reach.
       JS auto-resize (autoResizeTextarea) uses a matching 180px mobile minimum. */
    .editor-container textarea {
        min-height: 180px;
    }
    
    /* Desktop-only tip (Shift+Scroll, task rail collapse) is meaningless on touch */
    .editor-hint {
        display: none;
    }
    
    /* --- Buttons --- */
    .btn {
        min-height: var(--mobile-touch-target);
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .button-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .button-group .btn {
        width: 100%;
    }
    
    /* Split buttons - Generate button LARGE, dropdown arrow SMALL */
    .split-button-container {
        display: inline-flex;
        width: 100%;
        max-width: 300px;
    }
    
    .split-button-container .split-main {
        flex: 1;
        min-width: 0;
        padding: 14px 24px;
        font-size: 0.95rem;
        font-weight: 600;
    }

    /* Quick Benchmark button - match Generate button width */
    .btn-quick-bench {
        width: 100%;
        max-width: 300px;
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    
    .split-button-container .split-arrow {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        padding: 14px 0;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    
    /* Hide dropdown arrow for guests - it doesn't work in guest mode */
    body.guest-mode .split-button-container .split-arrow {
        display: none;
    }
    
    /* Make the main button full width when arrow is hidden */
    body.guest-mode .split-button-container .split-main {
        border-radius: 8px;
        max-width: 100%;
    }
    
    /* Agent dropdown - compact and mobile-friendly */
    .agent-dropdown-menu {
        min-width: 160px;
        max-width: 200px;
        left: auto;
        right: 0;
        bottom: calc(100% + 6px);
        font-size: 0.85rem;
    }
    
    .agent-dropdown-item {
        padding: 10px 12px;
    }
    
    .agent-dropdown-cost {
        font-size: 0.8rem;
    }
    
    /* Button group - allow horizontal scroll on mobile */
    .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    
    #simpleButtons,
    #advancedButtons,
    #manualButtons {
        justify-content: flex-start;
    }
    
    /* --- Mobile Panel Toggle Buttons (inline in headers) --- */
    .mobile-preview-toggle,
    .mobile-editor-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }
    
    /* Back button - same style as preview button (indigo) */
    .mobile-editor-toggle {
        background: var(--primary);
        color: white;
        border: none;
        padding: 8px 12px;
        margin-right: 8px;
    }
    
    .mobile-preview-toggle svg,
    .mobile-editor-toggle svg {
        stroke: currentColor;
    }
    
    /* Panel visibility based on toggle */
    #view-creator.show-editor .left-panel {
        display: block;
    }
    
    #view-creator.show-editor .right-panel {
        display: none;
    }
    
    #view-creator.show-preview .left-panel {
        display: none;
    }
    
    #view-creator.show-preview .right-panel {
        display: block;
    }
    
    /* Default: show editor on mobile */
    #view-creator .left-panel {
        display: block;
        width: 100%;
        padding-bottom: 20px; /* Extra space for scrolling to bottom buttons */
    }
    
    #view-creator .right-panel {
        display: none;
        width: 100%;
        padding-bottom: 80px; /* Extra space to scroll past Save button */
    }
    
    #view-creator.show-preview .right-panel {
        padding-bottom: 80px;
    }

    /* Post-generation tip — mobile adjustments */
    .preview-tip {
        font-size: 0.78rem;
        padding: 8px 10px;
        gap: 6px;
    }
    
    /* Button groups - minimal extra space */
    #simpleButtons,
    .button-group {
        padding-bottom: 8px;
    }
    
    /* New Task & Quick Benchmark buttons - small margin below */
    .btn-new-task,
    #clearSimpleBtn,
    #clearBtn {
        margin-top: 8px;
        margin-bottom: 16px; /* Just a few pixels of scroll room */
    }

    .btn-quick-bench {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    /* Quick Benchmark confirmation bar - stack on mobile */
    .quick-bench-confirm {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: unset;
        width: calc(100% - 24px);
        min-width: unset;
        max-width: unset;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .quick-bench-confirm-actions {
        width: 100%;
        justify-content: center;
    }

    .quick-bench-confirm-actions .btn {
        flex: 1;
        padding: 10px 16px;
    }
    
    /* Mode content areas - minimal padding */
    #simpleMode,
    #advancedMode,
    #manualMode,
    .mode-content {
        padding-bottom: 16px;
    }
    
    /* Panel header row - title left, Task Preview button right, mode switcher below */
    .panel-header-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 8px;
        padding: 10px 3%;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }
    
    .panel-header-row h2 {
        grid-column: 1;
        grid-row: 1;
        font-size: 0.95rem;
        margin: 0;
    }
    
    /* Task Preview button - same row as title, right side */
    .panel-header-row .mobile-preview-toggle {
        grid-column: 3;
        grid-row: 1;
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center;
        gap: 4px;
    }
    
    /* Hide the icon, show arrow */
    .panel-header-row .mobile-preview-toggle svg {
        display: none !important;
    }
    
    .panel-header-row .mobile-preview-toggle::after {
        content: ' →';
    }
    
    /* Mode switcher spans full width on second row */
    .panel-header-row .mode-switcher {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }
    
    /* --- Status Bar --- */
    .status-bar {
        left: var(--mobile-padding);
        right: var(--mobile-padding);
        bottom: 16px;
        max-width: none;
    }
}


/* ============================================================================
   5. MODALS - RESPONSIVE
   Full-screen or bottom sheet on mobile
   ============================================================================ */
@media (max-width: 768px) {
    
    /* --- Generic Modal Adjustments --- */
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-height, 100vh);
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100vh);
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header {
        padding: 16px;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
    }
    
    body[data-theme="dark"] .modal-header {
        background: #0a0a0a;
    }
    
    .modal-header h2 {
        font-size: 1.25rem;
    }
    
    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }
    
    .modal-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: 16px;
        position: sticky;
        bottom: 0;
        background: var(--bg-primary);
    }
    
    /* --- Quick Start Modal (Welcome) --- */
    .quickstart-modal-content {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .quickstart-modal-body {
        padding: 20px 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }
    
    .quickstart-header {
        text-align: center;
        margin-bottom: 14px;
    }
    
    .quickstart-header h2 {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }
    
    .quickstart-header p {
        font-size: 0.82rem;
        color: var(--text-secondary);
    }

    .quickstart-value-line {
        font-size: 0.76rem;
    }

    .quickstart-usecases {
        gap: 6px;
        margin-bottom: 16px;
    }

    .usecase-chip {
        font-size: 0.72rem;
        padding: 3px 10px;
    }

    .quickstart-outcomes {
        gap: 10px;
        margin-bottom: 16px;
    }

    .outcome-card {
        padding: 12px 8px;
        max-width: none;
    }

    .outcome-icon {
        width: 32px;
        height: 32px;
    }

    .outcome-icon svg {
        width: 16px;
        height: 16px;
    }

    .outcome-title {
        font-size: 0.78rem;
    }

    .outcome-subtitle {
        font-size: 0.68rem;
    }

    .quickstart-friction {
        font-size: 0.72rem;
        margin-bottom: 10px;
    }

    .quickstart-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .quickstart-close {
        width: 100%;
        padding: 14px 20px;
    }
    
    /* --- Authoring Guide Modal (Full Screen on mobile) --- */
    #authoring-guide-modal .modal-content {
        width: 100%;
        height: 100%;
        height: 100dvh;
        height: var(--app-height, 100%);
        max-width: 100%;
        max-height: 100%;
        max-height: 100dvh;
        max-height: var(--app-height, 100%);
        border-radius: 0;
        margin: 0;
    }
    
    #authoring-guide-modal .modal-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    #authoring-guide-modal .modal-header h2 {
        font-size: 1rem;
        flex: none;
        width: 100%;
    }
    
    #authoring-guide-modal .guide-search {
        flex: 1;
        min-width: 120px;
        font-size: 0.85rem;
        padding: 8px 10px;
    }
    
    #authoring-guide-modal .modal-close {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    
    #authoring-guide-modal .modal-body {
        padding: 12px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* Guide content - make tables scrollable */
    #authoring-guide-modal .guide-body,
    #authoring-guide-modal #guide-content {
        width: 100%;
        overflow-x: hidden;
    }
    
    #authoring-guide-modal iframe {
        width: 100%;
        min-width: 100%;
    }
    
    /* Guide tables - horizontal scroll */
    #authoring-guide-modal table,
    .guide-body table,
    #guide-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8rem;
    }
    
    #authoring-guide-modal th,
    #authoring-guide-modal td,
    .guide-body th,
    .guide-body td {
        padding: 6px 8px;
        white-space: nowrap;
        min-width: 60px;
    }
    
    /* Guide cards - stack vertically */
    #authoring-guide-modal .guide-grid,
    .guide-body .guide-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    #authoring-guide-modal .guide-card,
    .guide-body .guide-card {
        width: 100%;
    }
    
    /* Parameter chips - wrap */
    #authoring-guide-modal .param-chips,
    .guide-body .param-chips {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    /* Section titles */
    #authoring-guide-modal h3 {
        font-size: 1rem;
    }
    
    #authoring-guide-modal h4 {
        font-size: 0.9rem;
    }
    
    /* Code blocks */
    #authoring-guide-modal pre,
    .guide-body pre {
        font-size: 0.75rem;
        padding: 8px;
        overflow-x: auto;
        max-width: 100%;
    }
    
    /* --- Sign In Modal --- */
    .signin-modal {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 20px 32px;
    }
    
    .signin-modal-close {
        top: 12px;
        right: 12px;
    }
    
    .signin-logo {
        width: 48px;
        height: 48px;
    }
    
    .signin-modal-header h2 {
        font-size: 1.35rem;
    }
    
    .signin-benefits {
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .signin-benefit {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .signin-google-btn,
    .signin-github-btn {
        width: 100%;
        padding: 14px 20px;
        min-height: var(--mobile-touch-target);
    }
    
    .signin-footer {
        font-size: 0.75rem;
    }
    
    /* --- Help Modal --- */
    .help-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100vh);
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-height, 100vh);
        border-radius: 0;
    }
    
    .help-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 8px;
        gap: 0;
    }
    
    .help-tab {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    /* =========================================================================
       BILLING MODAL - MOBILE OVERHAUL
       ========================================================================= */
    
    .billing-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100vh);
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-height, 100vh);
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    
    .billing-body {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 12px !important;
        min-height: 0; /* Fix for flex scroll */
    }
    
    /* Ensure billing main view is scrollable */
    #billing-main-view {
        min-height: min-content;
    }
    
    /* Ensure subscription/plans content is visible */
    #billing-subscription {
        min-height: min-content;
    }
    
    /* Transaction History - full height scrollable (only when visible) */
    #billing-history-view:not(.hidden) {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    /* Ensure hidden stays hidden */
    #billing-history-view.hidden {
        display: none !important;
    }
    
    .billing-history-content {
        flex: 1;
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .billing-history-table {
        font-size: 0.8rem;
    }
    
    .billing-history-table th,
    .billing-history-table td {
        padding: 8px 10px;
    }
    
    .history-desc {
        max-width: 200px;
    }
    
    /* --- Wallet Section: Compact single-row layout --- */
    .billing-wallet {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        gap: 10px;
        padding: 10px 12px !important;
        background: var(--bg-secondary);
        border-radius: 8px;
        margin-bottom: 12px;
    }
    
    .wallet-total {
        flex-shrink: 0;
        text-align: left;
    }
    
    .wallet-total-value {
        font-size: 1.5rem !important;
        font-weight: 700;
        line-height: 1.1;
    }
    
    .wallet-total-label {
        font-size: 0.65rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.7;
    }
    
    .wallet-breakdown {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .wallet-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 0;
        font-size: 0.75rem;
    }
    
    .wallet-label {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .wallet-icon {
        font-size: 0.7rem;
    }
    
    .wallet-value {
        font-weight: 600;
        font-size: 0.8rem;
    }
    
    .wallet-tier {
        flex-shrink: 0;
    }
    
    .wallet-tier .tier-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    /* --- Billing Tabs --- */
    .billing-tabs {
        display: flex;
        gap: 0;
        margin-bottom: 12px;
    }
    
    .billing-tab {
        flex: 1;
        padding: 10px 8px;
        font-size: 0.85rem;
    }
    
    /* --- Buy Credits Tab: Compact 2-column grid --- */
    .billing-packs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .credit-pack-card {
        padding: 10px 6px 8px !important;
    }
    
    .pack-badge {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
        top: -6px !important;
    }
    
    .pack-name {
        font-size: 0.65rem !important;
        margin-bottom: 2px;
    }
    
    .pack-credits {
        font-size: 1.1rem !important;
    }
    
    .pack-credits-label {
        font-size: 0.6rem !important;
    }
    
    .pack-buy-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        margin-top: 6px;
    }
    
    .billing-packs-footnote {
        font-size: 0.7rem;
        padding: 8px;
        margin-top: 8px;
    }
    
    /* --- Plans Tab: Stack tiers vertically as cards --- */
    
    /* Hide the matrix table on mobile */
    .matrix-scroll-container {
        display: none !important;
    }
    
    .feature-matrix {
        display: none !important;
    }
    
    /* Show mobile tier cards container */
    .mobile-tier-cards {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
        min-height: 300px;
    }
    
    /* Mobile-specific tier cards layout */
    #billing-matrix {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* Individual mobile tier cards */
    .mobile-tier-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 12px;
        position: relative;
    }
    
    .mobile-tier-card.current {
        border-color: var(--primary);
    }
    
    .mobile-tier-card.accent-pro {
        border-color: var(--primary);
        background: rgba(99, 102, 241, 0.05);
    }
    
    .mobile-tier-card.accent-expert {
        border-color: #f59e0b;
        background: rgba(245, 158, 11, 0.05);
    }
    
    .mobile-tier-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .mobile-tier-name {
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .mobile-tier-price {
        text-align: right;
    }
    
    .mobile-tier-price-value {
        font-size: 1rem;
        font-weight: 700;
    }
    
    .mobile-tier-price-label {
        font-size: 0.65rem;
        opacity: 0.7;
    }
    
    .mobile-tier-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        font-size: 0.75rem;
    }
    
    .mobile-tier-feature {
        display: flex;
        justify-content: space-between;
        padding: 3px 0;
    }
    
    .mobile-tier-feature-label {
        opacity: 0.7;
    }
    
    .mobile-tier-feature-value {
        font-weight: 500;
    }
    
    .mobile-current-badge {
        position: absolute;
        top: -8px;
        right: 12px;
        background: var(--primary);
        color: white;
        font-size: 0.6rem;
        padding: 2px 6px;
        border-radius: 3px;
        text-transform: uppercase;
        font-weight: 600;
    }
    
    /* --- Interval Toggle & Upgrade Buttons --- */
    .billing-interval-toggle {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin: 12px 0;
        background: var(--bg-tertiary);
        padding: 4px;
        border-radius: 6px;
    }
    
    .interval-btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
        border-radius: 4px;
    }
    
    .interval-savings {
        font-size: 0.65rem;
    }
    
    .tier-upgrade-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
    }
    
    .tier-upgrade-actions .btn-upgrade {
        width: 100%;
        padding: 12px;
        font-size: 0.9rem;
    }
    
    .tier-upgrade-actions .btn-manage-sub {
        padding: 8px;
        font-size: 0.8rem;
    }
    
    .matrix-footnote {
        font-size: 0.7rem;
        padding: 8px;
        margin-top: 8px;
        text-align: center;
    }
    
    /* Mobile tier cards styling (display controlled by styles.css media query) */
    
    .mobile-tier-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 12px;
        position: relative;
    }
    
    .mobile-tier-card.current {
        border-color: var(--primary);
        border-width: 2px;
    }
    
    .mobile-tier-card.accent-pro {
        border-color: var(--primary);
        border-width: 2px;
    }
    
    .mobile-tier-card.accent-expert {
        border-color: #f59e0b;
        border-width: 2px;
    }
    
    .mobile-tier-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .mobile-tier-name {
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .mobile-tier-tagline {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 2px;
    }
    
    .mobile-tier-price {
        text-align: right;
    }
    
    .mobile-tier-price-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary);
    }
    
    .mobile-tier-card.accent-expert .mobile-tier-price-value {
        color: #f59e0b;
    }
    
    .mobile-tier-price-label {
        font-size: 0.65rem;
        opacity: 0.7;
    }
    
    .mobile-tier-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 16px;
    }
    
    .mobile-tier-feature {
        display: flex;
        justify-content: space-between;
        padding: 3px 0;
        font-size: 0.75rem;
    }
    
    .mobile-tier-feature-label {
        opacity: 0.6;
    }
    
    .mobile-tier-feature-value {
        font-weight: 600;
    }
    
    .mobile-current-badge {
        position: absolute;
        top: -8px;
        right: 12px;
        background: var(--primary);
        color: white;
        font-size: 0.6rem;
        padding: 2px 8px;
        border-radius: 3px;
        text-transform: uppercase;
        font-weight: 600;
    }
    
    /* --- Runner Modal --- */
    .runner-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100vh);
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-height, 100vh);
        border-radius: 0;
    }
    
    /* --- Share Modal (already has mobile styles, enhance) --- */
    .share-modal-content {
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
    }
    
    /* --- Legal Modals (TOS, Privacy) --- */
    .legal-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100vh);
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-height, 100vh);
        border-radius: 0;
    }
    
    .legal-content {
        padding: 16px;
        font-size: 0.9rem;
    }
    
    .legal-content h3 {
        font-size: 1.1rem;
    }
}


/* ============================================================================
   6. BENCHMARK TAB - MOBILE
   ============================================================================ */
@media (max-width: 768px) {
    
    /* --- Two Column Layout → Stack Vertically --- */
    .benchmark-container.two-column-layout {
        flex-direction: column;
        gap: 0;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ================================================================
       BENCHMARK TAB - MOBILE OVERHAUL
       Layout: Integrated toggle buttons in panel headers
       ================================================================ */
    
    /* Hide the old separate tabs container */
    .benchmark-mobile-tabs {
        display: none !important;
    }
    
    .benchmark-container.two-column-layout {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 160px);
        height: calc(100dvh - 160px);
        height: calc(var(--app-height, 100vh) - 160px);
        overflow: hidden;
    }
    
    /* Mobile toggle buttons integrated in panel headers */
    .mobile-benchmark-toggle {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        margin-left: auto;
    }
    
    .mobile-benchmark-toggle.mobile-back-btn {
        margin-left: 0;
        margin-right: auto;
    }
    
    .mobile-benchmark-toggle.bench-ready {
        box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
    }
    
    /* Panel visibility based on mobile state */
    #view-benchmark.show-models .model-selection-panel {
        display: flex;
    }
    #view-benchmark.show-models .config-panel {
        display: none;
    }
    #view-benchmark.show-config .model-selection-panel {
        display: none;
    }
    #view-benchmark.show-config .config-panel {
        display: flex;
        flex-direction: column;
        max-height: none;
        overflow-y: auto;
        flex: 1;
    }
    
    /* Default: show models */
    #view-benchmark {
        /* Default to models view */
    }
    
    /* Model Selection Panel - Full height when visible */
    .model-selection-panel {
        flex: 1;
        width: 100%;
        min-height: 0;
        max-height: none;
        border-radius: 0;
        border: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    /* Compact header with integrated controls */
    .benchmark-panel-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 8px 3%;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    
    .benchmark-panel-header h2 {
        font-size: 0.9rem;
        flex-shrink: 0;
        margin: 0;
    }
    
    /* Controls on separate row below header */
    .mobile-controls-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 3%;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
    }
    
    .mobile-controls-row .search-input {
        flex: 1;
        min-width: 100px;
        font-size: 0.85rem;
        padding: 10px 12px;
        border-radius: 6px;
    }
    
    .mobile-controls-row .btn-small {
        padding: 10px 14px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    /* Filter bar - single row layout for mobile */
    .filter-bar {
        background: var(--bg-primary);
        padding: 6px 2%;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        flex-direction: column;
        gap: 6px;
    }
    
    /* Filter chips row - scrollable via touch, hidden scrollbar */
    .filter-bar .filter-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 3px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .filter-bar .filter-chips::-webkit-scrollbar {
        display: none;
    }
    
    /* Compact filter chips to fit on one row */
    .filter-bar .filter-chip {
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
        flex-shrink: 0;
        white-space: nowrap;
        text-align: center;
        justify-content: center;
    }
    
    /* Normalize tier filter chips to same width */
    .filter-bar .filter-chip-tier {
        padding: 4px 3px !important;
        min-width: 46px;
    }
    
    /* Hide the filter divider on mobile to save space */
    .filter-bar .filter-divider {
        display: none;
    }
    
    /* Compact clear-filters button on mobile */
    .filter-clear-btn {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
        margin-left: 0;
    }
    
    /* Hide scrollbar on provider logo row — still scrollable via touch */
    .filter-providers-scroll {
        scrollbar-width: none;           /* Firefox */
        -ms-overflow-style: none;        /* IE/Edge */
    }
    .filter-providers-scroll::-webkit-scrollbar {
        display: none;                   /* Chrome/Safari */
    }
    
    /* Model list - scrollable, takes all available space */
    .model-selection-list {
        flex: 1;
        padding: 8px 3%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    
    /* Config Panel - Full height when Settings tab is active */
    .config-panel {
        flex: 1;
        width: 100%;
        border-radius: 0;
        border: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: none; /* Hidden by default, shown when Settings tab active */
    }
    
    .config-panel .panel-header {
        padding: 12px 4%;
        background: var(--bg-secondary);
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-color);
    }
    
    .config-panel .panel-header h2 {
        font-size: 0.95rem;
        margin: 0;
    }
    
    .config-form {
        padding: 16px 4%;
    }
    
    .config-form .form-group {
        margin-bottom: 16px;
    }
    
    .config-form label {
        font-size: 0.85rem;
        margin-bottom: 6px;
        display: block;
    }
    
    .config-form select,
    .config-form input {
        padding: 12px 14px;
        font-size: 0.9rem;
        width: 100%;
    }
    
    /* Run Benchmark Button - Fixed at bottom (used in Models view) */
    .benchmark-actions,
    .run-benchmark-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 4%;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        z-index: 100;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .benchmark-actions .btn,
    .run-benchmark-container .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
        font-weight: 600;
    }
    
    /* Selected models count - show in Models tab */
    .selected-models-count {
        font-size: 0.8rem;
        color: var(--text-secondary);
        padding: 8px 4%;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }
    
    /* Model cards - compact list layout for mobile */
    .model-grid {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .model-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 12px;
        min-height: auto;
        gap: 10px;
        border-radius: 8px;
    }
    
    .model-card.selected {
        border: 2px solid var(--primary);
        background: rgba(99, 102, 241, 0.1);
    }
    
    .model-card-header {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    
    .model-card-name {
        font-size: 0.8rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .model-card-provider {
        font-size: 0.7rem;
    }
    
    .latency-indicator {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
    }
    
    /* Hide verbose details in compact mode */
    .model-card .model-details,
    .model-card .model-pricing-info {
        display: none;
    }
    
    /* Provider group headers - more compact */
    .provider-group-header {
        padding: 8px 12px;
        margin-top: 8px;
        font-size: 0.85rem;
    }
    
    .provider-group-header:first-child {
        margin-top: 0;
    }
    
    /* --- Collapsible provider groups (mobile only) --- */
    /* Tapping the header expands/collapses the group instead of select-all,
       so 8+ providers fit on one screen instead of a very long scroll. */
    .provider-group {
        margin-bottom: 10px;
    }
    
    .provider-group .provider-header {
        margin-bottom: 8px;
        min-height: var(--mobile-touch-target);
    }
    
    .provider-group.collapsed .model-grid {
        display: none;
    }
    
    .provider-group.collapsed .provider-header {
        margin-bottom: 0;
    }
    
    /* Hover-only hint is meaningless on touch; header now toggles collapse */
    .provider-select-hint {
        display: none !important;
    }
    
    .provider-chevron {
        display: inline-block;
        margin-left: auto;
        color: var(--text-secondary);
        font-size: 0.9rem;
        transition: transform 0.2s ease;
    }
    
    .provider-group.collapsed .provider-chevron {
        transform: rotate(-90deg);
    }
    
    /* Selected-count badge so collapsed groups still show what's picked */
    .provider-selected-badge {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--primary);
        background: rgba(79, 70, 229, 0.1);
        padding: 2px 8px;
        border-radius: 999px;
        white-space: nowrap;
    }
    
    .provider-selected-badge.empty {
        display: none;
    }
    
    body[data-theme="dark"] .provider-selected-badge {
        background: rgba(99, 102, 241, 0.18);
    }
    
    .provider-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Provider filter pills - scrollable */
    .filter-bar {
        padding: 8px 4%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    
    .filter-bar .filter-pill,
    .provider-pill {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    /* Benchmark config sections */
    .config-section {
        margin-bottom: 16px;
    }
    
    .config-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .config-row-label {
        font-size: 0.9rem;
    }
    
    .config-group {
        width: 100%;
    }
    
    /* Run button - full width at bottom */
    .benchmark-actions {
        padding: 4%;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        position: sticky;
        bottom: 0;
    }
    
    .benchmark-actions .btn {
        width: 100%;
    }
    
}


/* ============================================================================
   7. RESULTS TAB - MOBILE
   ============================================================================ */
@media (max-width: 768px) {
    
    /* Results header */
    .results-header {
        padding: var(--mobile-padding);
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .results-title-row {
        width: 100%;
    }
    
    .results-task-title {
        font-size: 1.1rem;
    }
    
    .results-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .results-actions .btn {
        flex: 1;
        min-width: 45%;
    }
    
    /* Low-accuracy hint — mobile adjustments */
    .low-accuracy-hint {
        margin: 0 var(--mobile-padding) 4px;
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    /* Audit nudge — mobile: stack CTA + dismiss under the text */
    .audit-nudge {
        margin: 0 var(--mobile-padding) 8px;
        padding: 12px 36px 12px 12px;
        font-size: 0.8rem;
    }
    .audit-nudge-body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .audit-nudge-headline {
        font-size: 0.88rem;
    }
    .audit-nudge-subline {
        font-size: 0.78rem;
    }
    .audit-nudge-actions {
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
    }
    .audit-nudge-cta {
        flex: 1;
        text-align: center;
    }

    /* --- Results Table with Horizontal Scroll & Sticky Column --- */
    .results-table-container,
    .results-table-wrapper,
    .results-panel {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        position: relative;
    }
    
    .results-table {
        font-size: 0.8rem;
        border-collapse: collapse;
    }
    
    /* ================================================================
       SIMPLE VIEW - Same as desktop: Rank | Model | Provider | Score | Stability
       ================================================================ */
    .results-table.simple-view {
        width: 100%;
        min-width: 500px;
        table-layout: fixed;
    }
    
    /* Fixed width so the "Rank" header doesn't truncate to "Ra…" */
    .results-table.simple-view .col-rank {
        width: 50px;
    }
    
    .results-table.simple-view .col-model {
        width: 30%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .results-table.simple-view .col-provider {
        width: 20%;
        display: table-cell !important;
    }
    
    .results-table.simple-view .col-score {
        width: 20%;
    }
    
    .results-table.simple-view .col-stability {
        width: 20%;
        display: table-cell !important;
    }
    
    /* Hide these in simple view (same as desktop) */
    .results-table.simple-view .col-rec-temp,
    .results-table.simple-view .col-tier,
    .results-table.simple-view .col-cost,
    .results-table.simple-view .col-time,
    .results-table.simple-view .col-acc-dollar,
    .results-table.simple-view .col-acc-min,
    .results-table.simple-view .col-out-tokens,
    .results-table.simple-view .col-completion {
        display: none !important;
    }
    
    /* Sticky Rank column */
    .results-table th:first-child,
    .results-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-secondary);
        z-index: 3;
        min-width: 50px;
    }
    
    /* Sticky Model Name column - positioned after rank */
    .results-table th:nth-child(2),
    .results-table td:nth-child(2) {
        position: sticky;
        left: 50px;
        background: var(--bg-secondary);
        z-index: 3;
        min-width: 120px;
        max-width: 140px;
    }
    
    /* Shadow indicator for scrollable content */
    .results-table th:nth-child(2)::after,
    .results-table td:nth-child(2)::after {
        content: '';
        position: absolute;
        top: 0;
        right: -10px;
        bottom: 0;
        width: 10px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent);
        pointer-events: none;
    }
    
    body[data-theme="dark"] .results-table th:first-child,
    body[data-theme="dark"] .results-table td:first-child,
    body[data-theme="dark"] .results-table th:nth-child(2),
    body[data-theme="dark"] .results-table td:nth-child(2) {
        background: #171717;
    }
    
    body[data-theme="dark"] .results-table th:nth-child(2)::after,
    body[data-theme="dark"] .results-table td:nth-child(2)::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent);
    }
    
    .results-table th {
        padding: 10px 8px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .results-table td {
        padding: 8px;
        white-space: nowrap;
    }
    
    /* ================================================================
       FULL VIEW - All columns with horizontal scroll, fixed widths
       ================================================================ */
    .results-table:not(.simple-view) {
        width: auto;
        min-width: 900px;
        table-layout: fixed;
    }
    
    .results-table:not(.simple-view) th,
    .results-table:not(.simple-view) td {
        display: table-cell !important;
        white-space: nowrap;
        padding: 8px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Fixed widths to prevent model column from expanding */
    .results-table:not(.simple-view) .col-rank { width: 45px; }
    .results-table:not(.simple-view) .col-model { width: 110px; max-width: 110px; }
    .results-table:not(.simple-view) .col-provider { width: 70px; }
    .results-table:not(.simple-view) .col-score { width: 65px; }
    .results-table:not(.simple-view) .col-stability { width: 60px; }
    .results-table:not(.simple-view) .col-rec-temp { width: 55px; }
    .results-table:not(.simple-view) .col-tier { width: 55px; }
    .results-table:not(.simple-view) .col-cost { width: 70px; }
    .results-table:not(.simple-view) .col-time { width: 55px; }
    .results-table:not(.simple-view) .col-acc-dollar { width: 60px; }
    .results-table:not(.simple-view) .col-acc-min { width: 70px; }
    .results-table:not(.simple-view) .col-out-tokens { width: 60px; }
    .results-table:not(.simple-view) .col-completion { width: 75px; }
    
    /* Result cards (if using card view) */
    .result-card {
        padding: 12px;
    }
    
    /* Summary stats */
    .results-summary {
        flex-direction: column;
        gap: 8px;
    }
    
    .summary-stat {
        width: 100%;
        justify-content: space-between;
    }

    /* Bar chart view — mobile */
    .results-chart-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 80px;
    }

    .chart-bar-row {
        gap: 6px;
        padding: 6px 8px;
    }

    .chart-bar-rank {
        flex: 0 0 22px;
        font-size: 0.75rem;
    }

    .chart-bar-identity {
        flex: 0 0 100px;
    }

    .chart-bar-model {
        font-size: 0.75rem;
    }

    .chart-bar-provider {
        font-size: 0.65rem;
    }

    .chart-bar-bg {
        height: 24px;
    }

    .chart-bar-score {
        font-size: 0.65rem;
        right: 4px;
    }

    .chart-bar-meta {
        display: none;
    }
    
    /* Insights panel */
    .insights-panel {
        margin: 8px 8px 16px;
        padding: 10px 12px;
    }
    
    .insights-header {
        font-size: 0.7rem;
        margin-bottom: 8px;
    }
    
    .insight-item {
        font-size: 0.78rem;
    }
}


/* ============================================================================
   8. SMALL PHONES (480px and below)
   Extra compact adjustments
   ============================================================================ */
@media (max-width: 480px) {
    
    :root {
        --mobile-padding: 12px;
    }
    
    /* Even smaller header */
    .header-content {
        padding: 0 12px;
    }
    
    .app-logo {
        height: 24px;
    }
    
    .app-logo svg {
        height: 24px;
    }
    
    /* Hide credits icon, just show number */
    .credits-badge {
        padding: 4px 8px;
    }
    
    .credits-icon {
        display: none;
    }
    
    /* Smaller tier badge */
    .header-tier-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    
    /* Hide theme toggle on very small screens */
    .theme-toggle {
        display: none !important;
    }
    
    /* Compact credits - just number */
    .credits-badge {
        padding: 3px 6px;
        font-size: 0.7rem;
    }
    
    /* Guest banner - even more compact */
    .guest-mode-banner {
        padding: 6px 3%;
    }
    
    .guest-banner-text {
        font-size: 0.75rem;
    }
    
    /* Hide "Exploring OpenMark" label on very small screens */
    .guest-banner-text {
        display: none;
    }
    
    .guest-signin-btn {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    
    /* Model grid - single column, ultra compact */
    .model-grid {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .model-card {
        flex: none;
        width: 100%;
        padding: 8px 10px;
    }
    
    .model-card-name {
        font-size: 0.75rem;
        max-width: 180px;
    }
    
    /* Billing packs - single column */
    .billing-packs-grid {
        grid-template-columns: 1fr;
    }
    
    /* Full-width buttons always */
    .btn {
        width: 100%;
    }
    
    /* Quickstart adjustments */
    .quickstart-modal-body {
        padding: 20px 4%;
    }
    
    .quickstart-header h2 {
        font-size: 1.1rem;
    }

    .quickstart-outcomes {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .outcome-card {
        flex: 1;
        min-width: 90px;
        max-width: none;
        text-align: center;
        padding: 10px 6px;
    }

    /* Main tabs - smaller */
    .main-tab {
        padding: 10px 6px;
        font-size: 0.8rem;
    }
    
    /* Results table - even more compact */
    .results-table {
        font-size: 0.75rem;
        min-width: 500px;
    }
    
    .results-table th,
    .results-table td {
        padding: 6px;
    }
    
    .results-table th:first-child,
    .results-table td:first-child {
        min-width: 50px;
    }
    
    .results-table th:nth-child(2),
    .results-table td:nth-child(2) {
        left: 50px;
        min-width: 100px;
        max-width: 110px;
    }
    
    .score-badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
}


/* ============================================================================
   9. TOUCH & INTERACTION IMPROVEMENTS
   ============================================================================ */
@media (max-width: 768px) {
    
    /* Improve tap targets */
    a, button, [role="button"], .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch (they stick on mobile) */
    @media (hover: none) {
        .btn:hover {
            /* Reset hover to normal state */
        }
        
        .model-card:hover {
            transform: none;
            box-shadow: none;
        }
        
        .task-card:hover {
            transform: none;
        }
    }
    
    /* Active states for touch feedback */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .model-card:active {
        transform: scale(0.98);
    }
    
    /* Disable text selection on interactive elements */
    button, .btn, .model-card, .task-card, .nav-item {
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling */
    .scrollable {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}


/* ============================================================================
   10. UTILITY CLASSES FOR MOBILE
   ============================================================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile-flex {
        display: flex !important;
    }
    
    .show-mobile-inline {
        display: inline !important;
    }
}

/* Full width on mobile */
@media (max-width: 768px) {
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Stack on mobile (flex-direction: column) */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column !important;
    }
}

/* Center on mobile */
@media (max-width: 768px) {
    .mobile-center {
        text-align: center !important;
        justify-content: center !important;
    }
}


/* ============================================================================
   11. SAFE AREA INSETS (iPhone notch, etc.)
   ============================================================================ */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        /* Account for notch and home indicator */
        .header-content {
            padding-left: max(var(--mobile-padding), env(safe-area-inset-left));
            padding-right: max(var(--mobile-padding), env(safe-area-inset-right));
        }
        
        .modal-content {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
        
        .quickstart-modal-content,
        .signin-modal {
            padding-bottom: max(24px, env(safe-area-inset-bottom));
        }
        
        .mobile-nav {
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }
    }
}


/* ============================================================================
   12. LANDSCAPE MODE HANDLING
   Mobile-like behavior with hidden task rail for landscape phones
   ============================================================================ */

/* Landscape phones: Hide task rail, use mobile navigation */
@media (orientation: landscape) and (max-height: 500px) {
    
    /* === HIDE TASK RAIL - Use hamburger menu instead === */
    .task-rail {
        display: none !important;
    }
    
    /* Show hamburger menu button */
    .mobile-menu-btn,
    #mobile-menu-btn {
        display: flex !important;
    }
    
    /* === COMPACT HEADER === */
    .header-content {
        height: 40px !important;
        padding: 0 10px !important;
    }
    
    .app-logo {
        height: 20px !important;
    }
    
    .app-logo svg {
        height: 20px !important;
    }
    
    .credits-badge {
        padding: 2px 6px !important;
        font-size: 0.7rem !important;
    }
    
    .header-tier-badge {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
    }
    
    .user-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* === COMPACT TABS === */
    .main-tabs {
        height: 30px !important;
        padding: 0 8px !important;
    }
    
    .main-tab {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
    }
    
    /* === HIDE GUEST BANNER === */
    .guest-mode-banner {
        display: none !important;
    }
    
    /* === KEEP MOBILE PANEL BEHAVIOR (one panel at a time) === */
    .creator-view {
        flex-direction: row !important;
        overflow-x: auto !important;
    }
    
    .left-panel,
    .right-panel {
        min-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    /* Show mobile toggle buttons */
    .mobile-preview-toggle,
    .mobile-editor-toggle {
        display: inline-flex !important;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
    
    /* === COMPACT PANELS === */
    .panel-header,
    .panel-header-row {
        padding: 6px 10px !important;
        min-height: auto !important;
    }
    
    .panel-header h2 {
        font-size: 0.85rem !important;
    }
    
    /* Smaller mode switcher */
    .mode-switcher {
        gap: 0 !important;
    }
    
    .mode-btn {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }
    
    /* Compact Generate button */
    .split-button-container {
        max-width: 150px !important;
    }
    
    .split-main {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* === BENCHMARK TAB === */
    .benchmark-container.two-column-layout {
        flex-direction: row !important;
        overflow-x: auto !important;
    }
    
    .benchmark-container .left-panel,
    .benchmark-container .right-panel {
        min-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    /* Show benchmark mobile tabs */
    .benchmark-mobile-tabs {
        display: flex !important;
    }
    
    /* === RESULTS TAB === */
    .results-header {
        padding: 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .results-title-row h2 {
        font-size: 1rem !important;
    }
    
    /* === MODALS - COMPACT === */
    .modal-content:not(.quickstart-modal-content) {
        max-width: 95% !important;
        max-height: 90vh !important;
        height: auto !important;
        border-radius: 8px !important;
    }
    
    .modal-header {
        padding: 8px 12px !important;
    }
    
    .modal-header h2 {
        font-size: 0.9rem !important;
    }
    
    .modal-body {
        padding: 10px !important;
    }
}

/* ============================================================================
   GUIDED BENCHMARK — DISABLED ON MOBILE
   The guided benchmark tour requires desktop screen space for interactive
   steps (typing in textarea, clicking buttons under tooltips).
   ============================================================================ */

/* Guided Benchmark menu items are now visible on mobile */

/* Results header controls — compact Share/Export on mobile portrait */
@media (max-width: 768px) {
    .results-header-controls {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100%;
    }

    /* Icon-only Share button on mobile, matched to Export button height */
    .btn-share {
        padding: 6px 20px !important;
        font-size: 0 !important;
        gap: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        box-shadow: none !important;
        justify-content: center !important;
    }
    .btn-share .share-icon-svg {
        width: 16px;
        height: 16px;
    }

    /* Export dropdown — open to right so it doesn't clip off-screen */
    .export-dropdown-menu {
        right: auto;
        left: 0;
    }
}

/* Mobile delete button on task cards — always visible (no hover on touch) */
@media (max-width: 768px) {
    .task-card-delete-btn {
        opacity: 0.6;
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        font-size: 1.1rem;
    }

    .task-card-delete-btn:active {
        opacity: 1;
        background: rgba(239, 68, 68, 0.3);
    }
}

/* Stop/Cancel button in results — compact on mobile */
@media (max-width: 768px) {
    #results-cancel-btn.btn-cancel {
        width: auto;
        max-width: 120px;
        padding: 6px 14px;
        font-size: 0.8rem;
        border-radius: 6px;
        flex-shrink: 0;
    }
}

/* ============================================================================
   LANDSCAPE ORIENTATION BLOCK
   Visibility controlled by JS (initLandscapeOverlay) to reliably
   distinguish phones from zoomed-in desktops using screen.width/height.
   ============================================================================ */

#landscape-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--bg-primary, #0a0a0f);
    color: var(--text-primary, #e4e4e7);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 24px;
}

#landscape-overlay.visible {
    display: flex;
}

/* Don't block the demo video lightbox — the explainer is landscape-native */
body.demo-video-open #landscape-overlay {
    display: none !important;
}

#landscape-overlay .rotate-icon {
    font-size: 3rem;
    animation: rotateHint 1.5s ease-in-out infinite;
}

#landscape-overlay h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

#landscape-overlay p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.7;
    max-width: 280px;
}

@keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-30deg); }
    75% { transform: rotate(30deg); }
}

@media (max-width: 768px) {
    /* Showcase banner — compact on mobile */
    .showcase-banner {
        gap: 6px;
        padding: 5px 10px;
    }

    .showcase-banner-text {
        display: none;
    }

    .showcase-cta-btn {
        flex: 1;
        padding: 3px 10px !important;
        font-size: 0.72rem !important;
    }

    /* Tour nudge — bottom-positioned card on mobile */
    .tour-nudge {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 16px;
        transform: none;
        max-width: none;
        width: auto;
        gap: 10px;
        padding: 20px 16px 16px;
        animation: tourNudgeSlideInMobile 0.35s ease-out;
    }

    @keyframes tourNudgeSlideInMobile {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .tour-nudge-text {
        font-size: 0.95rem;
    }

    .tour-nudge-btn {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }

    .tour-nudge-close {
        top: 6px;
        right: 8px;
    }
}

/* ============================================================================
   END OF MOBILE STYLES
   ============================================================================ */


/* Plans tab cards: one feature per row at a readable size (the two-column
   12px grid was hard to read on phones). Last in the file so it wins over the
   earlier same-specificity rules. */
@media (max-width: 768px) {
    .mobile-tier-features {
        grid-template-columns: 1fr;
        gap: 0;
        font-size: 0.875rem;
    }
    .mobile-tier-feature {
        font-size: 0.875rem;
        padding: 5px 0;
    }
    .mobile-tier-feature-label {
        opacity: 0.75;
    }
}