/* --- Toasts: Dark theme --- */
:root {
  /* match your app’s dark tokens */
  --toast-bg: #14161a;              /* = var(--panel) feel */
  --toast-fg: #e7edf6;              /* = var(--text) */
  --toast-muted: #9aa3b2;           /* = var(--muted) */
  --toast-error: #ef4444;
  --toast-info:  #0ea5e9;
  --toast-success:#10b981;
  --toast-shadow: 0 18px 48px rgba(0,0,0,.35);
}

/* container */
.toasts{
  position: fixed; inset: auto 16px 16px auto; /* bottom-right */
  display: flex; flex-direction: column; gap: 10px; z-index: 2147483647;
  max-width: min(92vw, 380px);
  pointer-events: none;          /* so clicks pass through gaps */
}
@media (max-width: 640px){
  .toasts{ inset: auto 50% 14px auto; transform: translateX(50%); }
}

/* card */
.toast{
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  background: var(--toast-bg); color: var(--toast-fg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: var(--toast-shadow);
  overflow: hidden;
  pointer-events: auto;          /* clickable */
  --bar: var(--toast-info);
  animation: toast-in .18s ease-out both;
  backdrop-filter: blur(4px);    /* subtle glass in dark */
}

.toast[data-type="error"]  { --bar: var(--toast-error); }
.toast[data-type="success"]{ --bar: var(--toast-success); }
.toast[data-type="info"]   { --bar: var(--toast-info); }

.toast__icon{ width: 18px; height: 18px; display: grid; place-items: center }
.toast__body{ min-width: 0 }
.toast__title{ font: 600 14px/1.2 system-ui,Segoe UI,Roboto,Arial,sans-serif }
.toast__msg{
  font: 13px/1.35 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--toast-muted);
  margin-top: 2px; white-space: normal;
}

/* close */
.toast__close{
  background: transparent; border: 0; color: #b8c4d9;
  cursor: pointer; padding: 4px; border-radius: 8px;
}
.toast__close:hover{ color: #e7edf6; background: rgba(255,255,255,.06) }

/* progress bar */
.toast__bar{
  height: 3px;
  background: color-mix(in oklab, var(--bar) 55%, transparent);
  position: relative; grid-column: 1 / -1;
  border-radius: 999px; overflow: hidden; margin-top: 8px
}
.toast__bar > i{
  content: ""; display:block; height:100%; background: var(--bar); width: 100%;
  transform-origin: left;
  animation: toast-bar linear forwards;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--bar) 50%, transparent));
}

/* anim */
@keyframes toast-in { from { opacity:0; transform: translateY(6px) scale(.98) } to { opacity:1; transform: translateY(0) scale(1) } }
@keyframes toast-out { to   { opacity:0; transform: translateY(6px) scale(.98) } }
@keyframes toast-bar { to   { transform: scaleX(0) } }

@media (prefers-reduced-motion: reduce){
  .toast{ animation: none }
  .toast__bar > i{ animation: none }
}
:root[data-theme="light"] {
  --toast-bg:#e6e9ee; --toast-fg:#1a1f29; --toast-muted:#5f6978;
  --toast-shadow: 0 12px 28px rgba(2,6,23,.10);
}


.custom-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s;
}