/* Floating action stack + live-chat widget: rules carried over from site.css so the
   preview has the same chat / back-to-top experience as the live site. The site.css
   design tokens they reference are defined here, scoped to the widgets. */
.fab-stack, .fab-chat-panel, #wsrChatRoot, .wsr-chat-root {
  --text: #f4f2ff; --text-dim: #a8a3c4; --text-muted: #6f6a8c;
  --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.14);
  --primary: #6d5cff; --primary-2: #9b6bff; --accent: #ff7ab8; --success: #4ade80; --warn: #ffb86b;
  --grad-1: linear-gradient(135deg,#5b4cff 0%, #8b5cf6 45%, #ec4899 100%);
  --font-display: var(--font); --font-body: var(--font);
}
/* ── Floating Action Stack (back-to-top + chat + WhatsApp) ───────── */
.fab-stack{
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 250;
  display: flex;
  flex-direction: column-reverse; /* WhatsApp at bottom, chat middle, top button above */
  align-items: flex-end;
  gap: 12px;
  pointer-events: none; /* children re-enable */
}
.fab-stack > *{ pointer-events: auto; }
/* RTL: anchor to bottom-left instead */
html[dir="rtl"] .fab-stack{ right: auto; left: 22px; align-items: flex-start; transform-origin: bottom left; }
/* Generic FAB button */
.fab{
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.55), 0 4px 12px -4px rgba(0,0,0,.4);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, opacity .2s ease;
  position: relative;
}
.fab:hover{ transform: translateY(-3px) scale(1.04); color: #fff; }
.fab:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.fab:active{ transform: translateY(-1px) scale(.98); }
/* Tooltip label on the left of the button (right in RTL) */
.fab::before{
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(12,10,26,.95);
  color: var(--text);
  padding: .45rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(8px);
}
html[dir="rtl"] .fab::before{ right: auto; left: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); }
.fab:hover::before, .fab:focus-visible::before{ opacity: 1; transform: translateY(-50%) translateX(0); }
/* WhatsApp variant */
.fab--whatsapp{
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.55), 0 4px 12px -4px rgba(18,140,126,.35);
}
.fab--whatsapp::after{
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.45);
  animation: fab-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
