/***** ALERTS & FLASH *****/

/*
 * Feedback is global during the 20px-to-16px root migration. A fixed 14px
 * component baseline keeps its computed size stable; geometry then scales in em.
 */
.alert,
.flash-message {
    border: 1px solid transparent;
    color: var(--color-text-primary);
    font-family: var(--font-family-ui);
    font-size: 14px;
    line-height: 1.4286;
    padding: 0.857em 1.143em;
}

.alert {
    border-radius: 1.143em;
    margin: 0.714em;
}

.alert.info,
.flash-message.info {
    background: var(--status-info-light);
    border-color: color-mix(in srgb, var(--status-info) 25%, var(--color-surface));
}

.alert.warning,
.flash-message.warning {
    background: var(--status-warning-light);
    border-color: color-mix(in srgb, var(--status-warning) 30%, var(--color-surface));
}

.alert.error,
.flash-message.error {
    background: var(--status-error-light);
    border-color: color-mix(in srgb, var(--status-error) 25%, var(--color-surface));
}

.alert.success,
.flash-message.success {
    background: var(--status-success-light);
    border-color: color-mix(in srgb, var(--status-success) 25%, var(--color-surface));
}

.flash-message.info {
    border-left: 0.286em solid var(--status-info);
}

.flash-message.warning {
    border-left: 0.286em solid var(--status-warning);
}

.flash-message.error {
    border-left: 0.286em solid var(--status-error);
}

.flash-message.success {
    border-left: 0.286em solid var(--status-success);
}

#flash-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    inset: var(--space-md) var(--space-md) auto;
    pointer-events: none;
    position: fixed;
    z-index: 1300;
}

#flash-messages:empty {
    display: none;
}

.flash-message {
    align-items: center;
    border-radius: 1.143em;
    box-shadow: 0 0.857em 2.286em rgba(50, 45, 102, 0.08);
    display: flex;
    gap: 0.714em;
    justify-content: space-between;
    margin-inline: auto;
    max-width: 54.857em;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    width: 100%;
}

@media (max-width: 576px) {
    #flash-messages {
        inset: var(--space-sm) var(--space-sm) auto;
    }
}

.flash-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.flash-controls {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.429em;
}

.timer,
.close-btn {
    border-radius: 0.429em;
    cursor: pointer;
    flex: 0 0 auto;
    height: 2em;
    padding: 0;
    text-align: center;
    transition: opacity 0.2s ease;
    width: 2em;
}

.timer {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.857em;
    font-weight: 700;
    line-height: 2em;
}

.close-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    font-size: 1.286em;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
}

.timer:hover,
.close-btn:hover {
    opacity: 0.6;
}

.timer:focus-visible,
.close-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fade-out {
    opacity: 0;
}

/* Contextual guidance is intentionally distinct from transient feedback. */
.context-panel {
    align-items: flex-start;
    background: var(--color-primary-100);
    border: 1px solid color-mix(in srgb, var(--color-primary-300) 60%, var(--color-surface));
    border-radius: var(--radius-menu);
    color: var(--color-text-secondary);
    display: flex;
    font-family: var(--font-family-ui);
    font-size: var(--type-body-small-size);
    gap: 0.75rem;
    line-height: var(--type-body-small-line-height);
    padding: var(--space-md);
}

.context-panel > .icon {
    color: var(--color-primary-600);
    flex: 0 0 auto;
    height: 1rem;
    margin-top: 0.125rem;
    width: 1rem;
}

.context-panel strong {
    color: var(--color-text-primary);
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.context-panel p {
    margin-bottom: 0;
}

.context-panel--warning {
    background: var(--status-warning-light);
    border-color: color-mix(in srgb, var(--status-warning) 35%, var(--color-surface));
}

.context-panel--warning > .icon {
    color: color-mix(in srgb, var(--status-warning) 72%, var(--color-text-primary));
}

.context-panel--compact {
    padding: var(--space-sm) var(--space-md);
}