.ops-demo-toast {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 7600;
    max-width: min(420px, calc(100vw - 40px));
    padding: 15px 18px;
    border: 1px solid var(--zn-member-accent-border, var(--zn-accent-border, #2b7287));
    border-radius: 14px;
    color: var(--zn-member-text-primary, var(--zn-text-primary, #fff));
    background: var(--zn-member-bg-card, var(--zn-bg-surface-elevated, #17212b));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
    font-weight: 700;
    line-height: 1.4;
}

.ops-demo-toast[hidden] { display: none; }

html.ops-modal-open { overflow: hidden; }

.ops-delegation-bubble {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0 8px;
    padding: 13px;
    border: 1px solid var(--zn-accent-border, #7189ff);
    border-radius: 12px;
    color: var(--zn-text-primary, #edf3ff);
    background: color-mix(in srgb, var(--zn-accent-surface, #7189ff) 22%, var(--zn-bg-surface-elevated, #121a27));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
    animation: ops-delegation-bubble-in .28s ease both;
}

.ops-delegation-bubble[hidden],
.ops-delegated-navigation[hidden] { display: none !important; }

.ops-delegation-bubble-icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--zn-filled-accent-text, #fff);
    background: var(--zn-filled-accent-background, var(--zn-accent, #7189ff));
    font-weight: 900;
}

.ops-delegation-kicker {
    margin: 0 0 5px;
    color: var(--zn-accent-text, var(--zn-text-primary, #edf3ff));
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ops-delegation-bubble strong {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
}

.ops-delegation-bubble p:not(.ops-delegation-kicker) {
    margin: 7px 0 0;
    color: var(--zn-text-secondary, #a2afc6);
    font-size: .69rem;
    line-height: 1.45;
}

.ops-delegation-bubble button {
    margin-top: 10px;
    padding: 0;
    border: 0;
    color: var(--zn-accent-text, var(--zn-text-primary, #edf3ff));
    background: transparent;
    font: inherit;
    font-size: .7rem;
    font-weight: 850;
    cursor: pointer;
}

.ops-delegation-bubble.is-confirmation {
    border-color: var(--zn-success-border, #3f9b70);
    background: color-mix(in srgb, var(--zn-success-surface, #173a2b) 58%, var(--zn-bg-surface-elevated, #121a27));
}

.ops-delegated-navigation {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.ops-delegated-navigation .sidebar-group,
.ops-delegated-navigation .ops-delegated-link {
    opacity: 0;
    transform: translateX(-12px);
}

.ops-delegated-navigation.is-revealed .sidebar-group {
    animation: ops-delegated-item-in .3s ease forwards;
}

.ops-delegated-navigation.is-revealed .sidebar-group:nth-child(2) { animation-delay: .22s; }
.ops-delegated-navigation.is-revealed .sidebar-group:nth-child(3) { animation-delay: .38s; }
.ops-delegated-navigation.is-revealed .ops-delegated-link { animation: ops-delegated-item-in .3s ease forwards; }
.ops-delegated-navigation.is-revealed .sidebar-group:nth-child(1) .ops-delegated-link:nth-child(1) { animation-delay: .08s; }
.ops-delegated-navigation.is-revealed .sidebar-group:nth-child(1) .ops-delegated-link:nth-child(2) { animation-delay: .16s; }
.ops-delegated-navigation.is-revealed .sidebar-group:nth-child(2) .ops-delegated-link { animation-delay: .3s; }
.ops-delegated-navigation.is-revealed .sidebar-group:nth-child(3) .ops-delegated-link { animation-delay: .46s; }

.ops-delegated-link {
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--zn-accent-border, #7189ff) 48%, transparent);
}

.ops-delegated-badge {
    margin-left: 8px;
    padding: 2px 5px;
    border-radius: 999px;
    color: var(--zn-accent-text, var(--zn-text-primary, #edf3ff));
    background: var(--zn-accent-surface-muted, rgba(113, 137, 255, .16));
    font-size: .52rem;
    font-weight: 850;
    letter-spacing: .03em;
}

@keyframes ops-delegation-bubble-in {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ops-delegated-item-in {
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 680px) {
    .ops-demo-toast { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ops-delegation-bubble,
    .ops-delegated-navigation.is-revealed .sidebar-group,
    .ops-delegated-navigation.is-revealed .ops-delegated-link {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }
}