/* Phase 5 drawer v6: Classic default, mobile-only Stellar rail, desktop click safety. */
:root {
    --stellar-drawer-width: 72px;
    --stellar-drawer-shadow: 10px 0 24px rgba(2, 6, 23, 0.22);
}

html.stellar-nav-mode-classic .stellar-nav-drawer-overlay,
html.stellar-nav-desktop-forced-classic .stellar-nav-drawer-overlay {
    display: none !important;
    pointer-events: none !important;
}

html.stellar-nav-mode-classic .bottom-nav {
    display: grid;
}

html.stellar-nav-mode-stellar .bottom-nav {
    display: none !important;
}

html.stellar-nav-mode-stellar.is-mobile-app .app-screen {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
}

html.stellar-nav-mode-stellar.is-mobile-app.is-chat-thread-open .app-screen[data-screen="chats"] {
    padding-bottom: 0 !important;
}

#stellarNavDrawerToggle,
.stellar-nav-drawer-toggle {
    display: none !important;
}

.stellar-nav-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    background: rgba(2, 6, 23, 0.08);
    transition: opacity 160ms ease, visibility 160ms ease, background-color 160ms ease;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.stellar-nav-drawer-overlay.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.stellar-nav-drawer-overlay[hidden] {
    display: block !important;
}

.stellar-nav-drawer-overlay.is-dragging {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none !important;
    touch-action: none;
}

.stellar-nav-drawer-panel {
    width: var(--stellar-drawer-width);
    max-width: var(--stellar-drawer-width);
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    justify-items: center;
    gap: 9px;
    padding: calc(env(safe-area-inset-top, 0px) + 9px) 6px calc(env(safe-area-inset-bottom, 0px) + 9px);
    color: var(--text);
    background:
        radial-gradient(circle at 40% 0%, rgba(79, 70, 229, 0.15), transparent 30%),
        radial-gradient(circle at 72% 18%, rgba(14, 165, 233, 0.10), transparent 34%),
        color-mix(in srgb, var(--surface) 94%, #050816 6%);
    border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    box-shadow: var(--stellar-drawer-shadow);
    transform: translate3d(0, 0, 0);
    transition: transform 175ms cubic-bezier(.2, .75, .25, 1);
    will-change: transform;
    touch-action: none;
}

.stellar-nav-drawer-overlay.is-hidden .stellar-nav-drawer-panel {
    transform: translate3d(calc(-1 * var(--stellar-drawer-width) - 12px), 0, 0);
}

.stellar-nav-drawer-overlay.is-dragging .stellar-nav-drawer-panel {
    transition: none !important;
}

.stellar-nav-drawer-brand {
    width: 100%;
    display: grid;
    place-items: center;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.stellar-nav-drawer-brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.05em;
    background: var(--button-gradient);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.15);
}

.stellar-nav-drawer-list {
    width: 100%;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 7px;
    padding-top: 1px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.stellar-nav-drawer-item {
    width: 58px;
    min-height: 61px;
    display: grid;
    grid-template-rows: 34px auto;
    place-items: center;
    gap: 3px;
    padding: 6px 4px 5px;
    border: 1px solid transparent;
    border-radius: 18px;
    color: var(--muted);
    background: transparent;
    text-align: center;
    font-size: 9.5px;
    line-height: 1.05;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.stellar-nav-drawer-item i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--accent);
    background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
    font-size: 21px;
    line-height: 1;
}

.stellar-nav-drawer-item span {
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stellar-nav-drawer-item.is-active {
    color: #ffffff;
    border-color: transparent;
    background: var(--button-gradient);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.16);
}

.stellar-nav-drawer-item.is-active i {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

.nav-style-settings-row {
    align-items: center;
}

.nav-style-segmented {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
}

.nav-style-option {
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.nav-style-option.is-active,
.nav-style-option[aria-pressed="true"] {
    color: #ffffff;
    background: var(--button-gradient);
    box-shadow: 0 8px 16px rgba(2, 6, 23, 0.14);
}

@media (max-width: 390px) {
    :root {
        --stellar-drawer-width: 68px;
    }

    .stellar-nav-drawer-panel {
        padding-left: 5px;
        padding-right: 5px;
    }

    .stellar-nav-drawer-item {
        width: 56px;
    }
}


@media (min-width: 821px) {
    .stellar-nav-drawer-overlay {
        display: none !important;
        pointer-events: none !important;
    }

    .bottom-nav {
        display: grid;
    }
}