/* --- Mobile Styles for Speech --- */

@media (max-width: 768px) {

    /* --- Base Layout --- */
    .app-container {
        position: relative;
        overflow-x: hidden;
    }

    .sidebar {
        width: 100%;
        height: 100%;
        display: flex; /* Keep flex for inner layout */
        flex-direction: column;
        transition: transform 0.3s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20; /* Sidebar is on top by default */
        background-color: #36393f; /* Ensure it has a background */
    }

    .chat-area {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10; /* Chat area is below */
        transform: translateX(100%); /* Hidden to the right */
        transition: transform 0.3s ease-in-out;
        display: flex; /* Must be flex to show content */
        flex-direction: column;
    }

    /* --- State Management with JS --- */
    body.chat-active .sidebar {
        transform: translateX(-100%); /* Slide sidebar out */
    }
    body.chat-active .chat-area {
        transform: translateX(0); /* Slide chat area in */
    }

    /* --- Back Button --- */
    .chat-header .back-button {
        display: block; /* Always show on mobile */
        margin-right: 15px;
        cursor: pointer;
    }
    
    /* --- Hide back button on desktop --- */
    @media (min-width: 769px) {
        .chat-header .back-button {
            display: none;
        }
    }

    /* --- Input Area --- */
    .chat-input {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .message-input {
        flex-grow: 1;
    }

    .user-panel {
        flex-shrink: 0;
    }

    /* --- FIX: User Profile Modal (v2) --- */
    .modal.user-profile-modal .modal-content {
        width: 95vw; /* Make modal almost full-width */
        padding: 16px; /* Reduce padding on mobile */
    }
    .modal.user-profile-modal .profile-form {
        flex-direction: column; /* Stack avatar and info vertically */
        gap: 16px;
    }
    .modal.user-profile-modal .avatar-section {
        align-items: center; /* Center avatar */
    }

    /* --- Call Widget & Modals --- */
    .modal.call-settings,
    .call-modal {
        width: 90vw; /* Make modals wider on small screens */
    }
    
    #call-widget .participant-view {
        min-height: 200px; /* Adjust participant view for smaller screens */
    }
}