.bido-flash-stack {
  position: fixed;
  z-index: 1000;
  top: 14px;
  right: 14px;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  background: transparent;
  pointer-events: none;
}

.bido-flash {
  pointer-events: auto;
  padding: 10px 12px;
  border: 1px solid var(--bx-line-2);
  border-radius: var(--bx-r);
  background: white;
  box-shadow: var(--bx-shadow-soft);
  color: var(--bido-navy);
  font-size: var(--bx-text-md);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.bido-flash span {
  flex: 1;
  min-width: 0;
}

.bido-flash.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
}

.bido-flash-dismiss {
  appearance: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--bx-r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bido-flash-dismiss:hover {
  background: var(--bx-paper-2);
}

.bido-flash-alert {
  border-color: var(--bx-bad);
  border-inline-start-width: 3px;
  color: var(--bx-bad-ink);
}

.copy-button.copied {
  color: var(--bx-accent);
  border-color: rgba(var(--bx-accent-rgb),0.45);
}

/* === Responsive — flash toasts ===
   On narrow + medium viewports the toast stack pins to the bottom. This
   used to be 48rem (small only), but the trip-context strip on listing /
   plan pages also lives at the top-right between ~48rem–64rem and the
   two regions visually crowded; toasts move to the bottom on anything
   short of a real desktop. */
@media (max-width: 64rem) {
  .bido-flash-stack {
    top: auto;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }
  /* The pillar "Continue" CTA also pins to the bottom; when it is present in
     the DOM, lift the toasts above it so they never cover the hand-off.
     CSS reads the DOM directly — no backend-set marker class (Rule 5). */
  body:has(.bido-pillar-cta) .bido-flash-stack {
    bottom: calc(112px + env(safe-area-inset-bottom));
  }
  .bido-flash {
    transform-origin: bottom center;
  }
  .bido-flash.is-dismissing {
    transform: translateY(4px);
  }
}

/* Touch — the dismiss control grows to a comfortable tap target (Rule 7). */
@media (pointer: coarse) {
  .bido-flash-dismiss {
    width: 40px;
    height: 40px;
  }
}