/* ============================================================
   HBY Chat Assistant Widget — Version 1.2
   Brand colours: Forest #1a3528 | Gold #c4943a | Cream #f5f0e8
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@300;400;500&display=swap');

:root {
  --hby-forest:       #1a3528;
  --hby-forest-mid:   #254a38;
  --hby-forest-light: #2d5a43;
  --hby-gold:         #c4943a;
  --hby-gold-light:   #d4a84b;
  --hby-cream:        #f5f0e8;
  --hby-cream-mid:    #ede6d8;
  --hby-cream-dark:   #e0d8c8;
  --hby-warm-white:   #faf8f3;
  --hby-card-cream:   #faf7f2;
  --hby-text-muted:   #6b7280;
  --hby-shadow:       0 8px 32px rgba(26, 53, 40, 0.18);
  --hby-radius:       16px;
}

/* ── Floating trigger ─────────────────────────────────────── */
#hby-chat-trigger {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  width:         60px;
  height:        60px;
  border-radius: 50%;
  border:        none;
  padding:       0;
  cursor:        pointer;
  z-index:       9999;
  background:    transparent;
  box-shadow:    0 4px 16px rgba(26, 53, 40, 0.25);
  overflow:      hidden;
  animation:     hbyFloat 4s ease-in-out infinite;
}

#hby-chat-trigger.hby-bottom-left {
  right: auto;
  left:  24px;
}

@keyframes hbyFloat {
  0%   { transform: translateY(0px);  box-shadow: 0 4px 16px rgba(26,53,40,0.25); }
  50%  { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(26,53,40,0.20); }
  100% { transform: translateY(0px);  box-shadow: 0 4px 16px rgba(26,53,40,0.25); }
}

#hby-chat-trigger:hover {
  animation-play-state: paused;
  box-shadow:           0 8px 24px rgba(26, 53, 40, 0.35);
}

#hby-chat-trigger img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: 50%;
  display:       block;
}

#hby-chat-trigger.no-avatar {
  background:      var(--hby-forest);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

#hby-chat-trigger.no-avatar::after {
  content:     '💬';
  font-size:   24px;
  line-height: 1;
}

/* ── Chat panel ───────────────────────────────────────────── */
#hby-chat-panel {
  position:       fixed;
  bottom:         96px;
  right:          24px;
  width:          360px;
  height:         520px;
  background:     var(--hby-card-cream);
  border-radius:  var(--hby-radius);
  box-shadow:     var(--hby-shadow);
  display:        flex;
  flex-direction: column;
  z-index:        9998;
  overflow:       hidden;
  opacity:        0;
  transform:      translateY(12px) scale(0.97);
  pointer-events: none;
  transition:     opacity 0.25s ease, transform 0.25s ease;
}

#hby-chat-panel.hby-bottom-left {
  right: auto;
  left:  24px;
}

#hby-chat-panel.hby-open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: all;
}

/* ── Header ───────────────────────────────────────────────── */
#hby-chat-header {
  background:  var(--hby-forest);
  height:      64px;
  display:     flex;
  align-items: center;
  padding:     0 16px;
  gap:         10px;
  flex-shrink: 0;
}

#hby-chat-header-avatar {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  border:        2px solid rgba(245, 240, 232, 0.3);
}

#hby-chat-header-text {
  flex:      1;
  min-width: 0;
}

#hby-chat-header-name {
  font-family:   'Cormorant Garamond', Georgia, serif;
  font-size:     16px;
  font-weight:   600;
  color:         var(--hby-cream);
  line-height:   1.2;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

#hby-chat-header-subtitle {
  font-family: 'Inter', sans-serif;
  font-size:   11px;
  font-weight: 400;
  color:       rgba(245, 240, 232, 0.65);
  line-height: 1.2;
}

#hby-chat-close {
  background:    none;
  border:        none;
  color:         var(--hby-cream);
  font-size:     20px;
  line-height:   1;
  cursor:        pointer;
  padding:       4px 6px;
  border-radius: 4px;
  flex-shrink:   0;
  opacity:       0.8;
  transition:    opacity 0.15s ease;
}

#hby-chat-close:hover { opacity: 1; }

/* ── Messages ─────────────────────────────────────────────── */
#hby-chat-messages {
  flex:            1;
  overflow-y:      auto;
  padding:         16px;
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  scroll-behavior: smooth;
}

#hby-chat-messages::-webkit-scrollbar       { width: 4px; }
#hby-chat-messages::-webkit-scrollbar-track { background: transparent; }
#hby-chat-messages::-webkit-scrollbar-thumb { background: var(--hby-cream-dark); border-radius: 2px; }

/* ── Message bubbles ──────────────────────────────────────── */
.hby-message {
  display:   flex;
  max-width: 85%;
  animation: hbyFadeIn 0.2s ease;
}

.hby-message.hby-user      { align-self: flex-end; }
.hby-message.hby-assistant { align-self: flex-start; }

.hby-bubble {
  padding:     10px 14px;
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  font-weight: 400;
  line-height: 1.5;
  word-break:  break-word;
}

.hby-message.hby-user .hby-bubble {
  background:    var(--hby-forest);
  color:         var(--hby-cream);
  border-radius: 16px 16px 4px 16px;
}

.hby-message.hby-assistant .hby-bubble {
  background:    #ffffff;
  color:         var(--hby-forest);
  border-radius: 16px 16px 16px 4px;
  box-shadow:    0 1px 4px rgba(26, 53, 40, 0.08);
}

.hby-message.hby-assistant .hby-bubble a {
  color:           var(--hby-gold);
  text-decoration: underline;
  word-break:      break-all;
}

