/* ============================================================
   Toast Notifications
   Modern, queueable, swipe-dismiss on mobile, dark-mode aware.
   ============================================================ */

.sh-toast-root {
    position: fixed;
    z-index: 9999;
    top: 16px; right: 16px;
    display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
@media (max-width: 560px) {
    .sh-toast-root {
        top: auto; right: 8px; left: 8px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
        width: auto;
    }
}

.sh-toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 12px 12px 14px;
    background: var(--notif-bg-elev, #fff);
    color: var(--notif-text, #0E1116);
    border: 1px solid var(--notif-border, rgba(15,25,40,.08));
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15,25,40,.18), 0 2px 6px rgba(15,25,40,.08);
    overflow: hidden;
    transform: translateX(110%);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
@media (max-width: 560px) {
    .sh-toast { transform: translateY(20px); }
}
.sh-toast-in  { transform: translateX(0) translateY(0); opacity: 1; }
.sh-toast-out { transform: translateX(110%); opacity: 0; }
@media (max-width: 560px) {
    .sh-toast-out { transform: translateY(120%); }
}
@media (prefers-reduced-motion: reduce) {
    .sh-toast { transition: opacity .12s ease; transform: none !important; }
}

.sh-toast-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,168,89,.10); color: var(--notif-accent, #00A859);
    font-size: 16px;
}
.sh-toast-body { min-width: 0; display: grid; gap: 4px; }
.sh-toast-title { font-weight: 700; font-size: 14px; }
.sh-toast-text  { font-size: 13px; color: var(--notif-muted, #5B6470); }
.sh-toast-action {
    margin-top: 4px;
    appearance: none; background: transparent; border: 0;
    color: var(--notif-accent, #00A859);
    font-weight: 600; font-size: 13px; cursor: pointer;
    padding: 4px 0; align-self: start;
}
.sh-toast-close {
    appearance: none; background: transparent; border: 0;
    color: var(--notif-muted, #5B6470); cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sh-toast-close:hover { background: rgba(15,25,40,.06); color: var(--notif-text); }
[data-theme="dark"] .sh-toast-close:hover { background: rgba(255,255,255,.08); }

.sh-toast-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.06); }
.sh-toast-progress > span { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: left center; animation-name: sh-toast-shrink; animation-timing-function: linear; animation-fill-mode: forwards; animation-play-state: paused; }
.sh-toast-progress-run { animation-play-state: running; }
@keyframes sh-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .sh-toast-progress > span { animation: none; } }

/* tone */
.sh-toast-success .sh-toast-icon { background: rgba(16,185,129,.12); color: #10B981; }
.sh-toast-success .sh-toast-progress > span { color: #10B981; background: #10B981; }

.sh-toast-info    .sh-toast-icon { background: rgba(37,99,235,.12);  color: #2563EB; }
.sh-toast-info    .sh-toast-progress > span { color: #2563EB; background: #2563EB; }

.sh-toast-warning .sh-toast-icon { background: rgba(245,158,11,.12); color: #F59E0B; }
.sh-toast-warning .sh-toast-progress > span { color: #F59E0B; background: #F59E0B; }

.sh-toast-error   .sh-toast-icon { background: rgba(220,38,38,.12);  color: #DC2626; }
.sh-toast-error   .sh-toast-progress > span { color: #DC2626; background: #DC2626; }
.sh-toast-error   { border-color: rgba(220,38,38,.30); }

.sh-toast-security .sh-toast-icon { background: rgba(37,99,235,.12); color: #2563EB; }
.sh-toast-security { border-color: rgba(37,99,235,.30); }

.sh-toast-fraud   .sh-toast-icon { background: rgba(220,38,38,.16); color: #DC2626; }
.sh-toast-fraud   { border-color: rgba(220,38,38,.45); }
.sh-toast-fraud .sh-toast-progress > span { color: #DC2626; background: #DC2626; }

.sh-toast-default .sh-toast-icon { background: rgba(0,168,89,.10); color: var(--notif-accent, #00A859); }
.sh-toast-default .sh-toast-progress > span { color: var(--notif-accent, #00A859); background: var(--notif-accent, #00A859); }