#kinma-nav-menu-load-bar.kinma-nav-menu-load-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 3px;
    z-index: 100120;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

html.kinma-nav-menu-load-active #kinma-nav-menu-load-bar.kinma-nav-menu-load-bar,
#kinma-nav-menu-load-bar.kinma-nav-menu-load-bar--visible {
    opacity: 1;
    visibility: visible;
}

.kinma-nav-menu-load-bar__track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
}



.kinma-nav-menu-load-bar__fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --kinma-nav-load-p: 0;
    transform: scaleX(var(--kinma-nav-load-p, 0));
    transform-origin: left center;
    will-change: transform;
    background: linear-gradient(
        90deg,
        var(--kinma-nav-load-color-a, #6366f1) 0%,
        var(--kinma-nav-load-color-b, #ec4899) 100%
    );
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
    transition: none;
    border-radius: 0 1px 1px 0;
}


.kinma-nav-menu-load-bar__fill::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.75),
        0 0 8px rgba(236, 72, 153, 0.45);
    opacity: 0.88;
}

.kinma-nav-menu-load-bar__fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 1px;
    width: 28px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.18) 38%,
        rgba(255, 255, 255, 0.55) 100%
    );
    animation: kinmaNavMenuLoadSheen 2.4s ease-in-out infinite;
}

.kinma-nav-menu-load-bar--done .kinma-nav-menu-load-bar__fill::before {
    opacity: 1;
    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.85),
        0 0 10px rgba(236, 72, 153, 0.5);
}

.kinma-nav-menu-load-bar--done .kinma-nav-menu-load-bar__fill::after {
    animation: none;
    opacity: 1;
}

@keyframes kinmaNavMenuLoadSheen {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.95;
    }
}

