/* ═══════════════════════════════════════════════════════════════════
   HomeCheck chat + WhatsApp widget — Terra Vivid styling
   Self-contained; scoped under #hc-chat to avoid clashing with the site.
   ═══════════════════════════════════════════════════════════════════ */

#hc-chat {
  --hc-terracotta: #D9582B;
  --hc-terra-tint: #FEF0EB;
  --hc-ink: #1E1A17;
  --hc-cream: #F7F3EE;
  --hc-cream-deep: #F0EAE2;
  --hc-sand-deep: #D5C8BA;
  --hc-sage: #3B8B78;
  --hc-font-head: 'DM Sans', sans-serif;
  --hc-font-body: 'Inter', sans-serif;
  --hc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font-family: var(--hc-font-body);
}

#hc-chat *,
#hc-chat *::before,
#hc-chat *::after { box-sizing: border-box; }

/* ── Launcher button ────────────────────────────────────────────── */
.hc-launcher {
  width: 60px;
  height: 60px;
  border-radius: 500px;
  border: none;
  background: var(--hc-terracotta);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(30, 26, 23, 0.22);
  transition: transform 0.3s var(--hc-ease), box-shadow 0.3s var(--hc-ease);
}
.hc-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(30, 26, 23, 0.28); }
.hc-launcher:focus-visible { outline: 3px solid var(--hc-ink); outline-offset: 2px; }
.hc-launcher svg { width: 28px; height: 28px; }

/* ── Teaser bubble ──────────────────────────────────────────────── */
.hc-teaser {
  position: absolute;
  right: 4px;
  bottom: 76px;
  width: 232px;
  max-width: calc(100vw - 40px);
  background: #fff;
  color: var(--hc-ink);
  font-size: 0.84rem;
  line-height: 1.42;
  padding: 13px 32px 13px 15px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(30, 26, 23, 0.20);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.3s var(--hc-ease), transform 0.3s var(--hc-ease);
}
.hc-teaser.show { opacity: 1; transform: translateY(0) scale(1); }
.hc-teaser::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 26px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
.hc-teaser-close {
  position: absolute;
  top: 6px;
  right: 9px;
  border: none;
  background: none;
  font-size: 17px;
  line-height: 1;
  color: var(--hc-sand-deep);
  cursor: pointer;
  padding: 2px;
}
.hc-teaser-close:hover { color: var(--hc-ink); }

/* ── Panel ──────────────────────────────────────────────────────── */
.hc-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 110px);
  background: var(--hc-cream);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(30, 26, 23, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.28s var(--hc-ease), transform 0.28s var(--hc-ease);
}
#hc-chat.hc-open .hc-panel { display: flex; opacity: 1; transform: translateY(0) scale(1); }

/* ── Header ─────────────────────────────────────────────────────── */
.hc-header {
  background: var(--hc-terracotta);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hc-title { font-family: var(--hc-font-head); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.hc-subtitle { font-size: 0.75rem; opacity: 0.9; margin-top: 2px; }
.hc-close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 8px; display: flex; }
.hc-close:hover { background: rgba(255, 255, 255, 0.18); }
.hc-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── Messages ───────────────────────────────────────────────────── */
.hc-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hc-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.hc-msg-bot { align-self: flex-start; background: var(--hc-cream-deep); color: var(--hc-ink); border-bottom-left-radius: 4px; }
.hc-msg-user { align-self: flex-end; background: var(--hc-terra-tint); color: var(--hc-ink); border-bottom-right-radius: 4px; }

.hc-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--hc-cream-deep); border-radius: 14px; border-bottom-left-radius: 4px; }
.hc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--hc-sand-deep); animation: hc-bounce 1.2s infinite ease-in-out; }
.hc-typing span:nth-child(2) { animation-delay: 0.18s; }
.hc-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes hc-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ── WhatsApp button ────────────────────────────────────────────── */
.hc-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 10px;
  padding: 11px;
  background: var(--hc-sage);
  color: #fff;
  border-radius: 500px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: filter 0.25s var(--hc-ease);
}
.hc-whatsapp:hover { filter: brightness(1.06); }
.hc-whatsapp:focus-visible { outline: 2px solid var(--hc-ink); outline-offset: 2px; }
.hc-whatsapp svg { width: 18px; height: 18px; }

/* ── Input ──────────────────────────────────────────────────────── */
.hc-input-row { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--hc-cream-deep); }
.hc-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--hc-sand-deep);
  border-radius: 14px;
  padding: 10px 12px;
  font-family: var(--hc-font-body);
  font-size: 0.9rem;
  color: var(--hc-ink);
  background: #fff;
  max-height: 100px;
  line-height: 1.4;
}
.hc-input:focus { outline: none; border-color: var(--hc-terracotta); }
.hc-send {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--hc-terracotta);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s var(--hc-ease);
}
.hc-send:hover { filter: brightness(1.06); }
.hc-send:disabled { opacity: 0.5; cursor: default; }
.hc-send:focus-visible { outline: 2px solid var(--hc-ink); outline-offset: 2px; }
.hc-send svg { width: 20px; height: 20px; }

@media (max-width: 480px) {
  #hc-chat { right: 14px; bottom: 14px; }
  .hc-panel { width: calc(100vw - 28px); height: calc(100vh - 90px); bottom: 70px; }
}