/* ================================================================
   Valderrama Connect Widget  |  v5.0.0
   ----------------------------------------------------------------
   ARCHITECTURE  : View-switching (not accordion). Panel = fixed
                   height. Tile grid "slides out", form "slides in".
                   Form content scrolls internally — panel never grows.
   UX PATTERN    : Intercom / Drift / HubSpot floating widget model.
   MOBILE        : Panel is viewport-fixed (not FAB-relative on sm).
   DRY           : Single token block, var() cross-refs, @layer.
   NAMESPACE     : #vc-widget, .vc-is-* state classes.
   ================================================================ */

@layer vc-widget {

/* ── 1. Tokens ──────────────────────────────────────────────────── */
#vc-widget {
  /* brand */
  --vc-primary:        #1B2E5E;
  --vc-primary-dark:   #111C3A;
  --vc-primary-rgb:    27, 46, 94;
  --vc-accent:         #F5C518;
  --vc-accent-rgb:     245, 197, 24;

  /* surfaces */
  --vc-surface:        #FFFFFF;
  --vc-surface-alt:    #F4F6FB;
  --vc-border:         rgba(var(--vc-primary-rgb), 0.11);

  /* text — all reference tokens, no duplicate raw values */
  --vc-text:           var(--vc-primary);
  --vc-muted:          #6B7A99;
  --vc-white:          #FFFFFF;

  /* tile fills */
  --vc-tile-call:      var(--vc-primary);
  --vc-tile-sms:       #243F80;
  --vc-tile-email:     #1a4070;
  --vc-tile-quote:     var(--vc-accent);
  --vc-tile-quote-fg:  var(--vc-primary);

  /* shadows */
  --vc-shadow-fab:     0 4px 20px rgba(var(--vc-primary-rgb), 0.44);
  --vc-shadow-panel:   0 20px 64px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  --vc-shadow-focus:   0 0 0 3px rgba(var(--vc-primary-rgb), 0.18);

  /* radii */
  --vc-r-fab:          50%;
  --vc-r-panel:        20px;
  --vc-r-tile:         14px;
  --vc-r-input:        8px;
  --vc-r-btn:          9px;

  /* spacing */
  --vc-space-2xs:      4px;
  --vc-space-xs:       6px;
  --vc-space-s:        10px;
  --vc-space-m:        16px;
  --vc-space-l:        24px;

  /* panel dimensions — FIXED, never grow */
  --vc-fab-size:       60px;
  --vc-panel-w:        340px;
  --vc-panel-h:        520px;   /* fixed height — form scrolls inside */

  /* easing */
  --vc-ease:   cubic-bezier(0.22, 1.00, 0.36, 1.00);
  --vc-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);

  /* typography */
  --vc-font:   -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ── Root containment ── */
  position:    fixed !important;
  bottom:      var(--vc-space-l) !important;
  right:       var(--vc-space-l) !important;
  z-index:     999999 !important;
  width:       var(--vc-fab-size) !important;
  margin:      0 !important;
  padding:     0 !important;
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  font-family: var(--vc-font);
  font-size:   15px;
  line-height: 1.4;
  color:       var(--vc-text);
}

#vc-widget *,
#vc-widget *::before,
#vc-widget *::after {
  box-sizing: border-box !important;
}

/* Shared appearance reset */
#vc-trigger,
#vc-panel .vc-tile,
#vc-panel .vc-back-btn,
#vc-widget .vc-pane input,
#vc-widget .vc-pane select,
#vc-widget .vc-pane textarea,
#vc-widget .vc-pane button[type="submit"],
#vc-widget .vc-pane .wsf-button[type="submit"],
#vc-widget .vc-pane input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
}

/* ── 2. FAB ─────────────────────────────────────────────────────── */
#vc-trigger {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  position:        relative !important;
  width:           var(--vc-fab-size) !important;
  height:          var(--vc-fab-size) !important;
  border-radius:   var(--vc-r-fab);
  background:      var(--vc-primary);
  border:          none;
  outline:         none;
  padding:         0;
  margin:          0 0 0 auto;
  cursor:          pointer;
  box-shadow:      var(--vc-shadow-fab);
  color:           transparent;
  text-decoration: none;
  transition:      transform .20s var(--vc-ease), box-shadow .20s ease;
}

