/* ==========================================================================
   App sidebar (#620)

   The menu drawer behind the avatar in the native app's top bar. It slides in
   from the right over a dimmed backdrop and holds the entries that no longer
   have a tab of their own: search, profile, settings, wiki.
   ========================================================================== */

.app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    /* Same rung as every other body-level layer, so DOM order decides what sits
       on top: tapping "Settings" closes this panel and appends the account
       overlay after it, which is what puts the overlay in front. */
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: flex-end;
    animation: app-sidebar-backdrop-in 0.25s ease-out;
}

.app-sidebar-backdrop.closing {
    animation: app-sidebar-backdrop-out 0.25s ease-in forwards;
}

.app-sidebar {
    width: min(78vw, 320px);
    height: 100vh;
    height: 100dvh;
    background: #222;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 0 calc(1rem + env(safe-area-inset-bottom, 0px)) 0;
    animation: app-sidebar-in 0.25s ease-out;
}

.app-sidebar-backdrop.closing .app-sidebar {
    animation: app-sidebar-out 0.25s ease-in forwards;
}

/* The drawer covers the top bar while it is open, so the entries start at the
   panel's own padding rather than reserving room for a bar nobody can see. */
.app-sidebar__items {
    display: flex;
    flex-direction: column;
}

/* Invite, admin and logout are pushed to the bottom of the drawer — the
   `margin-top: auto` takes the place of the panel's former `space-between`,
   which would have parked this group in the middle now that a third child
   (the version) follows it. */
.app-sidebar__items--account {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.app-sidebar__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.9rem 1.25rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    text-align: left;
}

.app-sidebar__item:active {
    background: rgba(255, 255, 255, 0.08);
}

.app-sidebar__item i {
    width: 1.25rem;
    text-align: center;
}

.app-sidebar__version {
    padding: 0 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
}

@keyframes app-sidebar-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes app-sidebar-backdrop-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Transforms are exempt from the dvh rule: sliding the panel a full viewport
   width out is meant to clear the edge either way. */
@keyframes app-sidebar-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes app-sidebar-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}