/* =====================================================================
   Shahid AI chatbot — isolated styles (everything is scoped to .sq-chatbot)
   ===================================================================== */
.sq-chatbot {
  --sq-navy: #0f1d36;
  --sq-navy-2: #16294a;
  --sq-orange: #FC6302;
  --sq-green: #00BF63;
  --sq-red: #ef4444;
  --sq-text: #1a2233;
  --sq-muted: #5b6577;
  --sq-line: rgba(15, 29, 54, .1);
  --sq-bg-soft: #f4f6fa;
  --sq-shadow: 0 24px 60px rgba(15, 29, 54, .25);
  --sq-level: 0;                       /* 0–1, set by JS while speaking */
  --sq-mouth-x: 51%;                   /* pseudo lip-sync position on the avatar image */
  --sq-mouth-y: 64%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--sq-text);
  line-height: 1.5;
}
.sq-chatbot *, .sq-chatbot *::before, .sq-chatbot *::after { box-sizing: border-box; }
.sq-chatbot button { font-family: inherit; }
.sq-chatbot svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.sq-chatbot-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sq-chatbot [hidden] { display: none !important; }

/* ---------- Launcher ---------- */
.sq-chatbot-launcher {
  position: fixed; right: 18px; bottom: 20px; z-index: 9990;
  display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px;
  border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  background: var(--sq-navy); color: #fff; box-shadow: 0 14px 34px rgba(15, 29, 54, .35);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.sq-chatbot-launcher:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 29, 54, .45); }
.sq-chatbot-launcher:focus-visible { outline: 3px solid var(--sq-orange); outline-offset: 3px; }
.sq-chatbot-launcher b { display: block; font-size: .95rem; line-height: 1.2; }
.sq-chatbot-launcher small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: #b9c4d8; }
.sq-chatbot.is-open .sq-chatbot-launcher { opacity: 0; pointer-events: none; transform: scale(.9); }
.sq-chatbot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sq-green); box-shadow: 0 0 0 3px rgba(0, 191, 99, .25); flex: none; }

/* ---------- Avatar (photo now; swap the <img> for SVG/animation later) ---------- */
.sq-chatbot-avatar { position: relative; flex: none; border-radius: 50%; isolation: isolate; }
.sq-chatbot-avatar--sm { width: 46px; height: 46px; }
.sq-chatbot-avatar--lg { width: 68px; height: 68px; }
.sq-chatbot-avatar img {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; display: block;
  object-fit: cover; object-position: 50% 50%; border: 2px solid #fff;
  transition: transform .12s ease-out;
}
.sq-chatbot-ring {
  position: absolute; inset: -4px; border-radius: 50%; z-index: 0;
  background: conic-gradient(var(--sq-orange), var(--sq-green), var(--sq-orange));
  opacity: .9;
}
.sq-chatbot-mouth {
  position: absolute; z-index: 2; left: var(--sq-mouth-x); top: var(--sq-mouth-y);
  width: 14%; height: 4.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(60, 14, 10, .7), rgba(90, 30, 25, .35) 60%, transparent 75%);
  transform: translate(-50%, -50%) scaleY(0); opacity: 0;
  transition: transform .08s linear, opacity .2s;
}
.sq-chatbot-bars {
  position: absolute; z-index: 3; left: 50%; bottom: -10px; transform: translateX(-50%);
  display: none; align-items: flex-end; gap: 2px; height: 16px; padding: 3px 6px; border-radius: 999px;
  background: var(--sq-green); box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.sq-chatbot-bars i { width: 3px; height: 30%; border-radius: 2px; background: #fff; animation: sq-bar .9s ease-in-out infinite; }
.sq-chatbot-bars i:nth-child(2) { animation-delay: -.2s; } .sq-chatbot-bars i:nth-child(3) { animation-delay: -.45s; }
.sq-chatbot-bars i:nth-child(4) { animation-delay: -.1s; } .sq-chatbot-bars i:nth-child(5) { animation-delay: -.6s; }
@keyframes sq-bar { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* States */
.sq-chatbot-avatar[data-state="thinking"] .sq-chatbot-ring { animation: sq-spin 1.2s linear infinite; }
.sq-chatbot-avatar[data-state="listening"] .sq-chatbot-ring { background: var(--sq-red); animation: sq-pulse-red 1.2s ease-out infinite; }
.sq-chatbot-avatar[data-state="speaking"] .sq-chatbot-ring { background: var(--sq-green); animation: sq-glow 1.1s ease-in-out infinite; }
.sq-chatbot-avatar[data-state="speaking"] img { transform: translateY(calc(var(--sq-level) * -2px)) scale(calc(1 + var(--sq-level) * .025)) rotate(calc(var(--sq-level) * 1.5deg)); }
.sq-chatbot-avatar--lg[data-state="speaking"] .sq-chatbot-mouth { opacity: 1; transform: translate(-50%, -50%) scaleY(calc(.15 + var(--sq-level) * .85)); }
.sq-chatbot-avatar[data-state="speaking"] .sq-chatbot-bars { display: flex; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
@keyframes sq-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 100% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); } }
@keyframes sq-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 191, 99, .55); } 50% { box-shadow: 0 0 0 10px rgba(0, 191, 99, 0); } }

