/* =============================================================================
   Global toast notifications (showMessage)
   The container is appended to <body> by global-notifications.js with the
   classes `luna notifications`, so it is the token root on any page,
   including wp-admin where body has no .luna.
   ============================================================================= */

.luna.notifications {
    --toast-width: 25rem;
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 1000000; /* above the modal host (99999) */
    width: min(var(--toast-width), calc(100vw - 2 * var(--space-lg)));
    pointer-events: none;
}

.luna .notification {
    --status: var(--status-info);
    --bar: 3px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space) calc(var(--space-sm) + var(--bar));
    margin-bottom: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    box-shadow: var(--shadow-card);
    pointer-events: auto;
    transform: translateX(100%);
    opacity: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.luna .notification.success { --status: var(--status-success); }
.luna .notification.error   { --status: var(--status-danger); }
.luna .notification.warning { --status: var(--status-warning); }

.luna .notification.show {
    transform: translateX(0);
    opacity: 1;
}

.luna .notification.hide {
    transform: translateX(100%);
    opacity: 0;
}

.luna .notification.timed::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--bar);
    background: var(--status);
    transform-origin: left;
    animation: notification-drain var(--life) linear forwards;
}

@keyframes notification-drain {
    to { transform: scaleX(0); }
}

/* Status glyph: one mask per type, filled with the status colour. */
.luna .notification-icon {
    flex-shrink: 0;
    width: var(--space-lg);
    height: calc(var(--font-size-sm) * 1.4);
    background: var(--status);
    mask: var(--glyph) center / var(--space) no-repeat;
    -webkit-mask: var(--glyph) center / var(--space) no-repeat;
}

.luna .notification.info .notification-icon    { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='17'/%3E%3Cline x1='12' y1='7' x2='12' y2='7.01'/%3E%3C/svg%3E"); }
.luna .notification.success .notification-icon { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='16.5 9 10.5 15 7.5 12'/%3E%3C/svg%3E"); }
.luna .notification.error .notification-icon   { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.luna .notification.warning .notification-icon { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cline x1='12' y1='10' x2='12' y2='14'/%3E%3Cline x1='12' y1='17' x2='12' y2='17.01'/%3E%3C/svg%3E"); }

.luna .notification-content {
    flex: 1;
    min-width: 0;
    white-space: pre-line;
}

.luna .notification-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-lg);
    height: var(--space-lg);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--body-text);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.luna .notification-close:hover {
    background: var(--border-soft);
    color: var(--heading);
}

@media (prefers-reduced-motion: reduce) {
    .luna .notification,
    .luna .notification.show,
    .luna .notification.hide {
        transform: none;
        transition: opacity var(--transition-fast);
    }

    .luna .notification.timed::after {
        display: none;
    }
}