/* Valencia Counselling – chat widget styles.
   Uses the site's own variables from style.css (--primary, --primary-dark, --cream, --border, --dark, --text, --sans).
   The fallback values after each comma are the same hex codes, so it still works if style.css hasn't loaded. */
.vc-chat {
  --vc-accent: var(--primary, #8a7466);
  --vc-accent-dark: var(--primary-dark, #6f5b50);
  --vc-bg: var(--cream, #f7f4f0);
  --vc-border: var(--border, #e7e1db);
  --vc-user: #ece4dc;
  --vc-text: var(--text, #555451);
  --vc-dark: var(--dark, #30302e);
  position: fixed; right: 16px; bottom: 16px; z-index: 1050;
  font-family: var(--sans, "DM Sans", Arial, sans-serif); color: var(--vc-text);
  font-size: 16px; line-height: 1.5; /* stops the site's 1.8 body line-height stretching the chat */
}
.vc-chat *, .vc-chat *::before, .vc-chat *::after { box-sizing: border-box; }
.vc-chat__toggle {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--vc-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(48,48,46,.25); transition: background .2s;
}
.vc-chat__toggle:hover, .vc-chat__toggle:focus-visible { background: var(--vc-accent-dark); }
.vc-chat__toggle:focus-visible, .vc-chat__close:focus-visible, .vc-chat__send:focus-visible, .vc-chat__input:focus-visible {
  outline: 2px solid var(--vc-dark); outline-offset: 2px;
}
.vc-chat__panel {
  position: absolute; right: 0; bottom: 70px; width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 110px)); background: var(--vc-bg); border-radius: 14px;
  border: 1px solid var(--vc-border);
  box-shadow: 0 8px 30px rgba(48,48,46,.22); display: flex; flex-direction: column; overflow: hidden;
}
.vc-chat__panel[hidden] { display: none; }
.vc-chat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--vc-accent); color: #fff;
}
.vc-chat__head strong { font-family: var(--serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 1.05rem; }
.vc-chat__close { background: none; border: 0; color: #fff; cursor: pointer; display: flex; padding: 4px; }
.vc-chat__notice {
  display: flex; gap: 8px; margin: 0; padding: 10px 14px; font-size: .78rem; line-height: 1.4;
  background: #fff; border-bottom: 1px solid var(--vc-border); color: var(--vc-text);
}
.vc-chat__notice svg { flex: none; margin-top: 2px; color: var(--vc-accent); }
.vc-chat__notice a { color: var(--vc-accent-dark); text-decoration: underline; white-space: nowrap; }
.vc-chat__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vc-chat__msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-chat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--vc-border); }
.vc-chat__msg--user { align-self: flex-end; background: var(--vc-user); color: var(--vc-dark); }
.vc-chat__msg a { color: var(--vc-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.vc-chat__msg a:hover, .vc-chat__msg a:focus-visible { color: var(--vc-dark); }
.vc-chat__msg--thinking { opacity: .6; }
.vc-chat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--vc-border); background: #fff; }
.vc-chat__input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--vc-border); border-radius: 8px; font: inherit; font-size: 16px; /* 16px stops iOS zoom */ color: var(--vc-dark); }
.vc-chat__send { border: 0; border-radius: 8px; padding: 0 12px; background: var(--vc-accent); color: #fff; cursor: pointer; display: flex; align-items: center; }
.vc-chat__send:hover, .vc-chat__send:focus-visible { background: var(--vc-accent-dark); }
@media (prefers-reduced-motion: reduce) { .vc-chat__toggle { transition: none; } }

/* Keep the footer links clear of the floating chat button when scrolled to the bottom of a page */
@media (min-width: 768px) {
    .footer { padding-bottom: 88px; }
}

/* Suggested starter questions */
.vc-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.vc-chat__chip {
  border: 1px solid var(--vc-accent); background: #fff; color: var(--vc-accent-dark);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; line-height: 1.3; cursor: pointer;
  transition: background .2s, color .2s;
}
.vc-chat__chip:hover, .vc-chat__chip:focus-visible { background: var(--vc-accent); color: #fff; }
.vc-chat__chip:focus-visible { outline: 2px solid var(--vc-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vc-chat__chip { transition: none; } }