/* =========================
   NOTIFY OVERLAY WRAPPER
   ========================= */
.notify-wrapper {
    position: fixed;
    top: calc(48px + 16px); /* 48px Navbar + 16px Abstand */
    right: 16px;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    pointer-events: none;
    max-width: calc(100vw - 32px);
}

/* =========================
   NOTIFY CARD (Dezent & Clean)
   ========================= */
.notify {
    position: relative;
    display: flex;
    align-items: flex-start; /* Besser für mehrzeiligen Text */
    gap: var(--spacing-md);

    min-width: 300px;
    max-width: 420px;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-md); /* 12px 16px 12px 12px */

    /* Dezent: Weißer Hintergrund statt grau, weicher Schatten */
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent); /* Etwas dünner und eleganter */
    border-radius: var(--radius);
    box-shadow: var(--shadow-16);

    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: 400; /* 400 ist dezenter als 500 */
    line-height: 1.4;

    overflow: hidden;
    pointer-events: auto;

    /* Animation: Rein, und nach --duration wieder raus */
    animation: 
        notifyIn 0.2s cubic-bezier(0.1, 0.9, 0.2, 1) forwards,
        notifyOut 0.25s cubic-bezier(0.4, 0, 1, 1) var(--duration, 4s) forwards;
}

/* =========================
   ICON
   ========================= */
.notify .notify-icon {
    font-size: var(--font-size-lg);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px; /* Optischer Ausgleich zur Textzeile */
}

/* =========================
   TEXT
   ========================= */
.notify .notify-text {
    flex: 1;
    color: var(--text-primary);
    padding-right: 24px; /* Platz für den Close-Button */
}

/* =========================
   STATUS TYPES (Fluent Colors)
   ========================= */
.notify.success {
    border-left-color: var(--success);
}
.notify.success .notify-icon {
    color: var(--success);
}
.notify.success .notify-progress {
    background: var(--success);
}

.notify.error {
    border-left-color: var(--error);
}
.notify.error .notify-icon {
    color: var(--error);
}
.notify.error .notify-progress {
    background: var(--error);
}

.notify.warning {
    border-left-color: var(--warning);
}
.notify.warning .notify-icon {
    color: #8A6914; /* Etwas dunkler für besseren Kontrast auf Weiß */
}
.notify.warning .notify-progress {
    background: var(--warning);
}

.notify.info {
    border-left-color: var(--info);
}
.notify.info .notify-icon {
    color: var(--info);
}
.notify.info .notify-progress {
    background: var(--info);
}

/* =========================
   CLOSE BUTTON
   ========================= */
.notify .close-btn {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);

    width: 28px;
    height: 28px;

    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
    padding: 0;
}

.notify .close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notify .close-btn:active {
    background: var(--bg-active);
}

/* =========================
   PROGRESS BAR
   ========================= */
.notify .notify-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    animation: notifyProgress var(--duration, 4s) linear forwards;
}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes notifyIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notifyOut {
    to {
        opacity: 0;
        transform: translateX(20px);
        /* Wir animieren NICHT max-height oder padding, das verursacht die Bugs! */
    }
}

@keyframes notifyProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {
    .notify-wrapper {
        top: calc(48px + 8px);
        left: var(--spacing-md);
        right: var(--spacing-md);
        max-width: none;
    }

    .notify {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}