.topbar-hidden {
    display: none;
}

.topBar .topbar-hidden {
    display: none;
}

.topbar-account-menu {
    &.btn-group {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        flex: 0 0 auto;
    }

    /* Logged-in trigger — desktop pill shape */
    &.btn-group > .topbar-account-trigger.pill-btn.dropdown-toggle:not(.dropdown-toggle-split):not(.topbar-account-trigger--guest) {
        width: auto;
        min-width: 0;
        max-width: min(280px, 42vw);
        background: var(--field-bg);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        box-shadow: none;

        &::before {
            display: none;
        }

        &:hover {
            background: var(--field-bg);
            border-color: var(--accent);
            color: var(--accent);
            box-shadow: none;
        }

        @media (max-width: 768px) {
            width: auto;
            min-width: 0;
            max-width: none;
            height: auto;
            padding: 0;
            gap: 0;
            justify-content: center;
            align-items: center;
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;

            &:hover,
            &:focus {
                background: transparent;
                border-color: transparent;
                box-shadow: none;
                color: inherit;
            }

            &:focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: 2px;
            }

            &:focus:not(:focus-visible) {
                outline: none;
            }
        }
    }

    /* Guest trigger — mobile-first: icon circle; desktop: pill with label */
    &.btn-group > .topbar-account-trigger--guest.pill-btn.dropdown-toggle:not(.dropdown-toggle-split) {
        /* Reset btn.css pill-btn defaults */
        --press-feedback-active-radius: 50%;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        background: transparent;
        border: none;
        box-shadow: none;
        color: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;

        &::before,
        &::after {
            display: none;
        }

        &:hover,
        &:focus {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            color: inherit;
        }

        &:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
        }

        &:focus:not(:focus-visible) {
            outline: none;
        }

        .topbar-account-trigger-email,
        .pill-btn-caret {
            display: none;
        }

        .topbar-account-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: var(--gray-700);
            background: color-mix(in srgb, var(--gray-200) 55%, var(--field-bg));
            border: 1.5px solid var(--gray-300);
            flex-shrink: 0;
            transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
        }

        &:hover .topbar-account-avatar,
        &:focus-visible .topbar-account-avatar {
            color: var(--accent);
            background: color-mix(in srgb, var(--accent-light) 50%, var(--color-light));
            border-color: color-mix(in srgb, var(--accent-light) 65%, var(--color-light));
        }

        @media (min-width: 769px) {
            --press-feedback-active-radius: var(--radius-pill);
            width: auto;
            min-width: 0;
            max-width: min(240px, 42vw);
            height: auto;
            padding: 4px 36px 4px 6px;
            border-radius: var(--radius-pill);
            border: 1px solid var(--gray-200);
            background: var(--gray-100);
            color: var(--gray-800);
            gap: 10px;

            &:hover,
            &:focus {
                background: var(--field-bg);
                border-color: var(--gray-300);
                box-shadow: none;
                color: var(--gray-800);
            }

            .topbar-account-trigger-email {
                display: block;
                flex: 1;
                min-width: 0;
                font-size: 13px;
                font-weight: 500;
                color: var(--text-color);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .pill-btn-caret {
                display: block;
            }

            .topbar-account-avatar {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
        }
    }

    &.app-dropdown .dropdown-menu.topbar-account-panel.topbar-account-panel--guest {
        min-width: 260px;
    }

    &.app-dropdown .dropdown-menu.topbar-account-panel {
        display: block;
        min-width: 300px;
        max-width: min(340px, 92vw);
        padding: 0;
        margin-top: 10px;
        border: 1px solid var(--topbar-account-panel-border);
        border-radius: 14px;
        box-shadow:
            0 0 0 1px var(--topbar-account-panel-inset-ring) inset,
            0 4px 6px var(--shadow-card),
            0 16px 48px var(--topbar-account-panel-shadow);
        background: var(--field-bg);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px) scale(0.98);
        transform-origin: top right;
        transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s;

        &.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0) scale(1);
            transition: opacity 0.15s ease-out, transform 0.15s ease-out;
        }

        @media (prefers-reduced-motion: reduce) {
            transition: opacity 0.15s ease-out, visibility 0s linear 0.15s;
            transform: none;

            &.show {
                transition: opacity 0.15s ease-out;
                transform: none;
            }
        }

        @media (max-width: 768px) {
            min-width: 0;
            width: -moz-max-content;
            width: max-content;
            max-width: min(272px, calc(100vw - 16px));
            margin-top: 6px;
            max-height: min(420px, calc(100vh - 72px));
            overflow-y: auto;
            box-shadow:
                0 0 0 1px var(--topbar-account-panel-inset-ring) inset,
                0 8px 24px var(--shadow-modal),
                0 24px 64px var(--topbar-account-panel-shadow-mobile);
        }
    }

    &.app-dropdown .topbar-account-panel-actions {
        padding: 6px 0 8px;
        background: var(--topbar-account-actions-bg);
        border-top: none;

        .dropdown-item {
            width: calc(100% - 16px);
            margin: 0 8px;
            min-height: 0;
            height: auto;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 8px;
            box-shadow: none;
            background: transparent;
            color: var(--text-color);

            i {
                width: 1.35em;
                margin-right: 10px;
                color: var(--topbar-account-item-icon);
                text-align: center;
            }

            &:hover,
            &:focus,
            &:is(.is-pressed, :focus-visible:active) {
                background: var(--topbar-account-item-hover-bg) !important;
                border-color: transparent !important;
                color: var(--gray-900) !important;
                box-shadow: 0 1px 3px var(--topbar-account-item-hover-shadow) !important;

                i {
                    color: var(--accent);
                }
            }

            @media (max-width: 768px) {
                width: calc(100% - 12px);
                margin: 0 6px 3px;
                padding: 10px 12px;
                min-height: 44px;
                font-size: 14px;
                border-radius: 10px;
                display: flex;
                align-items: center;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    /* Logged-in trigger inner layout */
    .topbar-account-trigger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 4px 36px 4px 6px;
        text-align: left;
        border-radius: 999px;

        .topbar-account-avatar {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: var(--gray-800);
            background: var(--gray-200);
            border: 1px solid var(--border-color);
            box-shadow: none;

            @media (max-width: 768px) {
                width: 44px;
                height: 44px;
                font-size: 14px;
            }
        }

        .topbar-account-trigger-email {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media (max-width: 768px) {
                display: none;
            }
        }

        .pill-btn-caret {
            @media (max-width: 768px) {
                display: none;
            }
        }
    }

    .topbar-account-panel-body {
        padding: 22px 22px 20px;
        text-align: center;
        background: linear-gradient(
            180deg,
            var(--topbar-account-profile-bg-start) 0%,
            var(--topbar-account-profile-bg-mid) 45%,
            var(--color-light) 100%
        );
        border-bottom: 1px solid var(--topbar-account-profile-border);

        @media (max-width: 768px) {
            padding: 14px 14px 12px;
        }

        .topbar-account-avatar--lg {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            margin: 0 auto 14px;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.02em;
            border-radius: 50%;
            color: var(--topbar-account-avatar-lg-fg);
            background: var(--topbar-account-avatar-lg-bg);
            border: 1px solid var(--topbar-account-avatar-lg-border);
            box-shadow: none;

            @media (max-width: 768px) {
                width: 48px;
                height: 48px;
                font-size: 15px;
                margin: 0 auto 10px;
            }
        }

        .topbar-account-panel-name {
            font-size: 17px;
            font-weight: 600;
            color: var(--gray-900);
            line-height: 1.25;
            letter-spacing: -0.02em;
            word-break: break-word;

            @media (max-width: 768px) {
                font-size: 15px;
            }
        }

        .topbar-account-panel-email {
            margin-top: 6px;
            font-size: 13px;
            line-height: 1.35;
            color: var(--text-muted);
            word-break: break-all;

            @media (max-width: 768px) {
                font-size: 12px;
                margin-top: 4px;
            }
        }
    }
}