/* Site-wide notifications (static/js/drobo-toast.js). One shape, five moods.
   A raised dark card so it reads on any page; the mood is carried by the icon tile, a thin edge of colour and the
   countdown bar. Text stays near-white in every mood: colour is never the only signal (each mood has its own icon). */

/* Bottom right on every page. The stack is a manual popover (top layer, above open dialogs): the browser's popover
   defaults (centred box, border, background, padding) are reset here. */
.drobo-toasts { position: fixed; z-index: 4000; inset: auto 1.25rem 1.25rem auto; margin: 0; padding: 0; overflow: visible; color: inherit; background: transparent; border: 0;
  display: block; width: min(23rem, calc(100vw - 2rem)); height: 0; pointer-events: none; }
.drobo-toasts .drobo-toast { position: absolute; right: 0; bottom: 0; left: 0; transform-origin: bottom center; transform: translateY(110%) scale(.96); }
.drobo-toasts .drobo-toast.is-in { transform: translateY(calc(var(--depth, 0) * -.7rem)) scale(calc(1 - var(--depth, 0) * .05)); opacity: calc(1 - min(var(--depth, 0), 3) * .18); }
.drobo-toasts:hover .drobo-toast.is-in { opacity: 1; transform: translateY(calc(var(--depth, 0) * -115%)); }
.drobo-toasts .drobo-toast.is-out { opacity: 0; transform: translateY(35%) scale(.96); }
.drobo-toast { --tone: #60a5fa; --tone-bg: rgba(96, 165, 250, .14); position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: .85rem; padding: .8rem .85rem .8rem .8rem;
  color: #f4f5f8; background: #12151d; border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03), 0 0 40px color-mix(in srgb, var(--tone) 14%, transparent);
  opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .26s ease, transform .32s cubic-bezier(.2, .8, .2, 1); }
.drobo-toast.is-in { opacity: 1; transform: none; }
.drobo-toast.is-out { opacity: 0; transform: translateY(-8px) scale(.98); }
.drobo-toast.is-bump { animation: drobo-toast-bump .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes drobo-toast-bump { 40% { transform: scale(1.025); } }

.drobo-toast--success { --tone: #34d399; --tone-bg: rgba(52, 211, 153, .14); }
.drobo-toast--error   { --tone: #f87171; --tone-bg: rgba(248, 113, 113, .14); }
.drobo-toast--warning { --tone: #fbbf24; --tone-bg: rgba(251, 191, 36, .14); }
.drobo-toast--info    { --tone: #60a5fa; --tone-bg: rgba(96, 165, 250, .14); }
.drobo-toast--loading { --tone: #a5b4fc; --tone-bg: rgba(165, 180, 252, .14); }

.drobo-toast__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; font-size: 1.25rem; color: var(--tone); background: var(--tone-bg); border-radius: 10px; }
.drobo-toast--loading .drobo-toast__icon .ti { animation: drobo-toast-spin .9s linear infinite; }
@keyframes drobo-toast-spin { to { transform: rotate(360deg); } }
.drobo-toast__text { flex: 1; min-width: 0; margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.45; color: #f4f5f8; overflow-wrap: anywhere; }
.drobo-toast__close { display: grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; font-size: 1rem; color: #a9aebc; background: transparent; border: 0; border-radius: 8px; cursor: pointer; transition: color .2s, background .2s; }
.drobo-toast__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.drobo-toast__close:focus-visible { outline: 2px solid var(--tone); outline-offset: 1px; }
.drobo-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tone); transform-origin: left; opacity: .85; }
.drobo-toast--loading .drobo-toast__bar { display: none; }

@supports not (color: color-mix(in srgb, red, blue)) { .drobo-toast { border-color: rgba(255, 255, 255, .16); } }
@media (max-width: 600px) { .drobo-toasts { inset: auto 1rem 1rem auto; } .drobo-toast__text { font-size: .875rem; } }
@media (prefers-reduced-motion: reduce) { .drobo-toast { transition: opacity .15s; transform: none; } .drobo-toast.is-bump { animation: none; } .drobo-toast--loading .drobo-toast__icon .ti { animation-duration: 2s; } }

/* ── App frame (body.ui-app): themed, Sonner-style stack at the bottom right ─────────────────────────────────────
   The newest toast sits in front; older ones tuck behind it, smaller, and spread out while the pointer is on the
   stack. Light and dark follow the app tokens (css/drobo-ui.css). */

body.ui-app .drobo-toast {
  --tone: #16a34a; position: absolute; right: 0; bottom: 0; left: 0; gap: .7rem; padding: .8rem .8rem .8rem .9rem;
  color: var(--ui-fg); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 13px;
  box-shadow: 0 16px 36px -14px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
  transform-origin: bottom center; opacity: 0; transform: translateY(110%) scale(.96);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .9, .25, 1.05), box-shadow .3s;
}
html[data-theme="dark"] body.ui-app .drobo-toast { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02); }
body.ui-app .drobo-toast.is-in { opacity: calc(1 - min(var(--depth, 0), 3) * .18); transform: translateY(calc(var(--depth, 0) * -.7rem)) scale(calc(1 - var(--depth, 0) * .05)); }
body.ui-app .drobo-toasts:hover .drobo-toast.is-in { opacity: 1; transform: translateY(calc(var(--depth, 0) * -115%)); }
body.ui-app .drobo-toast.is-out { opacity: 0; transform: translateY(35%) scale(.96); }
body.ui-app .drobo-toast--success { --tone: #16a34a; } body.ui-app .drobo-toast--error { --tone: #dc2626; }
body.ui-app .drobo-toast--warning { --tone: #d97706; } body.ui-app .drobo-toast--info, body.ui-app .drobo-toast--loading { --tone: #2563eb; }
html[data-theme="dark"] body.ui-app .drobo-toast--success { --tone: #4ade80; } html[data-theme="dark"] body.ui-app .drobo-toast--error { --tone: #f87171; }
html[data-theme="dark"] body.ui-app .drobo-toast--warning { --tone: #fbbf24; } html[data-theme="dark"] body.ui-app .drobo-toast--info, html[data-theme="dark"] body.ui-app .drobo-toast--loading { --tone: #60a5fa; }
body.ui-app .drobo-toast__icon { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border-radius: 50%; animation: drobo-toast-pop .45s cubic-bezier(.2, .9, .3, 1.5) .08s both; }
@keyframes drobo-toast-pop { from { transform: scale(.3); opacity: 0; } }
body.ui-app .drobo-toast__text { font-size: .8125rem; font-weight: 550; line-height: 1.4; color: var(--ui-fg); }
body.ui-app .drobo-toast__close { width: 1.6rem; height: 1.6rem; font-size: .85rem; color: var(--ui-faint); opacity: 0; transition: opacity .15s, color .15s, background .15s; }
body.ui-app .drobo-toast:hover .drobo-toast__close, body.ui-app .drobo-toast__close:focus-visible { opacity: 1; }
body.ui-app .drobo-toast__close:hover { color: var(--ui-fg); background: var(--ui-hover); }
body.ui-app .drobo-toast__bar { display: none; }
@media (max-width: 600px) { body.ui-app .drobo-toasts { right: 1rem; bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { body.ui-app .drobo-toast, body.ui-app .drobo-toast.is-in { transform: none; } body.ui-app .drobo-toast__icon { animation: none; } }