/* DESKTOP STYLES */

/*
CSS ARCHITECTURE RULES:
- This file contains rules for desktop only (min-width: 1340px)
- Mobile rules are in mobile.css (max-width: 1339px) 
- 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 (min-width: 1340px) {
    
    /* Desktop chat header actions */
    .chat-header-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .chat-header-actions .btn {
        white-space: nowrap;
        font-size: 0.9rem;
        padding: 4px 8px;
    }

    /* Desktop summary modal adjustments */
    .summary-content {
        max-height: 60vh;
    }

    .summary-actions .btn {
        min-width: 150px;
    }
    
    /* Desktop base styles */
    body {
        height: 100vh;
        overflow: auto; /* Migrated from base.css */
    }

    .main-content {
        flex-direction: row;
        height: calc(100vh - 60px);
    }

    .chat-container {
        flex: 1;
        width: 66.67%;
        height: calc(100vh - 60px);
        min-height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        display: flex !important;
        flex-direction: column !important;
    }

    .whiteboard-container {
        width: 33.33%;
        height: calc(100vh - 60px);
        min-height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* FORCE hide mobile tabs on desktop with multiple properties */
    .mobile-tabs,
    div.mobile-tabs,
    .mobile-tab {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    
    .app-header {
        position: sticky; /* Keep header visible when scrolling */
        top: 0;
        z-index: 1000;
        height: 60px; /* Fixed height to match main-content calculation */
        min-height: 60px;
        max-height: 60px;
        padding: 0.5rem 1rem; /* Reduced padding to give more space for links */
        background-color: var(--background-color);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        /* Ensure header is not cut off */
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .main-content {
        height: calc(100vh - 60px);
        flex-direction: row;
        overflow-x: hidden; /* Prevent horizontal overflow */
        max-width: 100vw; /* Ensure it doesn't exceed viewport */
    }
    
    body.user-logged-in .main-content {
        height: calc(100vh - 60px);
        min-height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        overflow: hidden !important; /* Hide overflow to enable proper chat scrolling */
    }
    
    /* 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;
    }
    
    /* Fixed height containers only for logged-in users (normal chat/whiteboard use) */
    body.user-logged-in .chat-container, 
    body.user-logged-in .whiteboard-container {
        display: flex !important;
        height: calc(100vh - 60px) !important; /* Fixed height for desktop */
        min-height: calc(100vh - 60px) !important; /* Prevent shrinking */
        max-height: calc(100vh - 60px) !important; /* Prevent expanding */
        max-width: none !important; /* Remove mobile max-width */
        /* Preserve original width ratios: 66.67% for chat, 33.33% for whiteboard */
    }
    
    /* Width ratios only for logged-in users (side-by-side layout) */
    body.user-logged-in .chat-container {
        width: 66.67% !important; /* Restore 2/3 width */
    }
    
    body.user-logged-in .whiteboard-container {
        width: 33.33% !important; /* Restore 1/3 width */
    }
    
    /* REMOVED: mobile-tabs rule - consolidated below */
    
    .app-header .header-nav {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        gap: 0.25rem !important; /* Reduced spacing between nav links for more space */
        flex: 1 !important; /* Take available space */
        justify-content: flex-start !important; /* Move links closer to logo */
        margin-left: 1rem !important; /* Add margin to move links closer to logo */
    }

    /* Hide hamburger menu on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* Show logo on desktop */
    .main-logo {
        display: block !important;
    }

    .header-nav .nav-link {
        padding: 0.5rem 1rem !important; /* Desktop nav link padding */
        min-height: auto !important; /* Override mobile min-height */
        width: auto !important; /* Override mobile full width */
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
    }

    /* Desktop auth nav links - ensure consistent styling */
    .header-auth .nav-link {
        padding: 0.5rem 1rem !important; /* Desktop auth nav padding */
        margin-right: 0.5rem !important;
        white-space: nowrap !important;
        min-height: auto !important;
        width: auto !important;
        text-align: center !important;
    }
    
    /* Desktop header-auth rules - moved from layout.css */
    .header-auth {
        gap: 1rem;
        justify-content: flex-end; /* Align to right edge */
    }
    
    .header-auth .auth-section {
        display: flex;
        gap: 1.2rem;
        justify-content: flex-end; /* Align to right edge */
    }
    
    .header-auth #clerk-user-button {
        margin-right: 16px;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    /* Desktop language selector styling - moved from components.css */
    .language-select-button {
        display: flex;
        align-items: center;
        padding: 0px 28px 4px 8px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 1.8rem; /* Larger font size for the flag emoji */
        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;
    }
    
    /* Desktop auth link styling */
    .auth-link {
        font-size: 1rem !important; /* Desktop font size */
        padding: 0.5rem 1rem !important; /* Desktop padding */
        margin-right: 0.5rem !important; /* Desktop margin */
    }

    /* Desktop: Trial counter in header-nav (after Premium link) */
    .header-nav .trial-counter {
        margin-left: 12px;
        margin-right: 0;
        font-size: 12px;
        padding: 3px 6px;
    }
    
    .input-container {
        position: static !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        width: auto !important; /* Reset mobile width */
        max-width: none !important; /* Remove mobile constraints */
        /* REMOVED: display: flex !important - was overriding display: none for placeholder */
        /* FIX: Position input field lower on desktop relative to screen bottom */
        margin-bottom: 0 !important; /* Remove mobile margin */
        margin-top: auto !important; /* Push to bottom */
        /* FIX: Align chat input field lower to match whiteboard input field positioning */
        padding-bottom: 0 !important; /* Remove bottom padding to lower the input field */
        flex-shrink: 0 !important; /* Don't allow input to shrink */
    }
    
    /* Only show input container as flex when NOT in placeholder mode */
    .input-container:not([style*="display:none"]) {
        display: flex !important; /* Ensure proper display only when visible */
    }
    
    /* FIX: Reduce bottom padding on chat container to align input field with whiteboard */
    .chat-container {
        padding-bottom: 0 !important; /* Remove bottom padding to lower the input field */
    }
    
    .legal-sections {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Reset mobile-specific sizing that might cause overflow */
    .chat-input-wrapper, .whiteboard-input-wrapper {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        flex: 1 !important;
    }

    /* Desktop chat layout fixes - removed redundant display flex (already in common.css) */
    .chat-input-wrapper {
        flex-direction: column !important;
        height: 100% !important;
    }

    .chat-box {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important; /* Allow flex shrinking */
    }

    .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    /* CONSOLIDATED: Second input-container rule merged with first one above */
    
    .chat-box {
        width: auto !important;
        max-width: none !important;
    }
    
    /* REMOVED: mobile-active rules - these are mobile-specific and handled in mobile.css */
    
    /* Desktop overflow prevention - FIXED: Removed overflow-x:hidden to fix sticky positioning */
    body, html {
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: visible !important; /* Ensure header is not clipped */
    }
    
    /* Desktop body overflow rules - migrated from base.css */
    
    body.user-logged-in {
        overflow: auto;
        height: auto;
        min-height: 100vh;
    }
    
    body:not(.user-logged-in) {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Desktop main-content overflow rules - migrated from base.css */
    
    body:not(.user-logged-in) .main-content {
        height: auto !important; /* Allow main content to expand for chat placeholder */
        min-height: calc(100vh - 60px) !important; /* Minimum viewport height */
        max-height: none !important; /* No maximum constraint */
        overflow: visible !important; /* Allow content to expand */
        flex-direction: row !important; /* Keep side-by-side layout */
    }
    
    .app-container {
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: visible !important; /* Ensure header is not clipped */
    }
    
    /* Desktop-specific welcome and login content - allow natural expansion without overflow */
    body:not(.user-logged-in) .welcome-content-container {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important; /* Allow natural expansion */
        overflow: visible !important; /* No internal scrolling */
    }
    
    body:not(.user-logged-in) .clerk-auth-container {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important; /* Allow natural expansion */
        overflow: visible !important; /* No internal scrolling */
    }
    
    /* Hide header containers and their spacing for logged-out users */
    body:not(.user-logged-in) .chat-header-container,
    body:not(.user-logged-in) .whiteboard-header-container {
        display: none !important; /* Hide headers completely */
    }
    
    /* Remove background and padding from parent containers for logged-out users */
    body:not(.user-logged-in) .chat-container,
    body:not(.user-logged-in) .whiteboard-container {
        background: transparent !important; /* Remove any background */
        padding: 0 !important; /* Remove padding that creates visual separation */
    }
    
    /* Keep side-by-side layout but allow expansion for logged-out users - MERGED with above rule */
    
    /* Allow containers to expand naturally for logged-out users */
    body:not(.user-logged-in) .chat-container,
    body:not(.user-logged-in) .whiteboard-container {
        width: 50% !important; /* Equal width when showing welcome/login */
        height: auto !important; /* Auto height to fit content */
        min-height: auto !important; /* No minimum height */
        max-height: none !important; /* No maximum height */
        display: flex !important; /* Ensure flex display */
        flex-direction: column !important; /* Stack content vertically within each container */
    }
    
    /* Ensure legal sections are positioned below expanded main content */
    body:not(.user-logged-in) .legal-sections {
        margin-top: 0 !important; /* No extra margin, just flow naturally below */
        clear: both !important; /* Ensure it starts below any floated content */
    }
    
    /* Allow chat-container to expand on desktop when showing welcome content */

    /* Desktop-only fixes for chat layout - REMOVED DUPLICATE RULE */
    
    
    .chat-container.chat-active .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Desktop-specific overflow fixes to prevent whitespace issues */
    .chat-input-wrapper,
    .whiteboard-input-wrapper {
        overflow: hidden !important; /* Prevent content from expanding beyond container on desktop */
    }
    
    .chat-box {
        overflow: hidden !important; /* Prevent content from expanding beyond container on desktop */
    }
    
    /* Desktop-specific chat box height overrides - CONSOLIDATED RULE */
    .chat-container.chat-active .chat-box {
        height: calc(100vh - 80px) !important; /* Full height minus header and 20px bottom margin */
        min-height: 0 !important; /* Allow flex shrinking on desktop */
        max-height: calc(100vh - 80px) !important; /* Limit height to prevent overflow */
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Desktop chat placeholder layout - ensure proper 66/33-like split */
    .chat-placeholder-left-column {
        flex: 2 !important; /* Takes 2/3 of space (like chat container) */
        width: 60% !important;
    }
    
    .chat-placeholder-right-column {
        flex: 1 !important; /* Takes 1/3 of space (like whiteboard) */  
        width: 35% !important;
    }

    /* Desktop contact info section styling */
    .contact-info-section {
        margin-top: 3rem !important;
        padding: 0 !important;
    }

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

    .contact-info-content {
        gap: 0.75rem !important;
        max-width: 600px !important;
        margin: 0 !important;
    }

    .contact-item {
        padding: 0.5rem 0 !important;
        min-height: auto !important;
    }

    .contact-label {
        min-width: 120px !important;
        font-size: 1rem !important;
    }

    .contact-value {
        font-size: 1rem !important;
    }

}