/* ================================================================
   ONYX NAVIGATOR — REI VAULT PRO
   Photo avatar · gold ring · waveform · live caption
   ================================================================ */

/* ── MAIN WRAPPER ───────────────────────────────────────────── */
.ox-agent {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.32s ease;
}

.ox-agent > * { pointer-events: all; }

/* ── SPEECH BUBBLE CARD ─────────────────────────────────────── */
.ox-bubble {
  width: 284px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1), transform 0.38s cubic-bezier(0.16,1,0.3,1);
  transform: translateY(14px) scale(0.96);
  position: relative;
  transform-origin: bottom right;
  touch-action: manipulation;
}

.ox-bubble.on {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

/* Card tail — points down toward avatar */
.ox-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  right: 40px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(224,184,24,0.38);
}
.ox-bubble::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 41px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0c0920;
  z-index: 1;
}

.ox-card-inner {
  background: linear-gradient(150deg, #0a0718 0%, #0d0b22 100%);
  border: 1px solid rgba(224,184,24,0.32);
  border-radius: 16px;
  padding: 13px 14px 12px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.72),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Flex layout so msg area scrolls and controls stay pinned */
  display: flex;
  flex-direction: column;
  max-height: 420px;
}

/* Gold shimmer line at top */
.ox-card-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,184,24,0.85), transparent);
}

/* Animated shimmer sweep on new step arrival */
.ox-card-inner::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: auto;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(224,184,24,0.04), transparent);
  pointer-events: none;
}
.ox-card-inner.ox-shimmer::after {
  animation: oxCardShimmer 0.7s ease-out forwards;
}
@keyframes oxCardShimmer {
  from { left: -60%; }
  to   { left: 110%; }
}

/* ── CARD HEADER ────────────────────────────────────────────── */
.ox-card-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.ox-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ox-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.9);
  animation: oxDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes oxDotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.35; transform:scale(0.6); }
}

.ox-agent-name {
  font-size: 9px;
  font-weight: 800;
  color: #e0b818;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
}

/* Step counter badge next to name */
.ox-step-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(224,184,24,0.12);
  border: 1px solid rgba(224,184,24,0.28);
  border-radius: 100px;
  padding: 1px 7px;
  font-size: 8px;
  font-weight: 800;
  color: rgba(224,184,24,0.7);
  letter-spacing: 0.08em;
  font-family: 'DM Sans', sans-serif;
  margin-left: 4px;
  transition: opacity 0.2s ease;
}

.ox-min-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.18s ease;
  /* Larger tap target on mobile */
  min-width: 28px;
  min-height: 28px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ox-min-btn:hover,
.ox-min-btn:active {
  background: rgba(224,184,24,0.15);
  border-color: rgba(224,184,24,0.45);
  color: #e0b818;
  transform: scale(1.1);
}

/* ── CAPTION LABEL ──────────────────────────────────────────── */
.ox-caption-label {
  flex-shrink: 0;
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(224,184,24,0.5);
  margin-bottom: 4px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Speaking indicator dot next to "LIVE CAPTION" */
.ox-caption-label::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(224,184,24,0.4);
  flex-shrink: 0;
}
.ox-is-speaking .ox-caption-label::before {
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34,197,94,0.8);
  animation: oxDotPulse 0.9s ease-in-out infinite;
}

/* ── LIVE CAPTION TEXT ──────────────────────────────────────── */
.ox-msg {
  font-size: 12.5px;
  line-height: 1.65;
  color: #f0ece0;
  margin: 0 0 10px 0;
  min-height: 40px;
  /* flex child: grows to fill available space, scrolls when content overflows */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(224,184,24,0.3) transparent;
  font-family: 'DM Sans', sans-serif;
  cursor: default;
  user-select: none;
  /* touch-action: auto so child buttons receive tap events correctly */
  touch-action: auto;
}
.ox-msg::-webkit-scrollbar { width: 3px; }
.ox-msg::-webkit-scrollbar-thumb { background: rgba(224,184,24,0.3); border-radius: 2px; }

