/* Website live chat bubble (owner 2026-10-20) - js/chat-widget.js. Everything is inside #gpt-chat with "gc-" class names so it
   never clashes with the page. Brand colours follow css/site.css (navy + red). */
#gpt-chat {
  --gc-navy: #0E2A47; --gc-navy-2: #16395e; --gc-red: #C63F2A; --gc-red-2: #A8321F; --gc-ink: #0E2238; --gc-muted: #5b6b80;
  --gc-line: #DAE1EA; --gc-soft: #F2F5F9; --gc-white: #fff; --gc-ok: #12a150;
  position: fixed; right: 22px; bottom: 22px; z-index: 2147483000; font: 14px/1.45 "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--gc-ink);
}
#gpt-chat *, #gpt-chat *::before, #gpt-chat *::after { box-sizing: border-box; }
#gpt-chat button { font-family: inherit; cursor: pointer; }
#gpt-chat [hidden] { display: none !important; }

/* launcher */
.gc-launch { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 0; background: linear-gradient(145deg, var(--gc-navy-2), var(--gc-navy));
  color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(14,42,71,.35), 0 2px 6px rgba(14,42,71,.25); transition: transform .18s ease, box-shadow .18s ease; }
.gc-launch:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px rgba(14,42,71,.4); }
.gc-launch:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 3px; }
.gc-launch svg { width: 28px; height: 28px; }
.gc-launch .gc-x { display: none; }
#gpt-chat.gc-open .gc-launch .gc-x { display: block; }
#gpt-chat.gc-open .gc-launch .gc-bub { display: none; }
.gc-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gc-red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #fff; }
.gc-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(198,63,42,.55); animation: gc-pulse 2s infinite; }
@keyframes gc-pulse { 0% { box-shadow: 0 0 0 0 rgba(198,63,42,.5); } 70% { box-shadow: 0 0 0 16px rgba(198,63,42,0); } 100% { box-shadow: 0 0 0 0 rgba(198,63,42,0); } }

/* teaser */
.gc-teaser { position: absolute; right: 74px; bottom: 8px; width: 250px; background: #fff; border: 1px solid var(--gc-line); border-radius: 14px 14px 4px 14px;
  padding: 12px 34px 12px 14px; box-shadow: 0 12px 30px rgba(14,34,56,.16); animation: gc-in .25s ease; cursor: pointer; }
.gc-teaser b { display: block; font-size: 14px; margin-bottom: 2px; }
.gc-teaser span { color: var(--gc-muted); font-size: 13px; }
.gc-teaser .gc-tx { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: none; color: var(--gc-muted); border-radius: 6px; font-size: 16px; line-height: 1; }
.gc-teaser .gc-tx:hover { background: var(--gc-soft); }

/* panel */
.gc-panel { position: absolute; right: 0; bottom: 78px; width: 392px; height: min(640px, calc(100vh - 120px)); display: none; flex-direction: column; background: #fff;
  border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(14,34,56,.28), 0 4px 14px rgba(14,34,56,.12); border: 1px solid rgba(14,42,71,.08); }
