/* ============================================
   Layout - Navbar, Footer, Panels, Folders
   ============================================ */

/* ===========================================
   NAVBAR
   =========================================== */

/* ===========================================
   TOP BAR — .app-topbar
   ===========================================
   Was .navbar-gradient: a full-width purple gradient carrying white controls.
   The bar is now a flat surface in the design's own --topbar-bg, and it sits
   BESIDE the rail rather than above it — the rail runs the full height of the
   window in every design, so the bar starts where the rail ends. The class was
   renamed rather than recoloured because a name describing a gradient that is
   gone would send the next reader looking for one. */
.app-topbar {
    background: var(--topbar-bg) !important;
    border-block-end: 1px solid var(--topbar-border);
    padding: 0.6rem calc(var(--base-spacing) * 1.5);
    /* Beside the rail, exactly as .main-content and .footer already do it —
       and reset to 0 below 768px by the same media query that turns the rail
       into a drawer. */
    margin-inline-start: var(--sidebar-width);
    transition: margin-inline-start var(--transition-slow);
}

/* ===========================================
   iOS PWA SAFE-AREA — the top bar, and its status-bar band
   ===========================================
   Installed to the home screen the app declares
   apple-mobile-web-app-status-bar-style = black-translucent, so iOS paints
   the clock and battery in WHITE over whatever the page draws at the top.
   That was safe while the bar was a purple gradient. It is NOT safe now: in
   the light theme the bar is card-coloured, and white-on-near-white is
   unreadable.

   So the strip behind the system text is painted --sidebar-bg — the rail's
   own dark colour, which every design defines and which is dark in both
   themes — and the bar fades from it into --topbar-bg over exactly the inset.
   Where there is no inset (every desktop, and Safari in a tab) the gradient
   has zero height and nothing changes.

   The alternative, status-bar-style `default`, gives up the edge-to-edge look
   on every page to fix one strip. Device emulation cannot show the system
   text's colour, so this is checked on a real iPhone or the simulator.

   The ROOM for the status bar is not gated on (display-mode: standalone),
   and neither is any other safe-area rule in the app. iOS also draws a page
   under the status bar when a home-screen app opens an address outside its
   own scope — Tibyan reached from the Mostashar icon, whose scope is
   mostashar.tech — and there the page is not "standalone", so a gated rule
   leaves the clock over the bar. Every inset is 0 on a desktop and in a
   Safari tab, so ungated, the rules change nothing there.

   The BAND stays gated. Only the app's own home-screen icon is known to draw
   white text; the out-of-scope view was seen drawing black text (the
   Mostashar app, opened that way), which a dark band would hide. */
.app-topbar {
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
}

@media (display-mode: standalone) {
    .app-topbar {
        background: linear-gradient(var(--sidebar-bg) 0,
                                    var(--sidebar-bg) env(safe-area-inset-top, 0px),
                                    var(--topbar-bg) env(safe-area-inset-top, 0px)) !important;
    }
}

/* The brand shows in the BAR only where the rail cannot show it: below 768px,
   where the rail is a closed drawer, and on a page with no rail at all. CSS
   on body.has-sidebar rather than a fragment parameter — the fragment must
   not need to know which pages have a rail. */
body.has-sidebar .app-topbar .navbar-brand {
    display: none;
}

.navbar-brand {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    /* No letter-spacing: the brand is «تبيان», and letter-spacing pulls the
       cursive joins of an Arabic word apart. */
}

/* The search box is an ordinary field on an ordinary surface now, so it needs
   no rules of its own: .form-control / .input-group-text in _forms.css already
   paint it from --card, --border-strong and --text. Everything that stood here
   — twelve rules of white-on-purple washes, hardcoded #1f2937 text, #9ca3af
   placeholders and their four dark-mode counterparts — was DELETED rather than
   recoloured, because every one of them existed to put white on a gradient
   that no longer exists. The only survivor is the RTL seam mirror in
   app-rtl.css, which is about direction, not colour. */

