.ui-alert {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ui-alert-border, var(--divider));
    border-radius: var(--radius-md);
    background: var(--ui-alert-bg, var(--surface-sunken));
    color: var(--ui-alert-fg, var(--text-secondary));
}

.ui-alert--info {
    --ui-alert-bg: var(--info-bg);
    --ui-alert-fg: var(--info-fg);
    --ui-alert-border: rgba(31, 162, 243, 0.2);
}

.ui-alert--success {
    --ui-alert-bg: var(--success-bg);
    --ui-alert-fg: var(--success-fg);
    --ui-alert-border: rgba(22, 163, 74, 0.2);
}

.ui-alert--warning {
    --ui-alert-bg: var(--warning-bg);
    --ui-alert-fg: var(--warning-fg);
    --ui-alert-border: rgba(245, 158, 11, 0.22);
}

.ui-alert--error {
    --ui-alert-bg: var(--error-bg);
    --ui-alert-fg: var(--error-fg);
    --ui-alert-border: rgba(239, 68, 68, 0.22);
}

.ui-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--ui-alert-fg);
}

.ui-alert-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ui-alert-copy strong {
    color: var(--ui-alert-fg);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.25;
}

.ui-alert-copy span {
    color: color-mix(in srgb, var(--ui-alert-fg) 82%, var(--text-primary));
    font-size: 0.76rem;
    line-height: 1.4;
}

.ui-alert-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ui-alert-fg);
    cursor: pointer;
    opacity: 0.62;
}

.ui-alert-close:hover,
.ui-alert-close:focus-visible {
    background: rgba(255, 255, 255, 0.45);
    outline: none;
    opacity: 1;
}