/* ============================================
   Snackbar — backend error surface

   Styles for <Snackbar /> (components/snackbar/index.jsx). Lives at the bottom
   of the chat pane, above the composer. The host owns placement (an
   absolute container inside .chat-main); this rule set styles the card
   itself, its severity variants, the dim backdrop overlay, and the entry
   animation. The card is neutral; the gradient overlay uses the
   neutral `--xm-snackbar-scrim*` tokens (no severity hue).

   Note: the .failmode-* picker classes used by chat-shell.jsx are NOT
   part of this component — they live in ../styles.css as prototype
   chrome.
   ============================================ */

.snackbar-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  pointer-events: none;
  padding: 0 var(--s-6) 116px; /* sits clearly above the chat-shell__composer */
  z-index: 40;
}
.snackbar-stack > * { pointer-events: auto; }

/* Dim backdrop behind the snackbar so the error reads as a focused
   modal-ish surface, not a passive notification. Sits below the snackbar
   in the same stack and fades in with the same easing.

   We do NOT use backdrop-filter here — a full-pane blur is expensive on
   every paint, and the chat behind contains a virtualized scroll list, so
   it would regress scrolling. Instead we use a denser overlay color
   (theme-aware) plus a faint vertical gradient so the snackbar still feels
   "lifted" without any GPU filter work. */
.snackbar-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      var(--xm-snackbar-scrim-strong) 0%,
      var(--xm-snackbar-scrim) 60%,
      var(--xm-snackbar-scrim-soft) 100%
    );
  animation: snackbar-overlay-in var(--md-sys-motion-duration-medium1) cubic-bezier(0.32, 0.72, 0.24, 1) both;
  pointer-events: auto; /* clicks land on the overlay, not the chat behind */
}
@keyframes snackbar-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.snackbar {
  /* Component-local vars — single neutral surface for all severities.
     Severity is communicated by the icon and body copy, not by hue. */
  /* The card rides the surface family (--snk-bg = surface-container-high),
     so ink must come from the on-surface family, not inverse-on-surface —
     pairing inverse ink (a dark ink) on this dark surface reads dark-on-dark
     and fails AA (POLICIES 7a). --snk-accent stays the brightest on-surface
     tone so the reversed primary button keeps high contrast. */
  --snk-bg: var(--md-sys-color-surface-container-high);
  --snk-border: var(--md-sys-color-outline-variant);
  --snk-accent: var(--md-sys-color-on-surface);
  --snk-ink: var(--md-sys-color-on-surface);
  --snk-ink-soft: var(--md-sys-color-on-surface-variant);

  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--s-3-5);
  width: 100%;
  max-width: 620px;
  padding: var(--s-3-5) var(--s-3-5) var(--s-3-5) var(--s-4);
  background: var(--snk-bg);
  border: 1px solid var(--snk-border);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--xm-elevation-snackbar);
  color: var(--snk-ink);
  font-family: var(--md-sys-typescale-body-large-font);
  animation: snackbar-in 280ms cubic-bezier(0.32, 0.72, 0.24, 1) both;
}
.snackbar--static { animation: none; }

@keyframes snackbar-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Severity variants — class hooks kept for JSX/markup compatibility, but
   they no longer swap colors. The icon and body copy carry the severity. */

.snackbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  /* Soft on-card highlight chip: stronger contrast in dark, softer in light. */
  background: color-mix(in oklch, var(--snk-accent) 18%, transparent);
  color: var(--snk-accent);
  flex-shrink: 0;
}

.snackbar__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.snackbar__head {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--snk-ink);
}
.snackbar__code {
  font-family: var(--xm-typescale-mono-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0;
  background: transparent;
  color: var(--snk-accent);
  flex-shrink: 0;
}
.snackbar__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snackbar__msg {
  font-size: 13px;
  color: var(--snk-ink-soft);
  line-height: 1.45;
  text-wrap: pretty;
}
.snackbar__meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1-5);
  margin-top: var(--s-1);
  font-size: 11px;
}
.snackbar__meta-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--snk-ink-soft);
  font-weight: 500;
  opacity: 0.8;
}
.snackbar__meta-id {
  font-family: var(--xm-typescale-mono-font);
  color: var(--snk-ink);
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11px;
}

.snackbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  flex-shrink: 0;
}
.snackbar__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  white-space: nowrap;
  color: var(--snk-ink);
}
.snackbar__btn--primary {
  background: var(--snk-accent);
  color: var(--snk-bg);  /* high-contrast inverse against the accent */
  border-color: var(--snk-accent);
}
.snackbar__btn--primary:hover {
  background: color-mix(in oklab, var(--snk-bg) var(--md-sys-state-hover-state-layer-opacity), var(--snk-accent));
}
.snackbar__btn--primary:active { transform: translateY(1px); }
.snackbar__btn--primary svg { opacity: 0.9; }

.snackbar__btn--ghost {
  color: var(--snk-ink-soft);
  border-color: transparent;
}
.snackbar__btn--ghost:hover {
  color: var(--snk-ink);
  background: color-mix(in oklch, var(--snk-accent) 14%, transparent);
}

.snackbar__close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--snk-ink-soft);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  flex-shrink: 0;
}
.snackbar__close:hover {
  background: color-mix(in oklch, var(--snk-accent) 14%, transparent);
  color: var(--snk-ink);
}

/* When sitting in the bare canvas (state cards on the design surface), the
   card needs a touch more contrast against the warm canvas background. */
.snackbar-card-frame {
  background: var(--md-sys-color-surface);
  padding: 30px var(--s-7);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.snackbar-card-frame .frame-label {
  position: absolute;
  top: var(--s-4);
  left: var(--s-6);
  margin: 0;
}
.snackbar-card-frame .snackbar {
  max-width: 580px;
}

/* Compact variant: when the chat shell is narrow, drop the right-side actions
   below the body so nothing gets cut off. The 640px literal mirrors
   --xm-breakpoint-md (styles/_layout.css) — @media can't read the token
   (docs/adr/0001), so the literal is the source-of-truth's echo. */
@media (max-width: 640px) {
  .snackbar {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: var(--s-2);
  }
  .snackbar__actions {
    grid-column: 1 / -2;
    justify-content: flex-end;
  }
}