/* Pop-up copies of page messages (see notice-toasts.js). Top-right on wide screens, bottom on phones. */
.op-toasts { position: fixed; top: 76px; right: 20px; z-index: 1090; display: flex; flex-direction: column; gap: .6rem; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.op-toast { --toast: #198754; display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .85rem .8rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--toast), transparent 55%); border-left: 5px solid var(--toast);
    background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 12px 32px rgb(0 0 0 / 22%); font-size: .9rem; line-height: 1.35; cursor: pointer; pointer-events: auto;
    animation: op-toast-in .22s ease-out; }
.op-toast.is-error { --toast: var(--bs-danger, #dc3545); }
.op-toast.is-warning { --toast: var(--bs-warning, #ffc107); }
.op-toast > i { color: var(--toast); font-size: 1.15rem; line-height: 1.2; }
.op-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.op-toast-close { border: 0; background: transparent; color: inherit; opacity: .6; font-size: 1.35rem; line-height: .9; padding: 0 .15rem; }
.op-toast-close:hover { opacity: 1; }
.op-toast.is-leaving { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
@keyframes op-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Briefly highlights the original message after clicking its toast. */
.op-alert-flash { animation: op-alert-flash 1.2s ease-out; }
@keyframes op-alert-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor, transparent 60%); } 100% { box-shadow: none; } }

@media (max-width: 575.98px) {
    .op-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
    @keyframes op-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
    .op-toast, .op-alert-flash { animation: none; }
    .op-toast.is-leaving { transition: none; }
}