/* The search box's LAYOUT (its colours come from .form-control /
   .input-group-text like any other field).

   It must NEVER split its icon from its field, at ANY width — and it did.
   Bootstrap's .input-group is `flex-wrap: wrap`; the form is a flex item in the
   bar's row, so once the bar runs short the form shrinks, the field cannot
   shrink past its own minimum, and the field drops onto a second row UNDER the
   icon. Reported at a 1300px viewport with the rail expanded, where the bar has
   only ~950px — the same content-width-is-not-viewport-width gap the stat tiles
   document, and the reason a width breakpoint could never have caught it.

   The guard already existed but sat inside `@media (max-width: 767.98px)`, so
   it only protected the navbar in its COLLAPSED state; from 768px up — every
   desktop — there was nothing. It is unconditional here, because "the icon and
   the field stay on one line" is not a phone rule.

   The field FLEXES rather than wraps: it asks for 200px and gives it up when
   the bar is tight. That is also why neither size is an inline style any more —
   an inline min-width is exactly what a flex row cannot talk down, which is
   what forced the wrap in the first place. */
.app-topbar .search-form {
    max-width: 300px;
    /* min-width: 0 is REQUIRED, not tidiness. A flex item's default
       `min-width: auto` floors it at its own min-content — here the icon (42px)
       plus the field — so the form physically could not shrink, and once
       nowrap stopped it wrapping it pushed the bar wider than the page
       instead: 21px of sideways scroll at 800px and 53px at 768px with the
       rail open, measured. Trading a wrap for a horizontal scrollbar is not a
       fix; the page must never scroll sideways. With this the form gives way
       and the field shrinks with it. */
    min-width: 0;
}

.app-topbar .search-form .input-group {
    flex-wrap: nowrap;
}

.app-topbar .search-form .form-control {
    flex: 1 1 200px;
    min-width: 0;
    width: auto;
}

/* …and the squeeze has to REACH the field, which is a separate problem from
   letting the field take it. A flex item defaults to `min-width: auto`, i.e.
   floored at its own content, so every container between the bar and the field
   refused to shrink and the row simply overflowed its parent instead: measured
   at 768px with the rail open, the nav's box was 508px around 561px of content
   and the whole collapse sat 53px off the page's start edge, while the field
   stayed a comfortable 211px. Clearing the floor on the chain is what turns
   that overflow back into a shrink. All four are needed; the field's own
   min-width: 0 above is the fifth and does nothing on its own.

   Scoped to .app-topbar on purpose — `min-width: 0` on a bare
   `.navbar-collapse` or `.d-flex` would reach every such box in the app. */
.app-topbar .navbar-collapse,
.app-topbar .navbar-collapse > .d-flex,
.app-topbar .search-form,
.app-topbar .search-form .input-group {
    min-width: 0;
}

/* An icon button in the bar: neutral, with the brand as its hover wash. It was
   a white film over the gradient, which is also why it used to need per-theme
   opacity tuning to keep its glyph above AA — on a flat surface the glyph is
   --topbar-icon, measured against --topbar-bg by the design, and one rule
   serves both themes. */
.btn-navbar {
    background: transparent;
    border: none;
    color: var(--topbar-icon);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-icon-btn);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.btn-navbar:hover,
.btn-navbar:focus-visible {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
}

/* Theme Toggle — matches other btn-navbar buttons in size */
.theme-toggle {
    /* no fixed dimensions; let padding + icon size it naturally */
}

.theme-icon-sun,
.theme-icon-moon {
    font-size: 1rem; /* same visual weight as other navbar icons */
    line-height: 1;
}

/* ===========================================
   FOOTER
   =========================================== */

.footer {
    background: var(--card);
    border-top: 1px solid var(--border);
    margin-top: auto;
    position: relative;
    transition: all var(--transition-slow);
}

/* iOS: footer content clears the home bar at the bottom. Not gated on
   display-mode — see "iOS PWA SAFE-AREA" above. */
.footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-content {
    padding: 1rem 0;
    transition: all var(--transition-slow);
}

/* Collapsed state lives on <html> as data-footer, stamped PRE-PAINT by the
   fouc-script in fragments/head.html (it is per-user localStorage state, so
   the server cannot render it). Keying these rules off a .collapsed class that
   deferred JS added is what made the footer flash open on every navigation. */
html[data-footer="collapsed"] .footer-content {
    display: none;
}

html[data-footer="collapsed"] .footer {
    padding: 0;
}

.btn-toggle-footer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    z-index: 10;
}

