:root { --bg: #1a1a1a; --panel: #2d2d2d; --text: #e0e0e0; --accent: #00d4ff; }
body { background: var(--bg); color: var(--text); font-family: sans-serif; margin: 0; display: flex; height: 100vh; overflow: hidden;}

/* Auth Screen */
#auth-screen { position: absolute; top:0; left:0; width:100%; height:100%; background: var(--bg); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10;}
input, button { padding: 10px; margin: 5px; border-radius: 5px; border: none; }
input { background: #444; color: white; }
button { background: var(--accent); color: #000; cursor: pointer; font-weight: bold; }
button:hover { opacity: 0.8; }

/* Main App Layout */
#app-screen { display: none; width: 100%; height: 100%; display: flex; }
.sidebar { width: 300px; background: var(--panel); border-right: 1px solid #444; display: flex; flex-direction: column; padding: 10px; }
.main-chat { flex: 1; display: flex; flex-direction: column; background: var(--bg); }

/* Components */
.room-item { padding: 10px; background: #444; margin-bottom: 5px; cursor: pointer; border-radius: 4px; }
.room-item:hover, .room-item.active { background: var(--accent); color: #000; }

.chat-history { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.message { padding: 10px; background: #333; border-radius: 10px; max-width: 70%; word-wrap: break-word; }
.message.mine { align-self: flex-end; background: var(--accent); color: #000; }
.message .meta { font-size: 0.7em; opacity: 0.7; margin-bottom: 4px; display: block; }

/*.chat-input-area { padding: 20px; background: var(--panel); display: flex; gap: 10px; }
.chat-input-area input { flex: 1; }*/

.chat-input-area { 
    padding: 20px; 
    background: var(--panel); 
    display: flex; /* Crucial: This is the default horizontal layout */
    gap: 10px; 
    min-height: 80px; 
    box-sizing: border-box; 
}
/* Ensure the text input takes up most space on desktop */
.chat-input-area #msg-input { flex-grow: 1; }

.hidden { display: none !important; }
h3, h4 { margin: 0 0 10px 0; }
hr { border: none; border-top: 1px solid #444; margin: 15px 0; }
#my-pub { font-size: 0.7em; word-break: break-all; background: #000; padding: 5px; color: #aaa; cursor: pointer;}

/* --- MOBILE RESPONSIVENESS CSS --- */
@media (max-width: 600px) {
    /* 1. Mobile Layout Structure */
    .app-container {
        flex-direction: column;
        height: 100vh; /* Use full viewport height */
        overflow: hidden; /* Hide scrollbars that shouldn't be there */
    }

    /* 2. Sidebar Management (Collapsed by Default) */
    .sidebar {
        position: fixed; /* Overlay the sidebar */
        top: 0;
        left: 0;
        width: 70%; /* Takes up 70% of the screen width */
        max-width: 300px;
        height: 100%;
        z-index: 50; /* Ensure it is above the chat area */
        transform: translateX(-100%); /* Hide it off-screen to the left */
        transition: transform 0.3s ease-in-out; /* Smooth sliding animation */
        box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    }

    /* 3. Sidebar State (Open) */
    .sidebar.open {
        transform: translateX(0); /* Slide it into view */
    }

    /* 4. Hamburger Icon Visibility */
    #hamburger-menu {
        display: block !important; /* Show the hamburger button on mobile */
    }

    /* 5. Main Chat Area Adjustments */
    .main-chat {
        width: 100%;
        flex: 1;
        overflow: hidden;
    }
}

/* Sidebar */
@media (min-width: 600px) {
    .sidebar-header { display: none; }
}

/* Chat Header */
@media (max-width: 900px) {
    /* Fluid Wrapping for Header */
    .chat-header {
        /* This pushes all wrapped items (like your group) to the left side */
        justify-content: flex-start; 
        /* This aligns the items on the cross-axis */
        align-items: center !important; 
        /* ... other existing styles ... */
    }

    /* Target the Room Name/Logo Group to ensure it occupies the necessary space */
    .chat-header > div:nth-child(2) {
        /* Ensure it doesn't have unnecessary margins/flex-grow pushing it center */
        margin-right: auto; 
    }

    /* Set the groups inside the header to be flexible for wrapping */
    .chat-header > div {
        width: auto !important; /* Allows flex items to size based on content/min-width */
    }

    /* Ensure the Invite Controls stack vertically if they are too wide */
    #invite-controls {
        display: flex;
        flex-direction: row; /* Keep input and button horizontal by default */
        flex-wrap: wrap; /* Allow the input and button to wrap inside the invite control group */
        width: 100%; /* Force the invite controls to take full width when space is tight */
        box-sizing: border-box;

        padding-right: 2em;
        padding-left: 2em;
    }
    
    /* Give the invite input flexibility but a minimum size */
    #invite-pub {
        flex-grow: 1;
        min-width: 120px;
        box-sizing: border-box;
    }
    
    /* Make the Leave/Delete button wrap if necessary */
    #leave-delete-btn {
        width: auto;
        box-sizing: border-box;
    }
    
    /* Ensure the hamburger button is visible */
    #hamburger-menu {
        display: block !important;
    }
    
    /* Hide the empty spacer div */
    .chat-header > div:nth-child(3) {
        display: none !important;
    }
}

/* Message Input Area  */
@media (max-width: 900px) {

    /* Stack the input elements vertically */
    .chat-input-area {
        flex-direction: column; /* Stacks items top-to-bottom */
        gap: 5px; /* Adjust gap for vertical stacking */
        min-height: auto; /* Allow height to adjust to content */
    }

    /* Make all inputs/buttons full width on mobile */
    .chat-input-area input,
    .chat-input-area button {
        width: 100%;
        box-sizing: border-box; /* Ensure padding/border is included in the 100% width */
    }
    
    /* Ensure the file input is visible and full width */
    .chat-input-area #file-input {
        padding: 10px; /* Give it some height for easy tapping */
    }
}