/* ==========================================================
   vStacks AI Chatbot — Frontend CSS
   Every visual value is a CSS custom property.
   Admin settings write these via chatbot.js at runtime.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* -- Token defaults (all overridden at runtime by JS) -- */
#vs-chatbot {
  --vc-primary:       #2563eb;
  --vc-primary-dark:  #1d4ed8;
  --vc-primary-rgb:   37,99,235;
  --vc-win-bg:        #ffffff;
  --vc-win-bg-rgb:    255,255,255;
  --vc-surface:       #f8fafc;
  --vc-border:        #e8edf5;
  --vc-win-shadow:    0 24px 64px rgba(0,0,0,0.11), 0 8px 24px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  --vc-header-from:   #2563eb;
  --vc-header-to:     #1d4ed8;
  --vc-header-text:   #ffffff;
  --vc-user-bg:       #2563eb;
  --vc-user-text:     #ffffff;
  --vc-bot-bg:        #f1f5f9;
  --vc-bot-text:      #0f172a;
  --vc-bot-border:    rgba(0,0,0,0.05);
  --vc-input-bg:      #f8fafc;
  --vc-input-bdr:     #e2e8f0;
  --vc-input-text:    #0f172a;
  --vc-input-ph:      #94a3b8;
  --vc-text:          #0f172a;
  --vc-text-muted:    #64748b;
  --vc-qr-bg:         rgba(37,99,235,0.07);
  --vc-qr-bdr:        rgba(37,99,235,0.24);
  --vc-qr-text:       #2563eb;
  --vc-win-w:         384px;
  --vc-win-h:         560px;
  --vc-win-r:         20px;
  --vc-msg-r:         16px;
  --vc-launch-sz:     58px;
  --vc-btn-sz:        38px;
  --vc-btn-r:         50%;
  --vc-font-sz:       14px;
  --vc-font:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vc-launch-shadow: 0 6px 24px rgba(37,99,235,0.42), 0 2px 6px rgba(0,0,0,0.1);
  --vc-dur:           280ms;
  --vc-spring:        cubic-bezier(0.34,1.56,0.64,1);
  --vc-ease:          cubic-bezier(0.16,1,0.3,1);
}

/* -- Dark mode -- */
#vs-chatbot.vs-dark {
  --vc-win-bg:       #0f172a;
  --vc-win-bg-rgb:   15,23,42;
  --vc-surface:      #1e293b;
  --vc-border:       #1e293b;
  --vc-bot-bg:       #1e293b;
  --vc-bot-text:     #e2e8f0;
  --vc-bot-border:   rgba(255,255,255,0.055);
  --vc-input-bg:     #1e293b;
  --vc-input-bdr:    #334155;
  --vc-input-text:   #e2e8f0;
  --vc-input-ph:     #475569;
  --vc-text:         #e2e8f0;
  --vc-text-muted:   #64748b;
  --vc-qr-bg:        rgba(37,99,235,0.14);
  --vc-qr-bdr:       rgba(37,99,235,0.3);
  --vc-win-shadow:   0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

/* -- Scoped reset -- */
#vs-chatbot *, #vs-chatbot *::before, #vs-chatbot *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* -- Root wrapper -- */
#vs-chatbot {
  position: fixed;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: var(--vc-font);
  font-size: var(--vc-font-sz);
  bottom: 24px;
  right: 24px;
  pointer-events: none;
}
#vs-chatbot > * { pointer-events: all; }
#vs-chatbot.vc-pos-left { right: auto; left: 24px; align-items: flex-start; }

/* ==========================================================
   LAUNCHER
   ========================================================== */
#vc-launcher {
  width: var(--vc-launch-sz);
  height: var(--vc-launch-sz);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vc-primary), var(--vc-primary-dark));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: var(--vc-launch-shadow);
  transition: transform var(--vc-dur) var(--vc-spring), box-shadow var(--vc-dur) var(--vc-ease);
  flex-shrink: 0; outline: none;
}
#vc-launcher:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--vc-primary-rgb),0.52), 0 4px 10px rgba(0,0,0,0.12);
}
#vc-launcher:active { transform: scale(0.93); transition-duration: 80ms; }