#vc-trigger:hover {
  transform:  scale(1.08);
  box-shadow: 0 6px 28px rgba(var(--vc-primary-rgb), .55);
}

#vc-trigger:focus-visible {
  outline:        3px solid var(--vc-accent);
  outline-offset: 3px;
}

/* pulse ring */
#vc-trigger::before {
  content:       '';
  position:      absolute;
  inset:         -4px;
  border-radius: 50%;
  border:        2px solid var(--vc-accent);
  opacity:       0;
  pointer-events: none;
  animation:     vc-pulse 2.4s ease-out infinite;
}

@keyframes vc-pulse {
  0%   { opacity: .75; transform: scale(1);    }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

#vc-widget.vc-is-open #vc-trigger::before { animation: none; }

/* icon swap */
#vc-widget .vc-icon--open,
#vc-widget .vc-icon--close {
  position:        absolute;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  pointer-events:  none;
  transition:      opacity .20s ease, transform .25s var(--vc-spring);
}

#vc-widget .vc-icon--close             { opacity: 0; transform: rotate(-90deg) scale(.6); }
#vc-widget.vc-is-open .vc-icon--open   { opacity: 0; transform: rotate(90deg) scale(.6); }
#vc-widget.vc-is-open .vc-icon--close  { opacity: 1; transform: none; }

/* ── 3. Panel — FIXED HEIGHT, never grows ───────────────────────── */
#vc-panel {
  display:         block !important;
  position:        absolute !important;
  bottom:          calc(var(--vc-fab-size) + 12px) !important;
  right:           0 !important;
  width:           var(--vc-panel-w) !important;
  max-width:       calc(100vw - var(--vc-space-l) - var(--vc-space-m)) !important;

  /* FIXED height — the key architectural decision */
  height:          var(--vc-panel-h) !important;
  max-height:      calc(100vh - var(--vc-fab-size) - 60px) !important;

  background:      var(--vc-surface);
  border-radius:   var(--vc-r-panel);
  box-shadow:      var(--vc-shadow-panel);

  /* panel clips all children */
  overflow:        hidden !important;

  margin:          0;
  padding:         0;
  border:          none;
  color:           var(--vc-text);
  list-style:      none;

  /* closed state */
  transform:       translateY(16px) scale(.95);
  transform-origin: bottom right;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .26s var(--vc-ease), transform .32s var(--vc-spring);
}

#vc-widget.vc-is-open #vc-panel {
  transform:     translateY(0) scale(1);
  opacity:       1;
  pointer-events: auto;
}

/* ── 4. View container — clips and slides screens ───────────────── */
/* The view container fills the panel and is the slide stage */
#vc-panel .vc-views {
  position:  relative !important;
  width:     100% !important;
  height:    100% !important;
  overflow:  hidden !important;
}

/* ── 5. Individual screens ──────────────────────────────────────── */
/* Both screens are absolutely positioned, full size */
#vc-panel .vc-screen {
  position:  absolute !important;
  inset:     0 !important;
  width:     100% !important;
  height:    100% !important;
  display:   flex !important;
  flex-direction: column !important;
  overflow:  hidden !important;
  transition: transform .30s var(--vc-ease), opacity .25s ease !important;
}

/* HOME screen — default visible */
#vc-panel .vc-screen--home {
  transform: translateX(0);
  opacity:   1;
  z-index:   2;
}

/* HOME screen when a form is active — slide left out */
#vc-panel.vc-form-open .vc-screen--home {
  transform: translateX(-100%);
  opacity:   0;
  pointer-events: none;
}

/* FORM screen — default hidden (right) */
#vc-panel .vc-screen--form {
  transform: translateX(100%);
  opacity:   0;
  z-index:   1;
  pointer-events: none;
}

/* FORM screen when active — slide in */
#vc-panel.vc-form-open .vc-screen--form {
  transform:     translateX(0);
  opacity:       1;
  z-index:       2;
  pointer-events: auto;
}

/* ── 6. Header (shared between screens) ─────────────────────────── */
#vc-panel .vc-header {
  flex-shrink: 0;
  background:  var(--vc-primary);
  padding:     var(--vc-space-m) var(--vc-space-m) 14px;
}

