/* Palette AI - Mobile Styles (< 768px) */
/* Phones in portrait and landscape */

@media (max-width: 767px) {
    
    /* ========================================================================
       CRITICAL: iOS SAFE AREAS
       ======================================================================== */
    
    body {
        /* Prevent content from being hidden by notch/home indicator */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* ========================================================================
       LAYOUT - MOBILE GRID
       ======================================================================== */
    
    .app-container {
        /* Stack layout: Header → Chat → Input (sidebar hidden) */
        grid-template-columns: 0px 1fr 0px;
        grid-template-rows: 50px 1fr auto;
        grid-template-areas:
            "header header header"
            "main main main"
            "main main main";
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
    }
    
    /* ========================================================================
       APP HEADER - MOBILE
       ======================================================================== */
    
    .app-header {
        padding: 0 8px;
        height: 50px;
        /* Add safe area for notch */
        padding-top: max(8px, env(safe-area-inset-top));
    }
    
    .app-header-left,
    .app-header-right {
        gap: 4px;
    }
    
    .app-header-center {
        flex: 1;
        min-width: 0;
    }
    
    /* Header buttons - touch-friendly size */
    .header-icon-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    
    /* Model selector - compact on mobile */
    .model-selector-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 0;
        max-width: 100%;
    }
    
    #currentModelDisplay {
        /* Truncate long model names */
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
/* ========================================================================
   SIDEBAR - MOBILE (COMPLETELY HIDDEN - USE DRAWER INSTEAD)
   ======================================================================== */

    .sidebar {
        /* CRITICAL: Don't just hide with transform - completely remove from layout */
        display: none !important;
    }

    /* Remove any open state */
    .sidebar.open {
        display: none !important;
    }

    /* Hide sidebar-related overlays */
    #mobile-sidebar-overlay {
        display: none !important;
    }

    /* Menu toggle button - visible on mobile */
    .menu-toggle {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
        border-radius: 8px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .menu-toggle:hover,
    .menu-toggle:active {
        background: var(--bg-tertiary);
    }
    
    /* ========================================================================
       CHAT AREA - MOBILE
       ======================================================================== */
    
    .chat-area {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    
    /* Chat header */
    .chat-header {
        padding: 10px 12px;
        min-height: 50px;
    }
    
    .chat-title {
        font-size: 14px;
        font-weight: 600;
    }
    
    .chat-header-stats {
        font-size: 10px;
        gap: 8px;
    }
    
    .chat-header-btn {
        min-width: 40px;
        min-height: 40px;
    }
    
    /* Chat messages */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
        padding: 12px 8px;
        padding-bottom: 80px; /* Extra space for input */
    }
    
    /* Message bubbles */
    .message {
        margin-bottom: 16px;
        max-width: 100%; /* Full width on mobile */
    }
    
    .message-content {
        font-size: 14px;
        line-height: 1.6;
        padding: 10px 12px;
        max-width: 100%;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
        font-size: 16px;
        flex-shrink: 0;
    }
    
    /* User messages - right-aligned */
    .message.user {
        flex-direction: row-reverse;
    }
    
    .message.user .message-content {
        background: var(--accent-primary);
        color: white;
        border-radius: 16px 16px 4px 16px;
    }
    
    /* Assistant messages - left-aligned */
    .message.assistant .message-content {
        background: var(--bg-secondary);
        border-radius: 16px 16px 16px 4px;
    }
    
    /* ========================================================================
       CHAT INPUT - MOBILE (FIXED AT BOTTOM)
       ======================================================================== */
    
    .chat-input-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-primary);
        padding: 10px 12px;
        /* Add safe area for home indicator */
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 100;
    }
    
    .chat-input-wrapper {
        display: flex;
        gap: 6px;
        align-items: flex-end;
    }
    
    .chat-input {
        flex: 1;
        min-height: 44px;
        max-height: 120px;
        font-size: 15px; /* iOS uses 16px to prevent zoom */
        padding: 10px 12px;
        line-height: 1.4;
        resize: none;
    }
    
    /* Input buttons - touch-friendly */
    .chat-input-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        flex-shrink: 0;
    }
    
    /* File attachments bar */
    .file-attachments-bar {
        padding: 8px 12px;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .file-attachment {
        min-width: 120px;
        padding: 8px 10px;
        font-size: 12px;
    }
    
    /* ========================================================================
       POPUPS - FULL SCREEN ON MOBILE
       ======================================================================== */
    
    .analytics-popup,
    .account-popup,
    .settings-popup,
    .compare-popup,
    .conversation-details-popup,
    .model-info-popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        margin: 0 !important;
        /* Add safe areas */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .popup-header {
        padding: 14px 16px;
        min-height: 56px;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
    }
    
    .popup-title {
        font-size: 16px;
        font-weight: 600;
    }
    
    .popup-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .popup-content {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: calc(100% - 56px);
    }
    
    /* Popup tabs - scrollable on mobile */
    .popup-tabs {
        display: flex;
        gap: 6px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .popup-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .popup-tab {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
        min-width: 80px;
    }
    
    /* ========================================================================
       MODEL SELECTOR POPUP - FULL SCREEN
       ======================================================================== */
    
    .model-selector-popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-top: env(safe-area-inset-top);
    }
    
    .model-selector-search input {
        font-size: 16px; /* Prevent iOS zoom */
        min-height: 44px;
        padding: 10px 14px;
    }
    
    .model-item {
        padding: 12px 16px;
        min-height: 56px;
    }
    
    .model-name {
        font-size: 14px;
    }
    
    .model-description {
        font-size: 12px;
        margin-top: 4px;
    }
    
    /* ========================================================================
       ARTIFACT PANE - FULL SCREEN OVERLAY
       ======================================================================== */
    
    .app-container.artifacts-open .artifact-pane {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1500;
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .artifact-pane-header {
        padding: 14px 16px;
        min-height: 56px;
        /* Add safe area for notch */
        padding-top: max(14px, env(safe-area-inset-top));
    }
    
    .artifact-pane-close {
        min-width: 44px;
        min-height: 44px;
    }
    
    .artifact-pane-content {
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    /* ========================================================================
       CODE BLOCKS - MOBILE
       ======================================================================== */
    
    .code-block-wrapper {
        margin: 12px 0;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .code-block-header {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .code-block-wrapper pre {
        font-size: 12px;
        padding: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .code-block-wrapper code {
        font-size: 12px;
    }
    
    /* Code block buttons */
    .code-block-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
    }
    
    /* ========================================================================
       FORMS - MOBILE
       ======================================================================== */
    
    .setting-input,
    .setting-select {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 10px 12px;
        min-height: 44px;
    }
    
    .setting-slider {
        height: 8px; /* Larger for touch */
    }
    
    .setting-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    
    .setting-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
    
    /* Form buttons */
    .popup-action-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 15px;
        min-height: 48px;
    }
    
    /* ========================================================================
       ANALYTICS CHARTS - MOBILE
       ======================================================================== */
    
    .sparkline-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .sparkline-card {
        padding: 12px;
    }
    
    .chart-container {
        margin-bottom: 16px;
    }
    
    .chart-canvas {
        max-height: 200px;
    }
    
    .chart-nav-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* ========================================================================
       API KEY CARDS - STACK ON MOBILE
       ======================================================================== */
    
    .api-key-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .api-key-card {
        padding: 14px;
    }
    
    /* ========================================================================
       TABLES - HORIZONTAL SCROLL
       ======================================================================== */
    
    .analytics-section table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    /* ========================================================================
       SCROLL TO BOTTOM BUTTON
       ======================================================================== */
    
    .scroll-to-bottom-btn {
        bottom: 80px; /* Above input */
        right: 16px;
        width: 44px;
        height: 44px;
    }
    
    /* ========================================================================
       DRAG & DROP OVERLAY
       ======================================================================== */
    
    .drag-drop-overlay {
        padding: 24px;
    }
    
    .drag-drop-text {
        font-size: 14px;
    }
    
    /* ========================================================================
       MODALS - FULL SCREEN
       ======================================================================== */
    
    .modal-container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header {
        padding: 14px 16px;
        min-height: 56px;
    }
    
    .modal-content {
        padding: 16px;
        max-height: calc(100% - 120px);
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 12px 16px;
        gap: 10px;
    }
    
    .modal-footer button {
        flex: 1;
        min-height: 48px;
    }
    
    /* ========================================================================
       SYSTEM PROMPT MODAL - MOBILE
       ======================================================================== */
    
    #systemPromptModal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    
    #systemPromptTextarea {
        min-height: 150px;
        font-size: 14px;
    }
    
    /* ========================================================================
       THEME OPTIONS - STACK ON MOBILE
       ======================================================================== */
    
    .theme-option-btn {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 44px;
    }
    
    /* ========================================================================
       RADIO OPTIONS - MOBILE
       ======================================================================== */
    
    .radio-option {
        padding: 10px 12px;
        min-height: 48px;
    }
    
    .radio-option input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    
    /* ========================================================================
       SAFE AREA UTILITIES
       ======================================================================== */
    
    /* Apply safe areas to key elements */
    .app-header,
    .sidebar,
    .chat-input-container,
    .artifact-pane-header {
        --safe-top: env(safe-area-inset-top);
        --safe-bottom: env(safe-area-inset-bottom);
    }
    
    /* ========================================================================
       PERFORMANCE OPTIMIZATIONS
       ======================================================================== */
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* ========================================================================
       LANDSCAPE MOBILE (PHONES IN LANDSCAPE)
       ======================================================================== */
    
    @media (max-width: 767px) and (orientation: landscape) {
        
        /* Reduce header height in landscape */
        .app-header {
            height: 44px;
        }
        
        /* Reduce chat input padding */
        .chat-input-container {
            padding: 6px 12px;
        }
        
        .chat-input {
            min-height: 38px;
        }
        
        /* Reduce message spacing */
        .message {
            margin-bottom: 12px;
        }
        
        /* Smaller avatars */
        .message-avatar {
            width: 28px;
            height: 28px;
            font-size: 14px;
        }
    }
}

/* ========================================================================
   VERY SMALL PHONES (< 375px width)
   ======================================================================== */

@media (max-width: 374px) {
    
    /* Further reduce spacing on very small phones */
    .app-header {
        padding: 0 6px;
    }
    
    .header-icon-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
    }
    
    #currentModelDisplay {
        max-width: 100px;
    }
    
    .chat-messages {
        padding: 10px 6px;
    }
    
    .message-content {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .popup-content {
        padding: 12px;
    }
}

/* ========================================================================
   MODEL SELECTOR - CRITICAL MOBILE FIX
   ======================================================================== */

   @media (max-width: 767px) {
    /* Model selector button - prevent text overflow */
    .model-selector-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px !important;
        min-height: 40px;
        width: auto;
        max-width: 200px;
    }
    
    #currentModelDisplay {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
        font-size: 12px;
    }
    
    /* Model selector popup - FULL SCREEN */
    .model-selector-popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 3000 !important;
        padding-top: env(safe-area-inset-top);
    }
    
    /* Make popup scrollable */
    .model-selector-popup.open {
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
    }
    
    .model-selector-search {
        flex-shrink: 0;
        padding: 16px;
    }
    
    .model-selector-search input {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px 14px;
        min-height: 48px;
        width: 100%;
    }
    
    .model-selector-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 16px;
    }
    
    .model-item {
        padding: 14px 16px;
        min-height: 60px;
        margin-bottom: 8px;
        cursor: pointer;
        border-radius: 8px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
    }
    
    .model-item:active {
        background: var(--bg-tertiary);
    }
    
    .model-name {
        font-size: 15px;
        font-weight: 500;
    }
    
    .model-description {
        font-size: 13px;
        margin-top: 4px;
        color: var(--text-secondary);
    }

    /* ========================================================================
       MOBILE INLINE ARTIFACTS
       ======================================================================== */
    
    /* Inline artifact cards in chat messages */
    .inline-artifact-card {
        margin: 12px 0;
        padding: 12px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.1s ease, opacity 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Loading state */
    .inline-artifact-card.streaming {
        opacity: 0.6;
        pointer-events: none;
        cursor: default;
    }
    
    /* Complete/ready state */
    .inline-artifact-card.complete {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Touch feedback - active state */
    .inline-artifact-card:active {
        background: var(--bg-hover);
        transform: scale(0.98);
    }
    
    /* Streaming dots animation */
    .streaming-dots {
        display: inline-block;
    }
    
    .streaming-dots::after {
        content: '...';
        animation: dots 1.5s steps(4, end) infinite;
    }
    
    @keyframes dots {
        0%, 20% { content: '.'; }
        40% { content: '..'; }
        60%, 100% { content: '...'; }
    }
    
    /* ========================================================================
       MOBILE ARTIFACT FULLSCREEN MODAL
       ======================================================================== */
    
    /* Fullscreen overlay */
    #mobile-artifact-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        z-index: 3000;
        display: flex;
        flex-direction: column;
        touch-action: pan-y; /* Allow vertical panning only */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Header with safe area padding */
    #mobile-artifact-fullscreen > div:first-child {
        flex-shrink: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
        padding-top: max(14px, env(safe-area-inset-top));
    }
    
    /* Scrollable content area */
    #mobile-artifact-fullscreen > div:last-child {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    /* Back button - touch-friendly */
    #mobile-artifact-fullscreen .back-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    #mobile-artifact-fullscreen .back-btn:active {
        opacity: 0.6;
    }
    
    /* Copy button - touch-friendly */
    #mobile-artifact-fullscreen .copy-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        color: var(--text-primary);
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    #mobile-artifact-fullscreen .copy-btn:active {
        background: var(--bg-hover);
        transform: scale(0.96);
    }
    
    /* Code block in fullscreen */
    #mobile-artifact-fullscreen pre {
        background: var(--bg-secondary);
        padding: 16px;
        border-radius: 8px;
        overflow-x: auto;
        margin: 0;
        border: 1px solid var(--border-primary);
        -webkit-overflow-scrolling: touch;
    }
    
    #mobile-artifact-fullscreen code {
        font-size: 13px;
        line-height: 1.5;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
        -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
    }
    
    /* ========================================================================
       SLIDE ANIMATIONS FOR FULLSCREEN
       ======================================================================== */
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes slideDown {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(100%);
            opacity: 0;
        }
    }

    /* Artifacts inside message bubbles */
    .message-bubble .inline-artifact-card {
        margin: 8px 0;
    }
    
    /* First artifact in message - no top margin */
    .message-bubble .inline-artifact-card:first-child {
        margin-top: 0;
    }
    
    /* Last artifact in message - no bottom margin */
    .message-bubble .inline-artifact-card:last-child {
        margin-bottom: 0;
    }

    /* ========================================================================
       TOUCH ENHANCEMENTS FOR ARTIFACTS
       ======================================================================== */
    
    /* Disable text selection during interaction */
    .inline-artifact-card {
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Haptic feedback hint (iOS) */
    @media (hover: none) and (pointer: coarse) {
        .inline-artifact-card:active {
            /* iOS will provide haptic feedback on :active */
        }
    }
    
    /* Prevent double-tap zoom on artifact cards */
    .inline-artifact-card,
    #mobile-artifact-fullscreen .back-btn,
    #mobile-artifact-fullscreen .copy-btn {
        touch-action: manipulation;
    }

    /* ========================================================================
       ARTIFACT THEME ADJUSTMENTS
       ======================================================================== */
    
    /* Ensure artifacts respect theme colors */
    .inline-artifact-card {
        color: var(--text-primary);
    }
    
    #mobile-artifact-fullscreen {
        color: var(--text-primary);
    }
    
    /* Code syntax highlighting in fullscreen */
    #mobile-artifact-fullscreen pre code {
        background: transparent;
    }
}