/**
 * Toast/Notification System — Attention Ladder
 *
 * "The best interface is invisible until needed."
 *
 * Levels:
 * - Level 0: Ambient — Tiny steady indicators, no motion
 * - Level 1: Informative — Subtle highlight, auto-dismiss
 * - Level 2: Actionable — One clear callout + next step
 * - Level 3: Critical — Persistent banner + explicit action
 */

/* ========== Container ========== */

.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: 380px;
}

/* ========== Toast Base ========== */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  pointer-events: auto;
  max-width: 100%;

  /* Entry animation */
  opacity: 0;
  transform: translateX(20px);
  animation: toast-enter var(--duration-normal) var(--ease-out) forwards;

  /* Premium depth */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.16);
}

@keyframes toast-enter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast--exiting {
  animation: toast-exit var(--duration-fast) var(--ease-out) forwards;
}

@keyframes toast-exit {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* ========== Toast Levels ========== */

/* Level 0: Ambient — barely visible status update */
.toast--ambient {
  background: var(--bg-surface);
  border-color: var(--border-dim);
}

.toast--ambient .toast__icon {
  color: var(--text-tertiary);
}

/* Level 1: Informative — trade closed, equity updated */
.toast--informative {
  background: var(--bg-elevated);
  border-color: var(--border);
}

.toast--informative .toast__icon {
  color: var(--color-info);
}

/* Level 2: Actionable — signal arrived, requires attention */
.toast--actionable {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  border-left-width: 3px;
}

.toast--actionable .toast__icon {
  color: var(--accent-primary);
}

/* Level 3: Critical — stop missing, connection lost */
.toast--critical {
  background: var(--bg-elevated);
  border-color: var(--color-danger);
  border-left-width: 3px;
}

.toast--critical .toast__icon {
  color: var(--color-danger);
}

/* Success variant */
.toast--success {
  border-color: var(--color-success);
  border-left-width: 3px;
}

.toast--success .toast__icon {
  color: var(--color-success);
}

/* Warning variant */
.toast--warning {
  border-color: var(--color-warning);
  border-left-width: 3px;
}

.toast--warning .toast__icon {
  color: var(--color-warning);
}

/* ========== Toast Parts ========== */

.toast__icon {
  font-size: var(--text-base);
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__message {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

.toast__countdown {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* ========== Toast Action Button ========== */

.toast__action {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius);
  color: var(--accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.toast__action:hover {
  background: var(--accent-dim);
}

.toast__action:active {
  transform: scale(0.97);
}

/* ========== Toast Close Button ========== */

.toast__close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.toast__close:hover {
  color: var(--text-primary);
}

/* ========== Progress Bar (for countdown) ========== */

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent-primary);
  border-radius: 0 0 0 var(--radius-lg);
  transition: width linear;
}

.toast--critical .toast__progress {
  background: var(--color-danger);
}

/* ========== Responsive ========== */

@media (max-width: 480px) {
  .toast-container {
    bottom: var(--space-4);
    right: var(--space-3);
    left: var(--space-3);
    max-width: none;
  }

  .toast {
    padding: var(--space-3);
  }
}

/* ========== Light Mode ========== */

[data-theme="light"] .toast {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ========== Reduced Motion ========== */

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .toast--exiting {
    animation: none;
  }
}