/* MOBILE STYLES - Consolidated for all mobile devices */

/*
CSS ARCHITECTURE RULES:
- This file contains rules for mobile only (max-width: 1339px)
- Desktop rules are in desktop.css (min-width: 1340px) 
- Common rules are in base.css, layout.css, components.css, etc.
- Rule migration logic:
  * If common rule exists + mobile rule exists + desktop rule missing → Copy common to desktop, remove from common
  * If common rule exists + desktop rule exists + mobile rule missing → Copy common to mobile, remove from common  
  * If common rule exists + both mobile and desktop rules exist → Remove from common
  * If common rule exists + neither mobile nor desktop rules exist → Keep in common
- Mobile and desktop rules never overlap due to media queries, avoiding inheritance issues
- Only common rules are used by both mobile AND desktop

PROPERTY-LEVEL MIGRATION:
- When moving rules from common to mobile/desktop, verify ALL CSS properties are accounted for
- Compare each property: common vs mobile vs desktop
- Copy missing properties from common to target file(s)
- Only remove common rule after all properties are properly migrated
- If conflicting values exist, keep the specific (mobile/desktop) value
- Merge properties into existing rules, don't create duplicate rules
*/

@media (max-width: 1339px) {
    /* Global overflow prevention for all elements */
    * {
        max-width: 100vw !important; /* Prevent any element from exceeding viewport */
        box-sizing: border-box !important; /* Include padding/border in width calculations */
    }
    
    /* Prevent mobile browser UI optimization from interfering with sticky header */
    html {
        /* Fix mobile viewport and scroll behavior */
        /* Prevent mobile browser from hiding UI elements on scroll */
        overscroll-behavior: none;
        -webkit-overscroll-behavior: none;
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
    }
    
    /* Mobile body overflow rules - migrated from base.css, modified for sticky positioning */
    body {
        overflow: visible !important; /* Allow sticky header to work on mobile */
        height: auto !important; /* Remove fixed height that can break sticky */
        min-height: 100vh !important; /* Use min-height instead */
    }
    
    body.user-logged-in {
        overflow: visible !important; /* Allow sticky header to work on mobile */
        height: auto !important;
        min-height: auto !important; /* Remove min-height to prevent extra space */
    }
    
    body:not(.user-logged-in) {
        overflow: visible !important; /* Allow sticky header to work on mobile */
        height: auto !important;
        min-height: 100vh !important;
    }
    
    
    /* Ensure app-container doesn't interfere with fixed positioning on mobile */
    .app-container {
        overflow: visible !important; /* Allow fixed header to work on mobile */
        overflow-x: hidden !important; /* Prevent horizontal overflow specifically */
        position: relative; /* Create a proper containing block */
        width: 100% !important; /* Ensure viewport width is respected */
        max-width: 100vw !important; /* Prevent exceeding viewport */
        box-sizing: border-box !important; /* Include padding/border in width calculations */
    }
    
    /* When mobile menu is open, ensure app-container doesn't clip it */
    .app-container:has(.header-nav.mobile-open) {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Ensure html and body don't interfere with sticky positioning but prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important; /* Prevent horizontal overflow */
        overflow-y: visible !important; /* Allow vertical scrolling for sticky header */
        width: 100% !important; /* Ensure viewport width is respected */
        max-width: 100vw !important; /* Prevent exceeding viewport */
    }
    
    /* Mobile main-content overflow rules - migrated from base.css, modified for sticky positioning */
    body.user-logged-in .main-content {
        height: auto !important; /* Use default height behavior */
        min-height: 0 !important; /* Allow flex shrinking */
        overflow-x: hidden !important; /* Prevent horizontal overflow */
        overflow-y: visible !important; /* Allow vertical scrolling for sticky header */
    }
    
    body:not(.user-logged-in) .main-content {
        height: auto !important; /* Allow main content to expand for chat placeholder */
        min-height: auto !important;
        overflow-x: hidden !important; /* Prevent horizontal overflow */
        overflow-y: visible !important; /* Allow vertical scrolling for sticky header */
    }
    
    .app-header {
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: 0;
        z-index: 1000; /* Fixed: Use consistent z-index with desktop */
        
        /* Hardware acceleration for smooth sticky positioning */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        
        /* Additional mobile sticky positioning fixes */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        
        /* FIXED: Use flex-wrap: nowrap to prevent multi-row layout that breaks sticky positioning */
        flex-wrap: nowrap;
        padding: 0.25rem 0.25rem; /* Reduced padding to prevent overflow */
        gap: 0.125rem; /* Reduced gap to prevent overflow */
        /* FIXED: Use consistent height for all mobile breakpoints */
        min-height: 60px; /* Fixed: Use consistent height with desktop */
        height: 60px; /* Fixed: Use consistent height with desktop */
        overflow: visible; /* Allow header-nav dropdown to show */
        
        /* FIXED: Add missing background color and styling to match desktop */
        background-color: var(--background-color);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        width: 100%;
        left: 0;
        right: 0;
    }
    
    /* Keep header elements on same row */
    .header-branding {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Align items to the left */
        width: 100%;
        gap: 0.5rem;
    }
    
    .header-controls {
        display: none; /* Not used on mobile */
    }
    
    .header-actions {
        display: none; /* Not used on mobile */
    }
    
    .header-auth {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0; /* Don't shrink */
        gap: 0.5rem;
        height: 100%;
        min-height: 48px;
        margin-left: auto; /* Push to the right side */
        max-width: 200px; /* Prevent trial counter from taking too much space */
    }
    
    /* Make language selector and user profile appropriately sized */
    .language-selector-container,
    .clerk-user-button {
        transform: scale(1); /* Normal size for better readability */
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        height: 100%; /* Take full height of parent */
    }
    
    /* Mobile trial counter styling */
    .header-auth .trial-counter {
        font-size: 11px; /* Smaller font for mobile */
        padding: 2px 4px; /* Smaller padding for mobile */
        margin: 0; /* Remove margin to prevent overflow */
        white-space: nowrap; /* Prevent text wrapping */
        max-width: 80px; /* Limit width to prevent overflow */
        overflow: hidden; /* Hide overflow text */
        text-overflow: ellipsis; /* Show ellipsis for overflow */
    }
    
    /* Mobile language selector styling - moved from components.css and improved */
    .language-select-button {
        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem !important; /* Smaller padding for mobile */
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 1.5rem !important; /* Even larger flag size for better visibility */
        font-weight: 600;
        color: #1E6BB8; /* Match Chat/Whiteboard heading color */
        position: relative;
        white-space: nowrap;
        height: 38px;
        line-height: 38px; /* Match height for better vertical alignment */
        margin-top: 6px; /* Additional vertical adjustment */
        background: linear-gradient(135deg, rgba(71, 163, 243, 0.06), rgba(30, 107, 184, 0.03)) !important;
    }
    
    .language-select-button::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    
    .language-select-button:hover {
        background-color: rgba(71, 163, 243, 0.15) !important;
    }
    
    .language-select-button:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Mobile auth link styling */
    .auth-link {
        font-size: 0.9rem !important; /* Slightly smaller for mobile */
        padding: 0.375rem 0.75rem !important; /* Smaller padding for mobile */
        margin-right: 0.25rem !important; /* Reduced margin for mobile */
    }
    
    /* Hide version number on mobile to reduce clutter */
    .version {
        display: none !important;
    }
    
    /* Mobile header auth layout - keep horizontal for language selector and user profile */
    .header-auth .auth-section {
        display: flex;
        flex-direction: row; /* Keep horizontal layout for side-by-side positioning */
        align-items: center;
        gap: 0.5rem; /* Increased gap for better spacing */
        justify-content: flex-end;
    }
    
    .error-message {
        max-width: 150px;
    }
    
    .main-content {
        /* Mobile main content - base properties */
        flex: 1;
        display: flex;
        background-color: var(--background-color);
        position: relative; /* Restored for absolute positioning of Clerk components */
        flex-direction: column !important; /* Override desktop row layout */
        gap: 0;
        padding: 0;
        width: 100% !important; /* Ensure viewport width is respected */
        max-width: 100vw !important; /* Prevent exceeding viewport */
        overflow-x: hidden !important; /* Prevent horizontal overflow */
        box-sizing: border-box !important; /* Include padding/border in width calculations */
    }
    
    /* Allow natural expansion when chat placeholder is visible */
    .main-content.chat-placeholder-mode {
        height: auto !important; /* Allow natural height for chat placeholder expansion */
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Allow content to expand naturally */
    }
    
    body.user-logged-in .main-content {
        /* Fixed height only for active chat/whiteboard - account for header (60px) + mobile tabs (40px) */
        height: calc(100vh - 120px);
        min-height: calc(100vh - 120px);
        max-height: calc(100vh - 120px);
        overflow: hidden;
    }
    
    /* Override fixed height for pages without chat content (about, premium) */
    body.user-logged-in .main-content:not(:has(.chat-container)):not(:has(.chat-placeholder-container)) {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Mobile specific overrides */
    .chat-container {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }

    .whiteboard-container {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        background: linear-gradient(135deg, rgba(71, 163, 243, 0.06), rgba(30, 107, 184, 0.03)) !important; /* Ensure background extends to full width */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile tabs styling */
    .mobile-tabs {
        display: flex !important; /* Show on mobile when logged in */
        background-color: var(--background-color);
        border-bottom: 1px solid var(--border-color);
        padding: 0;
        margin: 0;
        /* Removed position: sticky to allow natural document flow */
        /* Removed z-index as it's no longer needed for stacking */
        /* Ensure no gaps between header and tabs */
        margin-top: 0;
        border-top: none;
        /* Tabs now flow naturally in document order */
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px; /* Slightly more padding for better touch target */
        background: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        height: 40px; /* Fixed height for consistency */
        min-height: 40px; /* Fixed height for consistency */
        color: var(--text-secondary);
        font-size: 0.75rem; /* Slightly smaller font */
        font-weight: 500;
        justify-content: center; /* Center content vertically */
        position: relative; /* For absolute positioning of count */
    }

    .mobile-tab.active {
        color: var(--primary-color);
        background-color: rgba(124, 93, 250, 0.1);
        border-bottom: 2px solid var(--primary-color);
        /* Ensure active tab doesn't create spacing issues */
        margin-bottom: -1px; /* Pull active tab down to cover the bottom border */
    }

    .mobile-tab-icon {
        font-size: 1rem; /* Smaller icon */
        margin-bottom: 2px; /* Reduced margin */
    }

    .mobile-tab-label {
        font-size: 0.7rem; /* Smaller label */
        font-weight: 600;
        line-height: 1;
    }

    /* Whiteboard count styling */
    .whiteboard-count {
        position: absolute;
        top: 2px;
        right: 4px;
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
        color: white;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        z-index: 10;
    }

    .whiteboard-count:hover {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(255, 107, 107, 0.4);
    }

    .mobile-tab.active .whiteboard-count {
        background: linear-gradient(135deg, #7c5dfa, #9b7cff);
        box-shadow: 0 2px 4px rgba(124, 93, 250, 0.3);
    }

    .mobile-tab.active .whiteboard-count:hover {
        box-shadow: 0 3px 6px rgba(124, 93, 250, 0.4);
    }

    .mobile-tab, .mobile-menu-toggle, .hamburger-line {
        will-change: transform;
        backface-visibility: hidden;
    }

    .mobile-tabs, .mobile-menu-toggle, .checkout-modal-close {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    /* Mobile navigation */
    .app-header .header-nav.mobile-open {
        display: flex !important; /* Force show when open */
        position: absolute !important; /* Use absolute positioning */
        top: 100% !important; /* Position below header */
        left: 0 !important;
        right: 0 !important;
        background-color: var(--background-color) !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 1rem !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
        z-index: 10006 !important; /* Ensure it's above everything else */
        /* Force the menu to extend beyond any container constraints */
        transform: translateZ(0) !important; /* Create new stacking context */
        will-change: transform !important; /* Optimize for transforms */
        /* Remove all height constraints */
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        /* Ensure the menu can extend beyond viewport if needed */
        width: 100vw !important; /* Full viewport width */
        left: 0 !important;
        right: auto !important; /* Override right positioning */
    }
    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--background-color);
        border-bottom: 1px solid var(--border-color);
        padding: 1rem;
        z-index: 10005; /* Higher z-index to appear above other elements */
        flex-direction: column;
        gap: 0.5rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    /* Mobile nav link styling */
    .header-nav .nav-link {
        padding: 16px 24px;
        text-align: left;
        width: 100%;
        border-radius: 8px;
        transition: background-color 0.2s ease;
        white-space: nowrap;
        box-sizing: border-box;
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--text-primary);
        text-decoration: none;
    }
    
    .header-nav .nav-link:hover {
        background-color: rgba(124, 93, 250, 0.1);
        transform: none;
    }

    /* Mobile menu toggle styling */
    .mobile-menu-toggle {
        display: flex !important; /* Force show on mobile */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        margin: 0; /* Remove margin that might cause cutoff */
        min-height: 44px;
        min-width: 44px;
        flex-shrink: 0; /* Don't shrink */
        order: -1; /* Put hamburger first */
        position: relative;
        z-index: 10003; /* Above everything else */
        /* Ensure hamburger is fully visible and not cut off */
        margin-right: 8px; /* Small right margin only */
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Input container mobile positioning */
    .input-container {
        position: relative;
        background-color: var(--background-color);
        border-top: 1px solid var(--border-color);
        display: flex;
        gap: 8px;
        align-items: flex-end;
        padding: 12px 16px;
        margin-bottom: 0;
        scroll-margin-bottom: 0;
        /* Ensure proper positioning for virtual keyboard */
        scroll-margin-top: 0;
        scroll-padding-bottom: 0;
    }

    /* Mobile content containers */
    .mobile-content-container {
        width: 100%;
        max-width: 100vw; /* Prevent exceeding viewport */
        flex: 1;
        display: none; /* Hidden by default */
        height: auto;
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal overflow */
        padding: var(--spacing-md);
        padding-top: var(--spacing-md); /* Normal top padding since tabs are positioned correctly */
        background-color: white;
        box-sizing: border-box; /* Include padding/border in width calculations */
    }

    .mobile-content-container.mobile-active {
        display: flex !important;
        flex-direction: column;
    }

    .chat-container.mobile-active, .whiteboard-container.mobile-active {
        display: flex;
        flex: 1; /* Take up remaining space after mobile tabs */
        height: 100%;
        overflow: hidden;
    }

    .chat-container.mobile-active {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Stretch to full width */
        justify-content: flex-start !important;
        height: 100%; /* Full height */
        overflow: hidden; /* Prevent overflow */
        /* Fixed height for active chat - similar to desktop */
        min-height: 0; /* Allow flex shrinking */
    }
    
    /* Chat placeholder should not have fixed height - allow natural expansion */
    .chat-container:not(.mobile-active) {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .whiteboard-container.mobile-active {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Stretch to full width */
        justify-content: flex-start !important;
        padding-top: 0; /* Remove top padding to prevent cut-off */
        margin-top: 0; /* Ensure no margin that could cause overlap */
        height: 100%; /* Full height */
        overflow: hidden; /* Prevent overflow */
        min-height: 0; /* Allow flex shrinking */
        width: 100% !important; /* Ensure full width */
        max-width: 100% !important; /* Ensure full width */
    }

    /* Fix clear conversation button positioning */
    .chat-header-container {
        position: relative;
        background: white;
        padding: 0.15rem 0.5rem;
        border-bottom: 1px solid var(--border-color);
        margin-top: 0; /* Ensure no margin that could cause overlap with tabs */
        order: -1; /* Position before input container */
    }
    
    /* Fix whiteboard header positioning */
    .whiteboard-header-container {
        position: relative;
        background: linear-gradient(135deg, rgba(71, 163, 243, 0.06), rgba(30, 107, 184, 0.03));
        padding: 0.5rem 1rem;
        border-bottom: 1px solid var(--border-color);
        margin-top: 0; /* Ensure no margin that could cause overlap with tabs */
        order: -1; /* Position before input container */
        width: 100vw !important; /* Full viewport width */
        margin-left: calc(-50vw + 50%) !important; /* Center and extend to viewport edges */
        box-sizing: border-box !important;
        display: flex !important; /* Always show on mobile */
    }
    
    /* Ensure whiteboard header h2 is always visible on mobile */
    .whiteboard-header-container h2 {
        display: block !important; /* Always show on mobile */
    }
    
    /* Ensure clear whiteboard button is always visible on mobile */
    .whiteboard-header-container .btn {
        display: block !important; /* Always show on mobile */
    }
    
    #clear-whiteboard-form {
        display: block !important; /* Always show on mobile */
    }
    
    /* Hide chat header when on whiteboard tab on mobile */
    .whiteboard-container.mobile-active .chat-header-container {
        display: none !important;
    }
    
    /* Hide chat header when no active chat on mobile */
    .chat-container:not(.chat-active) .chat-header-container {
        display: none !important;
    }
    
    /* Hide chat header in chat placeholder mode on mobile */
    .main-content.chat-placeholder-mode .chat-header-container {
        display: none !important;
    }
    
    /* Show chat header when chat container has active chat */
    .chat-container.chat-active .chat-header-container {
        display: flex !important;
    }

    .chat-container.chat-active {
        padding: 0px 12px 12px 12px !important;
    }
    
    /* Hide chat header when explicitly disabled by JavaScript */
    .chat-header-container.hide-on-mobile {
        display: none !important;
    }
    
    /* Show chat header when on desktop (override mobile rule) */
    @media (min-width: 1340px) {
        .chat-header-container {
            display: flex !important;
        }
    }

    /* Mobile chat header - hide heading and make buttons full width */
    .chat-header-container h2 {
        display: none !important;
    }

    .chat-header-actions {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
    }

    .chat-header-actions .btn {
        font-size: 0.8rem;
        padding: 3px 6px;
        min-width: auto;
        flex: 0 0 auto;
        margin: 0;
        width: auto;
    }

    /* Mobile button alignment - left button aligned left, right button aligned right */
    .chat-header-actions .btn:first-child {
        text-align: left;
        justify-content: flex-start;
        margin-right: auto;
    }

    .chat-header-actions .btn:last-child {
        text-align: right;
        justify-content: flex-end;
        margin-left: auto;
    }

    /* Mobile summary modal adjustments */
    .summary-content {
        max-height: 50vh;
    }

    .summary-actions .btn {
        width: 100%;
        margin-top: 1rem;
    }

    /* Mobile checkout modal - fullscreen */
    .checkout-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        /* Mobile browser fixes */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Force centering on mobile */
        margin: 0 !important;
        padding: 0 !important;
    }

    .checkout-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: relative !important;
        overflow-y: auto !important;
        /* Mobile browser fixes */
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Force full width/height on mobile */
        min-width: 100% !important;
        min-height: 100% !important;
    }


    /* Fix chat input wrapper layout for mobile - following desktop pattern */
    .chat-input-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        flex: 1; /* Take remaining space after header */
    }

    .chat-box {
        flex: 1 !important; /* Take remaining space after header */
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important; /* Allow flex shrinking */
        overflow: hidden !important; /* Prevent content from expanding beyond container */
        padding: 0px 4px 0px 4px;
    }

    .chat-messages {
        flex: 1 !important; /* Take remaining space above input */
        overflow-y: auto !important; /* Scrollable messages area */
        min-height: 0 !important; /* Allow flex shrinking */
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        gap: var(--spacing-sm) !important; /* Reduced gap between messages on mobile */
    }

    /* Mobile chat message styling - smaller font and adjusted layout */
    .chat-messages li {
        font-size: 0.875rem; /* Smaller font size for mobile */
        line-height: 1.4; /* Tighter line height for mobile */
        margin-bottom: var(--spacing-sm) !important; /* Reduced margin between messages on mobile */
    }

    /* Mobile avatar positioning - to the right of timestamp */
    .chat-messages li .message-avatar {
        position: absolute;
        width: 28px; /* Larger size for better visibility */
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        z-index: 10; /* Higher z-index to float over text */
        top: 4px; /* Aligned with timestamp */
        right: 5px; /* 5px margin from right edge, positioned after timestamp */
        left: auto; /* Override left positioning */
        box-shadow: 0 0 0 1px var(--primary-color);
    }

    /* Mobile whiteboard activity messages */
    .chat-messages li.whiteboard-activity-message {
        font-size: 0.7rem;
        max-width: 80%;
        padding: 2px 12px;
        margin: 1px auto;
    }

    /* Position avatar containers to the right */
    .chat-messages li .user-avatar-container,
    .chat-messages li .helper-avatar-container {
        right: 5px; /* 5px margin from right edge, positioned after timestamp */
        left: auto; /* Override left positioning */
    }

    /* Minimal padding - text can flow under avatar */
    .chat-messages li.helper-message {
        padding: 12px 8px 12px 8px !important; /* Reduced to 4px on both sides */
    }

    .chat-messages li.user-message {
        padding: 12px 8px 12px 8px !important; /* Reduced to 4px on both sides */
    }

    /* Ensure text content starts below avatar area */
    .chat-messages li .message-content {
        margin-top: 2px; /* Small margin to avoid overlap with avatar */
    }

    .input-container {
        background: white;
        border-top: 1px solid var(--border-color);
        z-index: 10;
        flex-shrink: 0 !important; /* Don't allow input to shrink */
        margin-bottom: 0; /* Remove bottom margin */
        box-shadow: 0 -2px 4px rgba(0,0,0,0.1); /* Add shadow to separate from content */
        display: flex; /* Ensure it displays as flex */
        padding: 12px 16px; /* Match desktop padding */
        
        /* Use normal positioning - let browser handle virtual keyboard */
        position: relative;
        width: 100%;
    }
    
    /* Ensure input container is visible when chat tab is active - high specificity to override JS
    body.user-logged-in .chat-container.mobile-active .input-container,
    .main-content .chat-container.mobile-active .input-container {
        display: flex !important;
    }
         */
    
    /* Also ensure input is visible when not in mobile tab mode but logged in */
    /* Removed this rule to let JavaScript control input visibility */
    
    /* Ensure input is visible when on chat tab - but let JS handle the actual visibility */
    /* Removed this rule to let JavaScript control input visibility based on message state */
    
    /* Hide input container when whiteboard tab is active */
    .whiteboard-container.mobile-active .input-container {
        display: none !important;
    }
    
    /* Ensure whiteboard sections are visible on mobile */
    .whiteboard-container.mobile-active .whiteboard-input-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    .whiteboard-container.mobile-active .whiteboard-sections-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        width: 100vw !important; /* Full viewport width */
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important; /* Center and extend to viewport edges */
        box-sizing: border-box !important;
    }

    /* Make whiteboard sections full width on mobile */
    .whiteboard-container.mobile-active .whiteboard-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .whiteboard-container.mobile-active .whiteboard-section h3 {
        width: 100% !important;
        margin: 0 0 var(--spacing-sm) 0 !important;
    }

    .whiteboard-container.mobile-active .whiteboard-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix whiteboard input overflow on mobile */
    .whiteboard-input {
        width: 100vw !important; /* Full viewport width */
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important; /* Center and extend to viewport edges */
        box-sizing: border-box !important;
        padding: 8px 16px !important; /* Adequate padding to prevent button cutoff */
        overflow: visible !important; /* Allow content to be visible */
    }

    .whiteboard-input input,
    .whiteboard-input select,
    .whiteboard-input button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reduce gaps and sizes for mobile whiteboard input */
    .whiteboard-input {
        gap: 6px !important; /* Smaller gap between elements */
    }

    .whiteboard-input select {
        min-width: 90px !important; /* Adequate dropdown width */
        max-width: 120px !important;
        flex-shrink: 1 !important; /* Allow shrinking */
    }

    .whiteboard-input button {
        min-width: 60px !important; /* Adequate button width */
        max-width: 80px !important;
        padding: 8px 8px !important; /* Adequate padding */
        font-size: 0.8rem !important; /* Readable font size */
        flex-shrink: 0 !important; /* Don't shrink buttons */
    }

    .whiteboard-input input {
        flex: 1 !important; /* Take remaining space */
        min-width: 0 !important; /* Allow shrinking */
    }

    /* Hide chat placeholder for logged-out mobile users */
    body:not(.user-logged-in) #chat-placeholder-container {
        display: none !important;
    }

    /* Mobile button styling for smaller text */
    .whiteboard-header-container .btn {
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
        min-height: 44px !important; /* Maintain touch target size */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Additional mobile styles moved from common.css */

    .welcome-panel {
        padding: var(--spacing-md);
        width: 95%;
    }


    .chat-placeholder-two-columns {
        flex-direction: column;
        align-items: center;
    }

    .payment-options {
        flex-direction: column;
    }

    .welcome-content {
        padding: var(--spacing-sm);
        max-width: 100%;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .feedback-form-container {
        margin: 0;
    }

    /* Mobile feedback submit button styling */
    .feedback-submit {
        width: auto !important;
        min-width: 200px !important;
        max-width: 300px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border: none !important;
        border-radius: var(--radius-sm) !important;
        background-color: var(--primary-color) !important;
        color: white !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease, transform 0.1s ease !important;
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .feedback-submit:hover:not(:disabled) {
        background-color: #6c52eb !important;
        transform: translateY(-1px) !important;
    }

    .feedback-submit:disabled {
        background-color: #95a5a6 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }

    /* Mobile contact info section styling */
    .contact-info-section {
        margin-top: 2rem !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-info-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
    }

    .contact-info-content {
        gap: 0.5rem !important;
    }

    .contact-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.25rem 0 !important;
        text-align: left !important;
    }

    .contact-label {
        min-width: auto !important;
        margin-right: 0 !important;
        margin-bottom: 0.25rem !important;
        font-size: 0.9rem !important;
    }

    .contact-value {
        font-size: 0.95rem !important;
        word-break: break-all !important;
    }

    /* Mobile link overflow fixes */
    .legal-container a {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        display: inline-block !important;
    }

    /* Mobile common explanation section styling */
    .about-common-explanation {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        border-radius: var(--radius-sm) !important;
    }

    .common-explanation-heading {
        font-size: 1.2rem !important;
        margin-bottom: 0.75rem !important;
    }

    .common-explanation-section-heading {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        margin-top: 1rem !important;
    }

    .common-explanation-section-heading:first-of-type {
        margin-top: 0 !important;
    }

    .common-explanation-text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.75rem !important;
    }

    .common-explanation-link {
        margin-top: 0.75rem !important;
    }

    .common-explanation-link a {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        display: inline-block !important;
    }

    /* Mobile developer photo and footer styling */
    .common-explanation-footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
    }

    .developer-photo {
        width: 170px !important;
        height: 170px !important;
    }

    .common-explanation-quote {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .common-explanation-footer .common-explanation-link {
        margin: 0 !important;
        flex: none !important;
    }

    /* Mobile feedback form input styling */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="number"] {
        width: 100% !important;
        padding: 0.75rem !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-sm) !important;
        font-size: 1rem !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
        box-sizing: border-box !important;
        background-color: #fff !important;
    }

    .form-group input[type="text"]:focus,
    .form-group input[type="email"]:focus,
    .form-group input[type="number"]:focus {
        outline: none !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(124, 93, 250, 0.1) !important;
    }

    .premium-container {
        max-width: 100%;
        padding: var(--spacing-md);
        margin: 0;
    }

    /* Action buttons for smaller screens */
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .site-footer {
        padding: 1.5rem 0;
        margin-top: 1.5rem;
    }

    /* Payment result container for small screens */
    .payment-result-container {
        min-height: calc(100vh - 50px);
        padding: 0.75rem 0.25rem;
    }

    /* Very small screens adjustments */
    .premium-container {
        padding: var(--spacing-sm);
    }

    /* Mobile login button styling */
    .premium-container .login-button {
        min-width: auto !important;
        max-width: 100% !important;
        width: auto !important;
        min-width: 180px !important;
        box-sizing: border-box !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-size: 1rem !important;
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .premium-container .login-prompt {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: var(--spacing-md) !important;
    }

    /* Mobile-responsive privacy table */
    .privacy-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important; /* Allow horizontal scrolling as fallback */
        display: block !important; /* Change to block for mobile */
        border: none !important;
        box-sizing: border-box !important;
        margin: 1rem 0 !important; /* Ensure proper spacing */
    }

    /* Ensure any container around the table doesn't overflow */
    .legal-content .privacy-table,
    .welcome-content .privacy-table {
        max-width: calc(100vw - 2rem) !important; /* Account for container padding */
    }

    .privacy-table thead {
        display: none !important; /* Hide headers on mobile */
    }

    .privacy-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .privacy-table-main-row {
        display: block !important;
        border: 1px solid var(--border-color) !important;
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
        border-radius: var(--radius-sm) !important;
        background: white !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .privacy-table-main-row td {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 1rem !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        text-align: left !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .privacy-table-main-row td:last-child {
        border-bottom: none !important;
    }

    /* Use data-label attributes for mobile headers */
    .privacy-table-main-row td:before {
        content: attr(data-label) ": " !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        display: inline-block !important;
        width: auto !important;
        margin-right: 0.5rem !important;
        word-break: normal !important; /* Prevent label text from breaking awkwardly */
    }

    /* Handle empty data-label gracefully */
    .privacy-table-main-row td[data-label=""]:before,
    .privacy-table-main-row td:not([data-label]):before {
        display: none !important;
    }

    .privacy-table-explanation-row {
        display: block !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .privacy-table-explanation {
        display: block !important;
        width: 100% !important;
        padding: 1rem !important;
        background: #f8f9fa !important;
        border-radius: var(--radius-sm) !important;
        border: 1px solid var(--border-color) !important;
        font-style: italic !important;
        color: var(--text-secondary) !important;
        box-sizing: border-box !important;
    }

    /* Mobile Clerk modal fixes */
    .cl-modalContent {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
        /* Keep top and bottom padding for proper spacing */
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Landscape mobile optimizations */
    @media (max-height: 500px) {
        .app-header {
            padding: 0.125rem;
            min-height: 40px; /* Even smaller for landscape */
            height: 40px;
        }

        .main-content {
            /* In landscape mode: header (40px) + mobile tabs (40px) = 80px */
            height: calc(100vh - 80px);
            min-height: calc(100vh - 80px);
            max-height: calc(100vh - 80px);
        }

        .mobile-tabs {
            top: 40px;
        }
    }
}