.vc-li {
  position: absolute; display: flex;
  align-items: center; justify-content: center;
  transition: opacity var(--vc-dur) var(--vc-ease), transform var(--vc-dur) var(--vc-spring);
}
.vc-li-chat  { opacity: 1; transform: scale(1) rotate(0deg); }
.vc-li-close { opacity: 0; transform: scale(0.4) rotate(-90deg); }
#vc-launcher.vc-open .vc-li-chat  { opacity: 0; transform: scale(0.4) rotate(90deg); }
#vc-launcher.vc-open .vc-li-close { opacity: 1; transform: scale(1) rotate(0deg); }

#vc-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 100px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--vc-win-bg);
  animation: vcBadge 0.35s var(--vc-spring) both;
}
@keyframes vcBadge {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ==========================================================
   CHAT WINDOW
   ========================================================== */
#vc-window {
  width: var(--vc-win-w);
  height: var(--vc-win-h);
  background: var(--vc-win-bg);
  border-radius: var(--vc-win-r);
  box-shadow: var(--vc-win-shadow);
  border: 1px solid var(--vc-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transition: opacity var(--vc-dur) var(--vc-ease), transform var(--vc-dur) var(--vc-spring);
  will-change: transform, opacity;
}
#vs-chatbot.vc-pos-left #vc-window { transform-origin: bottom left; }
#vc-window.vc-hidden {
  opacity: 0;
  transform: scale(0.88) translateY(16px);
  pointer-events: none;
}

/* ==========================================================
   HEADER
   ========================================================== */
#vc-header {
  background: linear-gradient(135deg, var(--vc-header-from) 0%, var(--vc-header-to) 100%);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; position: relative; overflow: hidden;
}
#vc-header::before {
  content: ''; position: absolute;
  width: 130px; height: 130px;
  background: rgba(255,255,255,0.07); border-radius: 50%;
  top: -48px; right: -24px; pointer-events: none;
}
#vc-header::after {
  content: ''; position: absolute;
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.05); border-radius: 50%;
  bottom: -32px; right: 60px; pointer-events: none;
}
.vc-hdr-left { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
#vc-hdr-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; overflow: hidden;
}
#vc-hdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vc-hdr-name {
  font-size: 15px; font-weight: 700;
  color: var(--vc-header-text);
  letter-spacing: -0.02em; line-height: 1.1;
}
.vc-hdr-sub {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,0.72); margin-top: 3px;
}
.vc-dot {
  width: 7px; height: 7px; background: #4ade80;
  border-radius: 50%; flex-shrink: 0;
  animation: vcDot 2.5s ease infinite;
}
@keyframes vcDot {
  0%,100% { box-shadow: 0 0 0 0   rgba(74,222,128,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0);    }
}
.vc-hdr-actions { display: flex; gap: 4px; position: relative; z-index: 1; }
.vc-hbtn {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.14); border: none; border-radius: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9); outline: none;
  transition: background var(--vc-dur) var(--vc-ease), transform 0.14s var(--vc-spring);
}
.vc-hbtn:hover  { background: rgba(255,255,255,0.28); transform: scale(1.08); }
.vc-hbtn:active { transform: scale(0.9); transition-duration: 60ms; }
.vc-hbtn svg { display: block; }

/* ==========================================================
   MESSAGES
   ========================================================== */
