/* ===== Visitor Engagement Layer (v21) — additive, non-destructive ===== */
:root{
  --ve-accent:#7cf6c8;
  --ve-accent-2:#9aa8ff;
  --ve-ink:#eaf2ff;
  --ve-bg:rgba(10,14,24,.86);
  --ve-border:rgba(255,255,255,.12);
  --ve-shadow:0 18px 60px rgba(0,0,0,.45);
}

/* Scroll progress bar */
.ve-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--ve-accent),var(--ve-accent-2));
  z-index:9999;transition:width .15s linear;
  box-shadow:0 0 14px rgba(124,246,200,.55);
}

/* Theme toggle + Scroll-to-top + Voice button — stacked control rail */
.ve-rail{
  position:fixed;right:18px;bottom:96px;z-index:9998;
  display:flex;flex-direction:column;gap:10px;
}
.ve-btn{
  width:46px;height:46px;border-radius:50%;
  background:var(--ve-bg);color:var(--ve-ink);
  border:1px solid var(--ve-border);backdrop-filter:blur(14px);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s;
  box-shadow:var(--ve-shadow);font-size:18px;line-height:1;
}
.ve-btn:hover{transform:translateY(-2px);box-shadow:0 22px 70px rgba(124,246,200,.25);background:rgba(20,28,44,.94)}
.ve-btn[aria-pressed="true"]{background:linear-gradient(135deg,rgba(124,246,200,.18),rgba(154,168,255,.18));border-color:rgba(124,246,200,.45)}
.ve-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.ve-up{opacity:0;pointer-events:none;transform:translateY(8px)}
.ve-up.show{opacity:1;pointer-events:auto;transform:none}

/* Light-mode adjustments (opt-in, won't affect users who don't toggle) */
html[data-ve-theme="light"]{
  --ve-bg:rgba(245,247,252,.92);
  --ve-ink:#0a0f1c;
  --ve-border:rgba(0,0,0,.1);
}
html[data-ve-theme="light"] body{
  background:#f4f6fb !important;color:#0a0f1c;
}
html[data-ve-theme="light"] .section,
html[data-ve-theme="light"] section{filter:none}
html[data-ve-theme="light"] .ve-toast,
html[data-ve-theme="light"] .ve-cookie,
html[data-ve-theme="light"] .ve-chat-panel,
html[data-ve-theme="light"] .ve-greet{color:#0a0f1c}

/* Live visitor counter pill */
.ve-live{
  position:fixed;left:18px;bottom:18px;z-index:9997;
  background:var(--ve-bg);color:var(--ve-ink);
  border:1px solid var(--ve-border);border-radius:999px;
  padding:8px 14px 8px 12px;font:600 12px/1 'Inter',system-ui,sans-serif;
  display:flex;align-items:center;gap:8px;backdrop-filter:blur(14px);
  box-shadow:var(--ve-shadow);
}
.ve-live .dot{
  width:8px;height:8px;border-radius:50%;background:#22e39a;
  box-shadow:0 0 0 0 rgba(34,227,154,.7);animation:vePulse 1.8s infinite;
}
@keyframes vePulse{
  0%{box-shadow:0 0 0 0 rgba(34,227,154,.7)}
  70%{box-shadow:0 0 0 10px rgba(34,227,154,0)}
  100%{box-shadow:0 0 0 0 rgba(34,227,154,0)}
}

/* Voice greeting card (top-center, transient) */
.ve-greet{
  position:fixed;top:18px;left:50%;transform:translate(-50%,-20px);
  z-index:9999;max-width:min(520px,92vw);
  background:var(--ve-bg);color:var(--ve-ink);
  border:1px solid var(--ve-border);border-radius:18px;
  padding:14px 16px;display:flex;gap:12px;align-items:center;
  backdrop-filter:blur(18px);box-shadow:var(--ve-shadow);
  opacity:0;transition:opacity .4s ease, transform .4s ease;pointer-events:none;
}
.ve-greet.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ve-greet .ve-orb{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  background:radial-gradient(circle at 30% 30%,var(--ve-accent),var(--ve-accent-2));
  box-shadow:0 0 24px rgba(124,246,200,.55);animation:veFloat 3.4s ease-in-out infinite;
}
@keyframes veFloat{50%{transform:translateY(-3px)}}
.ve-greet b{font-weight:700}
.ve-greet small{display:block;opacity:.75;margin-top:2px;font-size:11px}
.ve-greet button.ve-x{
  background:transparent;border:0;color:inherit;cursor:pointer;font-size:18px;opacity:.7
}

/* Cookie consent */
.ve-cookie{
  position:fixed;left:18px;right:18px;bottom:18px;margin:0 auto;max-width:520px;
  z-index:9996;background:var(--ve-bg);color:var(--ve-ink);
  border:1px solid var(--ve-border);border-radius:16px;padding:14px 16px;
  backdrop-filter:blur(14px);box-shadow:var(--ve-shadow);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  transform:translateY(120%);transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.ve-cookie.show{transform:translateY(0)}
.ve-cookie p{margin:0;font:500 12.5px/1.45 'Inter',system-ui,sans-serif;flex:1;min-width:200px}
.ve-cookie button{
  border:0;cursor:pointer;border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px;
}
.ve-cookie .ok{background:linear-gradient(90deg,var(--ve-accent),var(--ve-accent-2));color:#06121e}
.ve-cookie .no{background:transparent;color:inherit;border:1px solid var(--ve-border)}

/* Mini chatbot widget */
.ve-chat-fab{
  position:fixed;right:18px;bottom:18px;z-index:9998;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--ve-accent),var(--ve-accent-2));
  color:#06121e;border:0;cursor:pointer;font-size:24px;
  box-shadow:0 18px 50px rgba(124,246,200,.45);
  display:grid;place-items:center;
  transition:transform .25s ease;
}
.ve-chat-fab:hover{transform:scale(1.06)}
.ve-chat-panel{
  position:fixed;right:18px;bottom:90px;z-index:9999;
  width:min(360px,calc(100vw - 36px));height:min(480px,70vh);
  background:var(--ve-bg);color:var(--ve-ink);
  border:1px solid var(--ve-border);border-radius:20px;
  display:none;flex-direction:column;overflow:hidden;
  backdrop-filter:blur(20px);box-shadow:var(--ve-shadow);
}
.ve-chat-panel.open{display:flex;animation:veIn .35s ease}
@keyframes veIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ve-chat-head{
  padding:14px 16px;border-bottom:1px solid var(--ve-border);
  display:flex;align-items:center;gap:10px;font-weight:700;
}
.ve-chat-head .ve-orb{width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--ve-accent),var(--ve-accent-2));
  box-shadow:0 0 14px rgba(124,246,200,.5)}