#gpt-chat.gc-open .gc-panel { display: flex; animation: gc-in .22s ease; }
@keyframes gc-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.gc-head { background: linear-gradient(135deg, var(--gc-navy) 0%, var(--gc-navy-2) 100%); color: #fff; padding: 16px 14px 14px 16px; display: flex; align-items: center; gap: 12px; flex: none; position: relative; }
.gc-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gc-red), #e0705e); }
.gc-av { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--gc-navy); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; letter-spacing: .5px; }
.gc-av.gc-agent { background: #ffe7e2; color: var(--gc-red-2); }
.gc-av i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #9aa8b8; border: 2px solid var(--gc-navy); }
.gc-av i.gc-on { background: #2fd27a; }
.gc-ht { flex: 1; min-width: 0; }
.gc-ht b { display: block; font-size: 15.5px; letter-spacing: .1px; }
.gc-ht span { display: block; font-size: 12.5px; color: #c3d0df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-hb { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; }
.gc-hb:hover { background: rgba(255,255,255,.18); }
.gc-hb svg { width: 18px; height: 18px; }
.gc-menu { position: absolute; right: 12px; top: 58px; background: #fff; color: var(--gc-ink); border: 1px solid var(--gc-line); border-radius: 10px; box-shadow: 0 12px 28px rgba(14,34,56,.18);
  padding: 6px; z-index: 3; min-width: 180px; }
.gc-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 7px; color: var(--gc-ink); }
.gc-menu button:hover { background: var(--gc-soft); }

.gc-body { flex: 1; overflow-y: auto; padding: 18px 14px 8px; background: linear-gradient(180deg, #f6f8fb 0%, #fff 60%); }
.gc-row { display: flex; gap: 8px; margin: 0 0 8px; align-items: flex-end; }
.gc-row.gc-me { justify-content: flex-end; }
.gc-row .gc-mini { width: 28px; height: 28px; border-radius: 50%; background: var(--gc-navy); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.gc-row .gc-mini.gc-agent { background: #ffe7e2; color: var(--gc-red-2); }
.gc-row .gc-mini.gc-hide { visibility: hidden; }
.gc-msg { max-width: 78%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--gc-line); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(14,34,56,.05); }
.gc-me .gc-msg { background: var(--gc-navy); color: #fff; border-color: var(--gc-navy); border-radius: 16px 16px 4px 16px; }
.gc-who { font-size: 11.5px; color: var(--gc-muted); margin: 6px 0 3px 36px; }
.gc-sys { text-align: center; font-size: 12px; color: var(--gc-muted); margin: 12px 8px; }
.gc-sys span { background: var(--gc-soft); border-radius: 999px; padding: 4px 12px; display: inline-block; }
.gc-meta { font-size: 11px; color: #8a97a8; text-align: right; margin: -4px 2px 8px; }
.gc-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--gc-line); border-radius: 16px 16px 16px 4px; }
.gc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa8b8; animation: gc-dot 1.2s infinite; }
.gc-typing i:nth-child(2) { animation-delay: .15s; } .gc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.gc-wait { margin: 6px 4px 12px; padding: 12px 14px; border-radius: 12px; background: #fff7e8; border: 1px solid #f3dcae; color: #6b4b10; font-size: 13px; display: flex; gap: 10px; align-items: center; }
.gc-wait .gc-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #f0c977; border-top-color: #b07a12; animation: gc-spin 1s linear infinite; flex: none; }
@keyframes gc-spin { to { transform: rotate(360deg); } }

/* answer area */
.gc-foot { flex: none; border-top: 1px solid var(--gc-line); background: #fff; padding: 10px 12px 8px; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 190px; overflow-y: auto; padding: 2px; }
.gc-chip { border: 1.5px solid #c9d5e3; background: #fff; color: var(--gc-navy); border-radius: 999px; padding: 8px 13px; font-size: 13.5px; font-weight: 600; transition: all .12s ease; text-align: left; }
.gc-chip:hover { border-color: var(--gc-navy); background: #f1f5fa; }
.gc-chip.gc-sel { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; }
.gc-chip.gc-sel::before { content: "\2713  "; }
.gc-inrow { display: flex; gap: 8px; align-items: flex-end; }
.gc-in { flex: 1; border: 1.5px solid #c9d5e3; border-radius: 12px; padding: 10px 12px; font: inherit; color: var(--gc-ink); resize: none; max-height: 120px; min-height: 42px; background: #fff; outline: none; }
.gc-in:focus { border-color: var(--gc-navy); box-shadow: 0 0 0 3px rgba(14,42,71,.1); }
.gc-send { width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--gc-red); color: #fff; display: grid; place-items: center; flex: none; transition: background .12s ease; }
.gc-send:hover { background: var(--gc-red-2); }
.gc-send:disabled { background: #d7dde5; cursor: default; }
.gc-send svg { width: 18px; height: 18px; }
.gc-go { margin-top: 8px; width: 100%; border: 0; border-radius: 12px; background: var(--gc-red); color: #fff; padding: 11px; font-weight: 700; }
.gc-go:disabled { background: #d7dde5; }
.gc-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; }
.gc-link { border: 0; background: none; color: var(--gc-navy); font-weight: 600; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; }
.gc-link.gc-quiet { color: var(--gc-muted); font-weight: 500; }
.gc-err { color: #b42318; font-size: 12.5px; margin: 0 0 6px; }
.gc-note { font-size: 11px; color: #8a97a8; text-align: center; margin-top: 7px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.gc-note svg { width: 12px; height: 12px; }

/* rating */
.gc-rate { text-align: center; padding: 4px 0 2px; }
.gc-rate p { margin: 0 0 8px; font-weight: 600; }
.gc-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.gc-rate .gc-in { display: block; width: 100%; margin-bottom: 2px; }
#gpt-chat .gc-star { border: 0; background: none; font-size: 30px; line-height: 1; color: #d0d7e1; padding: 2px; transition: transform .1s ease, color .1s ease; }
#gpt-chat .gc-star.gc-on, #gpt-chat .gc-star:hover { color: #f5a524; transform: scale(1.08); }
.gc-thanks { color: var(--gc-ok); font-weight: 600; margin: 4px 0 8px; }

@media (max-width: 560px) {
  #gpt-chat { right: 14px; bottom: 14px; }
  #gpt-chat.gc-open { inset: 0; right: 0; bottom: 0; }
  #gpt-chat.gc-open .gc-launch { display: none; }
  .gc-panel { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; bottom: 0; }
  .gc-teaser { width: 210px; }
  .gc-in { font-size: 16px; }   /* no zoom on iPhone */
}
@media (prefers-reduced-motion: reduce) { #gpt-chat * { animation: none !important; transition: none !important; } }
@media print { #gpt-chat { display: none !important; } }