/* "Click to skip" hint fades in after 2s */
.ox-skip-hint {
  font-size: 8.5px;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  animation: oxFadeIn 1s ease 2.5s both;
  pointer-events: none;
}
@keyframes oxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── WAVEFORM IN CARD ───────────────────────────────────────── */
.ox-waveform {
  display: flex;
  flex-shrink: 0;
  gap: 2.5px;
  align-items: center;
  height: 20px;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ox-waveform.active { opacity: 1; }

.ox-waveform span {
  width: 2.5px;
  background: linear-gradient(to top, #c89600, #f6d94e);
  border-radius: 2px;
  height: 3px;
  transform-origin: bottom;
}
.ox-waveform.active span:nth-child(1)  { animation: oxWave 0.52s 0.00s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(2)  { animation: oxWave 0.43s 0.06s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(3)  { animation: oxWave 0.60s 0.13s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(4)  { animation: oxWave 0.38s 0.04s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(5)  { animation: oxWave 0.66s 0.09s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(6)  { animation: oxWave 0.48s 0.02s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(7)  { animation: oxWave 0.42s 0.11s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(8)  { animation: oxWave 0.56s 0.07s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(9)  { animation: oxWave 0.40s 0.05s ease-in-out infinite alternate; }
.ox-waveform.active span:nth-child(10) { animation: oxWave 0.61s 0.14s ease-in-out infinite alternate; }

@keyframes oxWave {
  from { height: 3px; }
  to   { height: 17px; }
}

/* ── CONTROLS ───────────────────────────────────────────────── */
.ox-controls {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
  align-items: center;
  touch-action: manipulation;
}

.ox-btn-next {
  flex: 1;
  background: linear-gradient(135deg, #edb800, #c89600);
  color: #000;
  border: none;
  border-radius: 100px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 3px 12px rgba(200,150,0,0.4), 0 0 0 1px rgba(246,201,78,0.25);
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}
/* Shimmer sweep on hover */
.ox-btn-next::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.4s ease;
  pointer-events: none;
}
.ox-btn-next:hover::after { left: 130%; }
.ox-btn-next:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(200,150,0,0.6), 0 0 0 2px rgba(246,201,78,0.45);
}
.ox-btn-next:active {
  transform: translateY(0) scale(0.98);
  transition: transform 0.08s ease;
}

/* Pulse animation on button when idle (not speaking) */
.ox-btn-next.ox-btn-idle {
  animation: oxBtnIdle 3s ease-in-out infinite;
}
@keyframes oxBtnIdle {
  0%,100% { box-shadow: 0 3px 12px rgba(200,150,0,0.4), 0 0 0 1px rgba(246,201,78,0.25); }
  50%      { box-shadow: 0 3px 20px rgba(200,150,0,0.65), 0 0 0 3px rgba(246,201,78,0.15); }
}

.ox-ctrl-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ox-ctrl-sm:hover,
.ox-ctrl-sm:active {
  background: rgba(224,184,24,0.15);
  border-color: rgba(224,184,24,0.45);
  color: #e0b818;
  transform: scale(1.12);
}

/* Muted state */
.ox-ctrl-sm.ox-muted {
  color: rgba(200,150,0,0.7);
  border-color: rgba(224,184,24,0.35);
  background: rgba(224,184,24,0.08);
}

/* Audio unlock prompt — pulses on the volume button when speech is waiting for gesture */
.ox-ctrl-sm.ox-audio-prompt {
  animation: oxAudioPromptPulse 1.4s ease-in-out infinite;
  border-color: rgba(224,184,24,0.7) !important;
  color: #e0b818 !important;
}
@keyframes oxAudioPromptPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,184,24,0.0); }
  50%       { box-shadow: 0 0 0 4px rgba(224,184,24,0.35); }
}

/* ── AVATAR SECTION ─────────────────────────────────────────── */
.ox-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Inline mobile avatar: hidden on desktop, shown on mobile via media query */
.ox-mobile-avatar { display: none; }

/* ── AVATAR WRAP ─────────────────────────────────────────────── */
.ox-avatar-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  animation: oxFloat 5s ease-in-out infinite;
}

@keyframes oxFloat {
  0%,100% { transform: translateY(0)    rotate(-0.4deg); }
  33%      { transform: translateY(-4px) rotate(0.4deg);  }
  66%      { transform: translateY(-2px) rotate(-0.2deg); }
}

/* Outer glow — pulses when speaking */
.ox-ring-pulse {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none;
}
.ox-ring-pulse.active {
  animation: oxGlowPulse 1.0s ease-in-out infinite;
}
@keyframes oxGlowPulse {
  0%,100% { box-shadow: 0 0 18px  5px rgba(224,184,24,0.28); }
  50%      { box-shadow: 0 0 48px 22px rgba(224,184,24,0.62); }
}

/* Rotating gold conic ring */
.ox-ring-gold {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #c89600  0deg,
    #f6d94e  60deg,
    #e0b818 120deg,
    #c89600 180deg,
    #f0c830 240deg,
    #c89600 300deg,
    #e0b818 360deg
  );
  animation: oxRingRotate 6s linear infinite;
}
/* Gap between ring and photo */
.ox-ring-gold::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0a0820;
}
@keyframes oxRingRotate {
  to { transform: rotate(360deg); }
}

/* Photo frame */
.ox-photo-frame {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: #0a0820;
  z-index: 2;
}

.ox-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
}

/* Blink overlay — covers eye region on close */
.ox-blink-overlay {
  position: absolute;
  top: 22%;
  left: 10%;
  right: 10%;
  height: 17%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(20,10,5,0.96) 38%,
    rgba(20,10,5,0.96) 62%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.06s linear;
  border-radius: 40%;
  z-index: 3;
  filter: blur(1.5px);
}
.ox-blink-overlay.closed { opacity: 1; }

/* Lip sync overlay — subtle mouth animation */
.ox-lip-overlay {
  position: absolute;
  top: 54%;
  left: 18%;
  right: 18%;
  height: 12%;
  background: radial-gradient(ellipse, rgba(180,50,25,0.3) 0%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.07s linear;
  z-index: 3;
  filter: blur(2px);
}
.ox-lip-overlay.open { opacity: 1; }

/* ── WAVE BARS BELOW AVATAR ─────────────────────────────────── */
.ox-wave-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  justify-content: center;
  height: 26px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ox-wave-bars.active { opacity: 1; }

.ox-wave-bars span {
  width: 3px;
  background: linear-gradient(to top, #c89600, #f6d94e);
  border-radius: 2px 2px 1px 1px;
  height: 4px;
}
.ox-wave-bars.active span:nth-child(1) { animation: oxBar 0.52s 0.00s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(2) { animation: oxBar 0.43s 0.09s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(3) { animation: oxBar 0.62s 0.04s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(4) { animation: oxBar 0.38s 0.13s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(5) { animation: oxBar 0.52s 0.07s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(6) { animation: oxBar 0.45s 0.02s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(7) { animation: oxBar 0.60s 0.11s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(8) { animation: oxBar 0.40s 0.05s ease-in-out infinite alternate; }
.ox-wave-bars.active span:nth-child(9) { animation: oxBar 0.56s 0.08s ease-in-out infinite alternate; }

@keyframes oxBar {
  from { height: 4px; }
  to   { height: 22px; }
}

/* ── SECTION HIGHLIGHT ──────────────────────────────────────── */
.ox-highlighted {
  outline: 2.5px solid rgba(224,184,24,0.75) !important;
  outline-offset: 7px !important;
  border-radius: 10px !important;
  scroll-margin-top: 90px !important;
  position: relative;
  z-index: 1;
  animation: oxHlPulse 2.4s ease-in-out infinite;
}

@keyframes oxHlPulse {
  0%,100% { box-shadow: 0 0  8px  2px rgba(224,184,24,0.12); }
  50%     { box-shadow: 0 0 30px 10px rgba(224,184,24,0.22); }
}

/* One-shot flash on arrival */
.ox-highlight-arrive {
  animation: oxHlArrive 0.7s ease-out !important;
}

@keyframes oxHlArrive {
  0%   { box-shadow: 0 0 0   0px rgba(224,184,24,0.0); outline-color: rgba(224,184,24,0); }
  25%  { box-shadow: 0 0 55px 20px rgba(224,184,24,0.5); outline-color: rgba(253,224,71,1); }
  100% { box-shadow: 0 0 18px  5px rgba(224,184,24,0.18); outline-color: rgba(224,184,24,0.75); }
}

/* ── OLD POINTER (hidden — replaced by smart pointer) ───────── */
.ox-pointer {
  position: fixed;
  z-index: 10001;
  font-size: 26px;
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

/* ── SMART POINTER ──────────────────────────────────────────── */
.ox-sptr {
  position: fixed;
  z-index: 10002;
  pointer-events: none;
  width: 36px;
  height: 46px;
  opacity: 0;
  transition:
    left    0.68s cubic-bezier(0.34, 1.56, 0.64, 1),
    top     0.68s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.28s ease;
  animation: oxSPtrFloat 3.4s ease-in-out infinite;
}

@keyframes oxSPtrFloat {
  0%,100% { transform: translateY(0)    rotate(0deg);  }
  40%     { transform: translateY(-8px) rotate(-2deg); }
  70%     { transform: translateY(-4px) rotate(1deg);  }
}

/* Arrival tap — overrides float */
.ox-sptr.arriving {
  animation: oxSPtrTap 0.55s ease-in-out !important;
}

@keyframes oxSPtrTap {
  0%   { transform: translateY(0)    scale(1.0); }
  30%  { transform: translateY(10px) scale(0.88); }
  65%  { transform: translateY(-6px) scale(1.12); }
  100% { transform: translateY(0)    scale(1.0); }
}

/* SVG cursor icon */
.ox-sptr-icon {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 46px;
  display: block;
  filter: drop-shadow(0 2px 7px rgba(224,184,24,0.6))
          drop-shadow(0 0 2px rgba(253,224,71,0.4));
}

/* Speaking state — intensify glow */
.ox-sptr.speaking .ox-sptr-icon {
  animation: oxSPtrSpeak 1.0s ease-in-out infinite;
}

@keyframes oxSPtrSpeak {
  0%,100% { filter: drop-shadow(0 3px 10px rgba(224,184,24,0.6))  drop-shadow(0 0 3px  rgba(253,224,71,0.4)); }
  50%     { filter: drop-shadow(0 3px 26px rgba(224,184,24,0.98)) drop-shadow(0 0 14px rgba(253,224,71,0.9)); }
}

/* Pulse rings */
.ox-sptr-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(224,184,24,0.75);
  opacity: 0;
  pointer-events: none;
  top: 2px;
  left: 2px;
}

.ox-sptr.arriving .ox-sptr-ring-1 { animation: oxSPtrRing 0.85s 0.00s ease-out forwards; }
.ox-sptr.arriving .ox-sptr-ring-2 { animation: oxSPtrRing 0.85s 0.18s ease-out forwards; }
.ox-sptr.arriving .ox-sptr-ring-3 { animation: oxSPtrRing 0.85s 0.36s ease-out forwards; }

@keyframes oxSPtrRing {
  0%   { width: 0;    height: 0;    opacity: 0.9;  transform: translate(0,    0); }
  100% { width: 90px; height: 90px; opacity: 0;    transform: translate(-45px, -45px); }
}

/* Label tooltip */
.ox-sptr-label {
  position: absolute;
  top: -30px;
  left: 6px;
  background: linear-gradient(135deg, #090618, #130a3e);
  border: 1px solid rgba(224,184,24,0.6);
  border-radius: 100px;
  padding: 4px 11px 4px 9px;
  font-size: 10px;
  font-weight: 800;
  color: #f0d060;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  letter-spacing: 0.07em;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.7),
    0 0 12px rgba(224,184,24,0.25),
    0 0 0 1px rgba(224,184,24,0.08) inset;
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  transition: opacity 0.28s ease 0.2s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1) 0.2s;
  pointer-events: none;
}

.ox-sptr.labeled .ox-sptr-label {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── RESTORE PILL ───────────────────────────────────────────── */
.ox-pill {
  position: fixed;
  bottom: 18px;
  right: 20px;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #090618, #110930);
  border: 1.5px solid rgba(224,184,24,0.52);
  border-radius: 100px;
  padding: 5px 16px 5px 5px;
  cursor: pointer;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.62),
    0 0 0 0 rgba(224,184,24,0.4);
  animation: oxPillPulse 2.8s ease-in-out infinite;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ox-pill:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 18px rgba(224,184,24,0.35);
}
.ox-pill:active { transform: translateY(-1px) scale(0.99); }

@keyframes oxPillPulse {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 0   rgba(224,184,24,0.4); }
  60%      { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 8px rgba(224,184,24,0); }
}

.ox-pill-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(224,184,24,0.72);
  overflow: hidden;
  flex-shrink: 0;
  background: #1a0840;
}
.ox-pill-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

.ox-pill-name { font-size: 12px; font-weight: 800; color: #e0b818; font-family: 'DM Sans', sans-serif; }
.ox-pill-sub  { font-size: 10px; color: rgba(255,255,255,0.4); font-family: 'DM Sans', sans-serif; }

/* Tour step shown in pill sub-text during tour */
.ox-pill-step {
  font-size: 9px;
  color: rgba(224,184,24,0.55);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: none;
}
.ox-pill-step.visible { display: block; }

/* ── HIDE OLD LEGACY ELEMENTS ───────────────────────────────── */
#oxPortrait, .ox-stage, .ox-glow, .ox-badge, .ox-portrait,
.ox-nav-card, .ox-nav-photo-col, .ox-svg-wrap, .ox-avatar-col,
.ox-nav-content { display: none !important; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ox-agent {
    right: 10px;
    bottom: 10px;
    width: auto;
    max-width: calc(100vw - 20px);
    gap: 8px;
  }
  .ox-bubble {
    width: min(310px, calc(100vw - 20px));
  }
  .ox-card-inner {
    padding: 10px 12px 10px;
    /* Cap height so card never covers the page header (approx 300px usable) */
    max-height: min(320px, calc(100svh - 220px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Welcome/offer step: let card grow naturally so buttons are never cut off */
  .ox-vault-welcome-card .ox-card-inner {
    max-height: none !important;
    overflow: visible !important;
  }
  .ox-msg {
    font-size: 12.5px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: none;
    min-height: 0;
  }
  .ox-controls {
    flex-shrink: 0;
    padding-top: 8px;
    margin-bottom: 0;
    background: transparent;
    z-index: 2;
  }
  .ox-waveform {
    flex-shrink: 0;
  }
  .ox-avatar-wrap { width: 88px; height: 88px; }
  .ox-pill { right: 10px; bottom: 10px; }
  /* Hide smart pointer on mobile — elements may be scrolled off screen */
  #oxSmartPtr { display: none !important; }
  #oxPtrBeam  { display: none !important; }
  #oxSectionGlow { display: none !important; }
  /* Hide the full avatar section on mobile — use inline avatar in card header instead */
  .ox-avatar-section { display: none !important; }
  /* Compact card header with inline avatar thumbnail */
  .ox-card-header { gap: 8px; }
  .ox-mobile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ox-mobile-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(224,184,24,0.65);
    object-fit: cover;
    object-position: center top;
  }
  /* Bubble fills more width on mobile */
  .ox-bubble {
    width: min(340px, calc(100vw - 20px));
  }
}

@media (max-width: 480px) {
  .ox-agent {
    right: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }
  .ox-bubble { width: min(calc(100vw - 16px), 340px); }
  .ox-pill { right: 8px; bottom: 8px; }
}

@media (max-width: 360px) {
  .ox-agent  { right: 6px; bottom: 6px; }
  .ox-bubble { width: calc(100vw - 12px); }
  .ox-msg    { font-size: 11.5px; }
}

/* Tablet (641-1024px) — show pointer but simplified */
@media (min-width: 641px) and (max-width: 1024px) {
  .ox-agent { right: 16px; bottom: 16px; }
  .ox-bubble { width: 290px; }
}

/* ── VAULT TOUR PROGRESS BAR ────────────────────────────────── */
.ox-vault-progress {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(224,184,24,0.18);
  flex-shrink: 0;
}

.ox-vp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ox-vp-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(224,184,24,0.7);
  font-family: 'DM Sans', sans-serif;
}

.ox-vp-count {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  font-family: 'DM Sans', sans-serif;
}

.ox-vp-track {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ox-vp-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89600, #f6d94e);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 10px rgba(224,184,24,0.55);
}

.ox-vp-stops {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
}

.ox-vp-dot {
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,0.1);
  transition: background 0.3s ease, transform 0.2s ease;
  cursor: default;
}

.ox-vp-dot.done {
  background: rgba(224,184,24,0.45);
}

.ox-vp-dot.active {
  background: #e0b818;
  box-shadow: 0 0 8px rgba(224,184,24,0.8);
  transform: scaleY(1.6);
}

/* ── VAULT TOUR BUTTON (global styles) ──────────────────────── */
.ox-vault-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #0a0820 0%, #12093a 100%);
  border: 1.5px solid rgba(224,184,24,0.55);
  border-radius: 100px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 800;
  color: #e0b818;
  cursor: pointer;
  letter-spacing: 0.03em;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 0 0 0 rgba(224,184,24,0.4), 0 4px 20px rgba(0,0,0,0.4);
  animation: vtBtnPulse 2.8s ease-in-out infinite;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
  white-space: nowrap;
}

.ox-vault-tour-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 24px 8px rgba(224,184,24,0.45), 0 8px 28px rgba(0,0,0,0.5);
  border-color: rgba(224,184,24,0.9);
  color: #f6d94e;
}
.ox-vault-tour-btn:active { transform: translateY(-1px) scale(1.01); }

.ox-vault-tour-btn .ox-vt-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(224,184,24,0.6));
}

@keyframes vtBtnPulse {
  0%,100% { box-shadow: 0 0 8px  2px rgba(224,184,24,0.2), 0 4px 20px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 22px 8px rgba(224,184,24,0.45), 0 4px 20px rgba(0,0,0,0.4); }
}

/* ── VAULT TOUR SPOTLIGHT OVERLAY ───────────────────────────── */
.ox-tour-spotlight-ring {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
  border: 2px solid rgba(224,184,24,0.8);
  border-radius: 12px;
  box-shadow:
    0 0 0 4000px rgba(0,0,0,0.45),
    0 0 30px 8px rgba(224,184,24,0.35);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  opacity: 0;
}

/* ══════════════════════════════════════════════════════════════
   CINEMATIC OPENING — ENTER THE VAULT
   ══════════════════════════════════════════════════════════════ */

/* Full-screen cinematic overlay */
.ox-cinema {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
}

.ox-cinema.ox-cinema-active {
  pointer-events: all;
}

/* Dark vignette layer */
.ox-cinema-bg {
  position: absolute;
  inset: 0;
  background: #040210;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1);
}

.ox-cinema-active .ox-cinema-bg {
  opacity: 0.82;
}

.ox-cinema-reveal .ox-cinema-bg {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Gold light beam sweep across full screen */
.ox-cinema-beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(224,184,24,0.07) 40%,
    rgba(246,217,78,0.22) 48%,
    rgba(255,240,100,0.35) 50%,
    rgba(246,217,78,0.22) 52%,
    rgba(224,184,24,0.07) 60%,
    transparent 70%,
    transparent 100%
  );
  transform: translateX(-120%);
  opacity: 0;
}

.ox-cinema-active .ox-cinema-beam {
  animation: oxBeamSweep 0.9s cubic-bezier(0.4,0,0.6,1) 0.45s forwards;
}

@keyframes oxBeamSweep {
  from { transform: translateX(-120%); opacity: 1; }
  to   { transform: translateX(120%);  opacity: 1; }
}

/* Logo glow — appears over the header area during sweep */
.ox-cinema-logo-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 80px;
  background: radial-gradient(ellipse at 50% 50%, rgba(224,184,24,0.35) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.ox-cinema-active .ox-cinema-logo-glow {
  animation: oxLogoGlow 1.2s ease 0.55s forwards;
}

@keyframes oxLogoGlow {
  0%   { opacity: 0; transform: scale(0.8); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* Vault emblem / center crest */
.ox-cinema-crest {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
}

.ox-cinema-active .ox-cinema-crest {
  animation: oxCrestIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards;
}

.ox-cinema-reveal .ox-cinema-crest {
  animation: oxCrestOut 0.55s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

@keyframes oxCrestIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes oxCrestOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

/* Concentric pulse rings behind vault icon */
.ox-cinema-crest-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -84px);
  width: 80px;
  height: 80px;
  pointer-events: none;
}

.ox-cinema-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(224,184,24,0.3);
  opacity: 0;
}

.ox-cinema-active .ox-cinema-ring-1 { animation: oxRingPulse 1.8s ease 0.5s infinite; }
.ox-cinema-active .ox-cinema-ring-2 { animation: oxRingPulse 1.8s ease 0.75s infinite; }
.ox-cinema-active .ox-cinema-ring-3 { animation: oxRingPulse 1.8s ease 1.0s infinite; }

@keyframes oxRingPulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.6); }
}

/* Vault dial SVG icon */
.ox-cinema-vault-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 0 18px rgba(224,184,24,0.6));
  animation: oxVaultSpin 8s linear infinite;
}

.ox-cinema-active .ox-cinema-vault-icon {
  animation: oxVaultSpin 3s linear infinite;
}

@keyframes oxVaultSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* REI VAULT PRO wordmark */
.ox-cinema-wordmark {
  font-family: 'Cormorant Garamond', 'DM Sans', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f6d94e;
  text-shadow:
    0 0 30px rgba(224,184,24,0.9),
    0 0 60px rgba(224,184,24,0.5),
    0 2px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* Subtagline */
.ox-cinema-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,217,78,0.55);
  white-space: nowrap;
}