.btn-toggle-footer:hover {
    background: var(--bg-secondary);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-toggle-footer i {
    font-size: 0.75rem;
    transition: transform var(--transition-slow);
}

/* The chevron is ONE icon (fa-chevron-down in the markup) whose direction is
   this rotation — like the sidebar caret. footer.js must not also swap the
   fa-chevron-* class: the old class swap ON TOP of this rotation cancelled it
   out (a rotated chevron-up points down again). */
html[data-footer="collapsed"] .btn-toggle-footer i {
    transform: rotate(180deg);
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--transition-normal);
}

.footer-link:hover {
    color: var(--primary);
    text-decoration: none;
}

/* ===========================================
   WORKSPACE GRID (3-Column Layout)
   =========================================== */

.dark-workspace-grid {
    display: flex;
    /* NotebookLM-style: visible gap between column cards, padded grid container */
    gap: clamp(8px, 0.6vw, 16px);
    padding: clamp(8px, 0.6vw, 16px);
    flex: 1;
    overflow: hidden;
    border-top: 1px solid var(--border);
    /* Second stop is DERIVED, not a literal. It was #f0f4f8, picked to sit a
       shade under the old --bg (#f5f7fa); when --bg was deepened to #eaeef5 the
       literal became the LIGHTER of the two and silently inverted the gradient.
       color-mix keeps the "slightly darker than the page" relationship true for
       whatever --bg holds, in either theme. */
    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ============================================================
   CHAT WORKSPACE FLUID DENSITY — match NotebookLM on 2K / 4K
   Scope: ONLY chat.html. Admin / profile / security / list pages
   are NOT affected and keep their fixed compact 15px / 1rem tokens.
   At 1280px viewport → ~14px (compact, current density).
   At 1920px viewport → ~16px (standard).
   At 2560px (2K)    → ~18px  (NotebookLM density).

   We scale the html root font-size (only when chat page is loaded
   via :has(body.chat-page)) so all rem-based child rules in
   _chat.css scale together. Body classes set elsewhere on
   non-chat pages remain untouched.
   ============================================================ */
html:has(body.chat-page) {
    font-size: clamp(14px, 0.18vw + 12.5px, 18px);
}
.chat-main-content .dark-panel {
    padding: clamp(0.875rem, 0.4vw + 0.5rem, 1.5rem);
}
.chat-main-content .dark-panel-header {
    padding-bottom: clamp(0.75rem, 0.35vw + 0.4rem, 1.25rem);
    margin-bottom: clamp(0.75rem, 0.35vw + 0.4rem, 1.25rem);
}
.chat-main-content .dark-panel-header h3 {
    font-size: clamp(0.9rem, 0.2vw + 0.75rem, 1.15rem);
}
.chat-main-content .dark-panel-header-icons button {
    font-size: clamp(1rem, 0.2vw + 0.85rem, 1.25rem);
    padding: clamp(0.25rem, 0.15vw + 0.15rem, 0.5rem);
}
/* End chat workspace fluid density */

/* Dark theme gradient */
[data-theme="dark"] .dark-workspace-grid {
    background: linear-gradient(180deg, #0f1419 0%, #1a1a2e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===========================================
   PANELS (Sources, Chat, Studio) — Card-Column Design
   Each column floats as a rounded card on the workspace background
   (matches NotebookLM 3-column layout). No flush side borders.
   =========================================== */

.dark-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: clamp(10px, 0.8vw, 16px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all var(--transition-slow);
    /* Fluid panel width: scales from 260px at 1024px viewport up to ~480px at 2560px (2K) */
    flex: 0 0 clamp(260px, 18vw, 480px);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

[data-theme="dark"] .dark-panel {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Chat panel (middle) — flexes to fill remaining space */
.dark-panel.dark-chat-panel {
    flex: 1 1 auto;
    min-width: 300px;
    background: var(--card);
}

/* Sources panel (left) — same fluid width as Studio (uses base .dark-panel rule) */
.dark-panel.sources-panel {
    background: var(--card);
}

/* Studio panel (right) — same fluid width as Sources (uses base .dark-panel rule) */
.dark-panel.studio-panel {
    background: var(--card);
    display: flex;
    flex-direction: column;
}

/* ===========================================
   PANEL RESIZE — cursor-only feedback
   No DOM gutter, no visual indicator. chat-resizers.js mouse-tracks
   the workspace grid and changes the cursor to col-resize when the
   pointer is in the seam between Sources↔Chat or Chat↔Studio. The
   only visual cue is the OS native resize cursor (↔).
   =========================================== */

/* Grid is positioning context (kept for future use; harmless) */
.dark-workspace-grid {
    position: relative;
}

/* While actively dragging — kill text selection / iframe pointer leaks app-wide */
body.is-resizing-panels {
    cursor: col-resize !important;
    user-select: none !important;
}
body.is-resizing-panels iframe { pointer-events: none; }

/* Collapsed state */
.dark-panel.collapsed {
    flex: 0 0 60px;
    min-width: 60px;
    max-width: 60px;
    padding: 1rem 0.5rem;
}

.dark-panel.collapsed > *:not(.dark-panel-header) {
    display: none;
}

.dark-panel.collapsed .dark-panel-header h3 {
    display: none;
}

/* Vertical text when collapsed */
.dark-panel.sources-panel.collapsed .dark-panel-header h3,
.dark-panel.studio-panel.collapsed .dark-panel-header h3 {
    display: block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    margin-top: 0.5rem;
    letter-spacing: 0.1em;
    order: 2;
}

.dark-panel.collapsed .dark-panel-header {
    justify-content: center;
    border-bottom: none;
    margin-bottom: 0;
    flex-direction: column;
    align-items: center;
}

.dark-panel.collapsed .dark-panel-header-icons {
    order: 1;
    margin-bottom: 0.5rem;
}

/* Panel header */
.dark-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.dark-panel-header h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
}

.dark-panel-header-icons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dark-panel-header-icons button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    transition: all var(--transition-normal);
    border-radius: var(--radius-xs);
}

.dark-panel-header-icons button:hover {
    background: var(--bg-secondary);
    color: var(--primary);
    transform: scale(1.1);
}

.dark-panel-header-icons button:active {
    transform: scale(0.95);
}

.dark-panel-header-icons button i {
    transition: transform var(--transition-slow);
}

.dark-panel.collapsed .dark-panel-header-icons button i {
    transform: rotate(180deg);
}

/* ===========================================
   Documents Container
   =========================================== */

#documentsContainer {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

#documentsList {
    overflow: hidden;
}

/* ===========================================
   Select All Checkbox
   =========================================== */

.select-all-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
    transition: background var(--transition-normal);
    user-select: none;
}

.select-all-checkbox:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.select-all-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
    margin: 0;
}