#vc-messages {
  flex: 1; overflow-y: auto;
  padding: 18px 14px 10px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--vc-win-bg);
  scroll-behavior: smooth; overscroll-behavior: contain;
}
#vc-messages::-webkit-scrollbar { width: 3px; }
#vc-messages::-webkit-scrollbar-track { background: transparent; }
#vc-messages::-webkit-scrollbar-thumb {
  background: rgba(var(--vc-primary-rgb),0.2); border-radius: 3px;
}
.vc-sep {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500;
  color: var(--vc-text-muted); margin: 2px 0;
}
.vc-sep::before, .vc-sep::after {
  content: ''; flex: 1; height: 1px;
  background: currentColor; opacity: 0.15;
}
.vc-row {
  display: flex; align-items: flex-end; gap: 8px;
  animation: vcMsgIn var(--vc-dur) var(--vc-spring) both;
}
@keyframes vcMsgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vc-row-user { flex-direction: row-reverse; }
.vc-mav {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(var(--vc-primary-rgb),0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; overflow: hidden;
}
.vc-mav img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vc-row-user .vc-mav {
  background: var(--vc-primary); color: #fff;
  font-size: 10px; font-weight: 700;
}
.vc-bgroup { display: flex; flex-direction: column; gap: 3px; max-width: calc(var(--vc-win-w) - 100px); }
.vc-row-user .vc-bgroup { align-items: flex-end; }
.vc-src {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
  background: rgba(var(--vc-primary-rgb),0.1); color: var(--vc-primary);
  width: fit-content; margin-bottom: 1px;
}
#vs-chatbot .vc-bubble {
  padding: 12px 16px !important;
  border-radius: var(--vc-msg-r) !important;
  font-size: var(--vc-font-sz);
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
}
#vs-chatbot .vc-row-bot .vc-bubble {
  background: var(--vc-bot-bg) !important;
  color: var(--vc-bot-text) !important;
  border: 1px solid var(--vc-bot-border) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
#vs-chatbot .vc-row-user .vc-bubble {
  background: var(--vc-user-bg) !important;
  color: var(--vc-user-text) !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 4px 14px rgba(var(--vc-primary-rgb),0.28) !important;
}
.vc-bubble a { color: inherit; opacity: 0.85; text-decoration: underline; text-underline-offset: 2px; }
.vc-bubble strong { font-weight: 600; }
.vc-ts { font-size: 10px; color: var(--vc-text-muted); padding: 0 4px; }

/* ==========================================================
   TYPING INDICATOR
   ========================================================== */
.vc-typing-row {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 0 14px 6px;
  animation: vcMsgIn 0.2s var(--vc-ease) both;
}
.vc-typing-bub {
  background: var(--vc-bot-bg); border: 1px solid var(--vc-bot-border);
  border-radius: var(--vc-msg-r); border-bottom-left-radius: 4px;
  padding: 11px 15px; display: flex; gap: 5px; align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.vc-typing-bub span {
  width: 7px; height: 7px; background: var(--vc-text-muted);
  border-radius: 50%; animation: vcTyping 1.4s ease infinite;
}
.vc-typing-bub span:nth-child(2) { animation-delay: 0.18s; }
.vc-typing-bub span:nth-child(3) { animation-delay: 0.36s; }
@keyframes vcTyping {
  0%,60%,100% { transform: translateY(0);    opacity: 0.3; }
  30%          { transform: translateY(-5px); opacity: 1;   }
}

/* ==========================================================
   QUICK REPLIES
   ========================================================== */
#vc-qr {
  padding: 10px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--vc-win-bg);
  border-top: 1px solid var(--vc-border);
  flex-shrink: 0;
  max-height: 112px;
  overflow-y: auto;
  scrollbar-width: none;
}
#vc-qr::-webkit-scrollbar { display: none; }
#vc-qr:empty { display: none; padding: 0; border: none; }

