/* toast.js: short notes on an inverse plate (ink ground, page-coloured
 * words, no edge, no glass), one line when it fits (the radius makes it a
 * capsule), a readable measure when not. toast.js sets --toast-bottom (above
 * the chat's dock and the keyboard) and --toast-x (the chat column's
 * centre); the safe area is the floor. .toast alone is the shape update.css's
 * pill shares; .toast-host > .toast is a note and its motion:
 * - it rises in on --sv-dur-toast with the enter curve;
 * - several stack in one cell, the newest in front (--i 0) and each older one
 *   (.behind) 10px higher and 5% smaller, cut to the front one's height
 *   (--front-h), its words hidden; pointing at or focusing the stack, or tapping it
 *   (.open), fans them out above each other (--lift);
 * - a drag (--drag) follows the finger; it leaves the way it was swiped
 *   (--out), or drops and fades. */

.toast-host {
  position: fixed;
  left: var(--toast-x, 50%);
  bottom: max(var(--toast-bottom, 10rem), calc(env(safe-area-inset-bottom, 0px) + var(--sv-space-4)));
  transform: translateX(-50%);
  z-index: var(--sv-z-toast);
  display: grid;
  justify-items: center;
  align-items: end;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2 * var(--sv-space-3) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: 100%;
  min-height: 32px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 2.5);
  /* A floating note, like a menu: the one shadow the workspace allows. */
  box-shadow: var(--sv-glass-shadow);
  font-size: var(--ui-meta);
  line-height: 1.35;
  pointer-events: auto;
}
.toast:has(button) { padding-right: var(--sv-space-1); }

/* ---- a note: the inverse plate ---- */
.toast-host > .toast {
  grid-area: 1 / 1;
  --y: calc(var(--i, 0) * -10px);
  color: var(--sv-surface);
  background: var(--sv-ink);
  border-color: transparent;
  translate: var(--drag, 0px) var(--y);
  scale: calc(1 - var(--i, 0) * 0.05);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: translate var(--sv-dur-toast) var(--sv-ease-out), scale var(--sv-dur-toast) var(--sv-ease-out), opacity var(--sv-dur-toast) var(--sv-ease-out);
  animation: sv-toast-in var(--sv-dur-toast) var(--sv-ease-out) backwards;
}
.toast-host > .toast > * { transition: opacity var(--sv-dur-enter) var(--sv-ease-out); }
/* Behind the front one: its edge peeks, its words wait. */
.toast-host > .toast.behind { height: var(--front-h); overflow: hidden; }
.toast-host > .toast.behind > * { opacity: 0; }
/* Fanned out: each note at its own height, above the newer ones. */
.toast-host:is(:hover, :focus-within, .open) > .toast { --y: calc(-1 * var(--lift, 0px)); scale: 1; height: auto; }
.toast-host:is(:hover, :focus-within, .open) > .toast > * { opacity: 1; }
/* The gaps between fanned notes keep the pointer on the stack. */
.toast-host.stacked:is(:hover, .open)::before {
  content: "";
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  height: var(--fan, 0px);
  pointer-events: auto;
}
.toast-host > .toast.dragging { transition: none; }
.toast-host > .toast.leaving {
  pointer-events: none;
  animation: sv-toast-out var(--sv-dur-enter) var(--sv-ease-exit) forwards;
}
@keyframes sv-toast-in { from { opacity: 0; translate: 0 100%; scale: 0.96; } }
@keyframes sv-toast-out { to { opacity: 0; translate: var(--out, 0 12px); } }

/* An error: a small danger mark before the words; the words stay full strength. */
.toast[data-tone="error"]::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sv-danger);
}
/* The words carry the plate's height, so wrapped lines keep their margins. */
.toast-text { min-width: 0; padding-block: calc(var(--sv-space-1) * 1.5); overflow-wrap: anywhere; color: color-mix(in srgb, currentColor 82%, transparent); }
.toast[data-tone="error"] .toast-text { color: inherit; }
.toast-action, .toast-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  background: none;
  color: inherit;
  border: 0;
  border-radius: calc(var(--sv-radius) * 2);
  transition: background var(--sv-dur-instant) var(--sv-ease-out), scale var(--sv-dur-instant) var(--sv-ease-out);
}
.toast-action:active, .toast-close:active { scale: 0.97; }
.toast-action { padding: 0 var(--sv-space-2); font-weight: 500; }
.toast-action:hover, .toast-close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.toast-close { min-width: 28px; padding: 0; color: color-mix(in srgb, currentColor 64%, transparent); }
.toast-close:hover { color: inherit; }
.toast-close .icon { width: 12px; height: 12px; }
/* Touch: 44px targets; the plate grows only to hold them. */
@media (max-width: 760px), (pointer: coarse) {
  .toast:has(button) { min-height: 44px; }
  .toast-action, .toast-close { min-width: 44px; min-height: 44px; }
}