/* ==========================================================================
   REPULSE UK — CONVERSION WIDGETS
   Quote wizard · AI assistant · Toast · Exit intent
   ========================================================================== */

/* --------------------------------------------------------------------------
   MODAL SHELL
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--e-both), visibility var(--d-base);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 13, .68);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 0; cursor: pointer;
}

.modal__panel {
  position: relative;
  width: min(660px, 100%); max-height: min(880px, 92dvh);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: translateY(16px) scale(.99);
  transition: transform var(--d-slow) var(--e-out);
}

.turnstile-slot:not(:empty) {
  min-height: 65px;
  margin-top: var(--sp-4);
}
.modal.is-open .modal__panel { transform: none; }

@media (max-width: 640px) {
  .modal { padding: 0; place-items: stretch; }
  .modal__panel { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}

.modal__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl);
  color: var(--t-muted); cursor: pointer;
  transition: color var(--d-fast) var(--e-both), border-color var(--d-fast) var(--e-both);
}
.modal__close:hover { color: var(--t-strong); border-color: var(--line-2); }
.modal__close svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   QUOTE WIZARD
   -------------------------------------------------------------------------- */
.wizard__head {
  padding: var(--sp-6) var(--sp-6) var(--sp-5); padding-right: 68px;
  background: var(--grad-night); color: var(--t-on-dark-body);
  flex: 0 0 auto;
}
.wizard__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3); border-radius: var(--r-pill);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: var(--fs-xs); font-weight: 600; margin-bottom: var(--sp-4);
}
.wizard__eyebrow svg { width: 14px; height: 14px; color: var(--signal-on-dark); }
.wizard__title { font-size: var(--fs-h3); color: #fff; line-height: 1.2; }
.wizard__head .modal__close { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.wizard__head .modal__close:hover { background: rgba(255,255,255,.16); color: #fff; }

.wizard__progress { margin-top: var(--sp-5); }
.wizard__progress-bar { position: relative; height: 4px; background: rgba(255,255,255,.16); border-radius: var(--r-pill); overflow: hidden; }
/* scaleX is composited — the bar animates every step without forcing layout */
.wizard__progress-fill {
  position: absolute; inset: 0;
  transform: scaleX(var(--progress, 0)); transform-origin: left center;
  background: var(--violet-bright); border-radius: var(--r-pill);
  transition: transform var(--d-slow) var(--e-out);
}
.wizard__progress-meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--t-on-dark-muted); }
.wizard__progress-label { color: #fff; font-weight: 600; }

.wizard__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-6); }

.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: step-in var(--d-slow) var(--e-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.wizard__step.is-active.is-back { animation-name: step-in-back; }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

.wizard__q { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.wizard__hint { font-size: var(--fs-sm); color: var(--t-muted); margin-bottom: var(--sp-6); line-height: 1.55; max-width: 48ch; }
.wizard__selection-error {
  margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  color: #9f1239;
  background: #fff1f2;
  border-left: 3px solid var(--danger);
  border-radius: var(--r-ctl);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.wizard__step.is-active .choice { animation: choice-in var(--d-base) var(--e-out) backwards; }
.wizard__step.is-active .choice:nth-child(1) { animation-delay: 20ms; }
.wizard__step.is-active .choice:nth-child(2) { animation-delay: 60ms; }
.wizard__step.is-active .choice:nth-child(3) { animation-delay: 100ms; }
.wizard__step.is-active .choice:nth-child(4) { animation-delay: 140ms; }
.wizard__step.is-active .choice:nth-child(5) { animation-delay: 180ms; }
.wizard__step.is-active .choice:nth-child(6) { animation-delay: 220ms; }
.wizard__step.is-active .choice:nth-child(n+7) { animation-delay: 250ms; }
@keyframes choice-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.coverage {
  display: none; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: var(--r-ctl); background: var(--paper);
  animation: step-in var(--d-base) var(--e-out);
}
.coverage.is-shown { display: flex; }
.coverage__icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; color: var(--signal); }
.coverage__icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.coverage__title { font-size: var(--fs-sm); font-weight: 700; color: var(--t-strong); }
.coverage__text { font-size: var(--fs-sm); color: var(--t-muted); }

.wizard__summary { margin-bottom: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-ctl); background: var(--grad-wash); border: 1px solid var(--line); }
.wizard__summary-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--t-strong); margin-bottom: var(--sp-4); }
.wizard__summary-title svg { width: 16px; height: 16px; color: var(--violet); }
.wizard__summary-list { display: grid; gap: var(--sp-3); }
.wizard__summary-row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.wizard__summary-row dt { color: var(--t-muted); flex: 0 0 auto; }
.wizard__summary-row dd { color: var(--t-strong); font-weight: 600; text-align: right; }

