/* VYNEX/public/assistant.css — floating AI assistant: animated robot button + animated chat window.
   Loaded on every main public page together with assistant.js. Uses the site's design tokens (style.css). */

.vxa-root {
  --vxa-bottom: 20px;
  --vxa-b: #3b82f6; --vxa-v: #8b5cf6; --vxa-c: #22d3ee;
  position: fixed; right: 20px; bottom: var(--vxa-bottom); z-index: 250;
  font-family: var(--font, "Inter", system-ui, sans-serif);
  line-height: 1.5; color: #e9ecf8;
}
.vxa-root *, .vxa-root *::before, .vxa-root *::after { box-sizing: border-box; }
.vxa-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ Floating robot button ============ */
.vxa-fab {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #1b2352, #090d24 70%);
  cursor: pointer; color: inherit;
  box-shadow: 0 14px 34px -8px rgba(99, 102, 241, .75), 0 0 0 1px rgba(255,255,255,.1) inset;
  animation: vxa-float 4.2s ease-in-out infinite;
  transition: transform .25s;
  -webkit-tap-highlight-color: transparent;
}
.vxa-fab:hover { transform: scale(1.08); }
.vxa-fab:active { transform: scale(.95); }
.vxa-fab:focus-visible { outline: 2px solid var(--vxa-c); outline-offset: 4px; }
@keyframes vxa-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* spinning gradient ring */
.vxa-ring { position: absolute; inset: -3px; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(from 0deg, var(--vxa-b), var(--vxa-v), var(--vxa-c), var(--vxa-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: vxa-spin 5s linear infinite; }
@keyframes vxa-spin { to { transform: rotate(360deg); } }
/* sonar pulses */
.vxa-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: 2px solid rgba(139,92,246,.7); opacity: 0; animation: vxa-pulse 3s ease-out infinite; }
.vxa-pulse.p2 { animation-delay: 1.5s; border-color: rgba(34,211,238,.7); }
@keyframes vxa-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }

.vxa-bot { width: 45px; height: 45px; display: block; transition: opacity .2s, transform .3s; }
.vxa-bot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.vxa-close-ico { position: absolute; width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg) scale(.5); transition: opacity .2s, transform .3s; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.vxa-root.is-open .vxa-fab { animation: none; }
.vxa-root.is-open .vxa-bot { opacity: 0; transform: scale(.4) rotate(40deg); }
.vxa-root.is-open .vxa-close-ico { opacity: 1; transform: none; }
.vxa-root.is-open .vxa-pulse { display: none; }

.vxa-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  background: #ff3d71; color: #fff; font-size: .66rem; font-weight: 700; border: 2px solid #05070f; animation: vxa-pop .5s cubic-bezier(.3,1.8,.5,1) both; }
.vxa-badge[hidden] { display: none; }
@keyframes vxa-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* greeting bubble next to the button */
.vxa-greet { position: absolute; right: 70px; bottom: 9px; width: max-content; max-width: 230px; padding: 11px 34px 11px 14px; border-radius: 16px 16px 4px 16px;
  background: rgba(14, 19, 48, .94); border: 1px solid rgba(139,92,246,.45); backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.7), 0 0 24px -6px rgba(99,102,241,.5);
  font-size: .86rem; color: #e9ecf8; cursor: pointer; transform-origin: right bottom;
  animation: vxa-greet-in .5s cubic-bezier(.3,1.5,.5,1) both; }
