/* Query Logix AI chatbot */
:root{
  --qlai-navy:#07131A; --qlai-navy2:#0d242c; --qlai-mint:#42E6A4; --qlai-green:#079463;
  --qlai-text:#0f1d24; --qlai-muted:#5c6b72; --qlai-bg:#f4f7f8; --qlai-line:#e2e9eb;
  --qlai-right:20px;          /* same right gap as the WhatsApp button */
  --qlai-bottom:92px;         /* height above the WhatsApp button - adjust if needed */
}
.qlai-launch{
  position:fixed; right:var(--qlai-right); bottom:var(--qlai-bottom); z-index:9989;
  display:flex; align-items:center; gap:8px;
  background:var(--qlai-navy); color:#fff; border:2px solid var(--qlai-mint);
  padding:10px 16px 10px 12px; border-radius:999px; cursor:pointer;
  font:600 14px/1 'Poppins',system-ui,sans-serif; box-shadow:0 10px 26px -8px rgba(7,19,26,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.qlai-launch:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(7,19,26,.6); }
.qlai-launch:focus-visible{ outline:3px solid var(--qlai-mint); outline-offset:3px; }
.qlai-launch .qlai-dot{ width:28px; height:28px; border-radius:50%; background:var(--qlai-mint); display:grid; place-items:center; }
.qlai-launch .qlai-dot svg{ width:16px; height:16px; }
.qlai-launch .qlai-pulse{ position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--qlai-mint); border:2px solid #fff; }
.qlai-open .qlai-launch{ display:none; }

.qlai-panel{
  position:fixed; right:var(--qlai-right); bottom:20px; z-index:9990;
  width:370px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 40px);
  background:#fff; border-radius:18px; overflow:hidden; display:none; flex-direction:column;
  box-shadow:0 24px 60px -12px rgba(7,19,26,.45); font-family:'Poppins',system-ui,sans-serif;
  color:var(--qlai-text);
}
.qlai-open .qlai-panel{ display:flex; animation:qlaiIn .22s ease; }
@keyframes qlaiIn{ from{ opacity:0; transform:translateY(12px) scale(.98);} to{ opacity:1; transform:none;} }

.qlai-head{ background:var(--qlai-navy); color:#fff; padding:14px 14px 14px 16px; display:flex; align-items:center; gap:12px; }
.qlai-avatar{ width:38px; height:38px; border-radius:10px; background:var(--qlai-navy2); border:1px solid #1f3a43;
  display:flex; align-items:center; justify-content:center; white-space:nowrap; font:800 15px/1 'Poppins',sans-serif; color:#fff; flex-shrink:0; }
.qlai-avatar b{ color:var(--qlai-mint); }
.qlai-title{ flex:1; min-width:0; }
.qlai-title strong{ display:block; font-size:15px; font-weight:700; }
.qlai-title span{ font-size:12px; color:#9fb3b9; display:flex; align-items:center; gap:6px; }
.qlai-title span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--qlai-mint); }
.qlai-x{ background:transparent; border:0; color:#cfdcdf; width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:22px; line-height:1; }
.qlai-x:hover{ background:#14303a; color:#fff; }

.qlai-body{ flex:1; overflow-y:auto; padding:16px; background:var(--qlai-bg); display:flex; flex-direction:column; gap:10px; }
.qlai-msg{ max-width:85%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.55; word-wrap:break-word; white-space:pre-wrap; }
.qlai-bot{ background:#fff; border:1px solid var(--qlai-line); border-bottom-left-radius:4px; align-self:flex-start; }
.qlai-user{ background:var(--qlai-navy); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.qlai-bot a{ color:var(--qlai-green); font-weight:600; }
.qlai-err{ background:#fff4f4; border-color:#f3c9c9; color:#8a2a2a; }
.qlai-typing{ display:flex; gap:4px; padding:12px 14px; }
.qlai-typing i{ width:7px; height:7px; border-radius:50%; background:#9aabb0; animation:qlaiB 1s infinite; }
.qlai-typing i:nth-child(2){ animation-delay:.15s } .qlai-typing i:nth-child(3){ animation-delay:.3s }
@keyframes qlaiB{ 0%,60%,100%{ transform:none; opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }

.qlai-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; background:var(--qlai-bg); }
.qlai-chip{ border:1px solid var(--qlai-green); color:var(--qlai-green); background:#fff; border-radius:999px; padding:6px 11px; font:500 12.5px/1.2 'Poppins',sans-serif; cursor:pointer; }
.qlai-chip:hover{ background:var(--qlai-green); color:#fff; }

.qlai-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--qlai-line); background:#fff; }
.qlai-input{ flex:1; border:1px solid var(--qlai-line); border-radius:12px; padding:10px 12px; font:400 14px/1.4 'Poppins',sans-serif; resize:none; max-height:96px; outline:none; color:var(--qlai-text); background:#fff; }
.qlai-input:focus{ border-color:var(--qlai-green); }
.qlai-send{ width:44px; border:0; border-radius:12px; background:var(--qlai-mint); color:var(--qlai-navy); cursor:pointer; display:grid; place-items:center; }
.qlai-send:disabled{ opacity:.5; cursor:default; }
.qlai-send svg{ width:18px; height:18px; }
.qlai-foot{ text-align:center; font-size:11px; color:var(--qlai-muted); padding:0 12px 10px; background:#fff; }
.qlai-foot a{ color:var(--qlai-green); }

@media (max-width:480px){
  .qlai-launch{ padding:7px; right:26px; } .qlai-launch .qlai-label{ display:none; }
  .qlai-panel{ right:0; bottom:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
}
@media (prefers-reduced-motion:reduce){ .qlai-launch, .qlai-open .qlai-panel, .qlai-typing i{ transition:none; animation:none; } }
.nav-open .qlai-launch{ display:none; }
@media print{ .qlai-root{ display:none; } }