.select-all-checkbox span {
    font-weight: 500;
    white-space: nowrap;
}

/* Select All Below Button variant */
.select-all-checkbox-below {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    padding: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-normal);
    user-select: none;
    background: var(--card);
    border: 1px solid var(--border);
}

.select-all-checkbox-below:hover {
    background: var(--bg-secondary);
}

.select-all-checkbox-below input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
    margin: 0;
}

.select-all-checkbox-below span {
    font-weight: 500;
    flex: 1;
}

/* ===========================================
   Document Item
   =========================================== */

.dark-document-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-normal), border-color var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.dark-document-item:hover {
    background: var(--bg-secondary);
}

.dark-document-item.selected {
    border-left: 3px solid var(--accent);
    background: rgba(var(--info-rgb), 0.05);
}

[data-theme="dark"] .dark-document-item.selected {
    background: rgba(var(--info-rgb), 0.1);
}

.dark-document-item:hover .doc-actions {
    opacity: 1;
}

.doc-select-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
    margin: 0;
}

.doc-select-checkbox:hover {
    transform: scale(1.1);
}

.dark-document-item .doc-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    transition: transform var(--transition-normal);
}

.dark-document-item:hover .doc-icon {
    transform: scale(1.1);
}

.dark-document-item .doc-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.dark-document-item .doc-title {
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.3;
    max-height: 2.6em;
}

.dark-document-item .doc-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.dark-document-item .doc-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    opacity: 0;
    transition: opacity var(--transition-normal);
    flex-shrink: 0;
}

/* ===========================================
   Studio Panel
   =========================================== */

/* Actions header: label + toggle buttons */
.actions-header {
    justify-content: space-between;
}

.actions-view-toggle {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.actions-view-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
}

.actions-view-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.actions-view-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* List view (default) */
.studio-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.studio-actions-grid .studio-action-btn {
    width: 100%;
}

/* Icon/Grid view */
.studio-actions-grid.grid-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* Hide text labels in grid view — icon only */
.studio-actions-grid.grid-view .studio-action-btn {
    flex-direction: column;
    text-align: center;
    padding: 0.75rem 0.5rem;
    font-size: 0;
    gap: 0;
    justify-content: center;
}

