/* ============================================================
   CHAT-WIDGET.CSS — floating "Ask me anything" assistant.
   Self-contained component dropped onto every page EXCEPT the
   homepage (the homepage keeps its own inline chat in home.css).
   Here it always renders as a sticky launcher + pop-up panel, at
   every viewport size. All selectors are scoped under
   .chat-widget-root and all variables are namespaced (--cw-*) so
   nothing leaks to or from the host page's styles.
============================================================ */
.chat-widget-root{
  --cw-bg:#FFFFFF;
  --cw-text:#0A0A0A; --cw-text-3:#6B7280;
  --cw-border:rgba(10,10,10,0.08);
  --cw-coral:#FF8A4B; --cw-rose:#B33A82;
  --cw-accent-rgb:179,58,130;
  --cw-bubble-bot:#FFE8D6;  --cw-bubble-bot-ink:#5A3A22;
  --cw-bubble-user:#F9D4E3; --cw-bubble-user-ink:#5A2742;
  --cw-f-body:'Mulish',system-ui,sans-serif;
  --cw-f-head:'Barlow',system-ui,sans-serif;
  --cw-r-xl:999px;
  --cw-ease:cubic-bezier(0.16,1,0.3,1);
}

/* ---- sticky launcher button ---- */
.chat-widget-root .chat-fab{
  display:block; position:fixed; right:18px; bottom:18px;
  width:62px; height:62px; padding:0; border:0; border-radius:50%;
  overflow:hidden; cursor:pointer; z-index:1001;
  background:linear-gradient(140deg,var(--cw-coral),var(--cw-rose));
  box-shadow:0 12px 30px rgba(179,58,130,.42);
  transition:transform .25s var(--cw-ease);
}
.chat-widget-root .chat-fab img{
  position:absolute; width:300%; max-width:none; height:auto;
  left:-78%; top:16%; display:block;
}
.chat-widget-root .chat-fab:hover{ transform:scale(1.06); }
body.chat-open .chat-widget-root .chat-fab{ transform:scale(0); pointer-events:none; }

/* ---- the pop-up panel ---- */
.chat-widget-root .chat{
  position:fixed; right:16px; bottom:92px; left:auto; top:auto;
  width:min(384px, calc(100vw - 32px)); height:min(72vh, 560px);
  background:var(--cw-bg); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px rgba(20,10,30,.30);
  display:flex; flex-direction:column; z-index:1000;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
  transition:opacity .22s var(--cw-ease), transform .22s var(--cw-ease), visibility .22s;
  font-family:var(--cw-f-body); color:var(--cw-text); line-height:1.5;
}
body.chat-open .chat-widget-root .chat{ opacity:1; visibility:visible; transform:none; }

/* ---- panel header with the waving avatar ---- */
.chat-widget-root .chat-panel-head{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:12px 14px; color:#fff;
  background:linear-gradient(135deg,var(--cw-coral),var(--cw-rose));
}
.chat-widget-root .cph-avatar{
  position:relative; width:42px; height:42px; border-radius:50%;
  overflow:hidden; flex-shrink:0; background:rgba(255,255,255,.25);
}
.chat-widget-root .cph-avatar img{ position:absolute; width:300%; max-width:none; height:auto; left:-78%; top:12%; display:block; }
.chat-widget-root .cph-text{ display:flex; flex-direction:column; line-height:1.15; }
.chat-widget-root .cph-text strong{ font-family:var(--cw-f-head); font-size:15px; font-weight:700; }
.chat-widget-root .cph-text span{ font-size:11px; opacity:.9; }
.chat-widget-root .cph-close{
  margin-left:auto; flex-shrink:0; width:32px; height:32px; border:0;
  border-radius:50%; background:transparent; color:#fff; font-size:24px; line-height:1;
  cursor:pointer; transition:background .2s;
}
.chat-widget-root .cph-close:hover{ background:rgba(255,255,255,.22); }

/* ---- conversation + input fill the panel ---- */
.chat-widget-root .chat-stack{
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:12px 12px 14px;
}
.chat-widget-root .chat-log{
  position:relative; flex:1; min-height:0;
  display:flex; flex-direction:column; gap:12px;
  padding:4px; width:100%;
  overflow-y:auto; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(var(--cw-accent-rgb),.35) transparent;
}
.chat-widget-root .chat-log > :first-child{ margin-top:auto; }
.chat-widget-root .chat-log::-webkit-scrollbar{ width:8px; }
.chat-widget-root .chat-log::-webkit-scrollbar-thumb{ background:rgba(var(--cw-accent-rgb),.3); border-radius:999px; }
.chat-widget-root .chat-log::-webkit-scrollbar-thumb:hover{ background:rgba(var(--cw-accent-rgb),.5); }
.chat-widget-root .chat-log::-webkit-scrollbar-track{ background:transparent; }

