/*
 * FB-01 Toast — app/components/ui/toast_component.rb
 *
 * Surface-solid, --radius-sm, --shadow-md, 16px (--space-4) padding, 20px
 * leading status icon, 3px left edge in the semantic base colour. Enter/
 * exit animation is `is-leaving` toggled by toast_controller.js; the
 * global prefers-reduced-motion rule in base.css collapses both to
 * effectively instant.
 */

.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  max-width: 360px;
  padding: var(--space-4);
  background: var(--color-surface-solid);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  border-left: 3px solid var(--color-ink-muted);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.ui-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.ui-toast--success {
  border-left-color: var(--color-success);
}

.ui-toast--error {
  border-left-color: var(--color-danger);
}

.ui-toast--info {
  border-left-color: var(--color-violet);
}

.ui-toast--loading {
  border-left-color: var(--color-accent);
}

.ui-toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: var(--icon-md);
  height: var(--icon-md);
}

.ui-toast__icon svg {
  display: block;
}

.ui-toast--success .ui-toast__icon { color: var(--color-success); }
.ui-toast--error .ui-toast__icon { color: var(--color-danger); }
.ui-toast--info .ui-toast__icon { color: var(--color-violet); }
.ui-toast--loading .ui-toast__icon { color: var(--color-accent); }

.ui-toast--loading .ui-toast__icon svg {
  animation: ui-spin var(--duration-spin) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast--loading .ui-toast__icon svg {
    animation: none;
  }
}

.ui-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-toast__message {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-toast__action {
  align-self: flex-start;
}

.ui-toast__close {
  flex-shrink: 0;
}

/*
 * Placement (spec FB-01): desktop bottom-right 24px inset; mobile
 * bottom-centre, above the tab bar + safe area, full width minus 32px.
 * One container per shell (#toasts), positioned responsively rather than
 * split into separate desktop/mobile containers.
 */
#toasts {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  right: var(--space-6);
  bottom: var(--space-6);
  align-items: flex-end;
}

#toasts .ui-toast {
  pointer-events: auto;
}

@media (max-width: 767px) {
  #toasts {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--tap-min) + env(safe-area-inset-bottom, 0px) + var(--space-4));
    align-items: stretch;
  }

  #toasts .ui-toast {
    max-width: none;
  }
}