/* ── INITIAL HIDDEN STATE for Ebonie agent ── */
.ox-cinema-hidden {
  opacity: 0 !important;
  transform: translateY(60px) scale(0.92) !important;
  pointer-events: none !important;
}

/* Spring-entrance when cinema releases Ebonie */
.ox-cinema-enter {
  transition:
    opacity 0.7s cubic-bezier(0.16,1,0.3,1),
    transform 0.7s cubic-bezier(0.34,1.56,0.64,1) !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: all !important;
}

/* ══════════════════════════════════════════════════════════════
   VAULT WELCOME PANEL — step 0 card vault-door aesthetic
   ══════════════════════════════════════════════════════════════ */

/* Applied to .ox-bubble when showing the vault welcome step */
.ox-vault-welcome-card .ox-card-inner {
  background: linear-gradient(160deg, #050310 0%, #070520 45%, #060418 100%) !important;
  border-color: rgba(224,184,24,0.7) !important;
  border-width: 1.5px !important;
  /* Allow buttons to never be clipped on the welcome/offer step */
  overflow: visible !important;
  box-shadow:
    0 0 0 1px rgba(224,184,24,0.18) inset,
    0 0 36px rgba(224,184,24,0.18),
    0 0 80px rgba(224,184,24,0.06),
    0 24px 64px rgba(0,0,0,0.9),
    0 8px 24px rgba(0,0,0,0.6) !important;
}

/* Vault corner rivets via box-shadow on a pseudo element */
.ox-vault-welcome-card .ox-card-inner::before {
  background:
    radial-gradient(circle 3.5px at 9px 9px,   rgba(224,184,24,0.7) 0%, transparent 70%),
    radial-gradient(circle 3.5px at calc(100% - 9px) 9px,   rgba(224,184,24,0.7) 0%, transparent 70%),
    radial-gradient(circle 3.5px at 9px calc(100% - 9px),   rgba(224,184,24,0.7) 0%, transparent 70%),
    radial-gradient(circle 3.5px at calc(100% - 9px) calc(100% - 9px), rgba(224,184,24,0.7) 0%, transparent 70%),
    linear-gradient(90deg, transparent, rgba(224,184,24,0.9), transparent) !important;
  height: 100% !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 1px !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0 !important;
}

/* Faint vault-dial watermark in background of card */
.ox-vault-welcome-card .ox-card-inner::after {
  content: '' !important;
  position: absolute !important;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  background:
    radial-gradient(circle at center, transparent 30%, transparent 31%),
    conic-gradient(
      rgba(224,184,24,0.04) 0deg 30deg,
      transparent 30deg 60deg,
      rgba(224,184,24,0.04) 60deg 90deg,
      transparent 90deg 120deg,
      rgba(224,184,24,0.04) 120deg 150deg,
      transparent 150deg 180deg,
      rgba(224,184,24,0.04) 180deg 210deg,
      transparent 210deg 240deg,
      rgba(224,184,24,0.04) 240deg 270deg,
      transparent 270deg 300deg,
      rgba(224,184,24,0.04) 300deg 330deg,
      transparent 330deg 360deg
    );
  border-radius: 50%;
  border: 1px solid rgba(224,184,24,0.07);
  pointer-events: none;
  opacity: 1 !important;
  animation: none !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* ── VAULT WELCOME HTML SLIDE STYLES ──────────────────────────── */
.ox-vault-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 2px;
  text-align: center;
}

.ox-vw-emblem {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(224,184,24,0.55));
  animation: oxVwSpin 12s linear infinite;
}