#vc-panel .vc-logo-wrap {
  display:       block;
  margin-bottom: 0;
}

#vc-panel .vc-logo {
  display:          block;
  height:           32px;
  width:            auto;
  max-width:        160px;
  object-fit:       contain;
  object-position:  left center;
  margin-bottom:    12px;
  filter:           brightness(0) invert(1);
  border:           none;
}

#vc-panel .vc-greeting {
  color:          var(--vc-white);
  font-size:      19px;
  font-weight:    800;
  letter-spacing: -.3px;
  margin:         0 0 4px;
  line-height:    1.2;
  background:     transparent;
  border:         none;
  text-align:     left;
}

#vc-panel .vc-status {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   12px;
  color:       rgba(255,255,255,.65);
  margin:      0;
}

#vc-panel .vc-status-dot {
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #34D399;
  box-shadow:    0 0 0 2px rgba(52,211,153,.25);
  flex-shrink:   0;
  animation:     vc-blink 2.2s ease-in-out infinite;
}

@keyframes vc-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── 7. 2×2 Tile grid ───────────────────────────────────────────── */
#vc-panel .vc-grid {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows:    1fr 1fr !important;
  gap:                   8px !important;
  padding:               var(--vc-space-m) !important;
  flex:                  1 1 auto !important;
  min-height:            0 !important;
  margin:                0;
  list-style:            none;
}

/* ── 8. Tiles ───────────────────────────────────────────────────── */
#vc-panel .vc-tile {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;

  gap:             7px;
  padding:         18px 10px 16px;
  margin:          0;
  width:           100%;
  height:          100% !important;
  min-height:      0 !important;
  border-radius:   var(--vc-r-tile);
  border:          2px solid transparent;
  outline:         none;
  cursor:          pointer;
  text-align:      center;
  text-decoration: none;
  white-space:     normal;
  position:        relative;
  overflow:        hidden;
  transition:      transform .16s var(--vc-ease), box-shadow .16s ease, filter .16s ease;
}

#vc-panel .vc-tile:hover  { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); filter: brightness(1.07); }
#vc-panel .vc-tile:active { transform: translateY(0);    box-shadow: none;                        filter: brightness(.93); }
#vc-panel .vc-tile:focus-visible { outline: 3px solid var(--vc-accent); outline-offset: 2px; }

/* tile colors */
#vc-panel .vc-tile--call  { background: var(--vc-tile-call);  color: var(--vc-white); }
#vc-panel .vc-tile--sms   { background: var(--vc-tile-sms);   color: var(--vc-white); }
#vc-panel .vc-tile--email { background: var(--vc-tile-email); color: var(--vc-white); }
#vc-panel .vc-tile--quote { background: var(--vc-tile-quote); color: var(--vc-tile-quote-fg); }

/* icon circle */
#vc-panel .vc-tile-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(255,255,255,.15);
  flex-shrink:     0;
  border:          none;
  transition:      background .16s ease;
}

#vc-panel .vc-tile--quote .vc-tile-icon   { background: rgba(var(--vc-primary-rgb), .12); }
#vc-panel .vc-tile-icon svg               { display: block; flex-shrink: 0; }

#vc-panel .vc-tile-label {
  display:     block;
  font-size:   13px;
  font-weight: 700;
  line-height: 1.2;
  color:       var(--vc-white);
}

#vc-panel .vc-tile--quote .vc-tile-label { color: var(--vc-tile-quote-fg); }

#vc-panel .vc-tile-sub {
  display:     block;
  font-size:   10.5px;
  line-height: 1.2;
  color:       rgba(255,255,255,.6);
}

#vc-panel .vc-tile--quote .vc-tile-sub { color: rgba(var(--vc-primary-rgb), .5); }

/* ── 9. Home screen footer ──────────────────────────────────────── */
#vc-panel .vc-footer {
  text-align:  center;
  padding:     var(--vc-space-xs) var(--vc-space-m) var(--vc-space-s);
  font-size:   11px;
  color:       var(--vc-muted);
  border-top:  1px solid var(--vc-border);
  flex-shrink: 0;
}

#vc-panel .vc-footer a { color: var(--vc-muted); text-decoration: none; }
#vc-panel .vc-footer a:hover { text-decoration: underline; }

