/* Anchored popover: the one dropdown primitive (v2.1) — the message ⋯, the
   room-row ⋯ and the quick profile all ride it. Rendered in the browser's top
   layer via [popover], so no scroll container, containment root or z-index
   stack can clip it; popover_controller does the anchoring (trigger rect,
   flip above when it won't fit below, 12px viewport clamp). It stays hidden
   until the controller places it — the popover toggle event arrives async, so
   without this it could paint one frame at an unpositioned spot. */
.anchored-popover {
    background-color: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    color: var(--color-text);
    inset: auto;
    margin: 0;
    padding: 0;
    position: fixed;
    visibility: hidden;

    /* Take the popover out of layout while closed. The per-menu display:flex
       below is author-origin and so overrides the UA [popover]:not(:popover-open)
       display:none — without this, every closed menu stays a fixed, off-canvas
       box that enlarges the scroll area and shows a horizontal scrollbar. The
       controller only measures the menu once it's open, so this is safe. */
    &:not(:popover-open) {
        display: none;
    }

    &.anchored-popover--placed {
        animation: popup-in 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
        visibility: visible;
    }
}

/* Message-options menu: a narrow card of plain label rows */
.message-menu {
    display: flex;
    flex-direction: column;
    inline-size: 230px;
    padding: 6px;
}

.message-menu .btn {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-border-radius: 7px;
    --btn-padding: 9px 12px;
    --hover-color: transparent;
    --hover-filter: none;

    font-size: 0.84375rem;
    font-weight: 400;
    inline-size: 100%;
    justify-content: flex-start;
    text-align: start;

    @media (any-hover: hover) {
        &:hover {
            background-color: var(--color-bg-hover);
        }
    }
}

.message-menu .message-menu__danger {
    color: var(--color-negative);
}

/* Room-row ⋯ menu: a narrower card; Leave sits apart behind a hairline */
.room-menu {
    display: flex;
    flex-direction: column;
    inline-size: 208px;
    padding: 5px;
}

.room-menu .btn {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-border-radius: 7px;
    --btn-padding: 5px 10px;
    --hover-color: transparent;
    --hover-filter: none;

    font-size: 0.84375rem;
    font-weight: 400;
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: 30px;
    text-align: start;

    @media (any-hover: hover) {
        &:hover {
            background-color: var(--color-bg-hover);
        }
    }
}

/* An item set apart from the rest by a hairline — Leave room, Mark all as seen. */
.room-menu__separated {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: 4px;
    padding-block-start: 4px;
}

.room-menu .room-menu__negative {
    color: var(--color-negative);
}

/* Profile flyout: the footer row is its only trigger. The shared popover
   controller flips it upward from the bottom edge and keeps it in the top
   layer when the sidebar is a drawer or compact rail. */
.sidebar__profile-popover {
    display: flex;
    flex-direction: column;
    inline-size: min(256px, calc(100vw - 24px));
    max-block-size: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 6px;
}

.sidebar__profile-summary {
    align-items: center;
    border-radius: 9px;
    color: var(--color-text);
    display: flex;
    gap: 11px;
    min-inline-size: 0;
    padding: 9px 10px 11px;
    text-decoration: none;
}

.sidebar__profile-summary-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 0.75rem;
    min-inline-size: 0;
}

.sidebar__profile-summary-info strong {
    font-size: 0.875rem;
}

.sidebar__profile-summary-info span,
.sidebar__profile-summary-arrow {
    color: var(--color-text-subtle);
}

.sidebar__profile-divider {
    border-block-start: 1px solid var(--color-border);
    display: block;
    margin: 4px 2px;
}

.sidebar__profile-menu-item {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.84375rem;
    inline-size: 100%;
    min-block-size: 34px;
    padding: 0 10px;
    text-align: start;
    text-decoration: none;
}

.sidebar__profile-summary,
.sidebar__profile-menu-item {
    &:focus-visible {
        outline: 2px solid var(--color-accent-brand);
        outline-offset: 2px;
    }

    @media (any-hover: hover) {
        &:hover {
            background-color: var(--color-bg-hover);
        }
    }
}

/* Right-aligned trailing meta on a menu item: the Appearance theme hint and
   the Community-settings STAFF chip. */
.sidebar__profile-menu-hint {
    color: var(--color-text-subtle);
    margin-inline-start: auto;
}

.sidebar__profile-menu-chip {
    background: var(--color-selected);
    border-radius: 5px;
    color: var(--color-accent-brand);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-inline-start: auto;
    padding: 2px 6px;
}

.sidebar__profile-logout {
    margin: 0;
}

.options-btn {
    opacity: 0.5;

    @media (hover: hover) and (pointer: fine) {
        opacity: 0.5;
        transition: opacity 150ms ease-in-out;
        transition-delay: 150ms;
    }

    @media (hover: none) and (pointer: coarse) {
        opacity: 0.5;

        & [open] {
            opacity: 1;
        }
    }

    /* The trigger stays lit while its menu is open */
    &[aria-expanded="true"] {
        --btn-background: var(--color-bg-hover);

        opacity: 1;
    }
}

.action-btn {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --outline-offset: 0;
    --width: 25%;

    flex-basis: var(--width);

    @media (hover: hover) and (pointer: fine) {
        &:where(:not(:active):hover) {
            --btn-background: var(--color-border-dark);
            --hover-size: 0;
        
            opacity: 1;
        }
    }
    
    &:where(:not(:active)):focus-visible {
        opacity: 1;
    }
}