.ve-chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.ve-msg{padding:9px 12px;border-radius:14px;max-width:85%;line-height:1.4}
.ve-msg.bot{background:rgba(124,246,200,.12);border:1px solid rgba(124,246,200,.25);align-self:flex-start}
.ve-msg.user{background:rgba(154,168,255,.18);align-self:flex-end}
.ve-chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.ve-chat-quick button{
  font-size:11.5px;padding:6px 10px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);color:inherit;border:1px solid var(--ve-border);
}
.ve-chat-quick button:hover{background:rgba(124,246,200,.15)}
.ve-chat-foot{display:flex;border-top:1px solid var(--ve-border);padding:8px}
.ve-chat-foot input{
  flex:1;background:transparent;border:0;color:inherit;outline:none;
  padding:8px 10px;font-size:13px;
}
.ve-chat-foot button{
  background:linear-gradient(135deg,var(--ve-accent),var(--ve-accent-2));
  color:#06121e;border:0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;
}

/* Confetti canvas */
.ve-confetti{position:fixed;inset:0;pointer-events:none;z-index:10000}

/* Toast notifications */
.ve-toast-wrap{position:fixed;right:18px;top:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:300px}
.ve-toast{
  background:var(--ve-bg);color:var(--ve-ink);border:1px solid var(--ve-border);
  border-radius:14px;padding:10px 14px;font:500 12.5px/1.4 'Inter',system-ui,sans-serif;
  backdrop-filter:blur(14px);box-shadow:var(--ve-shadow);
  opacity:0;transform:translateX(20px);transition:.35s ease;
}
.ve-toast.show{opacity:1;transform:none}

/* Mobile tightening */
@media (max-width:560px){
  .ve-rail{right:10px;bottom:84px}
  .ve-btn{width:42px;height:42px}
  .ve-chat-fab{width:54px;height:54px;right:10px;bottom:10px}
  .ve-chat-panel{right:10px;bottom:74px;height:65vh}
  .ve-live{left:10px;bottom:10px;font-size:11px;padding:7px 12px}
  .ve-greet{top:10px;padding:12px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .ve-greet,.ve-cookie,.ve-toast,.ve-chat-panel{transition:none;animation:none}
  .ve-orb{animation:none}
}