/* Shared toast/snackbar styling. Loaded by both index.html and admin.html.
   Relies on CSS custom properties defined in each page's own :root. */

#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: min(360px, calc(100vw - 40px));
}

.toast {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 10px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--text);
  box-shadow: var(--shadow-raised, 0 4px 16px rgba(0,0,0,0.28));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease-standard, ease), transform 0.2s var(--ease-standard, ease);
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-error { border-color: var(--danger); }
.toast-success { border-color: var(--accent-dim); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition-duration: 0.001ms; }
}