.hby-message.hby-assistant .hby-bubble a:hover { color: var(--hby-forest); }

.hby-message.hby-assistant .hby-bubble strong {
  font-weight: 600;
}

/* ── Typing indicator ─────────────────────────────────────── */
#hby-typing-indicator {
  display:       none;
  align-self:    flex-start;
  margin:        0 16px 8px;
  padding:       10px 14px;
  background:    #ffffff;
  border-radius: 16px 16px 16px 4px;
  box-shadow:    0 1px 4px rgba(26, 53, 40, 0.08);
}

#hby-typing-indicator.hby-visible {
  display:     flex;
  gap:         4px;
  align-items: center;
}

.hby-typing-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--hby-forest);
  opacity:       0.4;
  animation:     hbyTyping 1.2s infinite;
}

.hby-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.hby-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes hbyTyping {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%            { opacity: 1;   transform: translateY(-3px); }
}

/* ── Quick reply buttons ──────────────────────────────────── */
#hby-quick-replies {
  padding:     0 16px 12px;
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  flex-shrink: 0;
}

.hby-quick-reply {
  background:    transparent;
  border:        1px solid var(--hby-gold);
  color:         var(--hby-gold);
  font-family:   'Inter', sans-serif;
  font-size:     12px;
  font-weight:   500;
  padding:       5px 12px;
  border-radius: 999px;
  cursor:        pointer;
  transition:    background 0.15s ease, color 0.15s ease;
  white-space:   nowrap;
}

.hby-quick-reply:hover {
  background: var(--hby-gold);
  color:      #ffffff;
}

/* ── Lead capture form ────────────────────────────────────── */
#hby-lead-form {
  display:        none;
  flex-direction: column;
  gap:            8px;
  padding:        12px 16px;
  background:     var(--hby-warm-white);
  border-top:     1px solid var(--hby-cream-dark);
  flex-shrink:    0;
}

#hby-lead-form.hby-visible { display: flex; }

#hby-lead-form input {
  font-family:   'Inter', sans-serif;
  font-size:     13px;
  padding:       8px 12px;
  border:        1px solid var(--hby-cream-dark);
  border-radius: 8px;
  background:    #ffffff;
  color:         var(--hby-forest);
  outline:       none;
  transition:    border-color 0.15s ease;
}

#hby-lead-form input:focus        { border-color: var(--hby-gold); }
#hby-lead-form input::placeholder { color: var(--hby-text-muted); }

#hby-lead-consent {
  font-family: 'Inter', sans-serif;
  font-size:   11px;
  font-weight: 300;
  color:       var(--hby-text-muted);
  line-height: 1.4;
  text-align:  center;
}

#hby-lead-submit {
  background:    var(--hby-forest);
  color:         var(--hby-cream);
  font-family:   'Inter', sans-serif;
  font-size:     13px;
  font-weight:   500;
  border:        none;
  padding:       9px 16px;
  border-radius: 8px;
  cursor:        pointer;
  transition:    background 0.15s ease;
}

#hby-lead-submit:hover    { background: var(--hby-forest-mid); }
#hby-lead-submit:disabled { opacity: 0.6; cursor: default; }

#hby-lead-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

#hby-lead-decline {
  background: transparent;
  color: var(--hby-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--hby-cream-dark);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

#hby-lead-decline:hover {
  color: var(--hby-forest);
  border-color: var(--hby-gold);
}

/* ── Input area ───────────────────────────────────────────── */
#hby-chat-input-area {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     12px 16px;
  border-top:  1px solid var(--hby-cream-dark);
  background:  #ffffff;
  flex-shrink: 0;
}

#hby-chat-input {
  flex:        1;
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  border:      none;
  outline:     none;
  background:  transparent;
  color:       var(--hby-forest);
  height:      36px;
  line-height: 36px;
  padding:     0 4px;
}

#hby-chat-input::placeholder { color: var(--hby-text-muted); }

/* ── Send button — arrow comes from HTML entity in the button ── */
#hby-chat-send {
  width:           36px;
  height:          36px;
  border:          none;
  border-radius:   8px;
  background:      var(--hby-forest);
  color:           var(--hby-cream);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       16px;
  line-height:     1;
  transition:      background 0.15s ease, opacity 0.15s ease;
}

#hby-chat-send::after {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background: var(--hby-cream);
  clip-path: polygon(12% 6%, 92% 50%, 12% 94%, 24% 57%, 54% 50%, 24% 43%);
  pointer-events: none;
  flex-shrink: 0;
}

#hby-chat-send:hover    { background: var(--hby-forest-mid); }
#hby-chat-send:disabled { opacity: 0.4; cursor: default; }
#hby-chat-send:disabled::after { opacity: 1; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes hbyFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media ( max-width: 600px ) {

  #hby-chat-trigger {
    bottom: 16px;
    right:  16px;
    width:  56px;
    height: 56px;
  }

  #hby-chat-trigger.hby-bottom-left {
    right: auto;
    left:  16px;
  }

  #hby-chat-panel {
    position:       fixed;
    left:           0;
    right:          0;
    bottom:         0;
    width:          100%;
    height:         75dvh;
    max-height:     75dvh;
    border-radius:  18px 18px 0 0;
    z-index:        99999;
    transform:      translateY(100%);
    opacity:        1;
    transition:     transform 0.3s ease;
  }

  #hby-chat-panel.hby-bottom-left {
    right: 0;
    left:  0;
  }

  #hby-chat-panel.hby-open {
    transform: translateY(0);
    opacity:   1;
  }
}