/* Live chat variant */
.fab--chat{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 50%, var(--accent) 100%);
  box-shadow: 0 12px 28px -8px rgba(139,92,246,.55);
}
/* Back-to-top variant: hidden until scrolled */
.fab--top{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.fab--top.visible{ opacity: 1; visibility: visible; transform: none; }
.fab--top:hover{ background: rgba(255,255,255,.1); color: var(--text); }
/* Chat popup panel */
.fab-chat-wrap{ position: relative; display: inline-flex; }
.fab-chat-panel{
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 44px);
  background: rgba(12,10,26,.96);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
}
html[dir="rtl"] .fab-chat-panel{ right: auto; left: 0; transform-origin: bottom left; }
.fab-chat-wrap.open .fab-chat-panel{ opacity: 1; transform: none; pointer-events: auto; }
.fab-chat-head{
  padding: 1rem 1.1rem .85rem;
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(236,72,153,.18));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .85rem;
}
.fab-chat-head .avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad-1);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  flex-shrink: 0;
}
.fab-chat-head .name{ font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text); }
.fab-chat-head .status{ font-size: .73rem; color: var(--text-dim); display: flex; align-items: center; gap: .35rem; margin-top: .15rem; }
.fab-chat-head .status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.fab-chat-head .close-x{
  margin-left: auto;
  background: transparent; border: 0; color: var(--text-muted);
  cursor: pointer; font-size: 1.15rem; padding: .15rem .35rem; line-height: 1;
  border-radius: 6px;
}
html[dir="rtl"] .fab-chat-head .close-x{ margin-left: 0; margin-right: auto; }
.fab-chat-head .close-x:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.fab-chat-body{ padding: .85rem 1.1rem 1.1rem; }
.fab-chat-body > p{ font-size: .85rem; color: var(--text-dim); margin: 0 0 .8rem; }
.fab-chat-opt{
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  margin-bottom: .55rem;
  transition: all .2s ease;
}
.fab-chat-opt:last-child{ margin-bottom: 0; }
.fab-chat-opt:hover{ background: rgba(255,255,255,.06); border-color: var(--border-strong); color: var(--text); transform: translateX(-2px); }
html[dir="rtl"] .fab-chat-opt:hover{ transform: translateX(2px); }
.fab-chat-opt .icon{
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(91,76,255,.22), rgba(236,72,153,.18));
  border: 1px solid var(--border);
  font-size: .95rem;
}
.fab-chat-opt .icon.green{ background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.35); color: #4ade80; }
.fab-chat-opt .icon.blue{ background: rgba(91,76,255,.22); border-color: rgba(91,76,255,.4); color: #9b8cff; }
.fab-chat-opt .icon.pink{ background: rgba(236,72,153,.18); border-color: rgba(236,72,153,.35); color: #ff9bc9; }
.fab-chat-opt .icon.yellow{ background: rgba(255,184,0,.12); border-color: rgba(255,184,0,.35); color: #ffb800; }
.fab-chat-opt .label{ font-family: var(--font-display); font-weight: 500; font-size: .9rem; line-height: 1.2; }
.fab-chat-opt .sub{ font-size: .72rem; color: var(--text-muted); }
/* Stream I — "Start AI Live Chat" trigger (button variant of .fab-chat-opt) */
button.fab-chat-opt{
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
html[dir="rtl"] button.fab-chat-opt{ text-align: right; }
.fab-chat-ai-trigger{
  background: linear-gradient(135deg, rgba(255,184,0,.10), rgba(255,184,0,.04));
  border-color: rgba(255,184,0,.28);
}
.fab-chat-ai-trigger:hover{
  background: linear-gradient(135deg, rgba(255,184,0,.16), rgba(255,184,0,.06));
  border-color: rgba(255,184,0,.5);
}
/* CSS GRID layout for the chatbot panel — more deterministic than nested flex.
   Previous flex chain left dead space top + bottom because:
   (1) my CSS targeted .wsr-chat-fineprint but the actual class is .wsr-chat-finish-row,
   (2) flex 1 1 auto wasn't being honored across 5 nested ancestors.
   Grid with explicit `auto auto 1fr` rows is unambiguous: topbar + header at
   natural height, the active step takes ALL remaining vertical space. */
.fab-chat-panel[data-view="chatbot"]{
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(620px, calc(100vh - 80px));
  display: grid !important;
  grid-template-rows: 1fr !important;     /* the AI body fills the panel */
  padding: 0 !important;
  overflow: hidden;
}
.fab-chat-panel[data-view="chatbot"] .fab-chat-head{ display: none !important; }
.fab-chat-panel[data-view="chatbot"] #fabChatBodyOptions[hidden]{ display: none !important; }
.fab-chat-body--ai{
  display: grid !important;
  grid-template-rows: 1fr !important;     /* the chatbot panel fills the slot */
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
  overflow: hidden;
}
.fab-chat-body--ai .wsr-chat-panel--embedded{
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;  /* topbar / header / active step */
  height: 100% !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* Hidden steps (lead / rate / done while in chat mode) drop out of the grid
   entirely so the active chat step takes the full 1fr row. */
.fab-chat-body--ai .wsr-chat-step[hidden]{ display: none !important; }
/* The visible chat step is itself a grid: messages fills, input + finish row
   pin to the bottom. NOTE: real class is .wsr-chat-finish-row (NOT
   .wsr-chat-fineprint — my earlier rules missed this). */
.fab-chat-body--ai .wsr-chat-step--chat{
  display: grid !important;
  grid-template-rows: 1fr auto auto !important;  /* messages / input / finish */
  min-height: 0 !important;
  overflow: hidden;
}
.fab-chat-body--ai .wsr-chat-step--chat .wsr-chat-messages{
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 12px !important;
}
.fab-chat-body--ai .wsr-chat-finish-row{
  margin: 0 !important;
  padding: 4px 10px 10px !important;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  text-align: center;
}
/* Other steps (lead / rate / done) also need to fill the 1fr row when visible.
   Stack content from the top with normal block flow. */
.fab-chat-body--ai .wsr-chat-step--lead,
.fab-chat-body--ai .wsr-chat-step--rate,
.fab-chat-body--ai .wsr-chat-step--done{
  overflow-y: auto;
  min-height: 0;
}
/* Stream I — "Back to contact options" button shown inside the chatbot UI */
.fab-chat-back{
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 0;
  color: var(--text-dim, #b8b1d4);
  font: inherit; font-size: .78rem;
  padding: .35rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.fab-chat-back:hover{ color: var(--text, #f3f1ff); background: rgba(255,255,255,.06); }
.fab-chat-back:focus-visible{ outline: 2px solid #ffb800; outline-offset: 2px; }
.fab-chat-back i{ font-size: .95rem; }
html[dir="rtl"] .fab-chat-back i{ transform: scaleX(-1); }
/* Hide the standalone WhatsApp FAB entirely — WhatsApp is now the first
   option inside the unified chat panel (.fab-chat-opt with green icon), so a
   second floating WhatsApp button alongside the chat icon would be a duplicate
   entry point. The chat launcher itself stays as the single CTA. */
.fab-stack .fab--whatsapp{
  display: none !important;
}
/* Also hide back-to-top while the panel is OPEN (still useful for long-page
   scroll otherwise, so we keep it visible when the panel is closed). */
.fab-stack:has(.fab-chat-wrap.open) .fab--top{
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity .18s ease, transform .18s ease;
}
/* Hide legacy single WhatsApp button if present (replaced by .fab-stack) */
.wsr-whatsapp-btn{ display: none !important; }
@media (max-width: 380px){/* Floating chat button shrinks slightly on tiny phones */
    .fab{ width: 48px !important; height: 48px !important; }}
@keyframes fab-pulse{
  0%   { transform: scale(.92); opacity: .75; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(74,222,128,.2); } 50% { box-shadow: 0 0 0 8px rgba(74,222,128,.05); } }

/* ---------- 2026-10-11 fab fixes: v2 has no --text/--border-strong/--font-body tokens (the arrow rendered
   near-invisible) and the generic .bi box reservation must not offset glyphs inside the round buttons. ---------- */
.fab .bi { display: block; width: auto; height: auto; line-height: 1; vertical-align: 0; }
.fab .bi::before { display: block; line-height: 1; }
.fab--top { background: #fff; color: #0b0b12; border: 1px solid #d8d5e6; box-shadow: 0 12px 28px -8px rgba(11,11,18,.28), 0 4px 12px -4px rgba(11,11,18,.18); }
.fab--top:hover { background: #f6f5fa; color: #0b0b12; }
.fab--top .bi { font-size: 1.45rem; font-weight: 700; }
.fab::before { color: #fff; border-color: rgba(255,255,255,.14); font-family: inherit; }