/* Desktop terminal: icon rails while each menu is closed. Phones keep the header buttons. */

@media (min-width: 769px) {
    :root {
        --shell-rail: 64px;
        --shell-rail-bg: var(--bg-primary);
    }

    html[data-theme="light"] {
        --shell-rail-bg: #ffffff;
    }

    #mobile-menu-toggle,
    #right-sidebar-toggle {
        display: none !important;
    }

    .app-body {
        padding-left: var(--shell-rail);
        padding-right: var(--shell-rail);
        box-sizing: border-box;
    }

    body:not(:has(#right-sidebar .nav-tree-category)) .app-body {
        padding-right: 0;
    }

    body:has(#chat-overlay.active:not(.is-docked)) .app-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.sidebar-closed .app-sidebar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        width: var(--shell-rail) !important;
        min-width: var(--shell-rail) !important;
        height: calc(100vh - 64px) !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: var(--shell-rail-bg) !important;
        border-right: 1px solid var(--border) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #right-sidebar:not(.open) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: fixed !important;
        top: 64px !important;
        right: 0 !important;
        left: auto !important;
        width: var(--shell-rail) !important;
        min-width: var(--shell-rail) !important;
        height: calc(100vh - 64px) !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: var(--shell-rail-bg) !important;
        border-left: 1px solid var(--border) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #right-sidebar:not(.open):not(:has(.nav-tree-category)) {
        display: none !important;
    }

    body:has(#chat-overlay.active:not(.is-docked)) .app-sidebar,
    body:has(#chat-overlay.active:not(.is-docked)) #right-sidebar:not(.open) {
        display: none !important;
    }

    body.sidebar-closed .app-sidebar .sidebar-sections,
    #right-sidebar:not(.open) .right-sidebar-content {
        flex: 0 0 auto !important;
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 0 !important;
        overflow: visible !important;
    }

    body.sidebar-closed .app-sidebar .nav-tree-label,
    body.sidebar-closed .app-sidebar .nav-tree-chevron,
    body.sidebar-closed .app-sidebar .nav-tree-subsections,
    body.sidebar-closed .app-sidebar .nav-tree-items,
    #right-sidebar:not(.open) .nav-tree-label,
    #right-sidebar:not(.open) .nav-tree-chevron,
    #right-sidebar:not(.open) .nav-tree-subsections,
    #right-sidebar:not(.open) .nav-tree-items,
    #right-sidebar:not(.open) .rs-empty,
    #right-sidebar:not(.open) .rs-loading {
        display: none !important;
    }

    body.sidebar-closed .app-sidebar .nav-tree-category,
    #right-sidebar:not(.open) .nav-tree-category {
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px;
        padding: 8px 0 !important;
        gap: 0 !important;
        background: transparent !important;
        color: var(--text-muted);
    }

    body.sidebar-closed .app-sidebar .nav-tree-category.active,
    #right-sidebar:not(.open) .nav-tree-category.active {
        color: var(--neon-cyan);
        background: transparent !important;
    }

    body.sidebar-closed .app-sidebar .nav-tree-icon,
    #right-sidebar:not(.open) .nav-tree-icon {
        width: 28px;
        height: 28px;
    }
}