/* ============================================
   MOBILE STYLES
   Breakpoint: < 768px
   ============================================ */

@media (max-width: 767px) {
    /* Hide desktop sidebar by default on mobile */
    .sidebar-desktop {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 260px !important;
    }

    .sidebar-desktop.mobile-open {
        transform: translateX(0);
    }

    /* Show mobile menu button in header */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px;
        background-color: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s;
        margin-right: 12px;
    }

    .mobile-menu-btn:hover {
        background-color: #f3f4f6;
    }

    .mobile-menu-icon {
        width: 20px;
        height: 20px;
        color: #4b5563;
    }

    /* Mobile Logo Container - ONLY visible on mobile */
    .mobile-logo-container {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: 16px !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: auto !important;
    }

    .mobile-logo-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .mobile-logo-text {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Hide desktop sidebar toggle button on mobile */
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* Main content area should take full width on mobile */
    .main-content-area {
        width: 100%;
    }

    /* Header adjustments for mobile */
    .main-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-left {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Hide LLM selector on mobile */
    .llm-selector-btn {
        display: none !important;
    }

    /* Hide footer on mobile */
    .main-footer {
        display: none !important;
    }

    /* Ensure app container takes full width */
    .app-container {
        width: 100%;
    }

    /* Mobile overlay styles */
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 40;
        transition: opacity 0.3s ease;
    }

    .mobile-overlay.hidden {
        display: none;
    }

    /* Sidebar should always show expanded content when open on mobile */
    .sidebar-desktop.mobile-open .sidebar-expanded-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .sidebar-desktop.mobile-open .sidebar-collapsed-content {
        display: none !important;
    }

    /* Ensure sidebar header is visible on mobile */
    .sidebar-desktop.mobile-open .sidebar-header {
        display: flex !important;
    }

    /* Logo text should be visible on mobile when sidebar is open */
    .sidebar-desktop.mobile-open .sidebar-logo-text {
        display: inline !important;
    }

    /* Navigation should be scrollable on mobile */
    .sidebar-nav-scroll {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Desktop styles - hide mobile menu button */
@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none !important;
    }

    .mobile-overlay {
        display: none !important;
    }

    .sidebar-desktop {
        position: relative !important;
        transform: none !important;
    }

    /* Hide mobile logo container on desktop */
    .mobile-logo-container {
        display: none !important;
    }
}