/* ══════════════════════════════════════════════════════════════════
   Clean Bot — shared chat widget styles
   Extracted from Index.html (the two duplicate .chat-win blocks are
   merged here; the premium glass version wins).

   Every custom property carries a fallback so this file works on the
   service landing pages, which do not define the full Index.html
   token set. On Index.html the tokens resolve, so the widget still
   follows the light/dark theme switch.
   ══════════════════════════════════════════════════════════════════ */

/* ── FLOATING ACTION BUTTON ── */
.chat-fab{
  position:fixed;bottom:30px;right:30px;z-index:400;width:60px;height:60px;
  border-radius:50%;
  background:var(--grad,linear-gradient(135deg,#7C3AED 0%,#0EA5E9 100%));
  border:none;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;cursor:pointer;line-height:1;
  box-shadow:0 8px 34px rgba(124,58,237,.55);
  transition:var(--t,.4s cubic-bezier(.16,1,.3,1));
}
.chat-fab:hover{transform:scale(1.1);box-shadow:0 16px 54px rgba(124,58,237,.7)}
.chat-fab:focus-visible{outline:2px solid #0EA5E9;outline-offset:3px}

/* Unread / attention pip */
.chat-fab[data-pip="1"]::after{
  content:'';position:absolute;top:4px;right:4px;width:12px;height:12px;
  border-radius:50%;background:#ef4444;border:2px solid #06060a;
}

/* ── WINDOW ── */
.chat-win{
  position:fixed;bottom:108px;right:30px;z-index:400;width:395px;height:540px;
  background:linear-gradient(180deg,rgba(16,16,42,.98),rgba(10,10,26,.98));
  border:1px solid rgba(124,58,237,.3);border-radius:24px;
  display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 0 1px rgba(124,58,237,.1),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px);
  font-family:var(--fn-b,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
}
.chat-win.open{display:flex;animation:sUp .4s var(--ease,cubic-bezier(.16,1,.3,1))}
@keyframes sUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── HEADER ── */
.ch-head{
  padding:18px 20px;
  background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(232,121,249,.15),rgba(14,165,233,.1));
  border-bottom:1px solid rgba(124,58,237,.2);
  display:flex;align-items:center;gap:12px;
}
.ch-av{
  width:38px;height:38px;border-radius:50%;
  background:var(--grad,linear-gradient(135deg,#7C3AED 0%,#0EA5E9 100%));
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.ch-head-text h4{font-size:.88rem;font-weight:700;color:var(--w,#f0f2ff);margin:0}
.ch-head-text p{font-size:.68rem;color:var(--g1,#a3e635);margin:0}
.ch-close{
  margin-left:auto;background:none;border:none;font-size:1rem;
  color:var(--m,rgba(240,242,255,.5));cursor:pointer;padding:4px 6px;line-height:1;
}
.ch-close:hover{color:var(--w,#f0f2ff)}
.ch-close:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px;border-radius:4px}

/* ── MESSAGE LIST ── */
.ch-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ch-msgs::-webkit-scrollbar{width:3px}
.ch-msgs::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3)}
.msg{max-width:82%;padding:11px 15px;border-radius:14px;font-size:.8rem;line-height:1.6}
.msg.bot{
  background:var(--surface,#0c0c22);
  border:1px solid var(--border,rgba(255,255,255,.06));
  color:var(--w,#f0f2ff);
  align-self:flex-start;border-bottom-left-radius:3px;
}
.msg.user{
  background:var(--grad,linear-gradient(135deg,#7C3AED 0%,#0EA5E9 100%));
  color:#fff;align-self:flex-end;border-bottom-right-radius:3px;
}
.msg.bot a{color:var(--b1,#0EA5E9);text-decoration:underline}
.msg.bot strong{color:var(--w,#f0f2ff);font-weight:600}
.msg.bot p{margin:5px 0}
.msg.err{border-color:rgba(239,68,68,.45)}

/* ── QUICK REPLIES ── */
.ch-quick{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 9px}
.quick-btn{
  padding:5px 11px;border-radius:100px;background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.25);font-size:.7rem;
  /* The original used --m2 (26% white) — below WCAG AA on this
     background. Raised to a legible value. */
  color:rgba(240,242,255,.78);cursor:pointer;
  font-family:inherit;
  transition:var(--t,.4s cubic-bezier(.16,1,.3,1));
}
.quick-btn:hover{background:rgba(124,58,237,.28);color:var(--w,#f0f2ff)}
.quick-btn:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px}

/* ── INPUT ── */
.ch-input{
  padding:11px 14px;border-top:1px solid var(--border,rgba(255,255,255,.06));
  display:flex;gap:7px;align-items:center;
}
.ch-input input{
  flex:1;background:var(--surface,#0c0c22);
  border:1px solid var(--border,rgba(255,255,255,.06));
  border-radius:9px;padding:9px 13px;color:var(--w,#f0f2ff);
  font-family:inherit;font-size:.82rem;outline:none;transition:border-color .2s;
  min-width:0;
}
.ch-input input:focus{border-color:var(--v1,#7C3AED)}
.ch-input input::placeholder{color:var(--m2,rgba(240,242,255,.26))}
.ch-input input:disabled{opacity:.5;cursor:not-allowed}
.ch-send{
  width:36px;height:36px;border-radius:9px;
  background:var(--grad,linear-gradient(135deg,#7C3AED 0%,#0EA5E9 100%));
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.95rem;flex-shrink:0;color:#fff;
}
.ch-send:disabled{opacity:.45;cursor:not-allowed}
.ch-send:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px}

/* ── TYPING INDICATOR ── */
.ch-typing{display:inline-flex;gap:5px;align-items:center;padding:3px 0}
.ch-typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--v2,#a855f7);opacity:.35;
  animation:chDot 1.3s ease-in-out infinite;
}
.ch-typing span:nth-child(2){animation-delay:.18s}
.ch-typing span:nth-child(3){animation-delay:.36s}
@keyframes chDot{0%,80%,100%{opacity:.35;transform:scale(.85)}40%{opacity:1;transform:scale(1.15)}}

/* ── SCREEN-READER ONLY ── */
.cb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── MOBILE ──
   NOTE: the original rule in Index.html targeted `.chat-toggle,.chatbot-fab`,
   neither of which exists in the markup — so the FAB was never repositioned
   on mobile. Corrected to `.chat-fab` here. ── */
@media(max-width:768px){
  .chat-win{width:calc(100vw - 24px);right:12px;left:12px;height:70vh;bottom:88px}
  .chat-fab{bottom:20px;right:18px;width:54px;height:54px;font-size:1.35rem}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  .chat-win.open{animation:none}
  .ch-typing span{animation:none;opacity:.6}
  .chat-fab{transition:none}
  .chat-fab:hover{transform:none}
}