@property --kadso-timer-progress {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

.kadso-notifications {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

body.kadso-rework .kadso-notifications {
    top: calc(var(--kd-header-height, 64px) + 0.75rem + env(safe-area-inset-top, 0px));
}

.kadso-notification {
    position: relative;
    border-radius: var(--kd-radius, 14px);
    pointer-events: auto;
    animation: kadso-notification-in 0.28s ease-out;
}

.kadso-notification__glow-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    z-index: 2;
    background: conic-gradient(
        from -90deg,
        var(--kadso-notification-glow) 0deg,
        var(--kadso-notification-glow) calc(var(--kadso-timer-progress) * 360deg),
        transparent calc(var(--kadso-timer-progress) * 360deg)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter:
        drop-shadow(0 0 3px var(--kadso-notification-glow))
        drop-shadow(0 0 7px color-mix(in srgb, var(--kadso-notification-glow) 55%, transparent));
    animation: kadso-notification-timer var(--kadso-notification-duration, 30s) linear forwards;
}

.kadso-notification__glow-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from -90deg,
        color-mix(in srgb, var(--kadso-notification-glow) 22%, transparent) 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.85;
}

.kadso-notification--leaving {
    animation: kadso-notification-out 0.22s ease-in forwards;
}

.kadso-notification__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: inherit;
    border: 1px solid var(--kd-border-subtle, #1e283c);
    background: var(--kd-surface, #131a28);
    box-shadow: var(--kd-shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.2));
    color: var(--kd-text, #f0f5fc);
}

.kadso-notification__icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.kadso-notification__glyph {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.kadso-notification__content {
    flex: 1;
    min-width: 0;
}

.kadso-notification__title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.kadso-notification__message {
    font-size: 0.875rem;
    line-height: 1.45;
    word-break: break-word;
}

.kadso-notification__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.15rem -0.15rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--kd-text-muted, #8b9bb8);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.kadso-notification__close:hover {
    color: var(--kd-text, #f0f5fc);
    background: var(--kd-surface-hover, #212b42);
}

.kadso-notification--success {
    --kadso-notification-glow: var(--kd-success, #2dd4a0);
}

.kadso-notification--success .kadso-notification__icon {
    color: var(--kd-success, #2dd4a0);
    background: var(--kd-badge-success-bg, rgba(53, 216, 159, 0.18));
}

.kadso-notification--danger {
    --kadso-notification-glow: var(--kd-danger, #f4728b);
}

.kadso-notification--danger .kadso-notification__icon {
    color: var(--kd-danger, #f4728b);
    background: var(--kd-badge-danger-bg, rgba(255, 122, 154, 0.18));
}

.kadso-notification--warning {
    --kadso-notification-glow: var(--kd-warning, #f5b942);
}

.kadso-notification--warning .kadso-notification__icon {
    color: var(--kd-warning, #f5b942);
    background: var(--kd-badge-warn-bg, rgba(255, 192, 85, 0.2));
}

.kadso-notification--info {
    --kadso-notification-glow: var(--kd-badge-info-fg, #bdc7ff);
}

.kadso-notification--info .kadso-notification__icon {
    color: var(--kd-badge-info-fg, #bdc7ff);
    background: var(--kd-badge-info-bg, rgba(122, 137, 255, 0.2));
}

.cabinet-app .kadso-notifications {
    top: calc(3.5rem + env(safe-area-inset-top, 0px));
}

@keyframes kadso-notification-timer {
    from {
        --kadso-timer-progress: 1;
    }
    to {
        --kadso-timer-progress: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kadso-notification__glow-ring {
        animation: none;
        --kadso-timer-progress: 0.35;
    }
}

@keyframes kadso-notification-in {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes kadso-notification-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(1rem);
    }
}