/* --- START: Desktop & Large Screen Styles (SIDEBAR LAYOUT) --- */
@media (min-width: 768px) {
    body {
        background-color: var(--light-gray);
    }

    .app-container {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }

    /* On desktop, the main chat screen uses a grid layout */
    #chatScreen.active {
        display: grid;
        grid-template-columns: 260px 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar content";
    }
    [dir="ltr"] #chatScreen.active {
        grid-template-columns: 1fr 260px;
        grid-template-areas:
            "header sidebar"
            "content sidebar";
    }

    /* Style the Sidebar */
    #chatScreen .tabs {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        background-color: #182229; /* A new dark color for the sidebar */
        padding: 15px;
        height: 100vh;
        border-left: 1px solid rgba(255,255,255,0.1);
    }
     [dir="ltr"] #chatScreen .tabs {
        border-left: none;
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    /* Add a title to the sidebar using a pseudo-element */
    #chatScreen .tabs::before {
        content: 'NilotalK';
        font-size: 1.6rem;
        font-weight: 700;
        color: white;
        padding: 10px 5px;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #chatScreen .tab {
        flex: initial;
        text-align: right;
        padding: 12px 15px;
        margin-bottom: 5px;
        border-bottom: none;
        border-radius: 8px;
        font-weight: 500;
        font-size: 1rem;
        color: #b0bec5;
        border-right: 3px solid transparent;
    }
     [dir="ltr"] #chatScreen .tab {
        text-align: left;
        border-right: none;
        border-left: 3px solid transparent;
    }

    #chatScreen .tab .tab-inner {
        justify-content: flex-start;
    }

    #chatScreen .tab:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    #chatScreen .tab.active {
        background-color: var(--primary-color);
        color: white;
        border-right-color: var(--accent-color);
    }
    [dir="ltr"] #chatScreen .tab.active {
        border-right-color: transparent;
        border-left-color: var(--accent-color);
    }


    /* Style the Header in the main area */
    #chatScreen .header {
        grid-area: header;
        background-color: var(--white);
        border-bottom: 1px solid #e0e0e0;
        box-shadow: none;
    }
    #chatScreen .header .header-title {
        display: none;
    }
    #chatScreen .header .header-icon {
        color: var(--dark-gray);
    }

    /* Style the Content area */
    #chatScreen .content {
        grid-area: content;
        overflow-y: auto; /* Ensure only the content area scrolls */
    }

    /* Constrain forms/profiles */
    .auth-container,
    .profile-container,
    .edit-profile-container,
    .new-post-container,
    .theme-container,
    .language-container,
    .edit-group-container {
        max-width: 700px;
        margin: 0 auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Enhanced Hover Effects */
    .post-item, .user-item, .public-room-item {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .post-item:hover, .user-item:hover, .public-room-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    /* Improved Spacing */
    #postsContent, #contactsContent, #publicRoomsList {
        padding: 25px;
    }
    
    /* Center the posts feed on desktop to make it more readable, like Facebook */
    #postsContent, 
    .profile-page-content {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Limit the height of images in posts to prevent them from taking up the entire screen */
    .post-media img, .post-media video {
        max-height: 70vh;
        object-fit: contain;
        background-color: #e9e9e9;
        margin: 0 auto;
    }
    /* END: تعديل مطلوب */
}
/* --- END: Desktop & Large Screen Styles --- */

/* --- START: Modern Grid Layout for Very Wide Screens --- */
@media (min-width: 1000px) {
    
    /* START: تعديل مطلوب */
    /* Keep grid layout ONLY for the contacts list */
    #contactsContent.users-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 25px;
    }
    
    /* Ensure posts lists are always single-column blocks, overriding the old grid style */
    #postsList, #memberPostsList {
        display: block;
    }
    /* END: تعديل مطلوب */

    #loadMorePostsBtn, #loadMoreUsersBtn {
        grid-column: 1 / -1;
    }
}
/* --- END: Modern Grid Layout for Very Wide Screens --- */