/* ==========================================================================
   CAPITAL CITY COMPUTING — CHAT WIDGET STYLES
   --------------------------------------------------------------------------
   Scoped under .ccc-chat so it can't leak into the host page. Colours pull
   from the site design tokens when present (var(--hi, …) etc.) and fall back
   to sensible defaults, so the widget also works on sites without them.
   It inherits [data-theme="dark"] automatically through those tokens.
   ========================================================================== */

.ccc-chat {
  --cc-accent:      var(--hi, #DC4810);
  --cc-accent-ink:  var(--hi-ink, #2A1306);
  --cc-fg:          var(--fg, #0C0C0A);
  --cc-mute:        var(--fg-mute, rgba(12, 12, 10, 0.62));
  --cc-surface:     var(--surface, #F7F1E2);
  --cc-bg:          var(--bg, #EFE7D6);
  --cc-line:        var(--line, rgba(12, 12, 10, 0.16));
  --cc-mono:        var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  --cc-body:        var(--f-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  --cc-shadow:      0 12px 40px rgba(12, 12, 10, 0.28);
  --cc-radius:      14px;

  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 9999;
  font-family: var(--cc-body);
}

/* ---- launcher ---------------------------------------------------------- */
.ccc-chat__launch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.05rem;
  border: 2px solid var(--cc-accent-ink);
  border-radius: 999px;
  background: var(--cc-accent);
  color: var(--cc-accent-ink);
  font-family: var(--cc-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--cc-shadow);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 180ms;
}
.ccc-chat__launch:hover { transform: translateY(-2px); filter: brightness(1.03); }
.ccc-chat__launch:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 3px; }
.ccc-chat.is-open .ccc-chat__launch { display: none; }
/* The mobile/tablet nav drawer (site.js sets body.body-locked while it's open)
   slides in over the bottom-right launcher and covers its CTA buttons. Hide the
   launcher while the drawer is open; it returns when the drawer closes. Keyed on
   body-locked, which is only ever set below the drawer's 64em breakpoint. */
body.body-locked .ccc-chat__launch { display: none; }

/* ---- panel ------------------------------------------------------------- */
.ccc-chat__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(90vw, 380px);
  height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--cc-bg);
  border: 2px solid var(--cc-accent);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
  animation: ccc-pop 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Collapsed state. Without this, [hidden] loses to display:flex above (author
   rule beats the UA [hidden] rule) and the panel can never close. */
.ccc-chat__panel[hidden] { display: none; }
@keyframes ccc-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ccc-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--cc-accent);
  color: var(--cc-accent-ink);
}
.ccc-chat__title {
  display: block;
  font-family: var(--cc-mono);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.1;
}
.ccc-chat__sub { display: block; font-size: 0.72rem; opacity: 0.8; margin-top: 2px; }
.ccc-chat__close {
  flex-shrink: 0;
  display: inline-flex;
  padding: 0.35rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ccc-chat__close:hover { background: rgba(0, 0, 0, 0.12); }
.ccc-chat__close:focus-visible { outline: 2px solid var(--cc-accent-ink); outline-offset: 2px; }

/* ---- disclaimer note (automated, not a live person) -------------------- */
.ccc-chat__note {
  margin: 0;
  padding: 0.5rem 1rem;
  font-family: var(--cc-mono);
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--cc-mute);
  border-bottom: 1px solid var(--cc-line);
}

/* ---- message log ------------------------------------------------------- */
.ccc-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative; /* so message.offsetTop is measured against the log */
}
.ccc-chat__msg { display: flex; }
.ccc-chat__msg--user { justify-content: flex-end; }
.ccc-chat__bubble {
  max-width: 84%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cc-fg);
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
}
.ccc-chat__msg--user .ccc-chat__bubble {
  background: var(--cc-accent);
  color: var(--cc-accent-ink);
  border-color: transparent;
}
.ccc-chat__bubble a { color: var(--cc-accent); font-weight: 600; }
.ccc-chat__msg--user .ccc-chat__bubble a { color: inherit; }

/* inline contact buttons on a fallback answer */
.ccc-chat__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ccc-chat__btn {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: var(--cc-accent);
  color: var(--cc-accent-ink) !important;
  font-family: var(--cc-mono);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}
.ccc-chat__btn--ghost {
  background: transparent;
  color: var(--cc-fg) !important;
  border: 1px solid var(--cc-line);
}

/* typing indicator */
.ccc-chat__typing .ccc-chat__bubble { display: inline-flex; gap: 4px; align-items: center; }
.ccc-chat__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-mute);
  animation: ccc-blink 1.2s infinite ease-in-out both;
}
.ccc-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.ccc-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ccc-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---- suggested questions (initial + follow-ups) ------------------------ */
.ccc-chat__suggest { padding: 0 1rem 0.75rem; }
.ccc-chat__suggest[hidden] { display: none; }
.ccc-chat__suggest-label {
  display: block;
  font-family: var(--cc-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cc-mute);
  margin-bottom: 0.45rem;
}
.ccc-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ccc-chat__chip {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--cc-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--cc-fg);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.ccc-chat__chip:hover { background: var(--cc-accent); color: var(--cc-accent-ink); }
.ccc-chat__chip:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }

/* ---- input ------------------------------------------------------------- */
.ccc-chat__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--cc-line);
  background: var(--cc-bg);
}
.ccc-chat__input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  background: var(--cc-surface);
  color: var(--cc-fg);
  font-family: var(--cc-body);
  font-size: 0.9rem;
}
.ccc-chat__input:focus { outline: 2px solid var(--cc-accent); outline-offset: 0; border-color: transparent; }
.ccc-chat__send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--cc-accent);
  color: var(--cc-accent-ink);
  cursor: pointer;
}
.ccc-chat__send:hover { filter: brightness(1.05); }
.ccc-chat__send:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 2px; }

/* ---- mobile: full-width bottom sheet ----------------------------------- */
/* The JS also sizes the panel to the visible viewport and lifts it above the
   keyboard; these are the CSS fallbacks when visualViewport isn't available. */
@media (max-width: 640px) {
  .ccc-chat__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70dvh;
    max-height: 82dvh;
    border: none;
    border-top: 2px solid var(--cc-accent);
    border-radius: 14px 14px 0 0;
  }

  /* On phones the cookie banner is near full-width, so the bottom-right
     launcher lands on top of its Accept button. Hide the launcher until the
     visitor answers the banner (site.js toggles body.cookie-open). */
  body.cookie-open .ccc-chat__launch { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ccc-chat__panel { animation: none; }
  .ccc-chat__launch { transition: none; }
  .ccc-chat__typing span { animation: none; opacity: 0.6; }
}