/* ============================================================================
   Ask QSS — chat widget (TEST BUILD)
   Scoped under #qss-chat-root so the site's global cascade can't bleed in.
   Fully reversible: deleting this file + js/chat-widget.js removes the widget
   and restores the WhatsApp button to its original bottom:30px position.
   ============================================================================ */
#qss-chat-root{
  --qcw-navy:#05052b; --qcw-navy2:#0b0b45; --qcw-cyan:#00b3fb; --qcw-cyan-deep:#0091d6;
  --qcw-text:#1e2434; --qcw-muted:#5b6478; --qcw-line:#e2ebfb; --qcw-bot:#f4f7ff;
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Reversible: lift the existing WhatsApp button so the chat FAB sits BELOW it */
#wa-float{bottom:104px !important;}

/* ---------- launcher (FAB) : bottom-right corner, under WhatsApp ---------- */
#qss-chat-fab{
  position:fixed; right:30px; bottom:30px; z-index:99998;
  width:60px; height:60px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:transparent;
  transition:transform .2s ease;
}
#qss-chat-fab:hover{transform:translateY(-2px) scale(1.06);}
#qss-chat-fab img{width:60px; height:60px; display:block; object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));}
#qss-chat-fab .qcw-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  background:#ff1b1f; color:#fff; font-size:11px; font-weight:700; line-height:18px;
  border-radius:9px; text-align:center; box-shadow:0 0 0 2px #fff;
}
#qss-chat-root.qcw-open #qss-chat-fab{display:none;}

/* ---------- panel ---------- */
#qss-chat-panel{
  position:fixed; right:30px; bottom:30px; z-index:99999;
  width:390px; max-width:calc(100vw - 40px); height:600px; max-height:78vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:18px; border:1px solid var(--qcw-line);
  box-shadow:0 24px 60px rgba(5,5,43,.32);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.98);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
#qss-chat-root.qcw-open #qss-chat-panel{opacity:1; visibility:visible; transform:none;}

/* header */
.qcw-head{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:linear-gradient(135deg,var(--qcw-navy) 0%,var(--qcw-navy2) 100%); color:#fff;
}
.qcw-head img{height:30px; width:auto; display:block;}
.qcw-head .qcw-titles{flex:1; min-width:0; line-height:1.2;}
.qcw-head .qcw-t1{font-size:15px; font-weight:700; color:#fff;}
.qcw-head .qcw-t2{font-size:12px; color:#bcd; display:flex; align-items:center; gap:6px;}
.qcw-head .qcw-dot{width:8px; height:8px; border-radius:50%; background:#39d98a; display:inline-block;}
.qcw-close{
  background:rgba(255,255,255,.12); border:0; color:#fff; width:30px; height:30px; flex:none;
  border-radius:8px; cursor:pointer; font-size:18px; line-height:1; display:flex;
  align-items:center; justify-content:center; transition:background .15s;
}
.qcw-close:hover{background:rgba(255,255,255,.24);}

/* messages */
.qcw-msgs{flex:1; overflow-y:auto; padding:16px; background:#fff; display:flex; flex-direction:column; gap:12px;}
.qcw-row{display:flex; max-width:88%;}
.qcw-row.qcw-user{align-self:flex-end; justify-content:flex-end;}
.qcw-row.qcw-bot{align-self:flex-start;}
.qcw-bubble{
  padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.55;
  color:var(--qcw-text) !important; word-wrap:break-word; white-space:normal;
}
.qcw-user .qcw-bubble{
  background:var(--qcw-cyan); color:#04263a !important;
  -webkit-text-fill-color:#04263a; border-bottom-right-radius:4px;
}
.qcw-bot .qcw-bubble{
  background:var(--qcw-bot); border:1px solid var(--qcw-line);
  -webkit-text-fill-color:var(--qcw-text); border-bottom-left-radius:4px;
}
.qcw-bubble a{color:var(--qcw-cyan-deep) !important; font-weight:600; text-decoration:underline;}
.qcw-bubble p{margin:0 0 8px;} .qcw-bubble p:last-child{margin:0;}
.qcw-bubble ul{margin:6px 0; padding-left:18px;} .qcw-bubble li{margin:2px 0;}

/* typing indicator */
.qcw-typing{display:inline-flex; gap:4px; padding:12px 14px;}
.qcw-typing span{width:7px; height:7px; border-radius:50%; background:#a9b4cc; animation:qcw-blink 1.2s infinite;}
.qcw-typing span:nth-child(2){animation-delay:.2s;} .qcw-typing span:nth-child(3){animation-delay:.4s;}
@keyframes qcw-blink{0%,60%,100%{opacity:.25;} 30%{opacity:1;}}

/* suggested prompts */
.qcw-suggest{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px;}
.qcw-chip{
  border:1px solid var(--qcw-line); background:#fff; color:var(--qcw-cyan-deep) !important;
  font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:40px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.qcw-chip:hover{background:#f0f9ff; border-color:var(--qcw-cyan);}

/* handoff row */
.qcw-handoff{
  display:flex; gap:8px; padding:0 16px 10px; font-size:12px; color:var(--qcw-muted);
  align-items:center; flex-wrap:wrap;
}
.qcw-handoff a{color:var(--qcw-cyan-deep) !important; font-weight:600; text-decoration:none; cursor:pointer;}
.qcw-handoff a:hover{text-decoration:underline;}

/* composer */
.qcw-form{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--qcw-line); background:#fff;}
/* ID-scoped to beat styles.css's site-wide input rules + red focus-ring (same tactic as discovery-modal) */
#qss-chat-root #qss-chat-panel .qcw-form .qcw-input{
  flex:1; resize:none; max-height:110px; min-height:44px; padding:11px 14px;
  border:1px solid var(--qcw-line) !important; border-radius:12px !important; font-family:inherit;
  font-size:14px; color:var(--qcw-text) !important; background:#fff !important; outline:none !important;
  -webkit-text-fill-color:var(--qcw-text); line-height:1.4; box-shadow:none !important;
}
#qss-chat-root #qss-chat-panel .qcw-form .qcw-input:focus,
#qss-chat-root #qss-chat-panel .qcw-form .qcw-input:focus-visible{
  border-color:var(--qcw-cyan) !important; box-shadow:0 0 0 3px rgba(0,179,251,.16) !important;
  outline:none !important;
}
.qcw-send{
  flex:none; width:44px; height:44px; border:0; border-radius:12px; cursor:pointer;
  background:var(--qcw-cyan); color:#04263a; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s;
}
.qcw-send:hover{background:var(--qcw-cyan-deep);}
.qcw-send:disabled{opacity:.45; cursor:not-allowed;}
.qcw-send svg{width:20px; height:20px;}
.qcw-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

/* footnote */
.qcw-foot{font-size:10.5px; color:#9aa3b8; text-align:center; padding:0 16px 10px;}

/* mobile: full screen */
@media (max-width:720px){
  #qss-chat-panel{right:0; bottom:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0;}
  #qss-chat-fab{right:18px; bottom:24px;}
  #wa-float{bottom:96px !important; right:18px !important;}
}

@media (prefers-reduced-motion:reduce){
  #qss-chat-fab,#qss-chat-panel,.qcw-typing span{transition:none !important; animation:none !important;}
}