/* ── AI CHAT WIDGET ──
   Replaces the free-consultation popup. The bubble swaps in for the
   WhatsApp float after the 60s / 30%-scroll trigger (see styles.css). */

/* Bubble */
.chat-bubble{
  position:fixed;right:24px;bottom:24px;z-index:1000;
  width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#25d366,#18a957);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 40px rgba(37,211,102,.28);
  opacity:0;visibility:hidden;transform:scale(.4);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.chat-bubble svg{width:56%;height:56%;pointer-events:none;}
.chat-bubble.show{opacity:1;visibility:visible;transform:scale(1);animation:pulse 1.6s ease-out 2;}
.chat-bubble:hover{transform:scale(1.06);}
.chat-bubble:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45),0 20px 40px rgba(37,211,102,.28);}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 20px 40px rgba(37,211,102,.28);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 20px 40px rgba(37,211,102,.28);}
}

/* Capsule hint: semitransparent "Hello, may we help you?" pill shown on
   narrow screens instead of auto-opening the window */
.chat-capsule{
  position:fixed;right:24px;bottom:100px;z-index:1000;
  max-width:calc(100vw - 48px);
  background:rgba(255,252,254,.88);
  border:1.5px solid rgba(212,130,157,.45);border-radius:50px;
  padding:12px 18px;font-size:14px;line-height:1.35;white-space:nowrap;
  color:var(--text-main);cursor:pointer;font-family:var(--font-main);
  box-shadow:0 12px 28px rgba(58,46,56,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.chat-capsule.show{opacity:1;visibility:visible;transform:none;}
.chat-capsule:hover{background:rgba(255,252,254,.97);}
.chat-capsule:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* Window */
.chat-window{
  position:fixed;right:24px;bottom:98px;z-index:1001;
  width:min(360px,calc(100vw - 32px));height:min(480px,calc(100vh - 170px));
  background:var(--bg-primary);border-radius:20px;
  box-shadow:0 24px 60px rgba(58,46,56,.18);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.chat-window.open{opacity:1;visibility:visible;transform:none;}

/* Header */
.chat-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#25d366,#18a957);color:#fff;flex-shrink:0;}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;letter-spacing:.5px;flex-shrink:0;}
.chat-title{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0;}
.chat-name{font-size:15px;font-weight:700;letter-spacing:.4px;}
.chat-status{font-size:12px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-close{background:rgba(255,255,255,.18);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.chat-close:hover{background:rgba(255,255,255,.32);}
.chat-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* Messages */
.chat-messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-line;word-wrap:break-word;box-shadow:0 2px 6px rgba(58,46,56,.06);}
.chat-msg-bot{align-self:flex-start;background:#fff;color:var(--text-main);border-bottom-left-radius:4px;}
.chat-msg-user{align-self:flex-end;background:linear-gradient(135deg,#25d366,#18a957);color:#fff;border-bottom-right-radius:4px;}

/* Typing indicator */
.chat-typing{display:flex;gap:4px;align-items:center;padding:14px;}
.chat-typing .c-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite;}
.chat-typing .c-dot:nth-child(2){animation-delay:.2s;}
.chat-typing .c-dot:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

/* Quick-reply chips + free-text button */
.chat-actions{display:flex;flex-direction:column;gap:8px;}
.chat-chip{
  text-align:left;align-self:flex-start;max-width:100%;
  background:#fff;border:1.5px solid var(--accent-light);color:var(--text-main);
  border-radius:16px;border-bottom-left-radius:4px;padding:10px 14px;
  font-size:14px;line-height:1.4;cursor:pointer;font-family:var(--font-main);
  transition:all .2s var(--ease);box-shadow:0 2px 6px rgba(58,46,56,.04);
}
.chat-chip:hover{background:var(--accent-light);}
.chat-chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.chat-chip.done{display:none;}
.chat-freetext{
  margin-top:4px;align-self:stretch;
  background:linear-gradient(135deg,#25d366,#18a957);color:#fff;border:none;
  border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:1.45;
  cursor:pointer;font-family:var(--font-main);text-align:center;
  box-shadow:0 8px 20px rgba(37,211,102,.25);transition:transform .2s var(--ease);
}
.chat-freetext:hover{transform:translateY(-2px);}
.chat-freetext:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* Inline WhatsApp / Instagram CTA */
.chat-msg-link{display:flex;flex-direction:column;gap:8px;}
.chat-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#25d366;color:#fff;border-radius:50px;padding:10px 20px;
  font-size:13px;font-weight:700;letter-spacing:.5px;text-decoration:none;
  align-self:flex-start;box-shadow:0 6px 16px rgba(37,211,102,.28);
  transition:all .2s var(--ease);
}
.chat-cta:hover{background:#1fb355;}
.chat-cta::before{content:'✉ ';}
.chat-cta[data-cta="ig"]{background:transparent;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none;}
.chat-cta[data-cta="ig"]:hover{background:var(--accent);color:#fff;}
.chat-cta[data-cta="ig"]::before{content:'📸 ';}
.chat-cta[data-cta="maps"]{background:transparent;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none;}
.chat-cta[data-cta="maps"]:hover{background:var(--accent);color:#fff;}
.chat-cta[data-cta="maps"]::before{content:'📍 ';}

/* Input */
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(212,130,157,.15);background:#fff;flex-shrink:0;}
.chat-input{
  flex:1;border:1.5px solid rgba(212,130,157,.25);border-radius:50px;padding:11px 16px;
  font-size:14px;font-family:var(--font-main);color:var(--text-main);outline:none;
  background:var(--bg-primary);transition:border-color .2s;
}
.chat-input::placeholder{color:var(--text-muted);}
.chat-input:focus{border-color:var(--accent);}
.chat-send{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,#25d366,#18a957);color:#fff;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:transform .2s;
}
.chat-send:hover{transform:scale(1.08);}
.chat-send:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* Mobile */
@media(max-width:640px){
  .chat-bubble{right:22px;bottom:22px;width:52px;height:52px;}
  .chat-capsule{right:22px;bottom:84px;max-width:calc(100vw - 44px);}
  .chat-window{right:12px;bottom:82px;width:calc(100vw - 24px);height:min(420px,55vh);}
}
@media(max-width:460px){
  .chat-bubble{right:18px;bottom:18px;width:44px;height:44px;}
  .chat-capsule{right:18px;bottom:72px;max-width:calc(100vw - 36px);}
  .chat-window{right:10px;bottom:74px;width:calc(100vw - 20px);}
}

@media(prefers-reduced-motion:reduce){
  .chat-bubble.show{animation:none;}
  .chat-bubble,.chat-capsule,.chat-window,.chat-typing .c-dot{transition:none;animation:none;}
}