/* =====================================================
 * talk-to-sales-chat — floating chat widget
 * Built on v5 tokens. Local classes namespaced `ttc-`.
 * A guided sales assistant: collects the same qualifying
 * details as the contact form, then hands the lead off to
 * the page card's schedule / thank-you flow.
 * ===================================================== */

.ttc {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-4);
  font-family: var(--font-sans);
  /* The container spans panel+launcher height — pass through events
     so the panel (already pointer-events:none when closed) and invisible
     container area don't block page clicks / nav-burger taps. */
  pointer-events: none;
}

/* ── Launcher ───────────────────────────────────────── */
.ttc-launcher {
  position: relative;
  width: 60px;
  height: 60px;
  pointer-events: auto;
  border-radius: 50%;
  background: var(--text-strong);
  color: #fff;
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: flex-end;
  transition: transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
}
.ttc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(14,14,12,0.26);
}
.ttc-launcher:active { transform: translateY(0); }
.ttc-launcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ttc-launcher-ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.ttc-launcher-ico i,
.ttc-launcher-ico svg { width: 24px; height: 24px; }
.ttc-ico-close { opacity: 0; transform: scale(0.6) rotate(-45deg); }
.ttc[data-open="true"] .ttc-ico-open  { opacity: 0; transform: scale(0.6) rotate(45deg); }
.ttc[data-open="true"] .ttc-ico-close { opacity: 1; transform: none; }
.ttc[data-open="true"] .ttc-launcher  { background: var(--g10); }

/* unread/attention pulse on the launcher when closed */
.ttc-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  color: #fff;
  transform: scale(1);
  transition: transform var(--duration-base) var(--ease-spring);
}
.ttc-badge[hidden] { transform: scale(0); }
.ttc[data-open="true"] .ttc-badge { transform: scale(0); }

/* ── Panel ──────────────────────────────────────────── */
.ttc-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 132px));
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.ttc[data-open="true"] .ttc-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* On mobile (full-width layout), restore pointer events on the container
   only when open — so the whole stretched container doesn't block the page */
@media (max-width: 520px) {
  .ttc[data-open="true"] { pointer-events: auto; }
}

/* header */
.ttc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-subtle);
  flex-shrink: 0;
}
.ttc-head-id {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.ttc-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-mid);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ttc-avatar i, .ttc-avatar svg { width: 19px; height: 19px; }
.ttc-head-name {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  line-height: 1.2;
}
.ttc-head-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--g8);
  margin-top: 2px;
}
.ttc-close {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--g8);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}
.ttc-close:hover { background: var(--s2); color: var(--text-strong); }
.ttc-close i, .ttc-close svg { width: 18px; height: 18px; }

/* ── Message log ────────────────────────────────────── */
.ttc-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scroll-behavior: smooth;
}
.ttc-log::-webkit-scrollbar { width: 8px; }
.ttc-log::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 100px;
  border: 2px solid var(--bg);
}

/* a message row */
.ttc-msg {
  display: flex;
  max-width: 84%;
  animation: ttc-msg-in 0.34s var(--ease) both;
}
@keyframes ttc-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ttc-msg-bot  { align-self: flex-start; }
.ttc-msg-user { align-self: flex-end; }

.ttc-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  word-break: break-word;
}
.ttc-msg-bot .ttc-bubble {
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.ttc-msg-user .ttc-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.ttc-bubble a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ttc-msg-bot .ttc-bubble b { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* typing indicator */
.ttc-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 14px;
}
.ttc-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--g6);
  animation: ttc-typing 1.2s var(--ease) infinite;
}
.ttc-typing span:nth-child(2) { animation-delay: 0.18s; }
.ttc-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ttc-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* an inline action button inside the log (handoff CTA) */
.ttc-cta {
  align-self: flex-start;
  margin-top: 2px;
  animation: ttc-msg-in 0.34s var(--ease) both;
}
.ttc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  color: #fff;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  border: 1px solid var(--text-strong);
  transition: background var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.ttc-cta-btn:hover {
  background: var(--g10);
  box-shadow: 0 4px 16px rgba(14,14,12,0.18);
  transform: translateY(-1px);
}
.ttc-cta-btn i, .ttc-cta-btn svg { width: 15px; height: 15px; }

/* progress hint under the header */
.ttc-progress {
  flex-shrink: 0;
  height: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.ttc-progress::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--ttc-progress, 0%);
  background: var(--accent);
  transition: width var(--duration-slow) var(--ease);
}

/* ── Quick replies ──────────────────────────────────── */
.ttc-quick {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-3);
}
.ttc-quick[hidden] { display: none; }
.ttc-chip {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  transition: border-color var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
  animation: ttc-msg-in 0.3s var(--ease) both;
}
.ttc-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.ttc-chip-ghost { color: var(--g7); }
.ttc-chip-ghost:hover { color: var(--text); background: var(--s2); border-color: var(--hairline-strong); }

/* ── Composer ───────────────────────────────────────── */
.ttc-input {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.ttc-input[data-hidden="true"] { display: none; }
.ttc-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--leading-snug);
  color: var(--text-strong);
  background: var(--bg);
  max-height: 96px;
  transition: border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.ttc-input textarea::placeholder { color: var(--g6); }
.ttc-input textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ttc-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              background var(--duration-base) var(--ease);
}
.ttc-send:hover { transform: translateY(-1px); }
.ttc-send:disabled { opacity: 0.4; cursor: default; transform: none; }
.ttc-send i, .ttc-send svg { width: 18px; height: 18px; }

/* footer note */
.ttc-foot {
  flex-shrink: 0;
  padding: 0 var(--sp-5) var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--g6);
  text-align: center;
}
.ttc-foot a { color: var(--g7); text-decoration: underline; text-underline-offset: 2px; }
.ttc-foot a:hover { color: var(--accent); }

/* ── In-chat cal.com embed ──────────────────────────────── */
.ttc-cal-block {
  align-self: stretch;
  width: 100%;
  height: 520px;
  flex: 0 0 auto;          /* don't let the flex-column log shrink it */
  margin-top: 2px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
  position: relative;      /* anchor for the absolutely-filled frame */
  animation: ttc-msg-in 0.34s var(--ease) both;
}
.ttc-cal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.ttc-cal-frame iframe { width: 100% !important; border: 0; }
.ttc-cal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--sp-6);
  text-align: center;
  background: var(--bg-subtle);
  font-size: 13px;
  color: var(--g8);
  line-height: var(--leading-normal);
}
.ttc-cal-loading a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ttc-cal-spin {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--accent-mid);
  border-top-color: var(--accent);
  animation: tts-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes tts-spin { to { transform: rotate(360deg); } }

/* a touch wider while the calendar is showing so slots aren't cramped */
.ttc[data-mode="schedule"] .ttc-panel { width: min(420px, calc(100vw - 32px)); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 520px) {
  .ttc { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .ttc-panel {
    width: 100%;
    height: min(640px, calc(100vh - 96px));
  }
  .ttc-launcher { align-self: flex-end; }
}

/* Keep the launcher clear of the full-width consent banner on first visit.
   The banner sits at bottom:12px and is full-width on small screens, so on
   mobile we lift the chat widget above it while the banner is open. The
   .ttc container animates its bottom offset, so it eases back when the
   banner is dismissed. */
@media (max-width: 520px) {
  body.consent-banner-open .ttc {
    bottom: 164px;
    transition: bottom var(--duration-base) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ttc-msg, .ttc-cta, .ttc-chip { animation: none; }
  .ttc-panel, .ttc-launcher, .ttc-launcher-ico { transition: none; }
  .ttc-typing span { animation: none; opacity: 0.55; }
}