/* ── 9b. Chat strip (below grid, above footer on home screen) ───── */
#vc-panel .vc-chat-strip {
  flex-shrink:  0;
  display:      flex !important;
  align-items:  center !important;
  gap:          8px;
  padding:      var(--vc-space-s) var(--vc-space-m);
  border-top:   1px solid var(--vc-border);
  background:   var(--vc-surface-alt);
}

#vc-panel .vc-chat-strip-input {
  flex:          1;
  height:        36px;
  padding:       0 12px;
  border:        1.5px solid var(--vc-border);
  border-radius: 18px;
  font-size:     13px;
  font-family:   var(--vc-font);
  color:         var(--vc-text);
  background:    var(--vc-surface);
  outline:       none;
  transition:    border-color .16s ease;
  /* prevent browser default sizing */
  appearance:    none;
  -webkit-appearance: none;
  display:       block;
  width:         auto !important;
}

#vc-panel .vc-chat-strip-input::placeholder { color: var(--vc-muted); }
#vc-panel .vc-chat-strip-input:focus-visible { border-color: var(--vc-primary); }

#vc-panel .vc-chat-strip-send {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--vc-primary);
  border:          none;
  cursor:          pointer;
  flex-shrink:     0;
  color:           var(--vc-white);
  transition:      background .16s ease, transform .16s ease;
  padding:         0;
  appearance:      none;
  -webkit-appearance: none;
}

#vc-panel .vc-chat-strip-send:hover   { background: var(--vc-primary-dark); transform: scale(1.06); }
#vc-panel .vc-chat-strip-send:active  { transform: scale(.96); }
#vc-panel .vc-chat-strip-send:focus-visible { outline: 3px solid var(--vc-accent); outline-offset: 2px; }
#vc-panel .vc-chat-strip-send:disabled { background: var(--vc-muted); cursor: not-allowed; transform: none; }

/* ── 10. Form screen ────────────────────────────────────────────── */

/* Form screen header — slim bar with back button */
#vc-panel .vc-form-header {
  display:     flex !important;
  align-items: center !important;
  gap:         8px;
  flex-shrink: 0;
  background:  var(--vc-primary);
  padding:     12px var(--vc-space-m);
  min-height:  52px;
}

/* Back button */
#vc-panel .vc-back-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      rgba(255,255,255,.15);
  border:          none;
  cursor:          pointer;
  flex-shrink:     0;
  color:           var(--vc-white);
  transition:      background .16s ease;
  padding:         0;
}

#vc-panel .vc-back-btn:hover { background: rgba(255,255,255,.25); }
#vc-panel .vc-back-btn:focus-visible { outline: 3px solid var(--vc-accent); outline-offset: 2px; }

/* Form screen title */
#vc-panel .vc-form-title {
  color:          var(--vc-white);
  font-size:      15px;
  font-weight:    700;
  margin:         0;
  line-height:    1.2;
  background:     transparent;
  border:         none;
}

/* Form screen indicator dot */
#vc-panel .vc-form-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-left:   auto;
}

#vc-panel .vc-form-dot--call  { background: rgba(255,255,255,.50); }
#vc-panel .vc-form-dot--sms   { background: rgba(255,255,255,.50); }
#vc-panel .vc-form-dot--email { background: rgba(255,255,255,.50); }
#vc-panel .vc-form-dot--quote { background: rgba(var(--vc-accent-rgb), .70); }

/* Form scroll area — this is what scrolls, not the panel */
#vc-panel .vc-form-scroll {
  flex:                   1 1 auto;
  overflow-y:             auto !important;
  overflow-x:             hidden !important;
  -webkit-overflow-scrolling: touch;
  /* Prevent scroll from leaking to the page when reaching top/bottom */
  overscroll-behavior:    contain;
  overscroll-behavior-y:  contain;
  padding:                var(--vc-space-m);
}

#vc-panel .vc-form-scroll::-webkit-scrollbar       { width: 4px; }
#vc-panel .vc-form-scroll::-webkit-scrollbar-track { background: transparent; }
#vc-panel .vc-form-scroll::-webkit-scrollbar-thumb { background: var(--vc-border); border-radius: 4px; }

