/* Shared floating next-step alert (ticket + invite): dark card, red border, pulsing red dot, message, small white pill. Shows ONLY while a step is pending.
   Motion: slide-up once per appearance, one nudge ever, text crossfades on change, collapse = opacity only (no size change). */
.oph-bar { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto; box-sizing: border-box;
  transform: translate3d(0, calc(100% + 32px), 0); opacity: 0; pointer-events: none; will-change: transform, opacity;
  transition: transform .36s cubic-bezier(.2, .85, .25, 1), opacity .24s ease; }
.oph-bar.on { transform: translate3d(0, 0, 0); opacity: 1; pointer-events: auto; }
.oph-bar.on.kb { transform: translate3d(0, calc(100% + 32px), 0); opacity: 0; pointer-events: none; }  /* hidden while typing (iOS keyboard) */
.oph-bar.nudge { animation: ophbar-nudge .55s ease-in-out 1; }
@keyframes ophbar-nudge { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
.oph-bar p { margin: 0; padding: 0; max-width: none; text-align: left; text-transform: none; letter-spacing: 0; }

/* alert card: the surface lives on ::before so collapse can fade it without touching layout */
.oph-bar.alert { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 8px 8px 15px; border-radius: 14px; isolation: isolate; }
.oph-bar.alert::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(17,17,17,.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(242,71,71,.5); border-left: 3px solid var(--red, #f24747);
  box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); transition: opacity .22s ease, border-color .35s ease; }
.oph-bar.alert .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red, #f24747); animation: ophbar-dot 2s ease-out infinite; transition: background .35s ease; }
@keyframes ophbar-dot { 0% { box-shadow: 0 0 0 0 rgba(242,71,71,.5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(242,71,71,0); } }
.oph-bar.alert .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; transition: opacity .16s ease; }
.oph-bar.alert .prog { color: rgba(255,255,255,.5); font: 450 10px/1 var(--text); letter-spacing: .04em; }
.oph-bar.alert .prog[hidden] { display: none; }
.oph-bar.alert .msg { color: #fff; font: 500 13px/1.2 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s ease; }
.oph-bar.alert .go { all: unset; box-sizing: border-box; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px;
  background: #fff; color: #000; font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 3px 3px 0 var(--red, #f24747);
  -webkit-tap-highlight-color: transparent; transition: opacity .16s ease; }
.oph-bar.alert .go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red, #f24747); }
.oph-bar.alert .go[hidden] { display: none; }
.oph-bar.swap .tx, .oph-bar.swap .go { opacity: 0; }  /* text crossfade on step change (node is reused) */

/* v2 collapse while actively scrolling: card surface + text fade out, dot + pill stay put (no size change) */
.oph-bar.alert.mini::before { opacity: 0; }
.oph-bar.alert.mini .tx { opacity: 0; pointer-events: none; }

/* v2 finish moment (green); optional extra on the right (Wallet placeholder) */
.oph-bar.alert.ok::before { border-color: rgba(52,199,89,.5); border-left-color: #34c759; }
.oph-bar.alert.ok .dot { background: #34c759; animation: none; }
.oph-bar.alert.ok .msg { color: #b9f5c9; }
.oph-bar.alert.ok { cursor: pointer; }
.oph-bar.alert .xa { flex: none; display: flex; }

.oph-bar .go:focus-visible { outline: 2px solid var(--red, #f24747); outline-offset: 3px; }

/* page never hides content under the alert: padding = measured alert height + gap + safe area */
html.has-bar body { padding-bottom: calc(var(--oph-bar-h, 56px) + 28px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .oph-bar { transition: opacity .2s ease; transform: none; } .oph-bar.on.kb { transform: none; }
  .oph-bar.nudge { animation: none; } .oph-bar.alert .dot { animation: none; }
}