@keyframes oxVwSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ox-vw-headline {
  font-family: 'Cormorant Garamond', 'DM Sans', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f0d060;
  text-shadow:
    0 0 20px rgba(224,184,24,0.7),
    0 1px 2px rgba(0,0,0,0.8);
  line-height: 1.1;
}

.ox-vw-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,184,24,0.6), transparent);
  flex-shrink: 0;
}

.ox-vw-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
}

.ox-vw-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  color: rgba(224,184,24,0.75);
  letter-spacing: 0.02em;
  padding-top: 2px;
}

/* ── VAULT WELCOME ACTION BUTTONS ────────────────────────────── */

/* Hide the standard oxNextBtn on step 0 — inline buttons replace it */
.ox-vault-welcome-card .ox-controls .ox-btn-next {
  display: none !important;
}

/* Minimize button always visible on all screen sizes */
.ox-vault-welcome-card .ox-min-btn {
  display: flex !important;
}

/* Button row container */
.ox-vw-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin-top: 4px;
}

/* Base vault button */
.ox-vw-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  white-space: nowrap;
  text-align: center;
}

.ox-vw-btn:active {
  transform: scale(0.97) !important;
}

/* Primary — gold, full weight */
.ox-vw-btn--primary {
  background: linear-gradient(135deg, #c89600 0%, #e0b818 35%, #f6d94e 60%, #e0b818 80%, #c89600 100%);
  background-size: 200% 200%;
  border: 1px solid rgba(246,217,78,0.6);
  color: #0a0612;
  text-shadow: 0 1px 1px rgba(255,255,255,0.2);
  box-shadow: 0 3px 14px rgba(200,150,0,0.45), 0 1px 4px rgba(0,0,0,0.4);
  animation: oxVwPrimaryShimmer 3.5s linear infinite;
}

.ox-vw-btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 22px rgba(200,150,0,0.65), 0 2px 8px rgba(0,0,0,0.4);
  border-color: rgba(246,217,78,0.9);
}