.wizard__foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--line); background: var(--paper); flex: 0 0 auto;
}
.wizard__back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 46px; padding-inline: var(--sp-4);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  color: var(--t-muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--d-fast) var(--e-both), color var(--d-fast) var(--e-both);
}
.wizard__back:hover { border-color: var(--violet); color: var(--violet); }
.wizard__back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.wizard__next {
  margin-left: auto;
  --bg: var(--violet);
  --fg: #fff;
  --bd: var(--violet);
}
.wizard__next svg { color: currentColor; }
.wizard__trust { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--t-muted); }
.wizard__trust svg { width: 14px; height: 14px; color: var(--signal); }

@media (max-width: 480px) {
  .wizard__foot { padding-inline: var(--sp-3); }
  .wizard__trust { display: none; }
}

.wizard__success { padding: var(--sp-8) 0; }
.wizard__success-icon { display: block; margin-bottom: var(--sp-6); color: var(--violet); }
.wizard__success-icon svg { width: 44px; height: 44px; stroke-width: 1.4; }
.wizard__success-title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.wizard__success-text { color: var(--t-body); max-width: 46ch; margin-bottom: var(--sp-8); line-height: var(--lh-body); }
.wizard__next-steps { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-8); border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.wizard__next-step { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--t-muted); line-height: 1.6; }
.wizard__next-step svg { width: 18px; height: 18px; color: var(--violet); stroke-width: 1.6; margin-top: 3px; }

/* --------------------------------------------------------------------------
   AI ASSISTANT
   -------------------------------------------------------------------------- */
.assistant { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-widget); }
@media (max-width: 899px) { .assistant { bottom: calc(58px + var(--sp-4) + env(safe-area-inset-bottom, 0px)); right: var(--sp-4); } }

/* With a modal open the chat launcher is stranded on top of the dialog — on a
   phone it lands squarely over the last answer in the wizard. Scroll lock is
   already flagged on <body>, so reuse it. */
body.is-locked .assistant { opacity: 0; pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .assistant { transition: opacity var(--d-fast) var(--e-both), visibility var(--d-fast) var(--e-both); }
}

.assistant__fab {
  position: relative; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  padding: 0;
  background: var(--violet); border: 0; color: #fff; cursor: pointer;
  box-shadow: var(--sh-3);
  transition: background var(--d-fast) var(--e-both), transform var(--d-base) var(--e-out);
  touch-action: manipulation;
}
.assistant__fab:hover { background: #A216E8; transform: scale(1.05); }
.assistant__fab svg { width: 24px; height: 24px; stroke-width: 1.7; transition: opacity var(--d-fast) var(--e-both), transform var(--d-base) var(--e-out); }
.assistant__fab .icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.7); }
.assistant.is-open .assistant__fab .icon-chat { opacity: 0; transform: rotate(90deg) scale(.7); }
.assistant.is-open .assistant__fab .icon-close { opacity: 1; transform: none; }

.assistant__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 22px; height: 22px; padding-inline: 5px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--signal); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  border: 2px solid #fff;
}
.assistant.is-open .assistant__badge { display: none; }

.assistant__panel {
  position: absolute; right: 0; bottom: calc(56px + var(--sp-4));
  width: min(384px, calc(100vw - var(--sp-8)));
  height: min(560px, calc(100dvh - 160px));
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-card);
  box-shadow: var(--sh-3); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base);
}
.assistant.is-open .assistant__panel { opacity: 1; visibility: visible; transform: none; }

