/*
   ===================================================================
   ||   css/layout/shell.css (or your merged app_shell.css)       ||
   ||   Application Shell: Main Layout & Global Theming           ||
   ===================================================================
*/

/* --- Foundational Styles (Body & Root Variables) --- */
/* Ensure your global CSS variables (e.g., --spacing-*, --primary-color,
   font variables, color palettes for light/dark) are defined in a
   separate file like css/base/variables.css and imported or available.
*/

body {
    font-family: var(--font-family-sans-serif, 'Roboto', sans-serif);
    margin: 0;
    background-color: var(--bg-body-light, #f0f2f5);
    color: var(--text-body-light, #1c1e21);
    line-height: 1.6;
    overflow: hidden; /* Prevent body scroll on desktop if shell is fixed height */
    display: flex;
    height: 100vh; /* Full viewport height */
    transition: background-color var(--transition-normal, 0.3s), color var(--transition-normal, 0.3s);
}

/* --- Global Dark Mode Foundation --- */
body.dark-mode {
    background-color: var(--bg-body-dark, #18191a);
    color: var(--text-body-dark, #e4e6eb);
}

/* --- Application Shell Container --- */
#polyglot-connect-app-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-shell-light, #e9ebee);
    transition: background-color var(--transition-normal, 0.3s);
}
body.dark-mode #polyglot-connect-app-shell {
    background-color: var(--bg-shell-dark, #1c1e21);
}

/* ===== Left Sidebar (Main Navigation) ===== */
#left-sidebar {
    width: var(--sidebar-width-desktop, 250px);
    background-color: var(--bg-sidebar-light, #2c3e50);
    color: var(--text-sidebar-light, #ecf0f1);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    z-index: var(--z-index-sidebar, 100);
    transition: background-color var(--transition-normal, 0.3s), color var(--transition-normal, 0.3s), width var(--transition-normal, 0.3s);
    flex-shrink: 0;
}
body.dark-mode #left-sidebar {
    background-color: var(--bg-sidebar-dark, #242526);
    color: var(--text-sidebar-dark, #dadce0);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
    padding: var(--spacing-lg, 20px) var(--spacing-md, 15px);
    text-align: center;
    border-bottom: 1px solid var(--border-sidebar-header-light, #34495e);
    margin-bottom: var(--spacing-md, 15px);
}
body.dark-mode .sidebar-header {
    border-bottom-color: var(--border-sidebar-header-dark, #393a3b);
}

.sidebar-logo {
    width: 50px; height: 50px;
    border-radius: var(--border-radius-circle, 50%);
    margin: 0 auto var(--spacing-sm, 10px) auto;
    background-color: var(--bg-white, #fff); /* To make transparent logo visible */
    padding: 2px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sidebar-title-text { /* Assuming this is the primary h2 or similar for title */
    font-size: 1.3em;
    font-weight: var(--font-weight-bold, 600);
    color: var(--text-sidebar-title-light, #fff);
    margin: 0;
}
body.dark-mode .sidebar-title-text {
    color: var(--text-sidebar-title-dark, #e4e6eb);
}

.main-nav {
    flex-grow: 1;
    overflow-y: auto;
}
.main-nav ul {
    list-style: none;
    padding: var(--spacing-sm, 10px) 0;
    margin: 0;
}
.main-nav .nav-item a {
    display: flex;
    align-items: center;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 20px);
    color: var(--nav-text-light, #bdc3c7);
    text-decoration: none;
    font-size: 1em;
    font-weight: var(--font-weight-medium, 500);
    transition: background-color var(--transition-fast, 0.2s), color var(--transition-fast, 0.2s), border-color var(--transition-fast, 0.2s);
    border-left: 3px solid transparent;
}
.main-nav .nav-item a i {
    margin-right: var(--spacing-md, 10px);
    width: 20px; /* Fixed width for icon alignment */
    text-align: center;
    font-size: 1.1em;
}
.main-nav .nav-item a:hover {
    background-color: var(--nav-hover-bg-light, #34495e);
    color: var(--nav-hover-text-light, #fff);
}
.main-nav .nav-item.active a {
    background-color: var(--nav-active-bg-light, var(--primary-color, #1abc9c));
    color: var(--nav-active-text-light, #fff);
    font-weight: var(--font-weight-bold, 600);
    border-left-color: var(--accent-color-2, #ffc107); /* Example accent */
}
body.dark-mode .main-nav .nav-item a {
    color: var(--nav-text-dark, #b0b3b8);
}
body.dark-mode .main-nav .nav-item a:hover {
    background-color: var(--nav-hover-bg-dark, #3a3b3c);
    color: var(--nav-hover-text-dark, #e4e6eb);
}
body.dark-mode .main-nav .nav-item.active a {
    background-color: var(--nav-active-bg-dark, var(--primary-color-dark, #03a9f4));
    color: var(--nav-active-text-dark, #fff);
    border-left-color: var(--accent-color-2-dark, var(--accent-color-2, #ffc107));
}

.sidebar-footer {
    padding: var(--spacing-md, 15px);
    text-align: center;
    border-top: 1px solid var(--border-sidebar-header-light, #34495e);
    flex-shrink: 0;
    /* margin-top: auto; /* This pushes it to bottom if .main-nav is flex-grow:1 */
}
body.dark-mode .sidebar-footer {
    border-top-color: var(--border-sidebar-header-dark, #393a3b);
}
.copyright-text {
    font-size: 0.8em;
    color: var(--sidebar-footer-text-light, #7f8c8d);
    margin: 0;
}
body.dark-mode .copyright-text {
    color: var(--sidebar-footer-text-dark, #8a8d91);
}

#toggle-theme-btn {
    background: none;
    border: 1px solid var(--theme-toggle-light, #7f8c8d);
    color: var(--theme-toggle-light, #7f8c8d);
    border-radius: var(--border-radius-circle, 50%);
    width: 28px;
    height: 28px;
    font-size: 0.85em;
    cursor: pointer;
    margin-bottom: var(--spacing-sm, 10px);
    transition: color var(--transition-fast, 0.2s), border-color var(--transition-fast, 0.2s);
    display: inline-flex; /* For centering icon */
    align-items: center;
    justify-content: center;
}
#toggle-theme-btn:hover {
    color: var(--theme-toggle-hover-light, #fff);
    border-color: var(--theme-toggle-hover-border-light, #fff);
}
body.dark-mode #toggle-theme-btn {
    color: var(--theme-toggle-dark, #8a8d91);
    border-color: var(--theme-toggle-border-dark, #8a8d91);
}
body.dark-mode #toggle-theme-btn:hover {
    color: var(--theme-toggle-hover-dark, #e4e6eb);
    border-color: var(--theme-toggle-hover-border-dark, #e4e6eb);
}

/* ===== Main Content Area ===== */
#main-container {
    flex-grow: 1;
    background-color: var(--bg-main-light, #f0f2f5);
    padding: var(--spacing-xl, 30px); /* Generous padding */
    overflow-y: auto; /* Scroll content within main container */
    display: flex;
    flex-direction: column; /* Views stack and fill */
    transition: background-color var(--transition-normal, 0.3s);
}
body.dark-mode #main-container {
    background-color: var(--bg-main-dark, #18191a);
}

/* --- View Switching and Basic Header --- */
.view {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Takes full height of main-container parent */
    animation: fadeInView 0.3s ease-out forwards;
}
@keyframes fadeInView {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.view.active-view { display: flex; }

.view-header { /* Basic structure for view headers */
    margin-bottom: var(--spacing-lg, 25px);
    padding-bottom: var(--spacing-md, 15px);
    border-bottom: 1px solid var(--border-view-header-light, #dde1e5);
    text-align: center;
}
.view-header h1 {
    font-size: 1.8em;
    font-weight: var(--font-weight-bold, 600);
    color: var(--view-title-light, #2c3e50);
    margin: 0 0 var(--spacing-xs, 5px) 0;
    align-items: center;
}
.view-header p { /* Subtitle for view headers */
    font-size: 1em;
    color: var(--view-subtitle-light, #555);
    margin: 0;
}
body.dark-mode .view-header {
    border-bottom-color: var(--border-view-header-dark, #393a3b);
}
body.dark-mode .view-header h1 {
    color: var(--view-title-dark, #e4e6eb);
}
body.dark-mode .view-header p {
    color: var(--view-subtitle-dark, #b0b3b8);
}

.view-content { /* Allows specific view content to grow */
    flex-grow: 1;
    display: flex; /* Often useful for direct children of view-content */
    flex-direction: column; /* Default stacking for content within */
}

/* Global loading/empty messages (if used outside specific list contexts) */
.loading-message, .empty-list-msg {
    text-align: center;
    padding: var(--spacing-xl, 40px);
    font-size: 1.1em;
    color: var(--empty-msg-light, #777);
    font-style: italic;
    width: 100%; /* Span full width if direct child of a flex container */
}
body.dark-mode .loading-message,
body.dark-mode .empty-list-msg {
    color: var(--empty-msg-dark, #8a8d91);
}


/* ===== Right Sidebar (Contextual Panels) ===== */
#right-sidebar {
    width: var(--sidebar-right-width-desktop, 360px); /* Adjusted width */
    background-color: var(--bg-right-sidebar-light, #fff);
    padding: var(--spacing-lg, 25px);
    border-left: 1px solid var(--border-light, #dde1e5);
    overflow-y: auto;
    display: flex; /* For .sidebar-panel stacking */
    flex-direction: column;
    gap: var(--spacing-lg, 25px); /* Space between panels */
    flex-shrink: 0;
    transition: background-color var(--transition-normal, 0.3s), border-color var(--transition-normal, 0.3s);
}
body.dark-mode #right-sidebar {
    background-color: var(--bg-right-sidebar-dark, #242526);
    border-left-color: var(--border-light-dark, #393a3b);
}

.sidebar-panel {
    display: none; /* Shown by JS via .active-panel */
    /* margin-bottom: var(--spacing-lg, 20px); /* Removed, using gap on #right-sidebar */
}
.sidebar-panel.active-panel { display: block; animation: fadeInView 0.3s ease-out; }

.sidebar-panel h4 { /* Panel titles */
    font-size: 1.15em;
    font-weight: var(--font-weight-bold, 600);
    color: var(--panel-title-light, #333);
    margin: 0 0 var(--spacing-md, 15px) 0;
    padding-bottom: var(--spacing-sm, 10px);
    border-bottom: 1px solid var(--border-light, #eee);
    display: flex;
    align-items: center;
}
.sidebar-panel h4 i {
    margin-right: var(--spacing-sm, 10px);
    color: var(--primary-color, #1abc9c);
    font-size: 0.9em;
}
body.dark-mode .sidebar-panel h4 {
    color: var(--panel-title-dark, #e4e6eb);
    border-bottom-color: var(--border-light-dark, #393a3b);
}
body.dark-mode .sidebar-panel h4 i {
    color: var(--primary-color-dark, var(--primary-color, #03a9f4));
}

/* Basic Filter Group Styling (if generic enough for shell) */
.filter-group { margin-bottom: var(--spacing-md, 20px); }
.filter-group label {
    display: block;
    font-size: 0.85em;
    font-weight: var(--font-weight-medium, 500);
    margin-bottom: var(--spacing-xs, 8px);
    color: var(--text-color-muted-light, #555); /* Use a muted color var */
}
body.dark-mode .filter-group label {
    color: var(--text-color-muted-dark, #b0b3b8);
}

/* Generic styled select/input if used across multiple sidebar panels */
.styled-select,
.filter-group select,
.filter-group input[type="text"] { /* Add other input types if needed */
    width: 100%;
    padding: var(--spacing-sm, 10px) var(--spacing-md, 12px);
    border: 1px solid var(--input-border-light, #ccc);
    border-radius: var(--border-radius-sm, 5px);
    font-size: 0.9em;
    box-sizing: border-box;
    background-color: var(--input-bg-light, #fff);
    color: var(--input-text-light, #333);
    transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
}
.styled-select:focus,
.filter-group select:focus,
.filter-group input[type="text"]:focus {
    border-color: var(--primary-color, #1abc9c);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring-light, rgba(26, 188, 156, 0.2));
}
body.dark-mode .styled-select,
body.dark-mode .filter-group select,
body.dark-mode .filter-group input[type="text"] {
    background-color: var(--input-bg-dark, #3a3b3c);
    color: var(--input-text-dark, #e4e6eb);
    border-color: var(--input-border-dark, #555);
}
body.dark-mode .styled-select:focus,
body.dark-mode .filter-group select:focus,
body.dark-mode .filter-group input[type="text"]:focus {
    border-color: var(--primary-color-dark, var(--primary-color, #03a9f4));
    box-shadow: 0 0 0 2px var(--focus-ring-dark, rgba(3, 169, 244, 0.3));
}

/* Generic Sidebar Action Button */
.sidebar-action-btn { /* For buttons like "Apply Filters", "Find Groups" */
    /* This can be styled more specifically in buttons.css and then applied,
       or keep a basic version here if it's truly shell-level. */
    /* Example from your previous shell: */
    background-color: var(--primary-color, #1abc9c);
    color: white;
    padding: 10px 15px;
    width: 100%;
    border: none;
    border-radius: var(--border-radius-button, 5px); /* Use button radius */
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-action-btn:hover { background-color: var(--primary-color-darker, #16a085); } /* Define darker version */
.sidebar-action-btn i { margin-right: 8px; }
body.dark-mode .sidebar-action-btn {
    background-color: var(--primary-color-dark, var(--primary-color, #03a9f4));
}
body.dark-mode .sidebar-action-btn:hover {
    background-color: var(--primary-color-dark-hover, #0288d1); /* Define darker dark version */
}


/* ===== Responsive Layout Changes for Shell ===== */
@media (max-width: 1024px) { /* Tablet */
    #left-sidebar {
        width: var(--sidebar-width-tablet, 200px);
    }
    .main-nav .nav-item a {
        padding: var(--spacing-md, 12px) var(--spacing-md, 15px);
    }
    .main-nav .nav-item a i {
        margin-right: var(--spacing-sm, 8px);
    }
    .main-nav .nav-item a span { /* Nav text */
        display: none; /* Hide text, show icons only on narrower sidebar */
    }
    #main-container {
        padding: var(--spacing-lg, 20px); /* Reduced padding */
    }
    #right-sidebar {
        width: var(--sidebar-right-width-tablet, 320px);
        padding: var(--spacing-lg, 20px); /* Reduced padding */
    }
    .view-header h1 { font-size: 1.6em; }
}

@media (max-width: 768px) { /* Mobile */
    body {
        overflow: auto; /* Allow body to scroll as layout stacks */
    }
    #polyglot-connect-app-shell {
        flex-direction: column; /* Stack elements vertically */
        height: auto; /* Allow content to determine height */
        min-height: 100vh; /* Ensure it still fills viewport at minimum */
    }

    #left-sidebar { /* Becomes fixed top bar */
        width: 100%;
        height: var(--header-height-mobile, 50px);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--spacing-sm, 10px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        position: fixed;
        top: 0; left: 0;
        z-index: var(--z-index-header, 1001); /* Ensure above other content */
    }
    /* Dark mode for fixed header needs to be explicitly set if not inheriting from body */
    body.dark-mode #left-sidebar {
        background-color: var(--bg-sidebar-dark, #242526); /* Match desktop sidebar dark */
    }

    .sidebar-header { /* Adjust for top bar */
        padding: 0; border-bottom: none; margin-bottom: 0;
        display: flex; align-items: center;
    }
    .sidebar-logo {
        width: 30px; height: 30px;
        margin-right: var(--spacing-sm, 10px);
        margin-bottom: 0;
    }
    .sidebar-title-text { display: none; } /* Hide text title */

    .main-nav { flex-grow: 0; }
    .main-nav ul { display: flex; padding: 0; }
    .main-nav .nav-item a {
        padding: 0 var(--spacing-sm, 10px);
        height: var(--header-height-mobile, 50px); /* Match top bar height */
        border-left: none;
        border-bottom: 3px solid transparent; /* Indicator for top bar active */
    }
    .main-nav .nav-item.active a {
        border-bottom-color: var(--accent-color-2, #ffc107);
        background-color: transparent; /* No background for active in top bar */
        color: var(--nav-active-text-light-mobile, var(--accent-color-2, #ffc107)); /* Or distinct active color */
    }
    body.dark-mode .main-nav .nav-item.active a {
        border-bottom-color: var(--accent-color-2-dark, var(--accent-color-2, #ffc107));
        color: var(--nav-active-text-dark-mobile, var(--accent-color-2-dark, #ffc107));
    }
    .main-nav .nav-item a span { display: none; } /* Icon-only */
    .main-nav .nav-item a i { margin-right: 0; font-size: 1.2em; }

    .sidebar-footer { display: none; } /* Hide footer in top bar mode */

    #toggle-theme-btn { /* Can be moved to be part of main-nav flex row or styled separately */
        margin: 0; /* Remove bottom margin if it's flexed with nav items */
        /* Ensure it's visible and accessible in the top bar */
        width: 36px; height: 36px; font-size: 1em;
    }

    #main-container {
        padding: var(--spacing-md, 15px);
        margin-top: var(--header-height-mobile, 50px); /* Account for fixed top bar */
        height: auto; /* Allow content to dictate height */
        overflow-y: visible; /* Let body scroll instead of container */
    }
    .view-header h1 { font-size: 1.5em; }

    #right-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-light, #dde1e5);
        padding: var(--spacing-md, 15px);
        height: auto;
        order: 3; /* Stacks below main content */
        gap: var(--spacing-md, 15px);
    }
    body.dark-mode #right-sidebar {
        border-top-color: var(--border-dark, #393a3b);
    }
}

@media (max-width: 480px) { /* Very Small Screens */
    .main-nav .nav-item a {
        padding: 0 var(--spacing-xs, 8px);
    }
    .main-nav .nav-item a i { font-size: 1.1em; }

    #main-container {
        padding: var(--spacing-sm, 10px);
        /* margin-top might need slight adjustment if --header-height-mobile changes */
    }
}/* ===================================================================
   ||   TARGETED FIX for Full-Height Embedded Chat Layout           ||
   =================================================================== */

/*
  This rule targets ONLY the direct children of the #messages-view.
  It turns the view into a flex container.
*/

/* 
  Now, we target the .view-content specifically inside #messages-view.
  We tell it to take up all the remaining space.
*/

/* 
  Finally, we tell the chat UI itself to fill the .view-content parent.
*/
#messages-view .embedded-chat-ui {
    height: 100%;
}