@keyframes oxVwPrimaryShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Secondary — dark with gold border */
.ox-vw-btn--secondary {
  background: rgba(224,184,24,0.08);
  border: 1px solid rgba(224,184,24,0.4);
  color: #e0b818;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.ox-vw-btn--secondary:hover {
  transform: translateY(-1px) scale(1.01);
  background: rgba(224,184,24,0.14);
  border-color: rgba(224,184,24,0.7);
  box-shadow: 0 4px 14px rgba(200,150,0,0.25), 0 2px 8px rgba(0,0,0,0.3);
}

/* Tertiary — subtle dark */
.ox-vw-btn--tertiary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  box-shadow: none;
}

.ox-vw-btn--tertiary:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}

/* ══════════════════════════════════════════════════════════════
   SECTION 9 — ALIVE EXPERIENCE ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* ── PARTICLE FIELD ────────────────────────────────────────── */
.ox-particle-field {
  position: absolute;
  inset: -50px;
  pointer-events: none;
  z-index: 0;
}

.ox-p {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Particle sizes & base colors */
.ox-p-1 { width: 5px; height: 5px; background: rgba(246,217,78,0.9); top: 8%;  left: 48%; }
.ox-p-2 { width: 3px; height: 3px; background: rgba(224,184,24,0.8); top: 20%; right: 3%;  }
.ox-p-3 { width: 4px; height: 4px; background: rgba(246,217,78,0.7); top: 50%; right: -5%; }
.ox-p-4 { width: 3px; height: 3px; background: rgba(200,150,0,0.9);  bottom: 15%; right: 5%; }
.ox-p-5 { width: 5px; height: 5px; background: rgba(246,217,78,0.8); bottom: 3%;  left: 45%; }
.ox-p-6 { width: 3px; height: 3px; background: rgba(224,184,24,0.7); bottom: 18%; left: 3%; }
.ox-p-7 { width: 4px; height: 4px; background: rgba(246,217,78,0.9); top: 50%;   left: -5%; }
.ox-p-8 { width: 3px; height: 3px; background: rgba(200,150,0,0.8);  top: 18%;   left: 5%;  }

/* Show particles when active */
.ox-particle-field.active .ox-p   { opacity: 1; }
.ox-particle-field.active .ox-p-1 { animation: oxP1 2.8s 0.0s ease-in-out infinite; }
.ox-particle-field.active .ox-p-2 { animation: oxP2 3.3s 0.4s ease-in-out infinite; }
.ox-particle-field.active .ox-p-3 { animation: oxP3 2.5s 0.7s ease-in-out infinite; }
.ox-particle-field.active .ox-p-4 { animation: oxP4 3.1s 0.2s ease-in-out infinite; }
.ox-particle-field.active .ox-p-5 { animation: oxP5 2.9s 0.6s ease-in-out infinite; }
.ox-particle-field.active .ox-p-6 { animation: oxP6 3.4s 0.3s ease-in-out infinite; }
.ox-particle-field.active .ox-p-7 { animation: oxP7 2.6s 0.8s ease-in-out infinite; }
.ox-particle-field.active .ox-p-8 { animation: oxP8 3.0s 0.1s ease-in-out infinite; }

/* Idle drift (visible but subtle when not speaking) */
.ox-particle-field .ox-p-1 { animation: oxP1 6s 0.0s ease-in-out infinite; opacity: 0.18; }
.ox-particle-field .ox-p-2 { animation: oxP2 7s 1.0s ease-in-out infinite; opacity: 0.12; }
.ox-particle-field .ox-p-3 { animation: oxP3 5.5s 1.5s ease-in-out infinite; opacity: 0.15; }
.ox-particle-field .ox-p-4 { animation: oxP4 6.5s 0.5s ease-in-out infinite; opacity: 0.10; }
.ox-particle-field .ox-p-5 { animation: oxP5 7s 2.0s ease-in-out infinite; opacity: 0.18; }
.ox-particle-field .ox-p-6 { animation: oxP6 6s 1.2s ease-in-out infinite; opacity: 0.12; }
.ox-particle-field .ox-p-7 { animation: oxP7 5s 0.8s ease-in-out infinite; opacity: 0.15; }
.ox-particle-field .ox-p-8 { animation: oxP8 6.5s 1.8s ease-in-out infinite; opacity: 0.10; }

@keyframes oxP1 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(6px,-10px) scale(1.6)} }
@keyframes oxP2 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(8px,-8px)  scale(1.4)} }
@keyframes oxP3 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(10px,6px)  scale(1.5)} }
@keyframes oxP4 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(7px,9px)   scale(1.3)} }
@keyframes oxP5 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(-6px,10px) scale(1.6)} }
@keyframes oxP6 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(-9px,7px)  scale(1.4)} }
@keyframes oxP7 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(-10px,-5px) scale(1.5)} }
@keyframes oxP8 { 0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(-7px,-9px) scale(1.3)} }

