/* Keep the colored bell independent of global thumbnail styles. */
body .site-shell .header-stack .vjs-message-center-bell__button .vjs-message-center-bell__icon {
    display: block;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
    transform-origin: 50% 12%;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    body .site-shell .header-stack .vjs-message-center-bell__button:hover .vjs-message-center-bell__icon,
    body .site-shell .header-stack .vjs-message-center-bell__button:focus-visible .vjs-message-center-bell__icon,
    body .site-shell .header-stack .vjs-message-center-bell.is-ringing .vjs-message-center-bell__icon {
        animation: vjs-client-bell-ring .78s ease-in-out;
    }
}

/* Keep desktop navigation compact without changing mobile touch targets. */
@media (max-width: 980px) {
    /* The account row wraps below the logo, so the sticky header must grow with it. */
    body .site-shell .header-stack .topbar-inner {
        height: auto !important;
        min-height: 68px !important;
    }
}

/* Keep the account control content-sized on tablet-width mobile headers. */
@media (min-width: 481px) and (max-width: 720px) {
    body .site-shell .header-stack .topbar .account-wrap {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    body .site-shell .header-stack .topbar .account-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body .site-shell .header-stack .topbar .account-main,
    body .site-shell .header-stack .topbar .account-meta {
        flex: 0 1 auto !important;
    }

    body .site-shell .header-stack .topbar .account-meta .account-profile-line {
        width: auto !important;
    }

    body .site-shell .header-stack .topbar .account-profile-name-stack {
        flex: 0 1 auto !important;
        max-width: 118px !important;
    }
}

@media (min-width: 1101px) {
    body .site-shell .header-stack .topbar-inner {
        height: 52px !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body .site-shell .header-stack .topbar .brand,
    body .site-shell .header-stack .topbar .nav-links,
    body .site-shell .header-stack .topbar .top-actions,
    body .site-shell .header-stack .topbar .account-wrap {
        height: 100% !important;
        min-height: 0 !important;
    }

    body .site-shell .header-stack .nav-links > a,
    body .site-shell .header-stack .nav-item,
    body .site-shell .header-stack .nav-trigger {
        height: 100% !important;
        min-height: 0 !important;
    }

    body .site-shell .header-stack .brand-logo--vjs-full {
        height: 40px !important;
    }
}

/* Keep the notification counter circular against the theme's global badge reset. */
html body[data-vjs-theme-engine="1"] .site-shell .header-stack .topbar .vjs-message-center-bell .vjs-message-center-bell__badge.vjs-safe-number {
    border-radius: 50% !important;
}

/* Keep logout feedback in the account menu until the server finishes. */
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .logout {
    cursor: wait !important;
    opacity: 1 !important;
}
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .logout .ui-icon {
    position: relative;
}
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .logout .ui-icon > svg {
    visibility: hidden;
}
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .logout .ui-icon::after {
    content: "";
    position: absolute;
    inset: 7px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50% !important;
    animation: vjsInlineLogoutSpin .7s linear infinite !important;
}
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .vjs-loading-ellipsis__dot {
    animation: vjsLoadingDotsWave .72s ease-in-out infinite !important;
}
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .vjs-loading-ellipsis__dot:nth-child(2) { animation-delay: .1s !important; }
body .site-shell .header-stack .account-dropdown form[data-vjs-logout-submitting="1"] .vjs-loading-ellipsis__dot:nth-child(3) { animation-delay: .2s !important; }
@keyframes vjsInlineLogoutSpin {
    to { transform: rotate(360deg); }
}