/*
 * Canonical primary-sidebar motion.
 *
 * The sidebar position is animated on the compositor with transform. Desktop
 * keeps a compact rail visible, while the main content follows without a
 * width tween, so opening Agenda cannot trigger continuous layout reflow.
 */

:root {
    --sidebar-motion-duration: 250ms;
    --sidebar-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-expanded-width: 260px;
    --sidebar-drawer-z-index: 4200;
}

/* Keep initial preference restoration invisible. The boot shell already
   represents the open desktop workspace, so no drawer should slide in behind it. */
body:not(.sidebar-ready) .sidebar,
body.sidebar-restoring .sidebar,
body.sidebar-restoring .main-content,
body.sidebar-restoring .mobile-sidebar-backdrop {
    transition: none !important;
}

/* Desktop: keep a visible 60px rail when collapsed. The full drawer and the
   main content travel on compositor transforms, while their final geometry
   remains aligned with the original Logicum layout. */
@media (min-width: 769px) {
    body {
        --sidebar-rail-width: 60px;
        --sidebar-width: var(--sidebar-rail-width);
        --sidebar-content-offset: calc(var(--sidebar-expanded-width) - var(--sidebar-rail-width));
    }

    body:not(.sidebar-collapsed) {
        --sidebar-width: var(--sidebar-expanded-width);
    }

    body .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: var(--sidebar-expanded-width) !important;
        min-width: var(--sidebar-expanded-width) !important;
        max-width: var(--sidebar-expanded-width) !important;
        height: 100% !important;
        flex: none !important;
        transform: translate3d(0, 0, 0) !important;
        transition: transform var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
        will-change: transform;
        z-index: var(--sidebar-drawer-z-index) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-expanded-width) !important;
        min-width: var(--sidebar-expanded-width) !important;
        max-width: var(--sidebar-expanded-width) !important;
        transform: translate3d(calc(-1 * var(--sidebar-content-offset)), 0, 0) !important;
    }

    /* The collapsed controls live in the visible right edge of the translated
       drawer, preserving the original compact rail positions. */
    body.sidebar-collapsed .sidebar > .sidebar-header,
    body.sidebar-collapsed .sidebar > .tools-section,
    body.sidebar-collapsed .sidebar > .sidebar-footer {
        width: var(--sidebar-rail-width) !important;
        min-width: var(--sidebar-rail-width) !important;
        max-width: var(--sidebar-rail-width) !important;
        margin-left: var(--sidebar-content-offset) !important;
        flex: 0 0 auto !important;
    }

    /* Keep the collapsed rail intentionally minimal: the menu control is the
       only thing shown in the header. */
    body.sidebar-collapsed .sidebar > .sidebar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 0 !important;
    }

    body.sidebar-collapsed .sidebar > .sidebar-header .sidebar-toggle-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    body.sidebar-collapsed .sidebar > .sidebar-header .toggle-logo-icon {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar > .sidebar-header .toggle-icon {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    body:not(.sidebar-collapsed) .sidebar > .sidebar-header,
    body:not(.sidebar-collapsed) .sidebar > .tools-section,
    body:not(.sidebar-collapsed) .sidebar > .sidebar-footer {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* The main content keeps its own stable layer and follows the drawer with
       transform instead of a width or margin animation. */
    body .main-content {
        position: fixed !important;
        inset: 0 0 0 var(--sidebar-rail-width) !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        transition: transform var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
    }

    body:not(.sidebar-collapsed) .main-content {
        right: var(--sidebar-content-offset) !important;
        transform: translate3d(var(--sidebar-content-offset), 0, 0) !important;
    }

    /* Preserve the helper drawer's relationship with the primary drawer. */
    body:not(.sidebar-collapsed) .helper-sidebar {
        left: var(--sidebar-expanded-width) !important;
    }

    body.sidebar-collapsed .helper-sidebar {
        left: var(--sidebar-rail-width) !important;
    }

    body .disclaimer {
        left: calc(50% + (var(--sidebar-width) / 2)) !important;
        width: min(1050px, calc(100% - var(--sidebar-width) - 40px)) !important;
        transition: none !important;
    }

    /* Settings is positioned within .main-content, which already accounts for
       the rail or expanded drawer. A sidebar-width offset here would shift
       the modal right twice. */
    body #settingsView {
        padding-left: clamp(24px, 3vw, 48px) !important;
        padding-right: clamp(24px, 3vw, 48px) !important;
    }

    /* The compact rail keeps its own toggle; the mobile trigger is not needed
       on desktop. */
    body .mobile-sidebar-btn {
        display: none !important;
    }
}

/* Mobile: the primary sidebar is a left-side overlay. The content below it
   keeps its size, while the backdrop fades in independently. */
@media (max-width: 768px) {
    body {
        --sidebar-width: 0px;
    }

    body .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(86vw, 340px) !important;
        min-width: min(86vw, 340px) !important;
        max-width: 340px !important;
        height: var(--app-height, 100dvh) !important;
        max-height: var(--app-height, 100dvh) !important;
        transform: translate3d(-105%, 0, 0) !important;
        border-left: 0 !important;
        border-right: 1px solid var(--border-color) !important;
        border-radius: 0 18px 18px 0 !important;
        box-shadow: 14px 0 34px rgba(0, 0, 0, 0.34) !important;
        pointer-events: none !important;
        transition: transform var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
        will-change: transform;
        z-index: var(--sidebar-drawer-z-index) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    body .main-content {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        transition: none !important;
    }

    body .mobile-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: calc(var(--sidebar-drawer-z-index) - 50) !important;
        background: rgba(0, 0, 0, 0.42) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
    }

    body.sidebar-open .mobile-sidebar-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.sidebar-scroll-locked {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.sidebar-scroll-locked .sidebar {
        touch-action: pan-y;
    }

    /* Do not inherit the desktop collapsed-content rules in the overlay. */
    body.sidebar-open .sidebar .logo,
    body.sidebar-open .sidebar .logo-text,
    body.sidebar-open .sidebar .tool-btn span,
    body.sidebar-open .sidebar .sidebar-btn span,
    body.sidebar-open .sidebar .sidebar-footer,
    body.sidebar-open .sidebar .sidebar-footer .footer-actions,
    body.sidebar-open .sidebar .chat-history-section,
    body.sidebar-open .sidebar .search-container,
    body.sidebar-open .sidebar .chat-history-label,
    body.sidebar-open .sidebar .chat-history-list {
        display: flex !important;
    }

    body.sidebar-open .sidebar .logo {
        align-items: center;
    }

    body.sidebar-open .sidebar .tool-btn,
    body.sidebar-open .sidebar .sidebar-btn {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    body.sidebar-open .sidebar .sidebar-footer {
        flex-direction: column !important;
    }

    body .mobile-sidebar-btn {
        z-index: calc(var(--sidebar-drawer-z-index) - 1) !important;
    }
}

@media (min-width: 1440px) {
    :root {
        --sidebar-expanded-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .sidebar,
    body .main-content,
    body .mobile-sidebar-backdrop {
        transition: none !important;
    }
}

/* Keep the safety note in the composer column itself. Its alignment now
   follows the actual text box at every sidebar width instead of the viewport. */
body #chatView .input-wrapper > .disclaimer {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 7px auto 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    transition: none !important;
}

/* Remove the note and its space as soon as the mobile text box is focused,
   without waiting for the software keyboard's viewport resize. */
@media (max-width: 768px) {
    body #chatView .input-wrapper:has(#chatInput:focus) > .disclaimer {
        display: none !important;
    }
}

/* Chat composers are capsules, including browsers that support the global
   continuous-corner treatment. Keep menus outside the rounded surface. */
body .chat-input-area,
body .side-chat-input-area,
body #chatView .chat-input-area,
body.study-chat-ui-active .study-chat-composer.chat-input-area,
body #sideChatPanel .side-chat-input-area {
    border-radius: 999px !important;
    corner-shape: round !important;
}

.chat-file-drop-overlay {
    position: fixed;
    inset: 12px;
    z-index: 6000;
    display: grid;
    place-items: center;
    padding: 24px;
    border: 2px dashed var(--accent-color, #a96300);
    border-radius: 24px;
    background: var(--bg-dark, #292824);
    opacity: 0.94;
    color: var(--text-primary, #eee);
    pointer-events: none;
    text-align: center;
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 600;
}

.chat-file-drop-overlay[hidden] {
    display: none;
}

body #chatView #stopBtn {
    background: var(--accent-color, #a96300);
    color: var(--text-primary, #eee);
    border-radius: 999px;
    corner-shape: round;
    box-shadow: none;
}