/* ── SPEAKING SWAY — more expressive head motion ─────────────── */
.ox-avatar-wrap.speaking {
  animation: oxSpeakSway 0.9s ease-in-out infinite !important;
}

@keyframes oxSpeakSway {
  0%,100% { transform: translateY(-1px) rotate(-0.6deg); }
  25%      { transform: translateY(-5px) rotate( 0.5deg); }
  50%      { transform: translateY(-3px) rotate(-0.3deg); }
  75%      { transform: translateY(-6px) rotate( 0.7deg); }
}

/* ── CARD BORDER GLOW WHEN SPEAKING ─────────────────────────── */
.ox-bubble.ox-speaking .ox-card-inner {
  box-shadow:
    0 0 0 1px rgba(224,184,24,0.35),
    0 0 28px rgba(224,184,24,0.12),
    0 24px 56px rgba(0,0,0,0.7) !important;
}

@keyframes oxCardPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(224,184,24,0.25), 0 24px 56px rgba(0,0,0,0.7); }
  50%      { box-shadow: 0 0 0 1.5px rgba(224,184,24,0.55), 0 0 36px rgba(224,184,24,0.15), 0 24px 56px rgba(0,0,0,0.7); }
}

.ox-bubble.ox-speaking .ox-card-inner {
  animation: oxCardPulse 1.4s ease-in-out infinite !important;
}

