/* public/css/mobile-navigation-fix.css */

/* Ensure these variables are defined, or define them here for mobile scope */
/* Fallbacks are provided if not set, but ideally they are set in :root or theme files */
/* --header-height: 60px; */
/* --mobile-footer-height: 50px; */
/* --background-color: #1a1a1a; */ /* Example */
/* --background-color-content: #242424; */ /* Example */
/* --background-color-dark-gray: #1f1f1f; */ /* Example */
/* --border-color: #333; */ /* Example */
/* --accent-color-primary: #00aaff; */ /* Example */

@media (max-width: 768px) {
    body.mobile-view-active,
    body.mobile-view-active html {
        height: 100%;
        overflow: hidden; /* Prevent scrolling on body/html */
    }

    body.mobile-view-active .dashboard {
        display: flex;
        flex-direction: column;
        height: 100vh; /* Full viewport height */
        overflow: hidden; /* Prevent dashboard itself from scrolling */
    }

    body.mobile-view-active .dashboard-header {
        position: fixed; /* Fixed position */
        top: 0;
        left: 0;
        right: 0;
        width: 100%; /* Ensure full width */
        z-index: 1000;
        height: var(--header-height, 60px); /* Use variable or default */
        flex-shrink: 0; /* Prevent shrinking if dashboard is flex column */
        background-color: var(--background-color, #1a1a1a); /* Ensure header has background */
        border-bottom: 1px solid var(--border-color, #333);
    }

    /* Hide desktop-specific main content area on mobile */
    body.mobile-view-active .dashboard-sidebar,
    body.mobile-view-active .dashboard-main {
        display: none !important;
    }
    
    body.mobile-view-active .dashboard-content { /* The container of sidebar and main */
        display: none !important; /* Also hide the container if it adds layout */
    }

    /* Show and style mobile-specific panel container */
    body.mobile-view-active #mobile-container.mobile-panels {
        display: block; /* It's a block that contains the flex wrapper */
        flex-grow: 1; /* Takes up available space */
        overflow: hidden; /* Crucial: hides content outside its bounds, for X axis */
        padding-top: var(--header-height, 60px); /* Account for fixed header */
        padding-bottom: var(--mobile-footer-height, 50px); /* Account for fixed footer */
        position: relative; /* Needed for the absolutely positioned wrapper or for child context */
        width: 100%; /* Full width */
    }

    body.mobile-view-active .mobile-panels-wrapper {
        display: flex;
        height: 100%; /* Fill the #mobile-container's allocated height */
        width: 300%; /* 3 panels * 100% each */
        /* Initial transform will be set by JS to show the active panel */
        /* e.g., transform: translateX(-100%); for the middle panel */
        transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1);
        will-change: transform; /* Performance optimization for transform animations */
    }

    body.mobile-view-active .mobile-panel {
        min-width: 100%; /* Each panel is 100% of the #mobile-container width */
        width: 100%;
        height: 100%; /* Each panel is 100% of the #mobile-container height */
        overflow-y: auto; /* Allow vertical scrolling WITHIN each panel */
        background-color: var(--background-color-content, var(--background-color, #242424)); /* Ensure panels have background */
        /* Optional: Add padding inside each panel's content area if needed */
        /* .panel-content within .mobile-panel can have its own padding */
    }
    
    body.mobile-view-active .mobile-panel .panel-content {
        padding: 15px; /* Example padding for content within panels */
        height: 100%; /* Allow content to try and fill panel */
        box-sizing: border-box;
        display: flex; /* Use flex for chat panel to manage chat messages and form */
        flex-direction: column; /* Stack messages and form vertically */
    }

    /* Specific to mobile chat panel content for layout is handled by the general .panel-content flex properties */
    /* body.mobile-view-active #mobile-chat-panel .panel-content { } */ /* Removed empty ruleset */

    body.mobile-view-active #mobile-chat-panel .panel-content .chat-messages { /* Assuming cloned messages container gets this class or an ID */
        flex-grow: 1;
        overflow-y: auto;
        margin-bottom: 10px;
    }
    
    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-chat-form { /* Prefixed ID */
        display: flex;
        flex-direction: column; /* Stack input and buttons */
        gap: 8px;
        width: 100%; /* Take full width of panel content padding box */
        margin-top: auto; /* Push to bottom if panel-content is flex */
    }

    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-chat-input { /* Prefixed ID */
        width: 100%;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        flex-grow: 1; /* Allow textarea to take available space in its row if wrapped with icon */
        min-height: 40px; /* Ensure decent tap target */
    }
    
    /* Styling for the input container within the mobile chat form if it exists */
    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-chat-form .input-container {
        display: flex;
        align-items: center; /* Align textarea and icon button */
        width: 100%;
    }

    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-chat-form #mobile-chat-send-icon { /* Prefixed ID */
        display: block; /* Ensure it's visible */
        margin-left: 8px;
        padding: 8px 10px; /* Make it easier to tap */
        font-size: 1.2em;
    }
    
    /* Mobile chat buttons container */
    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-chat-form .chat-buttons {
        display: flex;
        gap: 8px;
        justify-content: space-between; /* Distribute buttons */
    }

    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-chat-form .chat-buttons button {
        flex-grow: 1; /* Allow buttons to share space */
        padding: 10px 5px; /* Adjust padding for smaller screens */
        font-size: 0.9em;
    }
    
    /* Ensure the main send button (TRANSMIT) is visible and functional */
    body.mobile-view-active #mobile-chat-panel .panel-content #mobile-send-button { /* Prefixed ID */
        display: block; /* Or inline-block, flex, etc., depending on layout */
    }

    /* Hide panel headers within mobile panels if a global fixed header is used */
    body.mobile-view-active .mobile-panel .panel-header {
        display: none; 
    }

    body.mobile-view-active .mobile-navigation { /* Footer */
        position: fixed; /* Fixed position */
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%; /* Ensure full width */
        z-index: 1000;
        height: var(--mobile-footer-height, 50px); /* Use variable or default */
        flex-shrink: 0; /* Prevent shrinking */
        background-color: var(--background-color-dark-gray, #1f1f1f); /* Ensure footer has background */
        border-top: 1px solid var(--border-color, #333);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    body.mobile-view-active .mobile-navigation .panel-tab {
        cursor: pointer;
        padding: 5px 10px;
        text-align: center;
        color: var(--text-color-secondary, #aaa); /* Default tab color */
        transition: color 0.2s ease-in-out;
        flex-grow: 1; /* Make tabs take equal space */
    }
    
    body.mobile-view-active .mobile-navigation .panel-tab.active .panel-tab-icon,
    body.mobile-view-active .mobile-navigation .panel-tab.active .panel-tab-label {
        color: var(--accent-color-primary, #00aaff); /* Active tab color */
        font-weight: bold;
    }

    body.mobile-view-active .mobile-navigation .panel-tab .panel-tab-icon {
        font-size: 1.2em;
        margin-bottom: 2px;
    }
    body.mobile-view-active .mobile-navigation .panel-tab .panel-tab-label {
        font-size: 0.75em;
        display: block;
    }
}