/* ═══════════════════════════════════════════════════════════════════
   chat-widget.css — floating intake chat.

   Two states: a collapsed avatar + greeting bubble in the bottom right,
   and an expanded chat panel. Everything is namespaced under #cpc-chat
   so it cannot collide with page styles. Uses the site tokens from
   styles.css, with fallbacks so the widget still renders correctly if
   it is ever loaded on a page without them.
   ═══════════════════════════════════════════════════════════════════ */

#cpc-chat {
  --cc-deep:    var(--ocean-deep, #062D3E);
  --cc-ocean:   var(--ocean, #0B4F6C);
  --cc-light:   var(--ocean-light, #1A7A9E);
  --cc-foam:    var(--seafoam, #20BF96);
  --cc-foam-lt: var(--seafoam-light, #A8EDDA);
  --cc-cream:   var(--cream, #F7F5F0);
  --cc-mist:    var(--mist, #E8E6E1);
  --cc-slate:   #4A5B6B;

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;          /* above sticky nav and cookie bars */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* visually hidden but readable by screen readers (styles.css has no
   sitewide equivalent, so the widget carries its own) */
#cpc-chat .cc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── collapsed launcher ──────────────────────────────────────────── */
#cpc-chat .cc-launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  animation: cc-rise .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

#cpc-chat .cc-greeting {
  position: relative;
  background: var(--cc-deep);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  padding: 13px 18px;
  border-radius: 16px;
  box-shadow: 0 6px 28px rgba(6, 45, 62, .28);
  max-width: 216px;
  transition: transform .22s ease, box-shadow .22s ease;
}
/* tail pointing at the avatar */
#cpc-chat .cc-greeting::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 14px;
  height: 14px;
  background: var(--cc-deep);
  transform: rotate(45deg);
  border-radius: 3px;
}
#cpc-chat .cc-launcher:hover .cc-greeting {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(6, 45, 62, .34);
}

#cpc-chat .cc-avatar-wrap { position: relative; flex: none; }
#cpc-chat .cc-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
  box-shadow: 0 6px 24px rgba(6, 45, 62, .3);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
#cpc-chat .cc-launcher:hover .cc-avatar { transform: scale(1.06); }

#cpc-chat .cc-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cc-foam);
  border: 2.5px solid #fff;
}
/* gentle presence pulse, once every few seconds */
#cpc-chat .cc-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--cc-foam);
  animation: cc-pulse 2.8s ease-out infinite;
}
@keyframes cc-pulse {
  0%       { transform: scale(1);   opacity: .7; }
  70%,100% { transform: scale(2.1); opacity: 0; }
}

#cpc-chat .cc-close-greeting {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--cc-mist);
  background: #fff;
  color: #7A9AAD;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#cpc-chat .cc-launcher:hover .cc-close-greeting { display: flex; }

/* ── expanded panel ──────────────────────────────────────────────── */
#cpc-chat .cc-panel {
  display: none;
  flex-direction: column;
  width: 384px;
  height: 620px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(6, 45, 62, .3);
}
#cpc-chat.cc-open .cc-panel {
  display: flex;
  animation: cc-open .28s cubic-bezier(.22,1,.36,1) both;
  transform-origin: bottom right;
}
#cpc-chat.cc-open .cc-launcher { display: none; }
@keyframes cc-open {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* header */
#cpc-chat .cc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  background: linear-gradient(135deg, #062D3E 0%, #0B4F6C 65%, #1A7A9E 130%);
  color: #fff;
  flex: none;
}
#cpc-chat .cc-head img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.35);
  flex: none;
}
#cpc-chat .cc-head-txt { flex: 1; min-width: 0; }
#cpc-chat .cc-head-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.1px;
  margin: 0;
}
#cpc-chat .cc-head-sub {
  font-size: 12px;
  color: rgba(255,255,255,.62);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
#cpc-chat .cc-head-sub i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cc-foam);
  display: inline-block;
  flex: none;
}
#cpc-chat .cc-x {
  background: rgba(255,255,255,.12);
  border: 0;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .18s ease;
}
#cpc-chat .cc-x:hover { background: rgba(255,255,255,.24); }

/* message stream */
#cpc-chat .cc-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px 8px;
  background: var(--cc-cream);
  scrollbar-width: thin;
}
#cpc-chat .cc-body::-webkit-scrollbar { width: 8px; }
#cpc-chat .cc-body::-webkit-scrollbar-thumb {
  background: rgba(6,45,62,.16);
  border-radius: 8px;
}

