/* ============================================================
   HiVi Labs — Floating contact / quick-chat widget
   Scoped under .hivi-chat. Tokens only (see tokens.css).
   Launcher (bottom-right) toggles a luminous-glass lead panel.
   THEME: 2027 Luminous Glass (light). Frosted white panel over
   soft aurora, ink text tokens, blue CTAs, readable contrast.
   Class names preserved — chat-widget.js & main.js hook them.
   ============================================================ */

.hivi-chat {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-modal); /* above content, below toasts/skip-link */
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  pointer-events: none; /* re-enabled on interactive children */
}

/* ---------- Launcher ---------- */
.hivi-chat__launcher {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  height: 56px;
  padding: 0 1.35rem 0 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff; /* on saturated blue CTA — correct */
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 34px -10px rgba(37, 99, 235, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.hivi-chat__launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px -12px rgba(37, 99, 235, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hivi-chat__launcher:active { transform: translateY(0); }

/* Soft pulsing glow ring behind the launcher (normal-blend wash) */
.hivi-chat__launcher::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.35), transparent 70%);
  filter: blur(10px);
  opacity: 0.8;
  z-index: -1;
  animation: hivi-chat-pulse 2.8s var(--ease-in-out) infinite;
}

@keyframes hivi-chat-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.12); opacity: 0.85; }
}

.hivi-chat__launcher-icon {
  display: inline-grid;
  place-items: center;
}
.hivi-chat__launcher-icon .icon { width: 1.3em; height: 1.3em; }
.hivi-chat__launcher-icon--close { display: none; }
.hivi-chat__launcher-label { white-space: nowrap; }

/* Open state: swap icons, hide label for a compact close affordance */
.hivi-chat.is-open .hivi-chat__launcher-icon--open { display: none; }
.hivi-chat.is-open .hivi-chat__launcher-icon--close { display: inline-grid; }

/* ---------- Panel (luminous glass card) ---------- */
.hivi-chat__panel {
  pointer-events: auto;
  position: relative;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(640px, calc(100vh - 7rem));
  /* overflow-x must be explicit: a non-visible overflow-y alone makes the
     browser compute overflow-x as `auto`, which the aurora ::before / shadows
     trip into a phantom horizontal scrollbar. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.3) transparent;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
          backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-shadow),
              0 30px 70px -28px rgba(37, 99, 235, 0.28);
  color: var(--text-mid);

  transform-origin: bottom right;
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
}

/* Soft aurora glow behind the glass so the blur has something to refract */
.hivi-chat__panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(55% 45% at 90% 100%, rgba(0, 194, 160, 0.12), transparent 70%);
  pointer-events: none;
}

.hivi-chat.is-open .hivi-chat__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out),
              visibility 0s;
}

/* Hide via attribute before JS runs (progressive enhancement) */
.hivi-chat__panel[hidden] { display: none; }

/* Thin, on-brand scrollbar (WebKit/Blink). No horizontal track. */
.hivi-chat__panel::-webkit-scrollbar { width: 8px; height: 0; }
.hivi-chat__panel::-webkit-scrollbar-track { background: transparent; }
.hivi-chat__panel::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.25);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
}
.hivi-chat__panel::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.42);
  background-clip: padding-box;
}

.hivi-chat__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-lo);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.hivi-chat__close:hover {
  color: var(--text-hi);
  border-color: var(--border-strong);
  background: var(--bg-raised-2);
}
.hivi-chat__close .icon { width: 18px; height: 18px; }

/* ---------- Panel header ---------- */
.hivi-chat__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-right: 2.25rem; /* clear the close button */
}
.hivi-chat__avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-accent);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff; /* white icon on saturated gradient — correct */
  box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hivi-chat__avatar .icon { width: 22px; height: 22px; }
.hivi-chat__title { font-size: var(--fs-20); line-height: 1.2; color: var(--text-hi); }
.hivi-chat__status {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.25rem 0 0;
  font-size: var(--fs-12);
  color: var(--text-lo);
}
.hivi-chat__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2-bright);
  box-shadow: 0 0 8px rgba(0, 194, 160, 0.7);
}

.hivi-chat__greeting {
  font-size: var(--fs-14);
  color: var(--text-mid);
  line-height: 1.5;
  margin: 0 0 1.1rem;
}

/* ---------- Form tweaks (compact within panel) ---------- */
.hivi-chat__form .field { margin-bottom: 0.75rem; }
.hivi-chat__form .field-input,
.hivi-chat__form textarea,
.hivi-chat__form select {
  background: rgba(255, 255, 255, 0.75);
}
.hivi-chat__form textarea { resize: vertical; min-height: 76px; }
.hivi-chat__form .btn--block { margin-top: 0.35rem; }
.hivi-chat__form .btn .icon { width: 1.1em; height: 1.1em; }
.hivi-chat__form .form-status { text-align: center; }

/* ---------- Success state ---------- */
.hivi-chat__success {
  text-align: center;
  padding: 1.5rem 0.5rem 1rem;
}
.hivi-chat__success[hidden] { display: none; }
.hivi-chat__success-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(13, 148, 136, 0.10);
  border: 1px solid rgba(13, 148, 136, 0.30);
  color: var(--accent-2);
}
.hivi-chat__success-icon .icon { width: 28px; height: 28px; }
.hivi-chat__success-title { font-size: var(--fs-20); margin-bottom: 0.4rem; color: var(--text-hi); }
.hivi-chat__success-text {
  font-size: var(--fs-14);
  color: var(--text-lo);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Quick-action chips ---------- */
.hivi-chat__quick {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--glass-hairline);
}
.hivi-chat__quick-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.7rem;
}
.hivi-chat__chips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hivi-chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-mid);
  font-size: var(--fs-14);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hivi-chat__chip:hover {
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(59, 130, 246, 0.08);
  color: var(--text-hi);
  transform: translateX(2px);
}
.hivi-chat__chip .icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  color: var(--accent-hi);
}

/* ---------- Responsive: near full-width above launcher ---------- */
@media (max-width: 480px) {
  .hivi-chat {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }
  .hivi-chat__panel {
    width: 100%;
    max-height: min(78vh, calc(100vh - 6rem));
  }
  .hivi-chat__launcher { height: 52px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hivi-chat__launcher::before { animation: none; }
  .hivi-chat__launcher:hover,
  .hivi-chat__chip:hover { transform: none; }
  .hivi-chat__panel {
    transition: opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast);
    transform: none;
  }
  .hivi-chat.is-open .hivi-chat__panel {
    transition: opacity var(--dur-fast) linear, visibility 0s;
    transform: none;
  }
}