/**
 * Light Mode & Mobile UI Fixes
 * 
 * This CSS fixes issues with light mode display on mobile
 * and improves the visibility of content in various panels.
 * 
 * Version: 1.0.0 (May 13, 2025)
 */

/* Mobile Light Mode Fixes */
@media (max-width: 767px) {
    /* Core fixes for light mode containers */
    html[data-theme="light"] .mobile-panel,
    html[data-theme="light"] .mobile-panels,
    html[data-theme="light"] #mobile-container,
    html[data-theme="light"] .dashboard-content,
    html[data-theme="light"] .panel-content,
    html[data-theme="light"] .mobile-panel .panel-content {
        background-color: #f5f5f7 !important;
        color: #333 !important;
    }
    
    /* Panel header styling in light mode */
    html[data-theme="light"] .panel-header {
        background-color: #e0e0e5 !important;
        border-bottom: 1px solid #ccc !important;
        color: #333 !important;
    }
    
    html[data-theme="light"] .panel-header h2 {
        color: #0066cc !important;
    }
    
    /* Fix for models grid display */
    html[data-theme="light"] .models-grid {
        background-color: transparent !important;
    }
    
    /* Fix model card visibility in light mode */
    html[data-theme="light"] .model-card {
        background-color: #fff !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    }
    
    html[data-theme="light"] .model-card:hover {
        background-color: #f0f7ff !important;
        border-color: #0066cc !important;
    }
    
    html[data-theme="light"] .model-card .model-name {
        color: #0066cc !important;
    }
    
    html[data-theme="light"] .model-card .model-size {
        color: #666 !important;
    }
    
    /* Fix for chat messages in light mode */
    html[data-theme="light"] .chat-message {
        background-color: #fff !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    html[data-theme="light"] .user-message {
        background-color: #e6f7ff !important;
        border: 1px solid #b3e0ff !important;
    }
    
    html[data-theme="light"] .bot-message {
        background-color: #f0f0f0 !important;
        border: 1px solid #ddd !important;
    }
    
    /* Fix for chat history items */
    html[data-theme="light"] .chat-item {
        background-color: #fff !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    html[data-theme="light"] .chat-item:hover {
        background-color: #f0f7ff !important;
        border-color: #0066cc !important;
    }
    
    html[data-theme="light"] .chat-item .chat-title {
        color: #0066cc !important;
    }
    
    /* Navigation panel improvements */
    .mobile-chat-history-container {
        padding: 10px !important;
    }
    
    .mobile-chat-history-container h3 {
        text-align: center !important;
        margin-bottom: 15px !important;
        color: var(--accent-color, #00f0ff) !important;
    }
    
    html[data-theme="light"] .mobile-chat-history-container h3 {
        color: #0066cc !important;
    }
    
    /* Ensure chat container has proper background in light mode */
    html[data-theme="light"] .chat-container {
        background-color: #f5f5f7 !important;
    }
    
    /* Input styling in light mode */
    html[data-theme="light"] .chat-input,
    html[data-theme="light"] textarea,
    html[data-theme="light"] input[type="text"],
    html[data-theme="light"] select {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }
    
    html[data-theme="light"] .chat-buttons button {
        background-color: #0066cc !important;
        color: #fff !important;
        border: none !important;
    }
    
    html[data-theme="light"] .primary-button {
        background-color: #0066cc !important;
        color: #fff !important;
    }
    
    html[data-theme="light"] .secondary-button {
        background-color: #666 !important;
        color: #fff !important;
    }
    
    html[data-theme="light"] .danger-button {
        background-color: #cc3300 !important;
        color: #fff !important;
    }
    
    /* Footer navigation in light mode */
    html[data-theme="light"] .mobile-navigation {
        background-color: #e0e0e5 !important;
        border-top: 1px solid #ccc !important;
    }
    
    html[data-theme="light"] .panel-tab {
        color: #666 !important;
    }
    
    html[data-theme="light"] .panel-tab.active {
        color: #0066cc !important;
        background-color: rgba(0, 102, 204, 0.1) !important;
    }
    
    /* Settings modal in light mode */
    html[data-theme="light"] #settings-modal {
        background-color: rgba(240, 240, 240, 0.9) !important;
    }
    
    html[data-theme="light"] #settings-modal .modal-content {
        background-color: #f5f5f7 !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
    }
    
    html[data-theme="light"] #settings-modal .modal-header {
        background-color: #e0e0e5 !important;
        border-bottom: 1px solid #ccc !important;
    }
    
    html[data-theme="light"] #settings-modal h2,
    html[data-theme="light"] #settings-modal h3 {
        color: #0066cc !important;
    }
    
    /* Fixes for mobile content visibility */
    .mobile-panel .panel-content:empty::before {
        content: "Loading content..." !important;
        display: block !important;
        padding: 20px !important;
        text-align: center !important;
        color: var(--text-color, #fff) !important;
    }
    
    #mobile-model-panel .panel-content:empty::before {
        content: "Loading models..." !important;
    }
    
    #mobile-nav-panel .panel-content:empty::before {
        content: "Loading chat history..." !important;
    }
    
    /* Fix for floating connection indicator */
    .mobile-floating-connection {
        position: fixed !important;
        top: 10px !important;
        right: 70px !important;
        z-index: 1050 !important;
        display: flex !important;
        align-items: center !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        border-radius: 20px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    html[data-theme="light"] .mobile-floating-connection {
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    }
    
    .mobile-floating-connection .connection-icon {
        margin-right: 5px !important;
    }
    
    .mobile-floating-connection .status-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: #ff6b00 !important;
        display: inline-block !important;
    }
    
    .mobile-floating-connection .status-dot.connected {
        background-color: #00ff9d !important;
    }
    
    .mobile-floating-connection .status-dot.disconnected {
        background-color: #ff3a3a !important;
    }
    
    .mobile-floating-connection .connection-text {
        font-size: 10px !important;
        text-transform: uppercase !important;
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Hide the header connection status on mobile */
    @media (max-width: 767px) {
        .dashboard-header .header-center {
            display: none !important;
        }
        
        .dashboard-header .connection-status {
            display: none !important;
        }
    }
}

/* Fix for the updateSendMessageButton error */
#global-status-functions {
    display: none !important;
}