.assistant__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--grad-night); flex: 0 0 auto; }
.assistant__avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--violet-bright); }
.assistant__avatar svg { width: 18px; height: 18px; stroke-width: 1.7; }
.assistant__name { font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.assistant__status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--t-on-dark-muted); }
.assistant__close {
  margin-left: auto; display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-ctl); color: #fff; cursor: pointer;
}
.assistant__close svg { width: 16px; height: 16px; }

.assistant__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); scroll-behavior: smooth; }

.msg { display: flex; max-width: 92%; animation: msg-in var(--d-base) var(--e-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg--bot { align-self: flex-start; }
.msg--user { align-self: flex-end; }
.msg__bubble { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); font-size: var(--fs-sm); line-height: 1.55; }
.msg--bot .msg__bubble { background: var(--paper); border: 1px solid var(--line); color: var(--t-body); border-bottom-left-radius: 2px; }
.msg--user .msg__bubble { background: var(--violet); color: #fff; border-bottom-right-radius: 2px; }
.msg__bubble a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.msg--user .msg__bubble a { color: #fff; }
.msg__bubble strong { color: inherit; font-weight: 700; }

.typing { display: flex; gap: 4px; padding: var(--sp-4); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--t-faint); animation: typing-bounce 1.3s var(--e-both) infinite; }
.typing span:nth-child(2) { animation-delay: .16s; }
.typing span:nth-child(3) { animation-delay: .32s; }
@keyframes typing-bounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.assistant__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); flex: 0 0 auto; }
.chip {
  min-height: 38px; padding: var(--sp-2) var(--sp-3);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--violet); font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background var(--d-fast) var(--e-both), border-color var(--d-fast) var(--e-both);
  touch-action: manipulation;
}
.chip:hover { background: var(--wash); border-color: var(--violet); }

.assistant__compose {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--line); background: #fff; flex: 0 0 auto;
}
.assistant__input {
  flex: 1; min-height: 44px; padding: var(--sp-2) var(--sp-4);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  color: var(--t-strong); font-size: var(--fs-sm);
}
.assistant__input:focus { outline: none; border-color: var(--violet); }
.assistant__send {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  padding: 0;
  border-radius: var(--r-ctl); background: var(--violet); border: 0; color: #fff; cursor: pointer;
  transition: background var(--d-fast) var(--e-both);
}
.assistant__send:hover { background: #A216E8; }
.assistant__send svg { width: 17px; height: 17px; }
.assistant__disclaimer { padding: 0 var(--sp-5) var(--sp-3); font-size: var(--fs-xs); color: var(--t-muted); text-align: center; line-height: 1.4; }

/* --------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none; width: min(420px, calc(100vw - var(--sp-8)));
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink); color: #fff;
  border-left: 3px solid var(--signal-on-dark);
  border-radius: var(--r-ctl); box-shadow: var(--sh-3);
  font-size: var(--fs-sm); font-weight: 500;
  animation: toast-in var(--d-base) var(--e-out);
}
.toast--error { border-left-color: #FF6B7E; }
.toast svg { width: 18px; height: 18px; color: var(--signal-on-dark); stroke-width: 1.8; }
.toast--error svg { color: #FF6B7E; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   EXIT INTENT
   -------------------------------------------------------------------------- */
.exit-modal .modal__panel { width: min(480px, 100%); }
.exit__body { padding: var(--sp-8) var(--sp-6); }
.exit__icon { display: block; margin-bottom: var(--sp-5); color: var(--violet); }
.exit__icon svg { width: 34px; height: 34px; stroke-width: 1.4; }
.exit__title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.exit__text { color: var(--t-body); margin-bottom: var(--sp-6); line-height: var(--lh-body); }
.exit__actions { display: grid; gap: var(--sp-3); }
.exit__dismiss { background: none; border: 0; color: var(--t-muted); font-size: var(--fs-sm); cursor: pointer; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.exit__dismiss:hover { color: var(--t-strong); }

/* --------------------------------------------------------------------------
   SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: var(--z-toast);
  height: 3px; width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: left center;
  background: var(--grad-violet);
  transition: transform 80ms linear; pointer-events: none;
}

body.is-locked { overflow: hidden; }