/* Alert Banner Styles */
.alert-banner {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Reduced gap slightly */
    padding: 0.75rem 1rem; /* Reduced padding */
    margin-bottom: 1rem; /* Adjusted margin */
    border-radius: 12px; /* Slightly less rounded, but still soft */
    border: 1px solid transparent;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Softened shadow for less prominence */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: bannerSlideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    position: relative;
    overflow: hidden;
}

.alert-banner--hidden {
    display: none;
}

@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.alert-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; /* Reduced icon size */
    height: 2.25rem; /* Reduced icon size */
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1rem; /* Reduced SVG icon size */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.alert-banner__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem; /* Reduced gap */
    min-width: 0; /* Fix flex overflow issues */
}

.alert-banner__content strong {
    font-weight: 700;
    font-size: 0.95rem; /* Reduced font size */
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.alert-banner__content span {
    font-size: 0.85rem; /* Reduced font size */
    opacity: 0.9;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-banner time {
    font-size: 0.8rem; /* Reduced font size */
    font-weight: 600;
    opacity: 0.6;
    font-feature-settings: "tnum";
    align-self: flex-start;
    margin-top: 0.1rem; /* Adjusted margin */
    white-space: nowrap;
}

/* Severity Variations */

/* Danger: Urgent red */
.alert-banner--danger {
    background-color: #fff1f2; /* Rose 50 */
    border-color: #fca5a5; /* Rose 300 */
    color: #9f1239; /* Rose 800 */
}
.alert-banner--danger .alert-banner__icon {
    background-color: #ffe4e6; /* Rose 100 */
    color: #e11d48; /* Rose 600 */
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.08); /* Softened ring shadow */
}

/* Warning: Noticeable amber */
.alert-banner--warning {
    background-color: #fffbeb; /* Amber 50 */
    border-color: #fcd34d; /* Amber 300 */
    color: #92400e; /* Amber 800 */
}
.alert-banner--warning .alert-banner__icon {
    background-color: #fef3c7; /* Amber 100 */
    color: #d97706; /* Amber 600 */
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.08); /* Softened ring shadow */
}

/* Info: Calm blue-gray */
.alert-banner--info {
    background-color: #f8fafc; /* Slate 50 */
    border-color: #cbd5e1; /* Slate 300 */
    color: #334155; /* Slate 700 */
}
.alert-banner--info .alert-banner__icon {
    background-color: #e2e8f0; /* Slate 200 */
    color: #64748b; /* Slate 500 */
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.08); /* Softened ring shadow */
}