.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--vc-qr-bdr);
  background: var(--vc-qr-bg);
  color: var(--vc-qr-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--vc-font);
  line-height: 1;
  transition:
    background var(--vc-dur) var(--vc-ease),
    color var(--vc-dur) var(--vc-ease),
    border-color var(--vc-dur) var(--vc-ease),
    transform 0.16s var(--vc-spring),
    box-shadow 0.16s var(--vc-ease);
}
.vc-chip .vc-chip-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.vc-chip:hover {
  background: var(--vc-primary);
  color: #fff;
  border-color: var(--vc-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(var(--vc-primary-rgb),0.35);
}
.vc-chip:active { transform: translateY(0); transition-duration: 60ms; }

/* ==========================================================
   INPUT AREA
   ========================================================== */
#vc-input-area {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--vc-win-bg);
  border-top: 1px solid var(--vc-border); flex-shrink: 0;
}
#vc-input {
  flex: 1; padding: 11px 16px; border-radius: 22px;
  border: 1.5px solid var(--vc-input-bdr);
  background: var(--vc-input-bg); color: var(--vc-input-text);
  font-family: var(--vc-font); font-size: var(--vc-font-sz);
  resize: none; max-height: 96px; overflow-y: auto;
  outline: none; line-height: 1.5; scrollbar-width: none;
  transition: border-color var(--vc-dur) var(--vc-ease), box-shadow var(--vc-dur) var(--vc-ease);
}
#vc-input::-webkit-scrollbar { display: none; }
#vc-input::placeholder { color: var(--vc-input-ph); }
#vc-input:focus {
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 3px rgba(var(--vc-primary-rgb),0.14);
}
.vc-abtn {
  width: var(--vc-btn-sz); height: var(--vc-btn-sz);
  border-radius: var(--vc-btn-r); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; outline: none;
  transition: transform 0.18s var(--vc-spring), background 0.18s var(--vc-ease),
    color 0.18s var(--vc-ease), box-shadow 0.18s var(--vc-ease);
}
.vc-abtn:active { transform: scale(0.88) !important; transition-duration: 70ms !important; }
.vc-ghost { background: transparent; color: #64748b; border: 1.5px solid transparent; }
.vc-ghost svg { display: block; color: inherit; }
.vc-ghost:hover {
  background: rgba(var(--vc-primary-rgb),0.1); color: var(--vc-primary);
  border-color: rgba(var(--vc-primary-rgb),0.2); transform: scale(1.1);
}
#vc-send {
  background: var(--vc-primary); color: #fff;
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(var(--vc-primary-rgb),0.38);
}
#vc-send:hover {
  background: var(--vc-primary-dark);
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--vc-primary-rgb),0.48);
}

/* ==========================================================
   FOOTER
   ========================================================== */
#vc-footer {
  text-align: center; font-size: 10px;
  color: var(--vc-text-muted);
  padding: 5px 0 8px; background: var(--vc-win-bg);
  border-top: 1px solid var(--vc-border); flex-shrink: 0;
}
#vc-footer a { color: var(--vc-primary); text-decoration: none; font-weight: 600; }

/* -- Animations disabled -- */
#vs-chatbot.vc-no-anim *, #vs-chatbot.vc-no-anim *::before, #vs-chatbot.vc-no-anim *::after {
  animation-duration: 1ms !important; transition-duration: 1ms !important;
}

/* -- Responsive -- */
@media (max-width: 440px) {
  #vs-chatbot { bottom: 16px !important; right: 12px !important; left: 12px !important; }
  #vc-window { --vc-win-w: calc(100vw - 24px) !important; --vc-win-h: calc(100svh - 90px) !important; --vc-win-r: 16px !important; }
}

/* ================================================================
   DARK MODE — direct element overrides
   These rules ensure dark mode always wins even when JS injects
   inline CSS custom property values from admin color settings.
   ================================================================ */
#vs-chatbot.vs-dark #vc-messages {
  background: #0f172a;
}
#vs-chatbot.vs-dark .vc-row-bot .vc-bubble {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.07) !important;
}
#vs-chatbot.vs-dark #vc-input {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
#vs-chatbot.vs-dark #vc-input::placeholder {
  color: #475569 !important;
}
#vs-chatbot.vs-dark #vc-input:focus {
  border-color: var(--vc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--vc-primary-rgb),0.18) !important;
}
#vs-chatbot.vs-dark #vc-qr {
  background: #0f172a;
  border-top-color: #1e293b;
}
#vs-chatbot.vs-dark #vc-input-area {
  background: #0f172a;
  border-top-color: #1e293b;
}
#vs-chatbot.vs-dark #vc-footer {
  background: #0f172a;
  border-top-color: #1e293b;
  color: #64748b;
}
#vs-chatbot.vs-dark .vc-sep {
  color: #475569;
}
#vs-chatbot.vs-dark .vc-typing-bub {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.07) !important;
}
/* Window border in dark */
#vs-chatbot.vs-dark #vc-window {
  border-color: #1e293b;
  background: #0f172a;
}
/* Bot message avatar background in dark */
#vs-chatbot.vs-dark .vc-row-bot .vc-mav {
  background: rgba(99,102,241,0.18);
}
/* Timestamps in dark */
#vs-chatbot.vs-dark .vc-ts {
  color: #475569;
}
/* Quick reply chip border/bg in dark uses CSS vars which are set correctly */
#vs-chatbot.vs-dark .vc-chip {
  border-color: rgba(99,102,241,0.3);
  background: rgba(99,102,241,0.14);
}
/* Ghost buttons in dark */
#vs-chatbot.vs-dark .vc-ghost {
  color: #94a3b8;
}
#vs-chatbot.vs-dark .vc-ghost:hover {
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  border-color: rgba(99,102,241,0.25);
}
/* Scrollbar in dark */
#vs-chatbot.vs-dark #vc-messages::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.25);
}
/* Badge border matches dark window bg */
#vs-chatbot.vs-dark #vc-badge {
  border-color: #0f172a;
}