.vxa-greet[hidden] { display: none; }
.vxa-greet b { color: var(--vxa-c); font-weight: 600; }
.vxa-greet-x { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #8f98b8; font-size: 15px; line-height: 1; cursor: pointer; }
.vxa-greet-x:hover { background: rgba(255,255,255,.1); color: #fff; }
@keyframes vxa-greet-in { from { opacity: 0; transform: translateX(14px) scale(.7); } to { opacity: 1; transform: none; } }

/* ============ Robot drawing (shared by every instance) ============ */
.vxa-svg .r-eye { transform-box: fill-box; transform-origin: center; animation: vxa-blink 5s infinite; }
.vxa-svg .r-eye.e2 { animation-delay: .04s; }
@keyframes vxa-blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.vxa-svg .r-look { transition: transform .12s ease-out; }       /* eyes follow the cursor (JS sets --lx/--ly) */
.vxa-svg .r-ant { animation: vxa-ant 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes vxa-ant { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.vxa-svg .r-led { animation: vxa-led 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vxa-led { 0%,100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.vxa-svg .r-head { animation: vxa-nod 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes vxa-nod { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } }
.vxa-svg .r-mouth { transform-box: fill-box; transform-origin: center; }
.vxa-svg .r-glow { animation: vxa-eyeglow 2.4s ease-in-out infinite; }
@keyframes vxa-eyeglow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.vxa-svg .r-hand { transform-box: fill-box; transform-origin: 20% 90%; animation: vxa-wave 3.6s ease-in-out infinite; }
@keyframes vxa-wave { 0%,60%,100% { transform: rotate(0); } 68% { transform: rotate(-24deg); } 76% { transform: rotate(10deg); } 84% { transform: rotate(-24deg); } 92% { transform: rotate(0); } }
/* talking: mouth moves while the assistant is "typing" */
.vxa-root.is-typing .vxa-svg .r-mouth { animation: vxa-talk .28s ease-in-out infinite alternate; }
@keyframes vxa-talk { from { transform: scaleY(.4); } to { transform: scaleY(1.6); } }
.vxa-root.is-typing .vxa-svg .r-eye { animation: none; }

.vxa-svg.still *, .vxa-svg.still { animation: none !important; }

/* ============ Chat window ============ */
.vxa-panel {
  position: absolute; right: 0; bottom: 74px; width: 392px; height: min(640px, calc(100dvh - 116px));
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: 24px; background: #060a1c; border: 1px solid rgba(139,92,246,.4);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.85), 0 0 60px -10px rgba(99,102,241,.55);
  transform-origin: right bottom; animation: vxa-open .45s cubic-bezier(.2,1.2,.4,1) both;
}
.vxa-panel[hidden] { display: none; }
.vxa-panel.is-closing { animation: vxa-shut .22s ease-in both; }
@keyframes vxa-open { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes vxa-shut { to { opacity: 0; transform: translateY(18px) scale(.9); } }

/* ---- animated background (behind everything in the chat) ----
   Built from images/chat-network.jpg: two slowly drifting copies of the photo (one mirrored, blended
   with "screen" so the mesh seems to shimmer), a live canvas of glowing nodes and travelling data pulses,
   a soft light sweep, and a dark shade so the messages stay easy to read. */
.vxa-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 100%, #0b1240 0%, #060a1c 60%, #04061a 100%); }
.vxa-photo { position: absolute; left: 0; bottom: 0; height: 74%; aspect-ratio: 16 / 9; transform-origin: left bottom;
  background: url("images/chat-network.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  will-change: transform, opacity; animation: vxa-pan 46s ease-in-out infinite alternate, vxa-breathe 7s ease-in-out infinite; }
.vxa-photo.p2 { transform-origin: right bottom; mix-blend-mode: screen; opacity: .42;
  animation: vxa-pan2 58s ease-in-out infinite alternate, vxa-breathe2 9s ease-in-out -3s infinite; }
@keyframes vxa-pan  { from { transform: translate3d(0, 0, 0) scale(1.02); } to { transform: translate3d(-46%, -3%, 0) scale(1.16); } }
@keyframes vxa-pan2 { from { transform: translate3d(-46%, 0, 0) scale(-1.1, 1.1); } to { transform: translate3d(-4%, -4%, 0) scale(-1.24, 1.24); } }
@keyframes vxa-breathe  { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes vxa-breathe2 { 0%, 100% { opacity: .28; } 50% { opacity: .62; } }
.vxa-net { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.vxa-sweep { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 55%; mix-blend-mode: screen; opacity: .55; will-change: transform;
  background: linear-gradient(100deg, transparent 0%, rgba(96,165,250,.0) 25%, rgba(139,150,255,.16) 50%, rgba(34,211,238,.0) 75%, transparent 100%);
  transform: skewX(-18deg); animation: vxa-sweep 11s ease-in-out 1.5s infinite; }
@keyframes vxa-sweep { 0% { transform: translate3d(0, 0, 0) skewX(-18deg); } 55%, 100% { transform: translate3d(330%, 0, 0) skewX(-18deg); } }
.vxa-shade { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,26,.78) 0%, rgba(5,8,26,.12) 18%, rgba(5,8,26,0) 55%, rgba(5,8,26,.5) 100%),
    radial-gradient(100% 65% at 50% 58%, transparent 55%, rgba(3,5,18,.42) 100%); }

/* ---- header ---- */
.vxa-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 13px 16px; position: relative;
  background: linear-gradient(135deg, rgba(59,130,246,.34), rgba(139,92,246,.34)); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.1); }
.vxa-head::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--vxa-c), var(--vxa-v), transparent); background-size: 200% 100%; animation: vxa-line 3.5s linear infinite; }
@keyframes vxa-line { to { background-position: -200% 0; } }
.vxa-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #1f2a66, #0a0e26 75%); border: 1px solid rgba(255,255,255,.2); }
.vxa-avatar svg { width: 36px; height: 36px; overflow: visible; }
.vxa-title { min-width: 0; flex: 1; }
.vxa-title strong { display: block; font-family: var(--display, "Space Grotesk", sans-serif); font-size: 1.02rem; letter-spacing: -.01em; color: #fff; }
.vxa-status { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: #b8c2ea; }
.vxa-status i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: vxa-online 2s infinite; }
@keyframes vxa-online { 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.vxa-ibtn { width: 34px; height: 34px; border: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #dfe5ff; cursor: pointer; transition: background .2s, transform .2s; }
.vxa-ibtn:hover { background: rgba(255,255,255,.18); }
.vxa-ibtn:active { transform: scale(.92); }
.vxa-ibtn:focus-visible { outline: 2px solid var(--vxa-c); outline-offset: 2px; }
.vxa-ibtn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- messages ---- */
.vxa-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.5) transparent; }
.vxa-log::-webkit-scrollbar { width: 6px; }
.vxa-log::-webkit-scrollbar-thumb { background: rgba(139,92,246,.5); border-radius: 6px; }
.vxa-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; animation: vxa-msg .38s cubic-bezier(.25,1.3,.5,1) both; }
@keyframes vxa-msg { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.vxa-msg.bot .vxa-mav { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #1f2a66, #0a0e26 75%); border: 1px solid rgba(255,255,255,.18); }
.vxa-msg.bot .vxa-mav svg { width: 22px; height: 22px; }
.vxa-bubble { padding: 10px 13px; border-radius: 18px; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; max-width: calc(100% - 38px); }
.vxa-msg.bot .vxa-bubble { background: rgba(18, 24, 58, .72); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); border-bottom-left-radius: 5px; color: #e9ecf8; box-shadow: 0 6px 20px -10px rgba(0,0,0,.6); }
.vxa-msg.user { justify-content: flex-end; }
.vxa-msg.user .vxa-bubble { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 10px 24px -10px rgba(99,102,241,.9); max-width: 86%; }
.vxa-bubble p { margin: 0 0 .55em; color: inherit; }
.vxa-bubble p:last-child { margin-bottom: 0; }
.vxa-bubble ul { margin: .3em 0 .55em; padding-left: 1.15em; }
.vxa-bubble li { margin: .12em 0; color: inherit; }
.vxa-bubble strong { color: #fff; font-weight: 600; }
.vxa-bubble a { color: var(--vxa-c); text-decoration: underline; text-underline-offset: 2px; }
.vxa-bubble a:hover { color: #fff; }
.vxa-bubble .vxa-cta { display: inline-flex; align-items: center; gap: 6px; margin: 4px 6px 2px 0; padding: 7px 13px; border-radius: 99px; font-size: .82rem; font-weight: 600; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow: 0 8px 18px -8px rgba(99,102,241,.9); transition: transform .2s, box-shadow .2s; }
.vxa-bubble .vxa-cta:hover { transform: translateY(-2px); color: #fff; }
.vxa-bubble .vxa-cta.alt { background: rgba(255,255,255,.1); box-shadow: none; border: 1px solid rgba(255,255,255,.2); }
.vxa-bubble .vxa-cta.wa { background: linear-gradient(135deg, #25d366, #128c7e); }

/* typing dots */
.vxa-typing .vxa-bubble { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.vxa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--vxa-c); animation: vxa-dot 1.1s ease-in-out infinite; }
.vxa-typing i:nth-child(2) { animation-delay: .15s; background: #8aa4ff; }
.vxa-typing i:nth-child(3) { animation-delay: .3s; background: var(--vxa-v); }
@keyframes vxa-dot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }

/* ---- suggestion chips ---- */
.vxa-chips { display: flex; gap: 8px; padding: 6px 14px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.vxa-chips::-webkit-scrollbar { display: none; }
.vxa-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.vxa-chips:empty { display: none; }
.vxa-chip { flex: none; padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(139,92,246,.55); background: rgba(139,92,246,.14); color: #dcd6ff; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .2s, border-color .2s; animation: vxa-chip .4s ease both; }
.vxa-chip:nth-child(2) { animation-delay: .06s; } .vxa-chip:nth-child(3) { animation-delay: .12s; } .vxa-chip:nth-child(4) { animation-delay: .18s; } .vxa-chip:nth-child(5) { animation-delay: .24s; } .vxa-chip:nth-child(n+6) { animation-delay: .3s; }
@keyframes vxa-chip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vxa-chip:hover { background: linear-gradient(135deg, rgba(59,130,246,.5), rgba(139,92,246,.5)); border-color: transparent; color: #fff; transform: translateY(-2px); }
.vxa-chip:focus-visible { outline: 2px solid var(--vxa-c); outline-offset: 2px; }

/* ---- input ---- */
.vxa-form { display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); flex: none; border-top: 1px solid rgba(255,255,255,.08); background: rgba(6,10,28,.72); backdrop-filter: blur(14px); }
.vxa-input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.vxa-input::placeholder { color: #7e89b0; }
.vxa-input:focus { border-color: var(--vxa-v); box-shadow: 0 0 0 3px rgba(139,92,246,.28); }
.vxa-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow: 0 8px 20px -8px rgba(99,102,241,.95); transition: transform .2s, opacity .2s; }
.vxa-send:hover { transform: scale(1.08) rotate(-8deg); }
.vxa-send:active { transform: scale(.92); }
.vxa-send:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.vxa-send:focus-visible { outline: 2px solid var(--vxa-c); outline-offset: 2px; }
.vxa-send svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vxa-foot { text-align: center; font-size: .66rem; color: #6c779f; padding: 0 12px 8px; background: rgba(6,10,28,.72); flex: none; }

/* ============ Phones ============ */
@media (max-width: 700px) {
  .vxa-root { right: 14px; }
  .vxa-fab { width: 52px; height: 52px; }
  .vxa-bot { width: 40px; height: 40px; }
  .vxa-greet { right: 62px; max-width: 200px; }
}
@media (max-width: 520px) {
  .vxa-root.is-open { right: 0; bottom: 0 !important; left: 0; top: 0; }
  .vxa-panel { position: fixed; inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; transform-origin: 85% 95%; }
  .vxa-root.is-open .vxa-fab { display: none; }
}

/* ============ Motion preferences ============ */
@media (prefers-reduced-motion: reduce) {
  .vxa-root *, .vxa-root *::before, .vxa-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .vxa-log { scroll-behavior: auto; }
  .vxa-photo, .vxa-photo.p2, .vxa-sweep { animation: none !important; }
  .vxa-sweep { display: none; }
}
.vxa-bubble .vxa-cta + p, .vxa-bubble ul + .vxa-cta { margin-top: .7em; }
/* "More details" chip stands out from the topic chips */
.vxa-chip.more { border-color: transparent; color: #fff; background: linear-gradient(135deg, rgba(59,130,246,.65), rgba(139,92,246,.65)); font-weight: 600; }
.vxa-chip.more:hover { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }