/* VPNXHUB site AI assistant — floating support panel.
   Visual language: the site's own brand mark and gradient, flat surfaces,
   hairline borders, one accent colour, no mascot. The markup is built in
   assets/js/assistant.js — class names here must match it. */

.vpnx-assistant {
  --va-text: #eef2f8;
  --va-muted: #97a4b8;
  --va-faint: #6b7a92;
  --va-brand: #2563eb;
  --va-brand-hover: #3b82f6;
  --va-brand-2: #06b6d4;
  --va-brand-grad: linear-gradient(135deg, #2563eb, #0891b2);
  --va-stroke: rgba(148, 163, 184, 0.12);
  --va-stroke-strong: rgba(148, 163, 184, 0.2);
  --va-panel: #0b1220;
  --va-surface: rgba(148, 163, 184, 0.05);
  --va-bubble-bot: rgba(148, 163, 184, 0.07);
  --va-bubble-bot-stroke: rgba(148, 163, 184, 0.12);
  --va-field: rgba(2, 6, 23, 0.55);
  --va-shadow: 0 24px 60px rgba(2, 6, 23, 0.55), 0 2px 8px rgba(2, 6, 23, 0.35);
  /* The widget was a fixed 380x580 on everything wider than a phone, which on a
     2560px-wide display left it at roughly a seventh of the viewport. These grow
     it with the screen instead, each capped so it never dominates the page. The
     lower bounds are the old fixed values, so nothing shrinks: width sits on its
     floor up to ~1580px across, height until the viewport is ~880px tall. */
  --va-panel-w: clamp(380px, 24vw, 520px);
  --va-panel-h: clamp(580px, 66vh, 740px);
  --va-launcher: clamp(56px, 3.4vw, 64px);
  /* Base text size every font-size below is a multiple of: 16px up to 1280px,
     rising to ~17.5px at 2560px. Kept in rem so the multiples don't compound. */
  --va-fs: clamp(1rem, 0.9rem + 0.12vw, 1.1rem);
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99960;
  font-family: Inter, Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--va-fs);
  color: var(--va-text);
}

.vpnx-assistant *,
.vpnx-assistant *::before,
.vpnx-assistant *::after {
  box-sizing: border-box;
}

/* ---------- Launcher ---------- */
.vpnx-assistant-launcher {
  position: relative;
  width: var(--va-launcher);
  height: var(--va-launcher);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--va-brand-grad);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.32);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

/* Kept as a hover-only halo — the old version pulsed forever and pulled the
   eye away from the page content. */
.vpnx-assistant-launcher-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.5);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.vpnx-assistant-launcher:hover,
.vpnx-assistant-launcher:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42);
  outline: none;
}

.vpnx-assistant-launcher:hover .vpnx-assistant-launcher-ring,
.vpnx-assistant-launcher:focus-visible .vpnx-assistant-launcher-ring {
  opacity: 1;
  transform: scale(1);
}

.vpnx-assistant-launcher-icon {
  width: calc(var(--va-launcher) * 0.46);
  height: calc(var(--va-launcher) * 0.46);
  display: block;
  position: relative;
}

.vpnx-assistant.is-open .vpnx-assistant-launcher {
  display: none;
}

/* ---------- Panel ---------- */
.vpnx-assistant-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(var(--va-panel-w), calc(100vw - 28px));
  height: min(var(--va-panel-h), calc(100vh - 44px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--va-stroke-strong);
  background: var(--va-panel);
  box-shadow: var(--va-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s;
  pointer-events: none;
}

.vpnx-assistant.is-open .vpnx-assistant-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---------- Header ---------- */
.vpnx-assistant-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--va-stroke);
  /* A faint brand wash behind the header only — enough to tie the panel to the
     site palette without turning the whole widget into a gradient. */
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0)),
    var(--va-surface);
}

.vpnx-assistant-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #dff3ff;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(6, 182, 212, 0.2));
  border: 1px solid rgba(6, 182, 212, 0.26);
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.1);
}

.vpnx-assistant-avatar-mark {
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-size: calc(var(--va-fs) * 0.76);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.vpnx-assistant-status-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid var(--va-panel);
}

.vpnx-assistant-header-copy {
  min-width: 0;
  flex: 1;
}

.vpnx-assistant-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.vpnx-assistant-title-row strong {
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-size: calc(var(--va-fs) * 0.92);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vpnx-assistant-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  font-size: calc(var(--va-fs) * 0.6);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.vpnx-assistant-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: calc(var(--va-fs) * 0.71);
  color: var(--va-faint);
  white-space: nowrap;
  overflow: hidden;
}

.vpnx-assistant-meta-sep {
  color: rgba(148, 163, 184, 0.4);
}

.vpnx-assistant-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-weight: 500;
  color: #4ade80;
}

.vpnx-assistant-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.vpnx-assistant-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--va-faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.vpnx-assistant-close svg {
  width: 17px;
  height: 17px;
}

.vpnx-assistant-close:hover,
.vpnx-assistant-close:focus-visible {
  color: var(--va-text);
  background: rgba(148, 163, 184, 0.12);
  outline: none;
}

/* ---------- Messages ---------- */
.vpnx-assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.vpnx-assistant-messages::-webkit-scrollbar {
  width: 6px;
}

.vpnx-assistant-messages::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.22);
  border-radius: 6px;
}

.vpnx-assistant-messages::-webkit-scrollbar-track {
  background: transparent;
}

.vpnx-assistant-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: calc(var(--va-fs) * 0.85);
  line-height: 1.62;
  white-space: pre-wrap;
  word-break: break-word;
  animation: vpnxAssistantMsgIn 0.22s ease-out;
}

@keyframes vpnxAssistantMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.vpnx-assistant-msg.is-bot {
  align-self: flex-start;
  background: var(--va-bubble-bot);
  border: 1px solid var(--va-bubble-bot-stroke);
  color: #dde5f0;
  border-bottom-left-radius: 5px;
}

.vpnx-assistant-msg.is-user {
  align-self: flex-end;
  background: var(--va-brand);
  color: #fff;
  border-bottom-right-radius: 5px;
}

/* Greeting: lead sentence, then the Sinhala line set quieter and divided by a
   hairline so the opening bubble reads as two lines instead of a paragraph. */
.vpnx-assistant-msg.is-greeting {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vpnx-assistant-msg-alt {
  padding-top: 9px;
  border-top: 1px solid var(--va-stroke);
  font-size: calc(var(--va-fs) * 0.79);
  line-height: 1.7;
  color: var(--va-muted);
}

.vpnx-assistant-msg.is-error {
  align-self: stretch;
  max-width: 100%;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  font-size: calc(var(--va-fs) * 0.8);
}

/* ---------- Suggestion chips ---------- */
.vpnx-assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 6px 0 2px;
  align-self: stretch;
  animation: vpnxAssistantMsgIn 0.24s ease-out;
}

.vpnx-assistant-suggestions-label {
  flex-basis: 100%;
  margin-bottom: 1px;
  font-size: calc(var(--va-fs) * 0.63);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--va-faint);
}

.vpnx-assistant-chip {
  border: 1px solid var(--va-stroke-strong);
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: calc(var(--va-fs) * 0.76);
  font-weight: 400;
  line-height: 1.3;
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vpnx-assistant-chip:hover,
.vpnx-assistant-chip:focus-visible {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(56, 189, 248, 0.42);
  color: #fff;
  outline: none;
}

/* ---------- Typing indicator ---------- */
.vpnx-assistant-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--va-bubble-bot);
  border: 1px solid var(--va-bubble-bot-stroke);
  border-bottom-left-radius: 5px;
}

.vpnx-assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--va-muted);
  opacity: 0.5;
  animation: vpnxAssistantDot 1.2s ease-in-out infinite;
}

.vpnx-assistant-typing span:nth-child(2) { animation-delay: 0.16s; }
.vpnx-assistant-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes vpnxAssistantDot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Footer ---------- */
.vpnx-assistant-footer {
  padding: 12px 14px 13px;
  border-top: 1px solid var(--va-stroke);
  background: var(--va-surface);
}