#cpc-chat .cc-msg {
  max-width: 84%;
  margin-bottom: 12px;
  padding: 12px 15px;
  font-size: 14.5px;
  line-height: 1.6;
  border-radius: 16px;
  animation: cc-in .26s ease both;
  overflow-wrap: break-word;
}
@keyframes cc-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
#cpc-chat .cc-bot {
  background: #fff;
  color: var(--cc-slate);
  border-bottom-left-radius: 5px;
  box-shadow: 0 2px 10px rgba(6,45,62,.07);
}
#cpc-chat .cc-me {
  background: var(--cc-ocean);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}
#cpc-chat .cc-msg p { margin: 0 0 8px; }
#cpc-chat .cc-msg p:last-child { margin-bottom: 0; }
#cpc-chat .cc-bot a {
  color: var(--cc-light);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cpc-chat .cc-me a { color: var(--cc-foam-lt); }

/* typing indicator */
#cpc-chat .cc-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 15px;
  width: 56px;
}
#cpc-chat .cc-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B4C2CC;
  animation: cc-bounce 1.3s infinite;
}
#cpc-chat .cc-typing span:nth-child(2) { animation-delay: .18s; }
#cpc-chat .cc-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cc-bounce {
  0%,60%,100% { transform: translateY(0);    opacity: .45; }
  30%         { transform: translateY(-5px); opacity: 1; }
}

/* quick reply chips, rendered inline under the reply that offered them */
#cpc-chat .cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
#cpc-chat .cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--cc-mist);
  color: var(--cc-deep);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 50px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
  animation: cc-in .26s ease both;
}
#cpc-chat .cc-chip::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--cc-light);
  flex: none;
}
#cpc-chat .cc-chip:hover {
  border-color: var(--cc-foam);
  background: #F2FCF8;
  transform: translateY(-1px);
}

/* composer */
#cpc-chat .cc-foot {
  flex: none;
  border-top: 1px solid var(--cc-mist);
  background: #fff;
  padding: 12px 14px 10px;
}
#cpc-chat .cc-form { display: flex; gap: 9px; align-items: flex-end; }
#cpc-chat .cc-input {
  flex: 1;
  border: 1.5px solid var(--cc-mist);
  border-radius: 20px;
  padding: 11px 15px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--cc-deep);
  background: var(--cc-cream);
  resize: none;
  max-height: 108px;
  transition: border-color .16s ease, background .16s ease;
}
#cpc-chat .cc-input:focus {
  outline: none;
  border-color: var(--cc-light);
  background: #fff;
}
#cpc-chat .cc-input::placeholder { color: #9BA9B4; }
#cpc-chat .cc-send {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--cc-foam);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, transform .16s ease;
}
#cpc-chat .cc-send:hover:not(:disabled) {
  background: #1AA681;
  transform: scale(1.05);
}
#cpc-chat .cc-send:disabled { background: #C8D2DA; cursor: default; }

#cpc-chat .cc-disclaimer {
  margin: 8px 2px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: #9BA9B4;
  text-align: center;
}
#cpc-chat .cc-disclaimer a { color: #8E9BAA; }

/* ── mobile: full screen ─────────────────────────────────────────── */
@media (max-width: 520px) {
  #cpc-chat { right: 16px; bottom: 16px; }
  #cpc-chat .cc-greeting { max-width: 160px; font-size: 13.5px; padding: 11px 15px; }
  #cpc-chat .cc-avatar { width: 56px; height: 56px; }

  /* The greeting covers real content on a small screen, so it retires to
     just the avatar a few seconds in (see cc-mini in chat-widget.js). */
  #cpc-chat.cc-mini .cc-greeting { display: none; }

  #cpc-chat.cc-open {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
  }
  #cpc-chat.cc-open .cc-panel {
    width: 100%;
    height: 100%;
    /* dvh tracks the iOS URL bar, so the composer cannot be pushed
       below the fold as the bar shows and hides. */
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  /* Respect the home indicator / gesture bar. */
  #cpc-chat.cc-open .cc-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* iOS Safari force-zooms the page when a focused field is under 16px.
     That zoom widens the layout past the screen, which cuts off the right
     edge of the panel and takes the send button with it. 16px is the
     threshold that prevents it, so this value is functional, not cosmetic. */
  #cpc-chat .cc-input { font-size: 16px; }

  /* Belt and braces: never let the composer outgrow the panel. */
  #cpc-chat .cc-panel { max-width: 100vw; overflow-x: hidden; }
  #cpc-chat .cc-form  { max-width: 100%; }
  #cpc-chat .cc-input { min-width: 0; }
  #cpc-chat .cc-disclaimer { padding: 0 4px; }
}

/* Page behind a full screen panel must not scroll. */
body.cc-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #cpc-chat *,
  #cpc-chat *::after { animation: none !important; transition: none !important; }
}