.chat-widget-root .msg{ display:flex; max-width:80%; }
.chat-widget-root .msg-bubble{
  font-family:var(--cw-f-body); font-size:14px; line-height:1.55;
  padding:12px 16px; border-radius:18px; white-space:pre-wrap;
}
.chat-widget-root .msg.bot{ align-self:flex-end; }
.chat-widget-root .msg.bot .msg-bubble{
  background:var(--cw-bubble-bot); color:var(--cw-bubble-bot-ink); border-bottom-right-radius:6px;
}
.chat-widget-root .msg.user{ align-self:flex-start; }
.chat-widget-root .msg.user .msg-bubble{
  background:var(--cw-bubble-user); color:var(--cw-bubble-user-ink); border-bottom-left-radius:6px;
}
.chat-widget-root .msg.bot .msg-bubble p{ margin:0 0 8px; }
.chat-widget-root .msg.bot .msg-bubble p:last-child{ margin-bottom:0; }
.chat-widget-root .msg.bot .msg-bubble ul{ margin:8px 0 0; padding-left:18px; list-style:none; }
.chat-widget-root .msg.bot .msg-bubble ul:first-child{ margin-top:0; }
.chat-widget-root .msg.bot .msg-bubble li{ position:relative; margin:5px 0; padding-left:14px; }
.chat-widget-root .msg.bot .msg-bubble li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:rgba(var(--cw-accent-rgb),.7);
}
.chat-widget-root .msg.bot .msg-bubble strong{ font-weight:700; color:inherit; }
.chat-widget-root .msg-bubble .mail-btn{
  display:inline-flex; align-items:center; gap:5px;
  margin:2px 0; padding:5px 11px; border-radius:999px;
  background:rgba(var(--cw-accent-rgb),.95); color:#fff;
  font-weight:600; font-size:13px; text-decoration:none;
  white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chat-widget-root .msg-bubble .mail-btn:hover{
  background:var(--cw-rose);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(var(--cw-accent-rgb),.35);
}
.chat-widget-root .msg-bubble .mail-btn:focus-visible{ outline:2px solid var(--cw-rose); outline-offset:2px; }

/* typing indicator */
.chat-widget-root .typing{
  display:flex; gap:4px; padding:14px 16px;
  background:var(--cw-bubble-bot); border-radius:18px 18px 6px 18px;
}
.chat-widget-root .typing span{
  width:7px; height:7px; border-radius:50%; background:var(--cw-rose); opacity:.5;
  animation:cw-blink 1.2s infinite both;
}
.chat-widget-root .typing span:nth-child(2){ animation-delay:.18s; }
.chat-widget-root .typing span:nth-child(3){ animation-delay:.36s; }
@keyframes cw-blink{ 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

/* foot = chips + input + note */
.chat-widget-root .chat-foot{ position:relative; z-index:3; width:100%; flex-shrink:0; margin-top:10px; }
.chat-widget-root .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chat-widget-root .chip{
  font-family:var(--cw-f-body); font-size:12px; font-weight:600; color:var(--cw-rose);
  background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(var(--cw-accent-rgb),0.25); border-radius:var(--cw-r-xl);
  padding:8px 14px; cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
.chat-widget-root .chip:hover{ border-color:var(--cw-rose); color:var(--cw-rose); background:#fff; }

.chat-widget-root .chat-input{
  display:flex; gap:6px; align-items:center;
  background:rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--cw-border); border-radius:var(--cw-r-xl);
  padding:6px 6px 6px 18px;
}
.chat-widget-root .chat-input input{
  flex:1; font-family:var(--cw-f-body); font-size:14px; color:var(--cw-text);
  background:transparent; border:0; outline:none; padding:8px 0;
}
.chat-widget-root .chat-input input::placeholder{ color:var(--cw-text-3); }
.chat-widget-root .chat-send{
  flex-shrink:0; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--cw-coral),var(--cw-rose)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--cw-ease);
}
.chat-widget-root .chat-send:hover{ transform:scale(1.06); }
.chat-widget-root .chat-send:active{ transform:scale(.94); }
.chat-widget-root .chat-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.chat-widget-root .chat-note{ font-size:10px; color:var(--cw-text-3); text-align:center; margin-top:10px; }

/* email gate */
.chat-widget-root .msg-bubble.gate{ max-width:none; }
.chat-widget-root .gate-text{ margin:0; }
.chat-widget-root .gate-form{ display:flex; gap:6px; margin-top:10px; }
.chat-widget-root .gate-input{
  flex:1; min-width:0; font-family:var(--cw-f-body); font-size:13px; color:var(--cw-text);
  background:rgba(255,255,255,0.9); border:1px solid var(--cw-border); border-radius:var(--cw-r-xl);
  padding:8px 12px; outline:none;
}
.chat-widget-root .gate-input:focus{ border-color:var(--cw-rose); }
.chat-widget-root .gate-btn{
  flex-shrink:0; font-family:var(--cw-f-body); font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--cw-coral),var(--cw-rose)); border:0; border-radius:var(--cw-r-xl);
  padding:8px 14px; cursor:pointer; transition:transform .15s var(--cw-ease);
}
.chat-widget-root .gate-btn:hover{ transform:scale(1.04); }
.chat-widget-root .gate-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.chat-widget-root .gate-consent{ font-size:10px; color:var(--cw-text-3); margin:8px 0 0; }
.chat-widget-root .gate-error{ color:var(--cw-coral); font-weight:600; }

@media (max-width:560px){
  .chat-widget-root .chat{ right:12px; bottom:84px; width:calc(100vw - 24px); height:min(76vh,600px); }
  .chat-widget-root .chat-fab{ right:14px; bottom:14px; width:58px; height:58px; }
}

@media (prefers-reduced-motion:reduce){
  .chat-widget-root .chat,
  .chat-widget-root .chat-fab,
  .chat-widget-root .chat-send,
  .chat-widget-root .typing span{ transition:none; animation:none; }
}