/* Individual panes — hidden by default, shown by JS */
#vc-widget .vc-pane {
  display: none;
}

#vc-widget .vc-pane.vc-is-visible {
  display: block;
  animation: vc-fadein .18s ease;
}

@keyframes vc-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── 11. WS Form resets ─────────────────────────────────────────── */
#vc-widget .vc-pane .wsf-form {
  max-width: 100%;
  padding:   0;
  margin:    0;
  width:     100%;
}

#vc-widget .vc-pane .wsf-field-wrapper {
  margin-bottom: var(--vc-space-s);
  width:         100%;
}

#vc-widget .vc-pane .wsf-field,
#vc-widget .vc-pane input[type="text"],
#vc-widget .vc-pane input[type="email"],
#vc-widget .vc-pane input[type="tel"],
#vc-widget .vc-pane input[type="number"],
#vc-widget .vc-pane select,
#vc-widget .vc-pane textarea {
  display:       block;
  width:         100% !important;
  max-width:     100%;
  padding:       9px 12px;
  border:        1.5px solid var(--vc-border);
  border-radius: var(--vc-r-input);
  font-size:     13px;
  color:         var(--vc-text);
  background:    var(--vc-white);
  box-shadow:    none;
  outline:       none;
  line-height:   1.4;
  font-family:   inherit;
}

/* Checkbox and radio — restore browser-native dimensions exactly */
#vc-widget .vc-pane input[type="checkbox"],
#vc-widget .vc-pane input[type="radio"] {
  display:            inline-block !important;
  width:              auto !important;
  max-width:          none !important;
  min-width:          0 !important;
  height:             auto !important;
  padding:            0 !important;
  border:             none !important;
  border-radius:      0 !important;
  background:         none !important;
  box-shadow:         none !important;
  appearance:         auto !important;
  -webkit-appearance: auto !important;
  flex-shrink:        0;
  cursor:             pointer;
}

#vc-widget .vc-pane input:focus-visible,
#vc-widget .vc-pane select:focus-visible,
#vc-widget .vc-pane textarea:focus-visible {
  border-color: var(--vc-primary);
  box-shadow:   var(--vc-shadow-focus);
  outline:      none;
}

#vc-widget .vc-pane textarea {
  resize:     vertical;
  min-height: 76px;
  max-height: 140px; /* cap textarea so it doesn't fill the whole form */
}

#vc-widget .vc-pane .wsf-label,
#vc-widget .vc-pane label {
  display:       block;
  font-size:     12px;
  font-weight:   600;
  color:         var(--vc-text);
  margin-bottom: 4px;
}

/* Submit */
#vc-widget .vc-pane .wsf-button[type="submit"],
#vc-widget .vc-pane button[type="submit"],
#vc-widget .vc-pane input[type="submit"] {
  display:         block !important;
  width:           100% !important;
  padding:         11px var(--vc-space-m);
  margin-top:      var(--vc-space-xs);
  background:      var(--vc-primary);
  color:           var(--vc-white);
  border:          none;
  border-radius:   var(--vc-r-btn);
  font-size:       13px;
  font-weight:     700;
  cursor:          pointer;
  text-align:      center;
  text-decoration: none;
  box-shadow:      none;
  line-height:     1.4;
  transition:      background .16s ease;
  font-family:     inherit;
}

#vc-widget .vc-pane .wsf-button[type="submit"]:hover,
#vc-widget .vc-pane button[type="submit"]:hover,
#vc-widget .vc-pane input[type="submit"]:hover { background: var(--vc-primary-dark); }

#vc-widget .vc-pane .wsf-button[type="submit"]:focus-visible,
#vc-widget .vc-pane button[type="submit"]:focus-visible {
  outline: 3px solid var(--vc-accent);
  outline-offset: 2px;
}

/* ── 12. Consent / legal text — extra small ─────────────────────── */
/* This is the key fix for the consent message readability */
#vc-widget .vc-pane .wsf-field--consent,
#vc-widget .vc-pane .wsf-field-wrapper--checkbox label,
#vc-widget .vc-pane [class*="wsf-consent"],
#vc-widget .vc-pane [class*="wsf-terms"],
#vc-widget .vc-pane .wsf-field-wrapper--checkbox p,
#vc-widget .vc-pane .wsf-field-wrapper--checkbox span {
  font-size:   10px !important;
  color:       var(--vc-muted) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* Checkbox row layout */