.studio-actions-grid.grid-view .studio-action-btn .action-icon {
    font-size: 1.25rem;
}

@media (max-width: 1400px) {
    .studio-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .studio-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .studio-actions-grid {
        flex-direction: column;
    }
}

.studio-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 1rem 0;
    opacity: 0.6;
}

.studio-action-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: all var(--transition-normal);
    text-align: left;
    font-weight: 500;
}

.studio-action-btn:hover {
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.studio-action-btn:active {
    transform: translateY(0);
}

.studio-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.studio-action-btn .action-icon {
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
}

.studio-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.studio-empty-state p {
    margin-bottom: 0.5rem;
}

.studio-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.studio-content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.studio-footer {
    padding: 1rem 0 0;
    flex-shrink: 0;
}

/* iOS: push studio footer Add Note button above the home bar. Not gated on
   display-mode — see "iOS PWA SAFE-AREA" above. */
.studio-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===========================================
   CONVERSATIONS LAYOUT (2-Column)
   =========================================== */

.conversations-layout {
    display: flex;
    gap: var(--base-spacing);
    width: 100%;
    min-height: calc(100vh - 180px);
}

/* Folder Sidebar Backdrop (Mobile) */
.folder-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.folder-sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* ===========================================
   FOLDER SIDEBAR
   =========================================== */

.folder-sidebar {
    width: clamp(240px, 18vw, 480px);
    min-width: 200px;
    max-width: 560px;
    height: calc(100vh - 180px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-slow);
    overflow: hidden;
    position: sticky;
    top: 90px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Resize Handle */
.folder-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background-color var(--transition-normal);
}

.folder-sidebar-resize-handle:hover,
.folder-sidebar-resize-handle.resizing {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3) 50%, transparent);
}

.folder-sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 40px;
    background: var(--border);
    border-radius: 2px;
    opacity: 0;
    transition: opacity var(--transition-normal), background-color var(--transition-normal);
}

.folder-sidebar-resize-handle:hover::after {
    opacity: 0.5;
    background: var(--primary);
}

.folder-sidebar-resize-handle.resizing::after {
    opacity: 1;
    background: var(--primary);
}

.folder-sidebar:not(.resizing) {
    transition: width 0.1s ease;
}

/* Collapsed State */
.folder-sidebar.collapsed {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

.folder-sidebar.collapsed .folder-sidebar-resize-handle {
    display: none;
}

.folder-sidebar.collapsed > *:not(.folder-sidebar-header) {
    display: none;
}

.folder-sidebar.collapsed .folder-title-text,
.folder-sidebar.collapsed .folder-hint,
.folder-sidebar.collapsed .folder-add-btn {
    display: none !important;
}

.folder-sidebar.collapsed .folder-sidebar-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    margin-top: 0.5rem;
    letter-spacing: 0.1em;
    order: 2;
}

.folder-sidebar.collapsed .folder-title-icon {
    writing-mode: horizontal-tb;
    margin: 0 0 0.5rem 0 !important;
    display: block;
}

.folder-sidebar.collapsed .folder-sidebar-header {
    justify-content: center;
    border-bottom: none;
    padding: 0.5rem;
}

.folder-sidebar.collapsed .folder-header-top {
    flex-direction: column;
    align-items: center;
}

.folder-sidebar.collapsed .folder-sidebar-header-icons {
    order: 1;
    margin-bottom: 0.5rem;
}

.folder-sidebar.collapsed #collapseFolderSidebar i {
    transform: rotate(180deg);
}

#collapseFolderSidebar i {
    transition: transform var(--transition-slow);
}

/* Folder Header */
.folder-sidebar-header {
    padding: calc(var(--base-spacing) * 0.75);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.folder-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.folder-sidebar-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.folder-title-icon {
    font-size: 1rem;
}

.folder-sidebar-header-icons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.folder-hint {
    display: block;
    margin: 0;
}

.folder-actions {
    display: flex;
    gap: 0.5rem;
}

/* Folder Tree Container */
.folder-tree-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    min-height: 0;
    scrollbar-gutter: stable;
}

/* Folder Tree Nodes */
.folder-node {
    margin-bottom: 2px;
}

