/* Minimal ShadCN-like toast styles (light + dark aware) */
:root{
  --toast-width: 320px;
  --toast-radius: 10px;
  --toast-padding: 12px 14px;
  --toast-bg: #111827; /* dark */
  --toast-fg: #e6eef8;
  --toast-border: rgba(255,255,255,0.04);
  --toast-success: #16a34a;
  --toast-error: #ef4444;
  --toast-info: #2563eb;
  --toast-shadow: 0 10px 30px rgba(2,6,23,0.6);
}
html[data-theme='light']{
  --toast-bg: #fff;
  --toast-fg: #0f172a;
  --toast-border: rgba(2,6,23,0.06);
  --toast-shadow: 0 8px 24px rgba(2,6,23,0.08);
}

#toast-root{
  position: fixed;
  z-index: 99999;
  right: 1rem;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}
.toast {
  width: var(--toast-width);
  min-height: 48px;
  background: var(--toast-bg);
  color: var(--toast-fg);
  border: 1px solid var(--toast-border);
  box-shadow: var(--toast-shadow);
  border-radius: var(--toast-radius);
  padding: var(--toast-padding);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  pointer-events: auto;
  transform-origin: right top;
  overflow: hidden;
}
.toast .toast-icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
}
.toast .toast-body{
  flex: 1 1 auto;
}
.toast .toast-title{
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
}
.toast .toast-desc{
  font-size: 0.86rem;
  margin-top: 4px;
  opacity: 0.9;
}
.toast .toast-close{
  margin-left: 8px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.toast--success{ border-left: 4px solid var(--toast-success); }
.toast--error{ border-left: 4px solid var(--toast-error); }
.toast--info{ border-left: 4px solid var(--toast-info); }

/* enter/exit animations */
@keyframes toast-in{ from { transform: translateX(12px) scale(0.98); opacity: 0 } to { transform: translateX(0) scale(1); opacity: 1 } }
@keyframes toast-out{ from { transform: translateX(0) scale(1); opacity: 1 } to { transform: translateX(12px) scale(0.98); opacity: 0 } }
.toast-show{ animation: toast-in 240ms cubic-bezier(.2,.9,.2,1) both; }
.toast-hide{ animation: toast-out 160ms ease both; }

/* responsive smaller width on mobile */
@media (max-width: 420px){
  #toast-root{ left: 0; right: 0; top: 0.5rem; align-items: center; }
  .toast{ width: calc(100% - 2rem); max-width: 420px; }
}