#vc-widget .vc-pane .wsf-field-wrapper--checkbox {
  display:     flex;
  align-items: flex-start;
  gap:         7px;
}

/* WS Form row/col layout */
#vc-widget .vc-pane .wsf-row {
  display:  flex;
  flex-wrap: wrap;
  gap:      var(--vc-space-s);
  margin:   0 0 var(--vc-space-s);
}

#vc-widget .vc-pane .wsf-col,
#vc-widget .vc-pane [class*="wsf-col-"] {
  flex:      1 1 100%;
  min-width: 0;
  padding:   0;
}

/* ── 13. Thank-you state ────────────────────────────────────────── */
#vc-panel .vc-thankyou {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--vc-space-l);
  height:          100%;
  gap:             var(--vc-space-s);
}

#vc-panel .vc-thankyou svg { display: block; margin: 0 auto; }

#vc-panel .vc-thankyou-title {
  font-size:   16px;
  font-weight: 800;
  color:       var(--vc-text);
  margin:      0;
}

#vc-panel .vc-thankyou-sub {
  font-size: 13px;
  color:     var(--vc-muted);
  margin:    0;
}

/* ── 14. AI Chat screen (3rd screen — slides in from right) ─────── */

/* Screen transition — same pattern as form screen */
#vc-panel .vc-screen--chat {
  transform:     translateX(100%);
  opacity:       0;
  z-index:       1;
  pointer-events: none;
}

#vc-panel.vc-chat-open .vc-screen--home {
  transform:     translateX(-100%);
  opacity:       0;
  pointer-events: none;
}

#vc-panel.vc-chat-open .vc-screen--chat {
  transform:     translateX(0);
  opacity:       1;
  z-index:       2;
  pointer-events: auto;
}

/* Chat screen header — same slim bar pattern as form screen */
#vc-panel .vc-chat-header {
  display:     flex !important;
  align-items: center !important;
  gap:         8px;
  flex-shrink: 0;
  background:  var(--vc-primary);
  padding:     12px var(--vc-space-m);
  min-height:  52px;
}

#vc-panel .vc-chat-back-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      rgba(255,255,255,.15);
  border:          none;
  cursor:          pointer;
  flex-shrink:     0;
  color:           var(--vc-white);
  transition:      background .16s ease;
  padding:         0;
  appearance:      none;
  -webkit-appearance: none;
}

#vc-panel .vc-chat-back-btn:hover { background: rgba(255,255,255,.25); }
#vc-panel .vc-chat-back-btn:focus-visible { outline: 3px solid var(--vc-accent); outline-offset: 2px; }

#vc-panel .vc-chat-title {
  color:       var(--vc-white);
  font-size:   15px;
  font-weight: 700;
  margin:      0;
  line-height: 1.2;
  flex:        1;
}

#vc-panel .vc-chat-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  font-size:    11px;
  color:        rgba(255,255,255,.70);
  font-weight:  400;
}

#vc-panel .vc-chat-badge-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #34D399;
  animation:     vc-blink 2.2s ease-in-out infinite;
}

/* Scrollable message area */
#vc-panel .vc-chat-messages {
  flex:       1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding:    var(--vc-space-m) var(--vc-space-m) var(--vc-space-s);
  display:    flex !important;
  flex-direction: column !important;
  gap:        10px;
}

#vc-panel .vc-chat-messages::-webkit-scrollbar       { width: 4px; }
#vc-panel .vc-chat-messages::-webkit-scrollbar-track { background: transparent; }
#vc-panel .vc-chat-messages::-webkit-scrollbar-thumb { background: var(--vc-border); border-radius: 4px; }

/* Message bubbles */
#vc-panel .vc-msg {
  display:    flex;
  max-width:  86%;
}

#vc-panel .vc-msg--bot  { align-self: flex-start; }
#vc-panel .vc-msg--user { align-self: flex-end; flex-direction: row-reverse; }

#vc-panel .vc-msg-bubble {
  padding:       10px 13px;
  border-radius: 16px;
  font-size:     13px;
  line-height:   1.45;
  word-break:    break-word;
}