@media (max-width: 1024px) {
    html.kinma-mobile-menu-transition-active,
    html.kinma-mobile-menu-transition-active body {
        overscroll-behavior: none;
    }

    html.kinma-mobile-menu-transition-active #kinma-nav-menu-load-bar {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    html.kinma-mobile-menu-transition-active .mobile-top-nav-row,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav {
        z-index: 2147483601 !important;
    }

    html.kinma-mobile-menu-transition-active .mobile-kinma-island,
    html.kinma-mobile-menu-transition-active .mobile-chat-ai-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-add-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-search-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-profile-edit-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-story-book-back-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-chat-add-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-chat-ai-island,
    html.kinma-mobile-menu-transition-active #mobile-bottom-nav-chat-search-island {
        pointer-events: none !important;
    }

    html.kinma-mobile-menu-transition-active.kinma-mobile-menu-transition-locked .mobile-top-nav-row,
    html.kinma-mobile-menu-transition-active.kinma-mobile-menu-transition-locked #mobile-bottom-nav {
        pointer-events: none !important;
    }

    .kinma-mobile-menu-transition {
        position: fixed;
        inset: 0;
        z-index: 2147483600;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background: transparent;
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s linear 380ms;
        color: var(--kinma-mobile-menu-transition-color, var(--kinma-user-dark, #1a1a1a));
    }

    .kinma-mobile-menu-transition::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: #ffffff;
        opacity: 0;
        transition: opacity 150ms ease-out;
    }

    .kinma-mobile-menu-transition.is-visible {
        visibility: visible;
        pointer-events: auto;
        transition: visibility 0s linear 0s;
    }

    .kinma-mobile-menu-transition.is-visible::before {
        opacity: 1;
    }

    .kinma-mobile-menu-transition__ring {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        width: min(88vmin, 580px);
        height: min(88vmin, 580px);
        color: inherit;
        transform: translate3d(0, calc(50vh + 50%), 0);
        transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
        will-change: transform;
    }

    .kinma-mobile-menu-transition.is-visible .kinma-mobile-menu-transition__ring,
    .kinma-mobile-menu-transition.is-restored .kinma-mobile-menu-transition__ring {
        transform: translate3d(0, 0, 0);
    }

    .kinma-mobile-menu-transition.is-restored .kinma-mobile-menu-transition__ring {
        transition: none;
    }

    .kinma-mobile-menu-transition__spinner {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: visible;
        animation: kinmaMobileMenuTransitionSpin 0.82s linear infinite;
    }

    .kinma-mobile-menu-transition__spinner circle {
        fill: none;
        stroke: currentColor;
        stroke-width: 8;
        stroke-linecap: round;
        stroke-dasharray: 220 56;
    }

    .kinma-mobile-menu-transition__visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: min(3vmin, 18px);
        width: min(64vmin, 420px);
        height: min(36vmin, 236px);
        color: inherit;
    }

    .kinma-mobile-menu-transition__menu-icon {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        color: inherit;
    }

    .kinma-mobile-menu-transition__menu-icon--current {
        width: min(18vmin, 118px);
        height: min(18vmin, 118px);
    }

    .kinma-mobile-menu-transition__menu-icon--target {
        width: min(27vmin, 177px);
        height: min(27vmin, 177px);
    }

    .kinma-mobile-menu-transition.is-utility .kinma-mobile-menu-transition__spinner {
        display: none;
    }

    .kinma-mobile-menu-transition.is-utility .kinma-mobile-menu-transition__visual {
        width: min(50vmin, 330px);
        height: min(50vmin, 330px);
    }

    .kinma-mobile-menu-transition__menu-icon--single {
        width: min(50vmin, 330px);
        height: min(50vmin, 330px);
    }

    .kinma-mobile-menu-transition.is-utility .kinma-mobile-menu-transition__menu-icon--single > svg {
        position: static !important;
        inset: auto !important;
        flex: 0 0 auto !important;
        width: min(50vmin, 330px) !important;
        height: min(50vmin, 330px) !important;
    }

    .kinma-mobile-menu-transition__dots {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: min(1.25vmin, 8px);
        width: min(11vmin, 72px);
        height: min(9vmin, 59px);
        color: inherit;
    }

    .kinma-mobile-menu-transition__dots > span {
        display: block;
        border-radius: 50%;
        background: #ffffff;
        opacity: 1;
        animation: none;
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(1) {
        width: min(1.5vmin, 10px);
        height: min(1.5vmin, 10px);
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(2) {
        width: min(2.1vmin, 14px);
        height: min(2.1vmin, 14px);
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(3) {
        width: min(2.7vmin, 18px);
        height: min(2.7vmin, 18px);
    }

    .kinma-mobile-menu-transition.is-visible .kinma-mobile-menu-transition__dots > span,
    .kinma-mobile-menu-transition.is-exiting .kinma-mobile-menu-transition__dots > span {
        animation: kinmaMobileMenuTransitionDot 0.82s ease-in-out infinite;
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(2) {
        animation-delay: 0.08s !important;
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(3) {
        animation-delay: 0.16s !important;
    }

    .kinma-mobile-menu-transition__menu-icon > svg,
    .kinma-mobile-menu-transition__menu-icon > .mobile-top-nav-avatar {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        color: inherit !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .kinma-mobile-menu-transition__menu-icon > svg path,
    .kinma-mobile-menu-transition__menu-icon > svg rect,
    .kinma-mobile-menu-transition__menu-icon > svg circle,
    .kinma-mobile-menu-transition__menu-icon > svg polygon {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .kinma-mobile-menu-transition__menu-icon > svg .nav-icon-knockout {
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }

    .kinma-mobile-menu-transition__menu-icon--ai > svg path {
        fill: url(#kinmaMobileLoaderAiGradient) !important;
        stroke: none !important;
    }

    .kinma-mobile-menu-transition__menu-icon > .mobile-top-nav-avatar {
        overflow: hidden;
        border: clamp(5px, 1.4vmin, 9px) solid currentColor;
        border-radius: 50%;
        background: #ffffff !important;
        box-sizing: border-box;
    }

    .kinma-mobile-menu-transition__menu-icon > .mobile-top-nav-avatar img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @keyframes kinmaMobileMenuTransitionSpin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes kinmaMobileMenuTransitionDot {
        0%, 60%, 100% {
            background-color: #ffffff;
        }
        30% {
            background-color: var(--kinma-user-dark, #1a1a1a);
        }
    }
}

@media (min-width: 1025px) {
    html.kinma-mobile-menu-transition-active #kinma-nav-menu-load-bar {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Keep the complete desktop navigation visible while the page itself is
       covered by the fullscreen transition. The contained Chat/AI loader is
       intentionally excluded because it only belongs to the chat popup. */
    html.kinma-mobile-menu-transition-active:has(
        body > #kinma-mobile-menu-transition.is-visible:not(.is-desktop-contained)
    ) .left-nav-cluster {
        z-index: 2147483601 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html.kinma-mobile-menu-transition-active:has(
        body > #kinma-mobile-menu-transition.is-visible:not(.is-desktop-contained)
    ) .left-nav-cluster,
    html.kinma-mobile-menu-transition-active:has(
        body > #kinma-mobile-menu-transition.is-visible:not(.is-desktop-contained)
    ) .left-nav-cluster * {
        pointer-events: none !important;
    }

    .kinma-mobile-menu-transition {
        position: fixed;
        inset: 0;
        z-index: 2147483600;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
        color: var(--kinma-mobile-menu-transition-color, var(--kinma-user-dark, #1a1a1a));
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s linear 380ms;
    }

    .kinma-mobile-menu-transition::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: #ffffff;
        opacity: 0;
        transition: opacity 150ms ease-out;
    }

    .kinma-mobile-menu-transition.is-visible {
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .kinma-mobile-menu-transition.is-visible::before {
        opacity: 1;
    }

    .kinma-mobile-menu-transition__ring {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(360px, 42vmin, 580px);
        height: clamp(360px, 42vmin, 580px);
        color: inherit;
        transform: translate3d(0, calc(50vh + 50%), 0);
        transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
        will-change: transform;
    }

    .kinma-mobile-menu-transition.is-visible .kinma-mobile-menu-transition__ring,
    .kinma-mobile-menu-transition.is-restored .kinma-mobile-menu-transition__ring {
        transform: translate3d(0, 0, 0);
    }

    .kinma-mobile-menu-transition.is-restored .kinma-mobile-menu-transition__ring {
        transition: none;
    }

    .kinma-mobile-menu-transition__spinner {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: visible;
        animation: kinmaDesktopMenuTransitionSpin 0.82s linear infinite;
    }

    .kinma-mobile-menu-transition__spinner circle {
        fill: none;
        stroke: currentColor;
        stroke-width: 8;
        stroke-linecap: round;
        stroke-dasharray: 220 56;
    }

    .kinma-mobile-menu-transition__visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 1.25vw, 22px);
        width: clamp(280px, 31vmin, 430px);
        height: clamp(170px, 19vmin, 260px);
        color: inherit;
    }

    .kinma-mobile-menu-transition__menu-icon {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        color: inherit;
    }

    .kinma-mobile-menu-transition__menu-icon--current {
        width: clamp(76px, 8vmin, 112px);
        height: clamp(76px, 8vmin, 112px);
    }

    .kinma-mobile-menu-transition__menu-icon--target {
        width: clamp(112px, 12vmin, 168px);
        height: clamp(112px, 12vmin, 168px);
    }

    .kinma-mobile-menu-transition__dots {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 72px;
        height: 60px;
    }

    .kinma-mobile-menu-transition__dots > span {
        display: block;
        border-radius: 50%;
        background: #ffffff;
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(1) {
        width: 10px;
        height: 10px;
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(2) {
        width: 14px;
        height: 14px;
        animation-delay: 0.08s !important;
    }

    .kinma-mobile-menu-transition__dots > span:nth-child(3) {
        width: 18px;
        height: 18px;
        animation-delay: 0.16s !important;
    }

    .kinma-mobile-menu-transition.is-visible .kinma-mobile-menu-transition__dots > span,
    .kinma-mobile-menu-transition.is-exiting .kinma-mobile-menu-transition__dots > span {
        animation: kinmaDesktopMenuTransitionDot 0.82s ease-in-out infinite;
    }

    .kinma-mobile-menu-transition__menu-icon > svg,
    .kinma-mobile-menu-transition__menu-icon > img,
    .kinma-mobile-menu-transition__menu-icon > .mobile-top-nav-avatar,
    .kinma-mobile-menu-transition__menu-icon > .nav-profile-avatar {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        color: inherit !important;
        opacity: 1 !important;
        transform: none !important;
        object-fit: cover;
    }

    .kinma-mobile-menu-transition__menu-icon > svg path,
    .kinma-mobile-menu-transition__menu-icon > svg rect,
    .kinma-mobile-menu-transition__menu-icon > svg circle,
    .kinma-mobile-menu-transition__menu-icon > svg polygon {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .kinma-mobile-menu-transition__menu-icon > svg .nav-icon-knockout {
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }

    .kinma-mobile-menu-transition__menu-icon--ai > svg path {
        fill: url(#kinmaMobileLoaderAiGradient) !important;
        stroke: none !important;
    }

    .kinma-mobile-menu-transition__menu-icon > img,
    .kinma-mobile-menu-transition__menu-icon > .mobile-top-nav-avatar,
    .kinma-mobile-menu-transition__menu-icon > .nav-profile-avatar {
        overflow: hidden;
        border: 7px solid currentColor;
        border-radius: 50%;
        background: #ffffff !important;
        box-sizing: border-box;
    }

    .kinma-mobile-menu-transition.is-utility .kinma-mobile-menu-transition__spinner {
        display: none;
    }

    .kinma-mobile-menu-transition.is-utility.is-desktop-contained {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        z-index: 2147483000;
        border-radius: inherit;
    }

    .kinma-mobile-menu-transition.is-utility.is-desktop-contained .kinma-mobile-menu-transition__ring {
        width: min(72%, 420px);
        height: min(72%, 420px);
        transform: translate3d(0, calc(50% + 320px), 0);
    }

    .kinma-mobile-menu-transition.is-utility.is-desktop-contained.is-visible .kinma-mobile-menu-transition__ring,
    .kinma-mobile-menu-transition.is-utility.is-desktop-contained.is-restored .kinma-mobile-menu-transition__ring {
        transform: translate3d(0, 0, 0);
    }

    .kinma-mobile-menu-transition.is-utility .kinma-mobile-menu-transition__visual,
    .kinma-mobile-menu-transition__menu-icon--single {
        width: min(46vmin, 250px);
        height: min(46vmin, 250px);
    }

    .kinma-mobile-menu-transition.is-utility.is-desktop-contained .kinma-mobile-menu-transition__visual,
    .kinma-mobile-menu-transition.is-utility.is-desktop-contained .kinma-mobile-menu-transition__menu-icon--single {
        width: min(38%, 220px);
        height: min(38%, 220px);
        min-width: 112px;
        min-height: 112px;
    }

    .kinma-mobile-menu-transition.is-utility .kinma-mobile-menu-transition__menu-icon--single > svg {
        position: static !important;
        inset: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 100% !important;
    }

    @keyframes kinmaDesktopMenuTransitionSpin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes kinmaDesktopMenuTransitionDot {
        0%, 60%, 100% {
            background-color: #ffffff;
        }
        30% {
            background-color: var(--kinma-user-dark, #1a1a1a);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .kinma-nav-menu-load-bar__fill::after {
        animation: none;
        opacity: 0.7;
    }

    .kinma-mobile-menu-transition__spinner {
        animation-duration: 1.8s;
    }
}