/* ---------- Panel ---------- */
.sq-chatbot-panel {
  position: fixed; right: 18px; bottom: 20px; z-index: 9991;
  width: min(390px, calc(100vw - 36px)); height: min(640px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 22px; box-shadow: var(--sq-shadow); border: 1px solid var(--sq-line);
  animation: sq-in .25s ease;
}
@keyframes sq-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.sq-chatbot-head {
  display: flex; align-items: center; gap: 14px; padding: 18px 14px 18px 18px;
  background: linear-gradient(135deg, var(--sq-navy), var(--sq-navy-2)); color: #fff;
}
.sq-chatbot-head-text { flex: 1; min-width: 0; }
.sq-chatbot-head h2 { margin: 0; max-width: none; font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 1.08rem; font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.sq-chatbot-head p { max-width: none; margin: 2px 0 4px; font-size: .78rem; color: #b9c4d8; }
.sq-chatbot-status { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #d6deeb; }
.sq-chatbot-head-actions { display: flex; gap: 2px; align-self: flex-start; }
.sq-chatbot-icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: inherit;
  transition: background .2s, color .2s;
}
.sq-chatbot-head .sq-chatbot-icon-btn { color: #d6deeb; }
.sq-chatbot-head .sq-chatbot-icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sq-chatbot-icon-btn:focus-visible, .sq-chatbot-send:focus-visible, .sq-chatbot-chip:focus-visible { outline: 2px solid var(--sq-orange); outline-offset: 2px; }
.sq-chatbot-speaker .sq-on { display: none; }
.sq-chatbot-speaker[aria-pressed="true"] { color: var(--sq-green) !important; }
.sq-chatbot-speaker[aria-pressed="true"] .sq-on { display: inline; }
.sq-chatbot-speaker[aria-pressed="true"] .sq-off { display: none; }

/* Messages */
.sq-chatbot-messages {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px;
  background: var(--sq-bg-soft); scroll-behavior: smooth; overscroll-behavior: contain;
}
.sq-chatbot-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; word-wrap: break-word; animation: sq-msg .2s ease; }
@keyframes sq-msg { from { opacity: 0; transform: translateY(6px); } }
.sq-chatbot-msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--sq-line); border-bottom-left-radius: 4px; }
.sq-chatbot-msg--user { align-self: flex-end; background: var(--sq-orange); color: #fff; border-bottom-right-radius: 4px; }
.sq-chatbot-msg--system {
  align-self: center; max-width: 92%; text-align: center; font-size: .78rem; color: var(--sq-muted);
  background: transparent; border: 1px dashed rgba(15, 29, 54, .18); border-radius: 12px; padding: 8px 12px;
}
.sq-chatbot-msg--error { align-self: flex-start; background: #fff4f4; border: 1px solid rgba(239, 68, 68, .3); color: #8a1f1f; }
.sq-chatbot-msg p { margin: 0 0 6px; } .sq-chatbot-msg p:last-child { margin: 0; }
.sq-chatbot-msg ul { margin: 4px 0 6px; padding-left: 18px; } .sq-chatbot-msg li { margin: 2px 0; }
.sq-chatbot-msg a { color: var(--sq-orange); font-weight: 600; word-break: break-word; }
.sq-chatbot-msg--user a { color: #fff; }
.sq-chatbot-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.sq-chatbot-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6ba; animation: sq-dot 1.2s infinite ease-in-out; }
.sq-chatbot-typing i:nth-child(2) { animation-delay: .15s; } .sq-chatbot-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sq-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* Words appear in sync with the voice; hidden words take no space, so the bubble grows */
.sq-chatbot-msg.is-revealing .sq-chatbot-w:not(.is-on),
.sq-chatbot-msg.is-revealing br:not(.is-on),
.sq-chatbot-msg.is-revealing p:not(.is-on),
.sq-chatbot-msg.is-revealing ul:not(.is-on),
.sq-chatbot-msg.is-revealing li:not(.is-on) { display: none; }
.sq-chatbot-msg.is-revealing .sq-chatbot-w.is-on { animation: sq-word .25s ease; }
@keyframes sq-word { from { opacity: 0; } }

/* Pre-chat form */
.sq-chatbot-lead { flex: 1; overflow-y: auto; padding: 22px 20px; background: var(--sq-bg-soft); display: flex; flex-direction: column; gap: 12px; }
.sq-chatbot-lead-intro {
  margin: 0 0 4px; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 4px;
  background: #fff; border: 1px solid var(--sq-line); font-size: .92rem; align-self: flex-start;
}
.sq-chatbot-field { display: block; }
.sq-chatbot-field > span { display: block; font-size: .8rem; font-weight: 600; color: var(--sq-navy); margin-bottom: 5px; }
.sq-chatbot-field em { color: var(--sq-orange); font-style: normal; }
.sq-chatbot-field i { color: var(--sq-muted); font-style: normal; font-weight: 400; }
.sq-chatbot-field input {
  width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid #d8dee9; border-radius: 12px; background: #fff;
  font-family: inherit; font-size: .92rem; color: var(--sq-text);
}
.sq-chatbot-field input:focus { outline: none; border-color: var(--sq-orange); box-shadow: 0 0 0 3px rgba(252, 99, 2, .12); }
.sq-chatbot-field.has-error input { border-color: var(--sq-red); }
.sq-chatbot-field-error { display: block; min-height: 0; font-size: .74rem; color: var(--sq-red); margin-top: 3px; }
.sq-chatbot-field-error:empty { display: none; }
.sq-chatbot-lead-btn {
  margin-top: 4px; height: 46px; border: 0; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sq-orange); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 10px 22px rgba(252, 99, 2, .3);
  transition: filter .2s, opacity .2s;
}
.sq-chatbot-lead-btn svg { width: 18px; height: 18px; }
.sq-chatbot-lead-btn:hover { filter: brightness(1.06); }
.sq-chatbot-lead-btn:disabled { opacity: .6; cursor: wait; }
.sq-chatbot-lead-privacy { margin: 0; text-align: center; font-size: .72rem; color: var(--sq-muted); }
.sq-chatbot-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Suggestions */
.sq-chatbot-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 10px;
  background: var(--sq-bg-soft); border-top: 1px solid var(--sq-line);
}
.sq-chatbot-chip {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: .78rem; font-weight: 600; line-height: 1.3;
  background: #fff; border: 1px solid rgba(252, 99, 2, .35); color: var(--sq-orange); text-align: left;
  transition: background .2s, color .2s, border-color .2s;
}
.sq-chatbot-chip::before { content: "\2192\00a0"; }
.sq-chatbot-chip:hover { background: var(--sq-orange); border-color: var(--sq-orange); color: #fff; }

/* Input */
.sq-chatbot-form { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--sq-line); background: #fff; }
.sq-chatbot-input {
  flex: 1; resize: none; max-height: 120px; min-height: 42px; padding: 10px 12px; overflow-y: hidden;
  border: 1.5px solid #d8dee9; border-radius: 14px; font-family: inherit; font-size: .92rem; font-weight: 400; line-height: 1.4; color: var(--sq-text); background: #fff;
}
.sq-chatbot-input:focus { outline: none; border-color: var(--sq-orange); box-shadow: 0 0 0 3px rgba(252, 99, 2, .12); }
.sq-chatbot-form .sq-chatbot-icon-btn { width: 42px; height: 42px; border-radius: 12px; color: var(--sq-muted); background: var(--sq-bg-soft); }
.sq-chatbot-form .sq-chatbot-icon-btn:hover { color: var(--sq-navy); }
.sq-chatbot-mic.is-listening { background: var(--sq-red) !important; color: #fff !important; animation: sq-pulse-red 1.2s ease-out infinite; }
.sq-chatbot-send {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; background: var(--sq-orange); color: #fff; transition: filter .2s, opacity .2s;
}
.sq-chatbot-send:hover { filter: brightness(1.08); }
.sq-chatbot-send:disabled { opacity: .5; cursor: not-allowed; }
.sq-chatbot-note { margin: 0; padding: 0 14px 10px; font-size: .7rem; color: var(--sq-muted); text-align: center; background: #fff; }
.sq-chatbot-note a { color: var(--sq-orange); }


/* ---------- Launcher animation: gentle float, pulsing glow ring, shine sweep ---------- */
.sq-chatbot-launcher { animation: sq-float 3.2s ease-in-out infinite; isolation: isolate; }
.sq-chatbot-launcher::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; pointer-events: none;
  border: 2px solid var(--sq-orange); animation: sq-launch-ring 2.4s ease-out infinite;
}
.sq-chatbot-launcher::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0; animation: sq-shine 4.5s ease-in-out infinite;
}
.sq-chatbot-launcher:hover { animation-play-state: paused; }
@keyframes sq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sq-launch-ring { 0% { opacity: .75; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.14, 1.35); } }
@keyframes sq-shine { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }

/* ---------- Greeter: waving avatar standing on the launcher + speech bubble ---------- */
.sq-chatbot-greeter {
  position: fixed; right: 22px; bottom: 66px; z-index: 9989;   /* just behind the launcher, so he "stands" on it */
  display: flex; align-items: flex-start; gap: 4px; pointer-events: none;
}
.sq-chatbot-greeter > * { pointer-events: auto; }
.sq-chatbot.is-open .sq-chatbot-greeter { display: none; }

.sq-chatbot-greeter-avatar {
  width: 118px; padding: 0; border: 0; background: none; cursor: pointer; display: block;
  transform-origin: 50% 100%;
  animation: sq-rise .7s cubic-bezier(.2, 1.3, .4, 1) both, sq-sway 4s ease-in-out .9s infinite;
}
.sq-chatbot-greeter-avatar img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(15, 29, 54, .28)); }
.sq-chatbot-greeter-avatar:focus-visible { outline: 3px solid var(--sq-orange); outline-offset: 2px; border-radius: 12px; }
@keyframes sq-rise { from { opacity: 0; transform: translateY(60px) scale(.85); } }
@keyframes sq-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }

.sq-chatbot-bubble {
  position: relative; margin-top: 14px; max-width: 210px; padding: 11px 30px 11px 14px; cursor: pointer;
  background: #fff; color: var(--sq-navy); border-radius: 16px 16px 4px 16px;
  font-size: .9rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 14px 34px rgba(15, 29, 54, .22); border: 1px solid var(--sq-line);
  transform-origin: 100% 100%; animation: sq-bubble-pop .4s cubic-bezier(.2, 1.4, .4, 1) .55s both;
}
.sq-chatbot-bubble::after {   /* little tail pointing at the avatar */
  content: ""; position: absolute; right: -7px; bottom: 10px; width: 14px; height: 14px;
  background: #fff; border-right: 1px solid var(--sq-line); border-top: 1px solid var(--sq-line); transform: rotate(45deg);
}
.sq-chatbot-bubble:hover { color: var(--sq-orange); }
.sq-chatbot-bubble:focus-visible { outline: 3px solid var(--sq-orange); outline-offset: 2px; }
.sq-chatbot-bubble-close {
  position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--sq-muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.sq-chatbot-bubble-close:hover { background: var(--sq-bg-soft); color: var(--sq-navy); }
.sq-chatbot-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--sq-orange); animation: sq-caret .8s steps(1) infinite; }
.sq-chatbot-greeter.is-typed .sq-chatbot-caret { display: none; }
@keyframes sq-bubble-pop { from { opacity: 0; transform: scale(.5) translateY(10px); } }
@keyframes sq-caret { 50% { opacity: 0; } }