/* Bot bubble — light surface */
#vc-panel .vc-msg--bot .vc-msg-bubble {
  background:    var(--vc-surface-alt);
  color:         var(--vc-text);
  border:        1.5px solid var(--vc-border);
  border-bottom-left-radius: 4px;
}

/* User bubble — brand color */
#vc-panel .vc-msg--user .vc-msg-bubble {
  background:    var(--vc-primary);
  color:         var(--vc-white);
  border:        none;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
#vc-panel .vc-typing {
  display:    flex;
  align-self: flex-start;
  padding:    10px 14px;
  background: var(--vc-surface-alt);
  border:     1.5px solid var(--vc-border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  gap:        5px;
  align-items: center;
}

#vc-panel .vc-typing span {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--vc-muted);
  animation:     vc-typing-dot 1.2s ease-in-out infinite;
  display:       inline-block;
}

#vc-panel .vc-typing span:nth-child(2) { animation-delay: .2s; }
#vc-panel .vc-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes vc-typing-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: .5; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* Chat input bar — pinned to bottom */
#vc-panel .vc-chat-input-bar {
  flex-shrink: 0;
  display:     flex !important;
  align-items: center !important;
  gap:         8px;
  padding:     var(--vc-space-s) var(--vc-space-m);
  border-top:  1.5px solid var(--vc-border);
  background:  var(--vc-surface);
}

#vc-panel .vc-chat-input {
  flex:          1;
  height:        38px;
  padding:       0 13px;
  border:        1.5px solid var(--vc-border);
  border-radius: 19px;
  font-size:     13px;
  font-family:   var(--vc-font);
  color:         var(--vc-text);
  background:    var(--vc-surface-alt);
  outline:       none;
  transition:    border-color .16s ease;
  appearance:    none;
  -webkit-appearance: none;
  display:       block;
  width:         auto !important;
  resize:        none;
}

#vc-panel .vc-chat-input::placeholder { color: var(--vc-muted); }
#vc-panel .vc-chat-input:focus-visible { border-color: var(--vc-primary); background: var(--vc-surface); }

#vc-panel .vc-chat-send-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--vc-primary);
  border:          none;
  cursor:          pointer;
  flex-shrink:     0;
  color:           var(--vc-white);
  transition:      background .16s ease, transform .16s ease;
  padding:         0;
  appearance:      none;
  -webkit-appearance: none;
}

#vc-panel .vc-chat-send-btn:hover    { background: var(--vc-primary-dark); transform: scale(1.06); }
#vc-panel .vc-chat-send-btn:active   { transform: scale(.96); }
#vc-panel .vc-chat-send-btn:disabled { background: rgba(var(--vc-primary-rgb),.35); cursor: not-allowed; transform: none; }
#vc-panel .vc-chat-send-btn:focus-visible { outline: 3px solid var(--vc-accent); outline-offset: 2px; }

/* ── 15. Mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #vc-widget {
    bottom: var(--vc-space-m) !important;
    right:  var(--vc-space-m) !important;
  }

  /* On mobile, panel breaks out of FAB positioning and
     anchors to the viewport bottom-right as a bottom sheet */
  #vc-panel {
    position:      fixed !important;
    right:         var(--vc-space-m) !important;
    left:          var(--vc-space-m) !important;
    bottom:        calc(var(--vc-fab-size) + var(--vc-space-m) + 8px) !important;
    width:         auto !important;
    max-width:     none !important;

    /* Slightly shorter on mobile to ensure FAB is always visible */
    height:        min(var(--vc-panel-h), calc(100vh - var(--vc-fab-size) - 56px)) !important;
    max-height:    none !important;
    border-radius: 18px !important;
    transform-origin: bottom center !important;
  }
}

/* ── 15. Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #vc-trigger::before,
  #vc-panel .vc-status-dot,
  #vc-panel .vc-chat-badge-dot,
  #vc-panel .vc-typing span           { animation: none; }
  #vc-panel,
  #vc-panel .vc-screen,
  #vc-panel .vc-tile,
  #vc-widget .vc-pane                 { transition: none; animation: none; }
}

} /* end @layer vc-widget */