.app-alert {
--app-alert-accent: var(--app-info);
--app-alert-bg: var(--app-info-soft);
--app-alert-border: color-mix(in srgb, var(--app-info) 26%, var(--app-line));
--app-alert-title: var(--app-heading);
--app-alert-copy: var(--app-text-soft);
width: 100%;
margin: 0 0 12px;
padding: 14px;
border: 1px solid var(--app-alert-border);
border-radius: 10px;
background: var(--app-alert-bg);
color: var(--app-alert-copy);
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 12px;
line-height: 1.5;
}
.app-alert[hidden] { display: none !important; }
.app-alert--info {
--app-alert-accent: var(--app-info);
--app-alert-bg: var(--app-info-soft);
--app-alert-border: color-mix(in srgb, var(--app-info) 26%, var(--app-line));
}
.app-alert--danger {
--app-alert-accent: var(--app-danger);
--app-alert-bg: var(--app-danger-soft);
--app-alert-border: color-mix(in srgb, var(--app-danger) 30%, var(--app-line));
--app-alert-title: var(--app-danger);
--app-alert-copy: var(--app-text);
}
.app-alert--warning {
--app-alert-accent: var(--app-warning);
--app-alert-bg: var(--app-warning-soft);
--app-alert-border: color-mix(in srgb, var(--app-warning) 32%, var(--app-line));
--app-alert-title: var(--app-warning);
--app-alert-copy: var(--app-text);
}
.app-alert--success {
--app-alert-accent: var(--app-success);
--app-alert-bg: var(--app-success-soft);
--app-alert-border: color-mix(in srgb, var(--app-success) 30%, var(--app-line));
--app-alert-title: var(--app-success);
--app-alert-copy: var(--app-text);
}
.app-alert > .app-alert__icon,
.app-alert > i:first-child {
width: 22px;
min-width: 22px;
height: 22px;
margin: 1px 0 0;
border: 1px solid currentColor;
border-radius: 50%;
color: var(--app-alert-accent);
display: grid;
place-items: center;
line-height: 1;
}
.app-alert__content,
.app-alert > div,
.app-alert > span:not(.app-alert__icon) { min-width: 0; flex: 1; }
.app-alert__title,
.app-alert strong {
color: var(--app-alert-title);
font-weight: 750;
}
.app-alert__title { display: block; margin: 0 0 2px; font-size: 12.5px; line-height: 1.35; }
.app-alert__text,
.app-alert p { margin: 2px 0 0; color: var(--app-alert-copy); line-height: 1.5; }
.app-alert small { display: block; margin-top: 3px; color: var(--app-alert-copy); font-size: 12px; line-height: 1.45; }
.app-alert a { color: var(--app-alert-accent); font-weight: 700; }
.app-alert--compact { padding: 11px 12px; gap: 9px; font-size: 11.5px; }
.app-alert--compact > .app-alert__icon,
.app-alert--compact > i:first-child { width: 19px; min-width: 19px; height: 19px; }
.app-alert--summary { padding: 13px 14px; }
.modal-foot-x:has(> .app-action-feedback) { flex-wrap: wrap; }
.modal-foot-x > .app-action-feedback {
order: -1;
flex: 0 0 100%;
max-height: min(190px, 28dvh);
margin: 0;
overflow: auto;
overscroll-behavior: contain;
}
.app-feedback-host {
position: fixed;
z-index: 10020;
inset: auto 18px 18px auto;
width: min(360px, calc(100vw - 28px));
display: grid;
gap: 9px;
pointer-events: none;
}
.app-feedback-toast {
--app-toast-accent: var(--app-info);
pointer-events: auto;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 11px 12px;
border: 1px solid var(--app-line);
border-radius: 10px;
background: var(--app-surface-raised);
color: var(--app-text);
box-shadow: var(--app-shadow-toast);
font-size: 12.5px;
line-height: 1.45;
animation: app-feedback-in .2s ease both;
}
.app-feedback-toast > i { color: var(--app-toast-accent); }
.app-feedback-toast.is-success { --app-toast-accent: var(--app-success); }
.app-feedback-toast.is-warning { --app-toast-accent: var(--app-warning); }
.app-feedback-toast.is-danger { --app-toast-accent: var(--app-danger); }
.app-feedback-toast button {
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--app-muted);
box-shadow: none;
display: grid;
place-items: center;
cursor: pointer;
}
.app-feedback-toast.is-leaving { animation: app-feedback-out .18s ease both; }
@keyframes app-feedback-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes app-feedback-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 420px) {
.app-alert { padding: 12px; gap: 10px; }
.app-alert--compact { padding: 10px 11px; gap: 8px; }
.app-feedback-host { inset: auto 14px 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
.app-feedback-toast { animation-duration: .001ms; }
}