/* ==========================================================================
   Game Changer Therapy — chat-widget.css  (LIGHT · SOLID COLOURS)
   Self-contained guided assistant (DentChat / McLaren style). No libraries.
   Skinned to the LIGHT system in design-system.css: white panel, solid
   deep-green (#14351A) header, solid raspberry (#C01D45) launcher — matching
   the homepage assistant exactly. Every colour falls back to a LIGHT literal
   so the widget stays correct even if this loads first.

   No gradients. AA: near-black text on white/soft-green surfaces; white on
   the deep-green header; white on #2E6B1F user bubbles (6.5:1). Never white
   on a light fill.
   ========================================================================== */

.gcw {
  --gcw-launcher-size: 60px;
  --gcw-gap: clamp(1rem, 3vw, 1.5rem);
  --gcw-z-backdrop: 168;
  --gcw-z-panel: 170;
  --gcw-z-launcher: 180;
  --gcw-surface:  var(--gc-surface, #EEF3E8);
  --gcw-surface2: var(--gc-surface-2, #FFFFFF);
  --gcw-line:     var(--gc-line, rgb(20 30 20 / .12));
  --gcw-text:     var(--gc-text, #1C241A);
  --gcw-soft:     var(--gc-text-soft, #545A52);
  --gcw-accent:   var(--gc-green-bright, #3E8E2E);
  font-family: var(--gc-font-body, "Nunito Sans", system-ui, sans-serif);
}

/* --- Launcher (fixed FAB, bottom-right) -------------------------------- */
.gcw-launcher {
  position: fixed;
  right: var(--gcw-gap);
  bottom: var(--gcw-gap);
  z-index: var(--gcw-z-launcher);
  width: var(--gcw-launcher-size);
  height: var(--gcw-launcher-size);
  border-radius: var(--gc-radius-pill, 999px);
  border: 1px solid rgb(255 255 255 / .14);
  /* solid raspberry — matches the homepage assistant's launcher exactly
     (was a navy->indigo gradient). White icon on #C01D45 = 5.99:1 */
  background:#fff;border:2px solid #14351A;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 14px 34px -10px rgb(0 0 0 / .6);
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms cubic-bezier(.25,1,.5,1), box-shadow 200ms cubic-bezier(.25,1,.5,1);
}
.gcw-launcher:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 18px 42px -10px rgb(0 0 0 / .66), 0 0 0 1px var(--gcw-accent);
}
.gcw-launcher:active { transform: scale(.97); }
.gcw-launcher:focus-visible { outline: 2px solid var(--gcw-accent); outline-offset: 3px; }
.gcw-launcher svg { width: 28px; height: 28px; display: block; }
.gcw-launcher__close { display: none; }
.gcw--open .gcw-launcher__open { display: none; }
.gcw--open .gcw-launcher__close { display: block; }

/* Decorative attention ring — motion-gated. */
.gcw-launcher::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--gc-radius-pill, 999px);
  border: 2px solid var(--gcw-accent);
  opacity: 0; pointer-events: none;
}

/* --- Backdrop (mobile only) ------------------------------------------- */
.gcw-backdrop {
  position: fixed; inset: 0;
  z-index: var(--gcw-z-backdrop);
  background: rgb(12 28 8 / .55);
  opacity: 0; visibility: hidden; display: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* --- Panel (dark glass) ----------------------------------------------- */
.gcw-panel {
  position: fixed;
  right: var(--gcw-gap);
  bottom: calc(var(--gcw-gap) + var(--gcw-launcher-size) + 12px);
  z-index: var(--gcw-z-panel);
  width: min(380px, calc(100vw - 2rem));
  max-height: min(640px, calc(100dvh - 130px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gcw-surface);
  border: 1px solid var(--gcw-line);
  border-radius: var(--gc-radius, 1.25rem);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 26px 60px -18px rgb(0 0 0 / .7);
  transform-origin: bottom right;
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.98);
  transition: opacity 200ms cubic-bezier(.25,1,.5,1), transform 200ms cubic-bezier(.25,1,.5,1), visibility 200ms ease;
}
.gcw--open .gcw-panel { opacity: 1; visibility: visible; transform: none; }

/* --- Panel header ----------------------------------------------------- */
.gcw-head {
  flex: none;
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem;
  /* solid deep green — matches the homepage assistant's .chat-head
     (was a navy->indigo gradient). White on #14351A = 13.5:1 */
  background: var(--gc-chrome, #14351A);
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / .14);
}
.gcw-avatar {
  flex: none; width: 40px; height: 40px;
  border-radius: var(--gc-radius-pill, 999px);
  background: rgb(255 255 255 / .14);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--gc-font-head, "Nunito", system-ui, sans-serif);
  font-weight: 800; font-size: .95rem; letter-spacing: .01em;
  border: 1px solid rgb(255 255 255 / .22);
}
.gcw-head__text { flex: 1 1 auto; min-width: 0; }
.gcw-head__title {
  font-family: var(--gc-font-head, "Nunito", system-ui, sans-serif);
  font-weight: 800; font-size: 1rem; line-height: 1.15; color: #fff;
}
.gcw-head__sub { font-size: .8125rem; line-height: 1.3; color: rgb(255 255 255 / .8); margin-top: 2px; }
.gcw-close {
  flex: none; width: 36px; height: 36px;
  border-radius: var(--gc-radius-pill, 999px);
  border: none; background: rgb(255 255 255 / .14); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 200ms ease;
}
.gcw-close:hover { background: rgb(255 255 255 / .26); }
.gcw-close svg { width: 20px; height: 20px; display: block; }

/* --- Message log ------------------------------------------------------ */
.gcw-log {
  flex: 1 1 auto; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--gc-bg, #FFFFFF);
  -webkit-overflow-scrolling: touch;
}
.gcw-msg { display: flex; }
.gcw-msg--user { justify-content: flex-end; }
.gcw-bubble {
  max-width: 88%;
  padding: .7rem .85rem;
  border-radius: var(--gc-radius, 1.25rem);
  font-size: .9375rem; line-height: 1.5;
  box-shadow: 0 8px 22px -14px rgb(0 0 0 / .6);
}
.gcw-msg--bot .gcw-bubble {
  background: var(--gcw-surface);   /* soft green — --gcw-surface2 is #FFF, i.e. a white bubble on the white log */
  color: var(--gcw-text);
  border: 1px solid var(--gcw-line);
  border-bottom-left-radius: .35rem;
}
.gcw-msg--user .gcw-bubble {
  background: var(--gc-green-dark, #2E6B1F);   /* white on #3E8E2E was 4.1:1; #2E6B1F is 6.5:1 */
  color: #fff;
  border-bottom-right-radius: .35rem;
}
.gcw-bubble p + p { margin-top: .5rem; }
/* inherit, not #fff — bot bubbles are WHITE, so bold text was invisible */
.gcw-bubble strong { font-weight: 800; color: inherit; }
.gcw-bubble ul, .gcw-bubble ol { margin: .45rem 0 .15rem; padding-left: 1.15rem; }
.gcw-bubble li { margin: .18rem 0; }
.gcw-bubble a.gcw-inline { color: var(--gc-green-dark, #2E6B1F); font-weight: 700; text-decoration: underline; }
.gcw-msg--user .gcw-bubble a.gcw-inline { color: #fff; }

/* Action buttons inside a bot bubble */
.gcw-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.gcw-act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: .4rem .95rem;
  border-radius: var(--gc-radius-pill, 999px);
  font-family: var(--gc-font-head, "Nunito", system-ui, sans-serif);
  font-weight: 800; font-size: .85rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 120ms ease;
}
.gcw-act:active { transform: scale(.98); }
.gcw-act--primary { background: var(--gc-red-fill, #2C6E9E); color: #fff; border-color: var(--gc-red-fill, #2C6E9E); }
.gcw-act--primary:hover { background: var(--gc-red-hover-c, #C21F49); border-color: var(--gc-red-hover-c, #C21F49); }
.gcw-act--ghost { background: transparent; color: var(--gcw-text); border-color: var(--gc-border-strong, rgb(20 30 20 / .22)); }
.gcw-act--ghost:hover { border-color: var(--gcw-accent); color: var(--gcw-accent); }

/* --- Quick-reply chips ------------------------------------------------ */
.gcw-chips {
  flex: none; display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--gcw-line);
  background: var(--gcw-surface);
}
.gcw-chip {
  border: 1px solid color-mix(in oklab, var(--gcw-accent) 45%, var(--gcw-line));
  background: color-mix(in oklab, var(--gcw-accent) 14%, transparent);
  color: var(--gcw-accent);
  border-radius: var(--gc-radius-pill, 999px);
  padding: .45rem .85rem; min-height: 40px;
  font-family: var(--gc-font-head, "Nunito", system-ui, sans-serif);
  font-weight: 700; font-size: .85rem; cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, transform 120ms ease;
}
.gcw-chip:hover { border-color: var(--gcw-accent); background: color-mix(in oklab, var(--gcw-accent) 22%, transparent); }
.gcw-chip:active { transform: scale(.98); }

/* --- Lead-capture mini-form (inside a bot bubble) --------------------- */
.gcw-form { display: flex; flex-direction: column; gap: .55rem; margin-top: .6rem; }
.gcw-field { display: block; }
.gcw-form label {
  display: block;
  font-family: var(--gc-font-head, "Nunito", system-ui, sans-serif);
  font-weight: 700; font-size: .8rem; color: var(--gcw-text); margin-bottom: .25rem;
}
.gcw-form input, .gcw-form textarea {
  width: 100%; min-height: 44px; padding: .55rem .7rem;
  background: rgb(255 255 255 / .05);
  color: var(--gcw-text);
  border: 1px solid var(--gcw-line);
  border-radius: var(--gc-radius-sm, .6rem);
  font-size: .9rem; font-family: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.gcw-form input::placeholder, .gcw-form textarea::placeholder { color: color-mix(in oklab, var(--gcw-soft) 70%, transparent); }
.gcw-form textarea { min-height: 72px; resize: vertical; }
.gcw-form input:focus, .gcw-form textarea:focus {
  outline: none;
  border-color: var(--gcw-accent);
  background: rgb(255 255 255 / .08);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gcw-accent) 30%, transparent);
}
.gcw-submit {
  align-self: flex-start; margin-top: .15rem;
  min-height: 44px; padding: .55rem 1.25rem;
  border: none; border-radius: var(--gc-radius-pill, 999px);
  background: var(--gc-red-fill, #2C6E9E); color: #fff;
  font-family: var(--gc-font-head, "Nunito", system-ui, sans-serif);
  font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: background-color 200ms ease, transform 120ms ease;
}
.gcw-submit:hover { background: var(--gc-red-hover-c, #C21F49); }
.gcw-submit:active { transform: scale(.98); }
.gcw-submit:disabled { opacity: .6; cursor: default; }
.gcw-err { color: var(--gc-red-bright, #FF4D75); font-size: .85rem; margin-top: .35rem; }

/* Honeypot */
.gcw-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Footnote --------------------------------------------------------- */
.gcw-note {
  flex: none; padding: .5rem 1rem .65rem;
  font-size: .72rem; line-height: 1.4;
  color: var(--gcw-soft);
  background: var(--gcw-surface);
  border-top: 1px solid var(--gcw-line);
  text-align: center;
}

/* --- Focus rings ------------------------------------------------------ */
.gcw :where(button, a, input, textarea):focus-visible {
  outline: 2px solid var(--gcw-accent);
  outline-offset: 2px;
}
.gcw-close:focus-visible, .gcw-head :where(button, a):focus-visible { outline-color: #fff; }

/* --- Mobile: bottom sheet + backdrop ---------------------------------- */
@media (max-width: 760px) {
  .gcw-launcher { bottom: calc(var(--gc-mobilebar-h, 64px) + env(safe-area-inset-bottom) + 12px); }
  .gcw--open .gcw-launcher { display: none; }
  .gcw-backdrop { display: block; }
  .gcw--open .gcw-backdrop { opacity: 1; visibility: visible; }
  .gcw-panel {
    right: 0; left: 0; bottom: 0; width: auto;
    max-height: 88dvh;
    border-radius: var(--gc-radius, 1.25rem) var(--gc-radius, 1.25rem) 0 0;
    transform: translateY(14px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .gcw--open .gcw-panel { transform: none; }
}

/* --- Motion: entrance + attention ring, opt-in only ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .gcw-launcher { animation: gcw-pop 320ms var(--gc-ease-out, cubic-bezier(.16, 1, .3, 1)); }
  .gcw:not(.gcw--open) .gcw-launcher::after { animation: gcw-ping 2.6s ease-out 1.2s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .gcw-panel, .gcw-backdrop { transition: none; }
}
@keyframes gcw-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gcw-ping { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }

/* --- Reduced transparency -------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .gcw-backdrop { background: rgb(12 28 8 / .75); }
  .gcw-panel { background: #FFFFFF; }   /* was #16163A — a hard-coded dark-theme leftover */
}

.gcw-launcher__mark{width:36px;height:36px;object-fit:contain;display:block;}