.vpnx-assistant-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 5px 5px 5px 7px;
  border-radius: 12px;
  border: 1px solid var(--va-stroke-strong);
  background: var(--va-field);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vpnx-assistant-form:focus-within {
  border-color: rgba(37, 99, 235, 0.6);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.vpnx-assistant-input {
  flex: 1;
  /* One row by default; assistant.js grows it as the message wraps, capped at
     roughly five lines. Multiples of the base size, not fixed pixels, so the
     box keeps its line count as the font scales up. */
  min-height: calc(var(--va-fs) * 2.2);
  max-height: calc(var(--va-fs) * 7.25);
  resize: none;
  border: none;
  background: transparent;
  color: var(--va-text);
  padding: 8px 4px;
  font: inherit;
  font-size: calc(var(--va-fs) * 0.85);
  line-height: 1.45;
  overflow-y: auto;
  scrollbar-width: none;
}

.vpnx-assistant-input::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.vpnx-assistant-input::placeholder { color: var(--va-faint); }
.vpnx-assistant-input:focus { outline: none; }

.vpnx-assistant-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  color: #fff;
  background: var(--va-brand);
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.vpnx-assistant-send svg {
  width: 18px;
  height: 18px;
}

.vpnx-assistant-send:hover:not(:disabled),
.vpnx-assistant-send:focus-visible:not(:disabled) {
  background: var(--va-brand-hover);
  outline: none;
}

.vpnx-assistant-send:active:not(:disabled) {
  transform: scale(0.95);
}

.vpnx-assistant-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vpnx-assistant-hint {
  margin: 9px 2px 0;
  font-size: calc(var(--va-fs) * 0.66);
  color: var(--va-faint);
  line-height: 1.5;
  text-align: center;
}

/* ---------- Light theme ----------
   The panel used to stay dark navy on the site's Light theme, which looked like
   a leftover from another site. These re-point the same tokens. */
html[data-theme='bright'] .vpnx-assistant {
  --va-text: #0f172a;
  --va-muted: #475569;
  --va-faint: #64748b;
  --va-stroke: rgba(15, 23, 42, 0.09);
  --va-stroke-strong: rgba(15, 23, 42, 0.14);
  --va-panel: #ffffff;
  --va-surface: rgba(15, 23, 42, 0.025);
  --va-bubble-bot: rgba(15, 23, 42, 0.04);
  --va-bubble-bot-stroke: rgba(15, 23, 42, 0.08);
  --va-field: #ffffff;
  --va-shadow: 0 24px 60px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
}

html[data-theme='bright'] .vpnx-assistant-header {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.07), rgba(37, 99, 235, 0)),
    var(--va-surface);
}

html[data-theme='bright'] .vpnx-assistant-avatar {
  color: #0b3f8f;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(6, 182, 212, 0.14));
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: none;
}

html[data-theme='bright'] .vpnx-assistant-badge {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
}

html[data-theme='bright'] .vpnx-assistant-online {
  color: #15803d;
}

html[data-theme='bright'] .vpnx-assistant-msg.is-bot {
  color: #1e293b;
}

/* theme-toggle.css restyles every <p> on the light theme, which reaches into
   the widget footer — keep the hint on the widget's own token. */
html[data-theme='bright'] .vpnx-assistant .vpnx-assistant-hint {
  color: var(--va-faint);
}

html[data-theme='bright'] .vpnx-assistant-chip {
  color: #334155;
}

html[data-theme='bright'] .vpnx-assistant-chip:hover,
html[data-theme='bright'] .vpnx-assistant-chip:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.35);
  color: #0f172a;
}

html[data-theme='bright'] .vpnx-assistant-close:hover,
html[data-theme='bright'] .vpnx-assistant-close:focus-visible {
  background: rgba(15, 23, 42, 0.06);
}

html[data-theme='bright'] .vpnx-assistant-messages {
  scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}

html[data-theme='bright'] .vpnx-assistant-messages::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .vpnx-assistant {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Grow the panel upward from the widget's bottom-right corner. Using dvh
     (dynamic viewport height) keeps it inside the visible area even while the
     mobile browser toolbar shows/hides, and the cap stops it from covering the
     whole screen. */
  .vpnx-assistant-panel {
    width: calc(100vw - 24px);
    height: min(70dvh, 560px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vpnx-assistant-panel,
  .vpnx-assistant-launcher,
  .vpnx-assistant-launcher-ring,
  .vpnx-assistant-msg,
  .vpnx-assistant-suggestions,
  .vpnx-assistant-typing span {
    transition: none !important;
    animation: none !important;
  }
}