.folder-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    color: var(--text);
    user-select: none;
    font-size: 0.9rem;
}

.folder-item:hover {
    background: var(--bg-secondary);
}

.folder-item.selected {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.3) !important;
}

.folder-item.drag-over {
    background: rgba(var(--primary-rgb), 0.2);
    border: 2px dashed var(--primary);
}

.folder-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    flex-shrink: 0;
}

.folder-expand-icon {
    width: 16px;
    min-width: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform var(--transition-normal);
}

.folder-expand-icon.hidden {
    opacity: 0;
    pointer-events: none;
}

.folder-expand-icon:hover {
    color: var(--primary);
}

.folder-icon {
    font-size: 0.9rem;
    color: var(--primary);
    width: 20px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.folder-item.selected .folder-icon {
    color: white;
}

.folder-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.folder-actions {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.folder-item:hover .folder-actions,
.folder-item.selected .folder-actions {
    opacity: 1;
}

.folder-action-btn {
    padding: 0.25rem 0.5rem;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
    text-decoration: none;
    font-size: 0.85rem;
}

.folder-action-btn:hover {
    color: var(--primary);
    transform: scale(1.1);
}

.folder-item.selected .folder-action-btn {
    color: rgba(255, 255, 255, 0.8);
}

.folder-item.selected .folder-action-btn:hover {
    color: white;
    transform: scale(1.1);
}

.folder-children {
    margin-left: 1rem;
    border-left: 1px solid var(--border);
    padding-left: 0.5rem;
    overflow: hidden;
}

/* ===========================================
   CONVERSATIONS MAIN AREA
   =========================================== */

.conversations-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 2rem;
}

.conversations-header {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

/* ===========================================
   FOLDER CONTEXT MENU
   =========================================== */

.folder-context-menu {
    position: absolute;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-modal);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all var(--transition-normal);
}

.folder-context-menu.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.context-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--transition-normal);
}

.context-menu-item:hover {
    background: var(--bg-secondary);
}

.context-menu-item:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.context-menu-item:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.context-menu-item.text-danger {
    color: var(--danger);
}

.context-menu-item.text-danger:hover {
    background: rgba(var(--danger-rgb), 0.1);
}

/* ===========================================
   FOLDER MODAL ENHANCEMENTS
   =========================================== */

#createFolderModal .modal-body,
#renameFolderModal .modal-body,
#deleteFolderModal .modal-body {
    min-width: 400px;
}

#parentFolderInfo {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font-style: italic;
}

/* ===========================================
   MOBILE RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    .conversations-layout {
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }
    
    .folder-sidebar {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        max-width: 320px;
        height: calc(100vh - 80px);
        z-index: var(--z-modal-backdrop);
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    }
    
    .folder-sidebar.show {
        transform: translateX(0);
    }
    
    .conversations-main {
        width: 100%;
    }
    
    .conversations-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
}

/* ===========================================
   DRAG AND DROP STATES
   =========================================== */

.card[draggable="true"] {
    cursor: move;
}