/* ================================================================
   LEAD CAPTURE FORM CARD
   ================================================================ */
.vc-bubble-form {
  padding: 12px 14px !important;
  max-width: 100% !important;
}

.vc-form-intro {
  font-size: var(--vc-font-sz);
  color: var(--vc-bot-text);
  margin-bottom: 12px;
  line-height: 1.6;
}

.vc-form-card {
  background: rgba(var(--vc-primary-rgb), 0.04);
  border: 1px solid rgba(var(--vc-primary-rgb), 0.14);
  border-radius: 16px;
  margin-top: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vc-field {
  width: 100%;
  padding: 11px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--vc-input-bdr);
  background: var(--vc-win-bg);
  color: var(--vc-input-text);
  font-size: 13.5px;
  font-family: var(--vc-font);
  outline: none;
  transition: border-color var(--vc-dur) var(--vc-ease), box-shadow var(--vc-dur) var(--vc-ease);
  box-sizing: border-box;
  display: block;
  -webkit-appearance: none;
}
.vc-field::placeholder { color: var(--vc-input-ph); }
.vc-field:focus {
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 3px rgba(var(--vc-primary-rgb), 0.13);
}
.vc-field.vc-field-err {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.14);
}

.vc-form-error {
  font-size: 11.5px;
  color: #ef4444;
  padding: 6px 10px;
  background: rgba(239,68,68,0.07);
  border-radius: 8px;
}

.vc-form-submit {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: var(--vc-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--vc-font);
  margin-top: 3px;
  transition: background var(--vc-dur) var(--vc-ease), transform 0.15s var(--vc-spring), box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(var(--vc-primary-rgb), 0.38);
  letter-spacing: 0.01em;
}
.vc-form-submit:hover {
  background: var(--vc-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--vc-primary-rgb), 0.45);
}
.vc-form-submit:active { transform: translateY(0); }
.vc-form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* Admin reply bubble in frontend */
/* Admin reply: left-aligned like bot, distinct purple */
.vc-bubble-admin {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff !important;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 14px rgba(109,40,217,0.28);
}
.vc-bubble-admin a { color: rgba(255,255,255,0.88); }
.vc-mav-admin {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #fff;
  font-size: 14px !important;
}

/* Dark mode: form card */
#vs-chatbot.vs-dark .vc-form-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
#vs-chatbot.vs-dark .vc-field {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
#vs-chatbot.vs-dark .vc-field::placeholder { color: #475569 !important; }
#vs-chatbot.vs-dark .vc-field:focus {
  border-color: var(--vc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--vc-primary-rgb), 0.18) !important;
}
#vs-chatbot.vs-dark .vc-form-intro { color: #e2e8f0; }

/* Sender name label above bot bubbles */
.vc-sender-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--vc-primary);
  letter-spacing: 0.04em;
  padding: 0 3px;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.vc-sender-admin { color: #7c3aed; }

/* Mic active state — pulsing red to indicate recording */
#vc-mic.vc-mic-active {
  background: rgba(239,68,68,0.12) !important;
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.3) !important;
  animation: vcMicPulse 1s ease infinite;
}
@keyframes vcMicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Dark mode: sender name */
#vs-chatbot.vs-dark .vc-sender-name { color: #93c5fd; }
#vs-chatbot.vs-dark .vc-sender-admin { color: #c4b5fd; }