/* Toasts (public/js/toast.js): a stack at the bottom centre that replaces the
   browser's alert() boxes. Own colours with a dark twin here, so no theme
   file needs a rule (THEME_PLAN: hand-written colours carry their html.dark
   rule). Every motion is off under prefers-reduced-motion. */
.toast-stack { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 2000; display: flex; flex-direction: column-reverse; align-items: center; gap: .5rem;
    width: max-content; max-width: min(28rem, calc(100vw - 2rem)); pointer-events: none; }
/* Above the phone shell's bottom tabs. */
.toast-stack.above-tabs { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }

.app-toast { --toast-accent: #60a5fa; position: relative; overflow: hidden; pointer-events: auto; touch-action: pan-y;
    display: flex; align-items: flex-start; gap: .65rem; width: 100%; box-sizing: border-box;
    padding: .75rem .8rem .8rem .9rem; border-radius: .9rem; background: #0f172a; color: #f8fafc;
    font-size: .875rem; line-height: 1.4; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .6), 0 0 0 1px rgba(255, 255, 255, .06);
    opacity: 0; transform: translateY(1.25rem) scale(.94);
    transition: opacity .22s ease, transform .38s cubic-bezier(.2, 1.4, .4, 1), margin .25s ease, max-height .25s ease, padding .25s ease; }
.app-toast.show { opacity: 1; transform: none; }
.app-toast.leaving { opacity: 0; transform: translateY(.5rem) scale(.96); transition: opacity .18s ease, transform .18s ease; }
.app-toast.dragging { transition: none; }

.app-toast-icon { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    color: var(--toast-accent); background: color-mix(in srgb, var(--toast-accent) 18%, transparent); font-size: .95rem; }
.app-toast.show .app-toast-icon { animation: toast-pop .45s cubic-bezier(.2, 1.6, .4, 1) .08s both; }
.app-toast-body { flex: 1; min-width: 0; padding-top: .15rem; white-space: pre-line; overflow-wrap: anywhere; }
.app-toast-title { display: block; font-weight: 600; margin-bottom: .1rem; }
.app-toast-close { flex: none; border: 0; background: transparent; color: inherit; opacity: .55; padding: 0 .15rem; line-height: 1; font-size: 1.15rem; cursor: pointer; }
.app-toast-close:hover, .app-toast-close:focus-visible { opacity: 1; }

/* Time left: a thin bar along the bottom that pauses with the timer. */
.app-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: .8;
    transform-origin: left; animation: toast-countdown var(--toast-duration, 5s) linear forwards; }
.app-toast.paused .app-toast-bar { animation-play-state: paused; }

.app-toast.toast-success { --toast-accent: #34d399; }
.app-toast.toast-error   { --toast-accent: #f87171; }
.app-toast.toast-warning { --toast-accent: #fbbf24; }
.app-toast.toast-info    { --toast-accent: #60a5fa; }

@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-pop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

html.dark .app-toast { background: #f1f5f9; color: #0f172a; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(15, 23, 42, .08); }
html.dark .app-toast.toast-success { --toast-accent: #059669; }
html.dark .app-toast.toast-error   { --toast-accent: #dc2626; }
html.dark .app-toast.toast-warning { --toast-accent: #b45309; }
html.dark .app-toast.toast-info    { --toast-accent: #2563eb; }

@media (prefers-reduced-motion: reduce) {
    .app-toast, .app-toast.leaving { transition: opacity .15s linear; transform: none; }
    .app-toast.show .app-toast-icon { animation: none; }
    .app-toast-bar { display: none; }
}