/* ── LIVE WORD INDICATOR ─────────────────────────────────────── */
.ox-live-word {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(224,184,24,0.0);
  height: 16px;
  line-height: 16px;
  transition: color 0.18s ease;
  overflow: hidden;
  white-space: nowrap;
  max-width: 220px;
  margin: 0 auto;
  text-overflow: ellipsis;
}

.ox-live-word.active {
  color: rgba(224,184,24,0.75);
}

/* ── ENHANCED RING GLOW (more pronounced when speaking) ──────── */
.ox-ring-pulse.active {
  animation: oxGlowSpeaking 0.85s ease-in-out infinite !important;
}

@keyframes oxGlowSpeaking {
  0%,100% { box-shadow: 0 0 22px  8px rgba(224,184,24,0.32); }
  50%      { box-shadow: 0 0 60px 28px rgba(224,184,24,0.68); }
}

/* ══════════════════════════════════════════════════════════════
   SECTIONS 11-13 — DISCOVERY + ACTIVITY + CONTINUOUS UPDATES
   ══════════════════════════════════════════════════════════════ */

/* ── DISCOVERY CATEGORY TILES ────────────────────────────────── */
.ox-vw-discover {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.ox-disc-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(224,184,24,0.14);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.16s cubic-bezier(0.34,1.56,0.64,1);
}

.ox-disc-tile:hover {
  background: rgba(224,184,24,0.08);
  border-color: rgba(224,184,24,0.4);
  transform: translateX(3px);
}

.ox-disc-tile:active { transform: scale(0.98); }

.ox-disc-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #e0b818;
  min-width: 54px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ox-disc-sep {
  width: 1px;
  height: 12px;
  background: rgba(224,184,24,0.25);
  flex-shrink: 0;
}

.ox-disc-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  flex: 1;
}

.ox-disc-arrow {
  font-size: 10px;
  color: rgba(224,184,24,0.4);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.ox-disc-tile:hover .ox-disc-arrow {
  color: rgba(224,184,24,0.8);
}

/* ── VAULT ACTIVITY STATS STRIP ──────────────────────────────── */
.ox-vw-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: rgba(224,184,24,0.05);
  border: 1px solid rgba(224,184,24,0.15);
  border-radius: 10px;
  flex-wrap: wrap;
}

.ox-vw-act-item {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ox-vw-act-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #e0b818;
  letter-spacing: 0.02em;
}

.ox-vw-act-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

.ox-vw-act-sep {
  width: 1px;
  height: 14px;
  background: rgba(224,184,24,0.2);
  flex-shrink: 0;
}

/* Pulsing live dot */
.ox-vw-act-live .ox-vw-act-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.8);
  animation: oxActDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes oxActDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.6); }
}

/* ── NOTIFY BADGE ──────────────────────────────────────────────── */
.ox-vw-notify-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(224,184,24,0.65);
  letter-spacing: 0.02em;
  text-align: center;
  padding: 3px 8px;
  background: rgba(224,184,24,0.05);
  border: 1px solid rgba(224,184,24,0.12);
  border-radius: 20px;
  margin-top: -2px;
}

/* ── CONTINUOUS UPDATES INLINE BADGE (used in tour step msgs) ── */
.ox-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(34,197,94,0.9);
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 14 — VIP VAULT TOUR ENHANCEMENTS
   Section 15 — Interactive Smart Pointer System
   ══════════════════════════════════════════════════════════════ */

/* ── TOUR CATEGORY HUD ──────────────────────────────────────── */
/* Displayed inside ox-card-inner above the progress dots */
.ox-tour-category {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-bottom: 6px;
  background: rgba(224,184,24,0.07);
  border: 1px solid rgba(224,184,24,0.18);
  border-radius: 100px;
  width: fit-content;
}

.ox-tour-cat-icon {
  font-size: 13px;
  line-height: 1;
}

.ox-tour-cat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #e0b818;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── VAULT PROGRESS BAR ENHANCED ───────────────────────────── */
.ox-vault-progress {
  padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(224,184,24,0.1);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.ox-vp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ox-vp-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  color: #e0b818;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ox-vp-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
}

.ox-vp-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ox-vp-fill {
  height: 100%;
  background: linear-gradient(90deg, #92660a, #e0b818, #fef08a);
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 8px rgba(224,184,24,0.6);
}

.ox-vp-stops {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ox-vp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.3s ease;
  cursor: default;
}

.ox-vp-dot.done {
  background: rgba(224,184,24,0.55);
  border-color: rgba(224,184,24,0.6);
}

.ox-vp-dot.active {
  background: #e0b818;
  border-color: #fef08a;
  box-shadow: 0 0 8px rgba(224,184,24,0.9), 0 0 16px rgba(224,184,24,0.4);
  animation: oxVpDotPulse 1.4s ease-in-out infinite;
}

@keyframes oxVpDotPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 8px rgba(224,184,24,0.9), 0 0 16px rgba(224,184,24,0.4); }
  50%     { transform: scale(1.35); box-shadow: 0 0 14px rgba(224,184,24,1), 0 0 28px rgba(224,184,24,0.6); }
}

/* ── SECTION GLOW OVERLAY ───────────────────────────────────── */
/* Drawn by JS as a sibling to #oxSmartPtr — positions behind the pointer
   but in front of page content to create a visible "scan zone" glow */
#oxSectionGlow {
  position: fixed;
  z-index: 9990;
  pointer-events: none;
  border-radius: 18px;
  border: 2px solid rgba(224,184,24,0.0);
  background: rgba(224,184,24,0.0);
  opacity: 0;
  transition:
    left     0.62s cubic-bezier(0.25,1,0.5,1),
    top      0.62s cubic-bezier(0.25,1,0.5,1),
    width    0.62s cubic-bezier(0.25,1,0.5,1),
    height   0.62s cubic-bezier(0.25,1,0.5,1),
    opacity  0.35s ease,
    border-color 0.35s ease;
}

