/* static/_shared/flash.css
 * Reusable top-of-viewport flash toast; renders Flask's flash() messages
 * (see templates/workspace/base.html for the markup + auto-dismiss script).
 *
 * Standard for ANY future flash() call in the app: fixed at the top,
 * horizontally centered, auto-dismissing, no close button. Theme-token
 * driven only (design-tokens.css + workspace.css custom properties) so it
 * renders correctly in light and dark with zero per-theme rules here.
 */

#flash-mount {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10010; /* above .dialog-backdrop (9999) and #toast-mount (10000) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  pointer-events: none; /* clicks pass through the empty strip around a toast */
}

.flash-toast {
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--parch-border);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-pop);
  border-left: 3px solid var(--slate);
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1.5;
  animation: flash-toast-in var(--motion-slow, 0.3s) ease-out;
  transition: opacity var(--motion-slow, 0.3s) ease-in, transform var(--motion-slow, 0.3s) ease-in;
}

/* Category accents. Success falls back to --primary-700 when --added isn't
   defined (workspace.css-only token) so this file keeps working if it's ever
   linked from a surface that doesn't load workspace.css. */
.flash-toast--success { border-left-color: var(--added, var(--primary-700)); }
.flash-toast--error   { border-left-color: var(--rust); }
.flash-toast--warning { border-left-color: var(--gold); }
.flash-toast--info    { border-left-color: var(--slate); }

.flash-toast-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill, 999px);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-primary, #fff);
  background: var(--slate);
}
.flash-toast-icon::before { content: "i"; }

.flash-toast--success .flash-toast-icon { background: var(--added, var(--primary-700)); }
.flash-toast--success .flash-toast-icon::before { content: "\2713"; } /* check mark */
.flash-toast--error .flash-toast-icon,
.flash-toast--warning .flash-toast-icon { color: var(--on-primary, #fff); }
.flash-toast--error   .flash-toast-icon { background: var(--rust); }
.flash-toast--warning .flash-toast-icon { background: var(--gold); }
.flash-toast--error   .flash-toast-icon::before,
.flash-toast--warning .flash-toast-icon::before { content: "!"; }

.flash-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

@keyframes flash-toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Exit state: a class the auto-dismiss script toggles on. Relies on the
   `transition` declared on .flash-toast above; the script listens for
   `transitionend` to remove the node once this finishes. */
.flash-toast--out {
  opacity: 0;
  transform: translateY(-12px);
}

@media (max-width: 480px) {
  .flash-toast {
    max-width: calc(100vw - 24px);
    padding: 11px 14px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash-toast {
    animation: none; /* skip the slide-in; appear at full opacity instantly */
    transition: opacity 0.15s linear; /* exit still fades, just no slide */
  }
  .flash-toast--out {
    transform: none;
  }
}