/* ====== Toast System ==================================================== */
:root {
  --toast-z: 1000;
  --toast-max-width: 26rem;
  --toast-gap: 0.75rem;
  --toast-pad-y: 0.75rem;
  --toast-pad-x: 1rem;
  --toast-radius: 0.5rem;
  --toast-shadow: 0 4px 20px rgba(0,0,0,.12);
  --toast-font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  --toast-font-size: 0.9375rem;

  /* Edge offsets (distance from viewport edge; tweak to taste) */
  --toast-edge-x: 0.5rem; /* set 0 for perfectly flush */
  --toast-edge-y: 0.5rem;

  --toast-color-fg: #1e293b;
  --toast-color-bg: #ffffff;

  --toast-info-bg: #eef2ff;
  --toast-info-border: #6366f1;
  --toast-info-fg: #1e293b;

  --toast-success-bg: #ecfdf5;
  --toast-success-border: #10b981;
  --toast-success-fg: #065f46;

  --toast-warning-bg: #fffbeb;
  --toast-warning-border: #fbbf24;
  --toast-warning-fg: #b45309;

  --toast-error-bg: #fef2f2;
  --toast-error-border: #f87171;
  --toast-error-fg: #b91c1c;

  --toast-progress-height: 3px;
  --toast-progress-bg: rgba(0,0,0,.1);

  --toast-enter-duration: 240ms;
  --toast-exit-duration: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --toast-color-fg: #f1f5f9;
    --toast-color-bg: #1e293b;

    --toast-info-bg: rgba(99,102,241,.15);
    --toast-info-border: #a5b4fc;
    --toast-info-fg: #e0e7ff;

    --toast-success-bg: rgba(16,185,129,.15);
    --toast-success-border: #6ee7b7;
    --toast-success-fg: #d1fae5;

    --toast-warning-bg: rgba(251,191,36,.15);
    --toast-warning-border: #fcd34d;
    --toast-warning-fg: #fef3c7;

    --toast-error-bg: rgba(248,113,113,.15);
    --toast-error-border: #fca5a5;
    --toast-error-fg: #fee2e2;

    --toast-progress-bg: rgba(255,255,255,.25);
  }
}

/* Container placement */
#toast-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + var(--toast-edge-y));
  right: calc(env(safe-area-inset-right, 0) + var(--toast-edge-x));
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--toast-gap);
  z-index: var(--toast-z);
  pointer-events: none; /* allow clicks through except children */
}

/* Mobile: bottom sheet style, full width */
@media (max-width: 600px) {
  #toast-container {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0) + var(--toast-edge-y) + 4rem); /* leave room for footer FAB */
    right: var(--toast-edge-x);
    left: var(--toast-edge-x);
    align-items: center;
    padding-inline: 0;
  }
  #toast-container .toast {
    width: 100%;
    max-width: none;
  }
}

/* Base toast */
.toast {
  --_bg: var(--toast-info-bg);
  --_border: var(--toast-info-border);
  --_fg: var(--toast-info-fg);
  background: var(--_bg);
  color: var(--_fg);
  border-left: 4px solid var(--_border);
  border-radius: var(--toast-radius);
  padding: var(--toast-pad-y) var(--toast-pad-x);
  width: var(--toast-max-width);
  max-width: calc(100vw - (var(--toast-edge-x) * 2));
  box-shadow: var(--toast-shadow);
  font-family: var(--toast-font-family);
  font-size: var(--toast-font-size);
  line-height: 1.3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon content close"
    "progress progress progress";
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(120%) scale(.95);
  animation: toast-enter var(--toast-enter-duration) cubic-bezier(.2, .8, .4, 1) forwards;
}

.toast.is-leaving {
  animation: toast-exit var(--toast-exit-duration) ease forwards;
}

.toast-icon {
  grid-area: icon;
  font-size: 1.25rem;
  line-height: 1;
}

.toast-content {
  grid-area: content;
  min-width: 0;
}

.toast-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.toast-message {
  margin: 0;
  word-break: break-word;
  font-size: 0.95em;
}

.toast-close {
  grid-area: close;
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 0.5rem;
  opacity: .7;
  transition: opacity 150ms ease, transform 150ms ease;
}
.toast-close:hover,
.toast-close:focus-visible {
  opacity: 1;
  transform: scale(1.1);
  outline: none;
}

/* Progress */
.toast-progress {
  grid-area: progress;
  width: 100%;
  height: var(--toast-progress-height);
  background: var(--toast-progress-bg);
  border-radius: 0 0 var(--toast-radius) var(--toast-radius);
  overflow: hidden;
  position: relative;
}
.toast-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_border);
  transform-origin: left center;
  transform: scaleX(var(--toast-progress, 1));
  transition: transform 50ms linear;
}

/* Hover scale (no translateX so edge doesn’t shift) */
.toast:hover {
  transform: scale(1.02);
}

/* Type modifiers */
.toast-success { --_bg: var(--toast-success-bg); --_border: var(--toast-success-border); --_fg: var(--toast-success-fg); }
.toast-warning { --_bg: var(--toast-warning-bg); --_border: var(--toast-warning-border); --_fg: var(--toast-warning-fg); }
.toast-error   { --_bg: var(--toast-error-bg);   --_border: var(--toast-error-border);   --_fg: var(--toast-error-fg);   }
.toast-info    { --_bg: var(--toast-info-bg);    --_border: var(--toast-info-border);    --_fg: var(--toast-info-fg);    }

/* Entrance / exit keyframes */
@keyframes toast-enter {
  0%   { opacity: 0; transform: translateX(120%) scale(.95); }
  70%  { opacity: 1; transform: translateX(-2%)  scale(1.02); }
  100% { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes toast-exit {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(120%) scale(.9); }
}

/* When reduced motion requested, disable fancy transitions */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-leaving {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .toast:hover { transform: none; }
}