.card[draggable="true"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* ===========================================
   DARK THEME OVERRIDES
   =========================================== */

[data-theme="dark"] .folder-sidebar {
    background: var(--card);
    border-color: var(--border);
}

[data-theme="dark"] .folder-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

[data-theme="dark"] .folder-item.selected {
    background: var(--primary);
    color: white;
}

[data-theme="dark"] .folder-context-menu {
    background: var(--card);
    border-color: var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .context-menu-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

/* ===========================================
   SCROLLBAR STYLING
   =========================================== */
/* Nothing here any more, on purpose: every scrollbar in the app — the page's
   own included — takes the global 5px skin in _base.css. The 8px body rule
   this section held was the one deviation and was unified on 2026-08-13. */

/* ===========================================
   MOBILE TABS
   =========================================== */

.dark-mobile-tabs {
    display: none;
}

@media (max-width: 1024px) {
    .dark-mobile-tabs {
        display: flex;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .dark-mobile-tabs .tab-btn {
        flex: 1;
        background: none;
        border: none;
        color: var(--text-muted);
        padding: 0.875rem;
        border-radius: var(--radius-lg);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-normal);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .dark-mobile-tabs .tab-btn.active {
        background: var(--card);
        color: var(--text);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .dark-mobile-tabs .tab-btn:hover:not(.active) {
        background: rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] .dark-mobile-tabs .tab-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.05);
    }

    .dark-workspace-grid {
        flex-direction: column;
        position: relative;
        height: auto;
    }

    .dark-panel {
        display: none !important;
        max-height: calc(100vh - 120px);
        /* keep rounded card look on mobile, just full-width and stacked */
        flex: 0 0 auto !important;
        position: relative;
        z-index: 1;
        width: 100%;
        min-width: unset !important;
        max-width: none !important;
    }

    .dark-panel.active {
        display: flex !important;
        z-index: 10;
    }
    
    .dark-panel.dark-chat-panel {
        flex: 0 0 auto !important;
        min-width: unset !important;
    }
    
    .dark-panel.sources-panel {
        max-height: calc(100vh - 120px);
        max-width: none !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .dark-panel.sources-panel.active {
        display: flex !important;
        flex-direction: column;
    }
    
    .dark-panel.sources-panel #documentsContainer {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
    }
    
    .dark-panel.sources-panel #documentsList {
        overflow: visible;
    }

    .sources-panel .dark-panel-header-icons,
    .studio-panel .dark-panel-header-icons {
        display: none;
    }
}

@media (min-width: 1025px) {
    .dark-mobile-tabs {
        display: none !important;
    }

    .dark-panel {
        display: flex !important;
    }
}

/* ===========================================
   MOBILE NAVBAR — minimal fixes
   Allow the inner action group (.d-flex with search + buttons) to wrap onto
   multiple rows on narrow viewports so nothing overflows the viewport edge.
   That is a real phone rule: the ROW of controls may stack, and each control
   stays whole.

   What used to be point 2 here — stopping the search .input-group from
   splitting its icon from its field — has MOVED out of this media query and up
   beside the other .search-form rules, unconditional. Keeping it at
   `max-width: 767.98px` meant it only ever ran while the navbar was collapsed,
   so from 768px up the box could still break in two, which is what a 1300px
   window with the rail open actually did. Do not bring it back down here.

   767.98px, NOT 991.98px: these blocks all style the navbar in its
   COLLAPSED state (the panel the toggler opens), so they have to end where the
   collapse ends. The navbar is navbar-expand-MD (see fragments/header.html), so
   that is 768px. While they were written for -lg they now had a 768-991.98px
   overhang where the navbar is expanded INLINE — and the dropdown rules below
   would rip the user menu out of its button and pin it to the navbar's edge.
   =========================================== */
@media (max-width: 767.98px) {
    .app-topbar .navbar-collapse > .d-flex {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* On a phone the box has the whole row to itself, so let it use it. */
    .app-topbar .search-form {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* ===========================================
   MOBILE NAVBAR DROPDOWN — visibility fix
   On mobile the .dropdown-menu was opening but being clipped or
   rendering off-screen because it sat inside a wrapped flex row.
   Pin it to the right edge of the navbar with a guaranteed
   high z-index, scrollable if too tall, and never clipped.
   Breakpoint tracks the collapse — see the note above.
   =========================================== */
@media (max-width: 767.98px) {
    .app-topbar .navbar-collapse {
        overflow: visible;
    }

    .app-topbar .navbar-collapse .dropdown {
        position: static; /* let menu align to navbar-collapse right edge */
    }

    .app-topbar .navbar-collapse .dropdown-menu {
        position: absolute !important;
        right: 0.5rem !important;
        left: auto !important;
        top: 100%;
        margin-top: 0.25rem;
        z-index: 1080;
        max-height: 70vh;
        overflow-y: auto;
        min-width: 200px;
    }
}

/* ===========================================
   MOBILE NAVBAR DROPDOWN — full-menu visibility
   The Bootstrap dropdown was opening but only half visible because:
   1. Bootstrap's Popper applies inline transform: translate3d(...)
      that competed with our positioning.
   2. The wrapped flex row clipped the menu's bottom.
   Fix: neutralise Popper's inline transform, render the menu in
   the document flow as position:fixed pinned to the navbar's right
   edge, with a viewport-aware max-height so it never spills.
   Breakpoint tracks the collapse — see the note two blocks above.
   =========================================== */
@media (max-width: 767.98px) {
    .app-topbar .navbar-collapse .dropdown-menu.show {
        position: fixed !important;
        top: auto !important;
        bottom: auto !important;
        right: 0.75rem !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 1080;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        min-width: 220px;
    }
}