.sq-chatbot-greeter.is-leaving { animation: sq-greeter-out .3s ease forwards; }
@keyframes sq-greeter-out { to { opacity: 0; transform: translateY(16px); } }

@media (max-width: 640px) {
  /* Mobile launcher is a 60px circle (right 14px → centre 44px from the edge):
     centre the avatar over it, tuck its bottom behind the circle and fade the cut edge. */
  .sq-chatbot-greeter { right: 6px; bottom: 50px; gap: 0; }
  .sq-chatbot-greeter-avatar {
    width: 76px;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
  }
  .sq-chatbot-greeter-avatar img { filter: none; }
  .sq-chatbot-bubble { max-width: 168px; font-size: .82rem; margin-top: 4px; margin-right: 2px; padding: 9px 28px 9px 12px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .sq-chatbot-launcher { right: 14px; bottom: 16px; padding: 4px; }
  .sq-chatbot-launcher-text { display: none; }
  .sq-chatbot-avatar--sm { width: 52px; height: 52px; }
  .sq-chatbot-panel { left: 0; right: 0; bottom: auto; top: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
  /* Compact header: avatar, name and "Online" only */
  .sq-chatbot-head { padding: 10px 8px 10px 14px; gap: 12px; }
  .sq-chatbot-avatar--lg { width: 46px; height: 46px; }
  .sq-chatbot-head p { display: none; }
  .sq-chatbot-head h2 { font-size: 1rem; }
  .sq-chatbot-status { margin-top: 2px; }
  .sq-chatbot-head-actions { align-self: center; }
  .sq-chatbot-bars { bottom: -8px; height: 13px; padding: 2px 5px; }
  .sq-chatbot-messages { padding-top: 14px; }
  .sq-chatbot-input { font-size: 16px; } /* prevents iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
  .sq-chatbot *, .sq-chatbot *::before, .sq-chatbot *::after { animation: none !important; transition: none !important; }
}

/* While the chat is open full-screen on a phone, the page behind it doesn't scroll */
html.sq-chatbot-lock, html.sq-chatbot-lock body { overflow: hidden; }