#oxSectionGlow.active {
  opacity: 1;
  border-color: rgba(224,184,24,0.55);
  background: rgba(224,184,24,0.04);
  animation: oxSecGlowPulse 2.2s ease-in-out infinite;
}

#oxSectionGlow.arrive-flash {
  animation: oxSecGlowArrive 0.7s ease-out !important;
}

@keyframes oxSecGlowPulse {
  0%,100% {
    border-color: rgba(224,184,24,0.45);
    box-shadow: 0 0 24px 4px rgba(224,184,24,0.08), inset 0 0 40px rgba(224,184,24,0.04);
  }
  50% {
    border-color: rgba(224,184,24,0.75);
    box-shadow: 0 0 50px 12px rgba(224,184,24,0.14), inset 0 0 60px rgba(224,184,24,0.07);
  }
}

@keyframes oxSecGlowArrive {
  0%   { border-color: rgba(224,184,24,0.0);  box-shadow: none; background: rgba(224,184,24,0.0); }
  25%  { border-color: rgba(253,224,71,0.9);  box-shadow: 0 0 80px 24px rgba(224,184,24,0.28), inset 0 0 80px rgba(224,184,24,0.12); background: rgba(224,184,24,0.09); }
  100% { border-color: rgba(224,184,24,0.55); box-shadow: 0 0 24px 4px rgba(224,184,24,0.10), inset 0 0 40px rgba(224,184,24,0.04); background: rgba(224,184,24,0.04); }
}

/* ── POINTER TRAIL SPARKS ───────────────────────────────────── */
/* Small gold sparks emitted during movement — injected by JS */
.ox-ptr-spark {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #e0b818 60%, transparent 100%);
  animation: oxSparkFade 0.55s ease-out forwards;
}

@keyframes oxSparkFade {
  0%   { opacity: 0.9; transform: scale(1)   translate(0, 0); }
  100% { opacity: 0;   transform: scale(0.2) translate(var(--sx,0), var(--sy,0)); }
}

/* ── POINTER BEAM — directional glow trail ──────────────────── */
#oxPtrBeam {
  position: fixed;
  z-index: 9989;
  pointer-events: none;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(224,184,24,0.0) 0%, rgba(224,184,24,0.6) 60%, rgba(253,224,71,0.9) 100%);
  transition: opacity 0.3s ease;
  filter: blur(1px);
}

#oxPtrBeam.active {
  opacity: 1;
  animation: oxBeamPulse 1.2s ease-in-out infinite;
}

@keyframes oxBeamPulse {
  0%,100% { opacity: 0.7; }
  50%     { opacity: 1.0; }
}

/* ── ENHANCED HIGHLIGHT — adds outer scanner ring ───────────── */
/* Supplements ox-highlighted with a second scan ring that rotates */
.ox-highlighted::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  border: 1.5px solid rgba(224,184,24,0.0);
  pointer-events: none;
  animation: oxScanRing 2.4s linear infinite;
}

@keyframes oxScanRing {
  0%   { border-color: rgba(224,184,24,0.0);  transform: scale(1.0) rotate(0deg); }
  25%  { border-color: rgba(224,184,24,0.35); }
  50%  { border-color: rgba(224,184,24,0.55); transform: scale(1.015) rotate(180deg); }
  75%  { border-color: rgba(224,184,24,0.35); }
  100% { border-color: rgba(224,184,24,0.0);  transform: scale(1.0) rotate(360deg); }
}

/* ── TOUR CATEGORY CHIPS (shown in tour msg area) ───────────── */
.ox-tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(224,184,24,0.08);
  border: 1px solid rgba(224,184,24,0.22);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  color: #e0b818;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}


/* ── SECTION 18 — FINAL CTA WELCOME PANEL ──────────────────── */
.ox-vw-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.62);
  line-height: 1.55;
  text-align: center;
  padding: 0 2px;
}

.ox-vw-subline {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(224,184,24,0.7);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: -2px;
}

/* ── TOUR OFFER CARD (step 0 — tour yes/no prompt) ──────────── */
.ox-tour-offer-msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ox-to-greeting {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #e0b818;
  letter-spacing: 0.01em;
}

.ox-to-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
}

.ox-to-text strong {
  color: #f6d94e;
  font-weight: 700;
}

/* Static Yes/No panel — hidden by default, shown on step 0 */
.ox-tour-offer-panel {
  display: none;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
  padding-top: 2px;
  position: relative;
  z-index: 10;
  pointer-events: all;
}

.ox-tour-offer-active .ox-tour-offer-panel {
  display: flex !important;
}

/* Hide the waveform on step 0 — the Yes/No panel takes its place */
.ox-tour-offer-active .ox-waveform {
  display: none !important;
}

.ox-to-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-align: center;
  transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: none;
}

.ox-to-btn:active { transform: scale(0.97); }

.ox-to-btn--yes {
  background: linear-gradient(135deg, #c89600 0%, #e0b818 40%, #f6d94e 65%, #e0b818 100%);
  color: #0a0612;
  box-shadow: 0 3px 14px rgba(200,150,0,0.45), 0 1px 4px rgba(0,0,0,0.4);
}

.ox-to-btn--yes:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 5px 20px rgba(200,150,0,0.55);
}

.ox-to-btn--no {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 12px;
  font-weight: 500;
}

.ox-to-btn--no:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.7);
}

/* Hide the Next/controls row on step 0 (buttons are inline) */
.ox-tour-offer-active .ox-controls { display: none !important; }
.ox-tour-offer-active .ox-caption-label { display: none !important; }

/* ── MAIN TOUR PROGRESS DOTS ────────────────────────────────── */
.ox-main-tour-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 3px 0 6px;
  flex-shrink: 0;
}

.ox-mtd {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.ox-mtd.done {
  background: rgba(224,184,24,0.5);
  border-color: rgba(224,184,24,0.6);
}

.ox-mtd.active {
  background: #e0b818;
  border-color: #fef08a;
  box-shadow: 0 0 7px rgba(224,184,24,0.9), 0 0 14px rgba(224,184,24,0.4);
  width: 8px;
  height: 8px;
  animation: oxVpDotPulse 1.4s ease-in-out infinite;
}