/* ═══════════════════════════════════════════
   SAILS CHATBOT — Premium SaaS UI  v4.3.1
   Full CSS isolation for WordPress themes
═══════════════════════════════════════════ */

#sc-root {
  --sc-brand:      #0A66C2;
  --sc-brand-dark: #084fa0;
  --sc-brand-deep: #063d80;
  --sc-brand-lt:   #e8f1fb;
  --sc-glow:       rgba(10,102,194,.3);
  --sc-bg:         #f4f6fa;
  --sc-text:       #0f172a;
  --sc-muted:      #64748b;
  --sc-border:     #e2e8f0;
  --sc-font:       -apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Roboto,sans-serif;
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  font-family: var(--sc-font) !important;
}

/* ── HARD RESET: neutralise any WordPress theme style bleeding in ── */
#sc-root *,
#sc-root *::before,
#sc-root *::after {
  all: initial;
  box-sizing: border-box !important;
  font-family: var(--sc-font) !important;
}

/* ── Restore semantic inline tags stripped by all:initial ── */
#sc-root b, #sc-root strong { font-weight:700 !important; display:inline !important; }
#sc-root i, #sc-root em     { font-style:italic !important; display:inline !important; }
#sc-root a                  { display:inline !important; cursor:pointer !important; }
#sc-root span               { display:inline !important; }
#sc-root p                  { display:block !important; margin-bottom:6px !important; line-height:1.6 !important; }
#sc-root br                 { display:block !important; content:'' !important; }
#sc-root svg                { display:block !important; }
#sc-root img                { display:block !important; }

/* ═══════════ FAB BUTTON ═══════════ */
#sc-fab {
  position: fixed !important;
  bottom: 26px !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg,#0A66C2,#084fa0) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 32px rgba(10,102,194,.38),0 2px 8px rgba(0,0,0,.12) !important;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease !important;
  z-index: 999999 !important;
  overflow: visible !important;
  pointer-events: all !important;
}
#sc-fab::before {
  content:'' !important;
  position:absolute !important;
  inset:-3px !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#0A66C2,#063d80) !important;
  opacity:0 !important;
  transition:opacity .22s ease !important;
  z-index:-1 !important;
}
#sc-fab:hover { transform:scale(1.12) translateY(-2px) !important; box-shadow:0 12px 40px rgba(10,102,194,.4),0 4px 12px rgba(0,0,0,.18) !important; }
#sc-fab:hover::before { opacity:.15 !important; }
#sc-fab:active { transform:scale(.94) !important; }
#sc-fab.sc-right { right:26px !important; }
#sc-fab.sc-left  { left:26px !important; }

#sc-fab svg,
#sc-fab img {
  width:28px !important;
  height:28px !important;
  fill:#fff !important;
  pointer-events:none !important;
  display:block !important;
  object-fit:contain !important;
  border-radius:4px !important;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s !important;
}
.sc-fab-chat  { position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; display:block !important; }
.sc-fab-close { position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; display:block !important; }

/* Unread badge */
#sc-unread-badge {
  position:absolute !important;
  top:-3px !important; right:-3px !important;
  min-width:20px !important; height:20px !important;
  padding:0 4px !important;
  background:#ef4444 !important; color:#fff !important;
  border-radius:10px !important;
  font-size:10px !important; font-weight:700 !important; line-height:20px !important;
  display:none !important;
  align-items:center !important; justify-content:center !important;
  border:2px solid #fff !important;
  text-align:center !important;
}

/* ═══════════ CHAT WINDOW ═══════════ */
#sc-win {
  position:fixed !important;
  bottom:102px !important;
  width:390px !important; height:600px !important;
  background:#fff !important;
  border-radius:20px !important;
  box-shadow:0 24px 64px rgba(10,102,194,.16),0 4px 16px rgba(0,0,0,.1) !important;
  display:flex !important; flex-direction:column !important;
  opacity:0 !important;
  transform:scale(.88) translateY(20px) !important;
  pointer-events:none !important;
  transition:opacity .28s ease,transform .32s cubic-bezier(.34,1.3,.64,1) !important;
  overflow:hidden !important;
  border:1px solid rgba(10,102,194,.12) !important;
  z-index:999998 !important;
}
#sc-win.sc-right { right:26px !important; }
#sc-win.sc-left  { left:26px !important; }
#sc-win.sc-open  { opacity:1 !important; transform:scale(1) translateY(0) !important; pointer-events:all !important; }

/* ═══════════ HEADER ═══════════ */
#sc-hdr {
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:16px 18px 14px !important;
  background:linear-gradient(135deg,#0A66C2 0%,#084fa0 100%) !important;
  flex-shrink:0 !important;
  position:relative !important; overflow:hidden !important;
}
#sc-hdr::before {
  content:'' !important; position:absolute !important;
  top:-30px !important; right:-20px !important;
  width:120px !important; height:120px !important;
  border-radius:50% !important; background:rgba(255,255,255,.07) !important;
  pointer-events:none !important;
}
#sc-hdr::after {
  content:'' !important; position:absolute !important;
  bottom:-40px !important; right:60px !important;
  width:80px !important; height:80px !important;
  border-radius:50% !important; background:rgba(255,255,255,.05) !important;
  pointer-events:none !important;
}
#sc-root .sc-av {
  width:44px !important; height:44px !important; border-radius:50% !important;
  background:rgba(255,255,255,.2) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important; flex-shrink:0 !important;
  border:2px solid rgba(255,255,255,.3) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.2) !important;
  position:relative !important; z-index:1 !important;
}
#sc-root .sc-av svg { width:44px !important; height:44px !important; display:block !important; }
#sc-root .sc-logo-img { width:44px !important; height:44px !important; object-fit:cover !important; border-radius:50% !important; display:block !important; }
#sc-root .sc-hinfo { flex:1 !important; min-width:0 !important; position:relative !important; z-index:1 !important; }
#sc-root .sc-bname { display:block !important; font-size:15px !important; font-weight:700 !important; color:#fff !important; line-height:1.3 !important; }
#sc-root .sc-status { display:flex !important; align-items:center !important; gap:5px !important; font-size:12px !important; color:rgba(255,255,255,.88) !important; margin-top:2px !important; line-height:1.4 !important; }
#sc-root .sc-dot { display:inline-block !important; width:8px !important; height:8px !important; border-radius:50% !important; background:#4ade80 !important; box-shadow:0 0 0 2px rgba(74,222,128,.3) !important; animation:sc-dotpulse 2s infinite !important; flex-shrink:0 !important; }
@keyframes sc-dotpulse { 0%,100%{box-shadow:0 0 0 2px rgba(74,222,128,.3)} 50%{box-shadow:0 0 0 5px rgba(74,222,128,0)} }

#sc-root .sc-hdr-actions { display:flex !important; gap:4px !important; position:relative !important; z-index:1 !important; }
#sc-root .sc-hdr-btn {
  width:32px !important; height:32px !important; border-radius:50% !important;
  background:rgba(255,255,255,.15) !important; border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important; cursor:pointer !important; font-size:18px !important; font-weight:300 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  transition:background .2s,transform .15s !important; line-height:1 !important;
}
#sc-root .sc-hdr-btn:hover { background:rgba(255,255,255,.28) !important; transform:scale(1.08) !important; }
#sc-root .sc-hdr-btn:active { transform:scale(.92) !important; }

/* ═══════════ NAV PILLS ═══════════ */
#sc-nav {
  display:flex !important; gap:6px !important;
  padding:10px 14px !important; background:#fff !important;
  overflow-x:auto !important; flex-shrink:0 !important;
  scrollbar-width:none !important;
  border-bottom:1px solid #e2e8f0 !important;
}
#sc-nav::-webkit-scrollbar { display:none !important; }
#sc-nav button {
  display:inline-flex !important; align-items:center !important;
  white-space:nowrap !important; padding:6px 14px !important;
  border-radius:20px !important;
  border:1.5px solid #e8f1fb !important; background:#e8f1fb !important;
  color:#0A66C2 !important; font-size:12px !important; font-weight:600 !important;
  cursor:pointer !important; line-height:1.4 !important;
  transition:all .18s ease !important;
}
#sc-nav button:hover { background:#0A66C2 !important; border-color:#0A66C2 !important; color:#fff !important; transform:translateY(-1px) !important; box-shadow:0 3px 10px rgba(10,102,194,.3) !important; }
#sc-nav button:active { transform:scale(.95) !important; }

/* ═══════════ MESSAGES ═══════════ */
#sc-msgs {
  flex:1 !important; overflow-y:auto !important;
  padding:16px 14px 12px !important;
  display:flex !important; flex-direction:column !important; gap:6px !important;
  background:#f4f6fa !important; scroll-behavior:smooth !important;
}
#sc-msgs::-webkit-scrollbar { width:4px !important; }
#sc-msgs::-webkit-scrollbar-thumb { background:#cbd5e1 !important; border-radius:4px !important; }

#sc-root .sc-m-wrap { display:flex !important; flex-direction:column !important; gap:5px !important; max-width:88% !important; animation:sc-fadein .22s ease both !important; }
@keyframes sc-fadein { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
#sc-root .sc-m-wrap-bot { align-self:flex-start !important; }
#sc-root .sc-m-wrap-usr { align-self:flex-end !important; }

#sc-root .sc-m {
  display:block !important; padding:10px 14px !important;
  border-radius:18px !important; font-size:14px !important;
  line-height:1.6 !important; word-break:break-word !important;
}
#sc-root .sc-bot { background:#fff !important; color:#0f172a !important; border-bottom-left-radius:5px !important; box-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04) !important; }
#sc-root .sc-usr { background:linear-gradient(135deg,#0A66C2,#084fa0) !important; color:#fff !important; border-bottom-right-radius:5px !important; box-shadow:0 2px 8px rgba(10,102,194,.3) !important; align-self:flex-end !important; }
#sc-root .sc-bot a { color:#0A66C2 !important; text-decoration:underline !important; }

/* Typing dots */
#sc-root .sc-typing { display:flex !important; align-items:center !important; gap:5px !important; padding:12px 16px !important; background:#fff !important; border-radius:18px !important; box-shadow:0 1px 4px rgba(0,0,0,.08) !important; border-bottom-left-radius:5px !important; width:fit-content !important; }
#sc-root .sc-typing span { display:inline-block !important; width:7px !important; height:7px !important; border-radius:50% !important; background:#cbd5e1 !important; animation:sc-bounce .9s infinite !important; }
#sc-root .sc-typing span:nth-child(2) { animation-delay:.18s !important; }
#sc-root .sc-typing span:nth-child(3) { animation-delay:.36s !important; }
@keyframes sc-bounce { 0%,60%,100%{transform:none;background:#cbd5e1} 30%{transform:translateY(-6px);background:#0A66C2} }

/* ═══════════ QUICK REPLY ═══════════ */
#sc-root .sc-qbtns { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:8px !important; }
#sc-root .sc-qbtns button {
  display:inline-flex !important; align-items:center !important;
  padding:7px 14px !important; border-radius:18px !important;
  border:1.5px solid #0A66C2 !important; background:#fff !important;
  color:#0A66C2 !important; font-size:12.5px !important; font-weight:600 !important;
  cursor:pointer !important; line-height:1.4 !important;
  box-shadow:0 1px 3px rgba(10,102,194,.1) !important;
  transition:all .18s ease !important;
}
#sc-root .sc-qbtns button:hover { background:#0A66C2 !important; color:#fff !important; transform:translateY(-1px) !important; box-shadow:0 4px 12px rgba(10,102,194,.3) !important; }
#sc-root .sc-qbtns button:active { transform:scale(.95) !important; }

/* ═══════════ LINK CARDS ═══════════ */
#sc-root .sc-links { display:flex !important; flex-direction:column !important; gap:5px !important; margin-top:8px !important; }
#sc-root .sc-link-card { display:flex !important; align-items:center !important; justify-content:space-between !important; padding:9px 13px !important; border-radius:12px !important; border:1.5px solid #e8f1fb !important; background:#fff !important; color:#0A66C2 !important; text-decoration:none !important; font-size:13px !important; font-weight:500 !important; cursor:pointer !important; transition:all .18s ease !important; box-shadow:0 1px 4px rgba(0,0,0,.05) !important; }
#sc-root .sc-link-card:hover { border-color:#0A66C2 !important; color:#084fa0 !important; transform:translateX(3px) !important; box-shadow:0 3px 12px rgba(10,102,194,.15) !important; }
#sc-root .sc-link-card svg { width:14px !important; height:14px !important; fill:currentColor !important; flex-shrink:0 !important; margin-left:8px !important; display:block !important; transition:transform .18s !important; }
#sc-root .sc-link-card:hover svg { transform:translate(2px,-2px) !important; }
#sc-root .sc-lbl { flex:1 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; display:block !important; }

/* ═══════════ JOB CARDS ═══════════ */
#sc-root .sc-job-list { display:flex !important; flex-direction:column !important; gap:7px !important; margin-top:8px !important; }
#sc-root .sc-job-card { display:block !important; background:#fff !important; border:1.5px solid #e2e8f0 !important; border-radius:12px !important; padding:11px 13px !important; color:#0f172a !important; text-decoration:none !important; position:relative !important; overflow:hidden !important; transition:all .18s ease !important; box-shadow:0 1px 4px rgba(0,0,0,.05) !important; }
#sc-root .sc-job-card:hover { border-color:#0A66C2 !important; transform:translateY(-2px) !important; box-shadow:0 6px 20px rgba(10,102,194,.14) !important; }
#sc-root .sc-job-title { display:block !important; font-weight:600 !important; font-size:13.5px !important; color:#0A66C2 !important; margin-bottom:4px !important; line-height:1.4 !important; }
#sc-root .sc-job-meta { display:flex !important; flex-wrap:wrap !important; gap:6px !important; font-size:11.5px !important; color:#64748b !important; margin-top:4px !important; }
#sc-root .sc-job-tag { display:inline-block !important; padding:2px 8px !important; background:#e8f1fb !important; color:#0A66C2 !important; border-radius:10px !important; font-weight:500 !important; font-size:11px !important; line-height:1.5 !important; }
#sc-root .sc-job-apply { display:inline-flex !important; align-items:center !important; gap:5px !important; margin-top:7px !important; font-size:12px !important; font-weight:600 !important; color:#0A66C2 !important; }

#sc-root .sc-crawl-loading { display:flex !important; align-items:center !important; gap:8px !important; padding:10px 0 !important; font-size:13px !important; color:#64748b !important; }
#sc-root .sc-crawl-spinner { display:block !important; width:16px !important; height:16px !important; border:2px solid #e8f1fb !important; border-top-color:#0A66C2 !important; border-radius:50% !important; animation:sc-spin .7s linear infinite !important; flex-shrink:0 !important; }
@keyframes sc-spin { to{transform:rotate(360deg)} }

/* ═══════════ LEAD SUCCESS ═══════════ */
#sc-root .sc-ok { display:block !important; background:linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border:1.5px solid #86efac !important; border-radius:12px !important; padding:13px 15px !important; margin-top:8px !important; animation:sc-fadein .3s ease !important; }
#sc-root .sc-ok-icon { display:flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; background:linear-gradient(135deg,#22c55e,#16a34a) !important; border-radius:50% !important; color:#fff !important; font-size:16px !important; font-weight:800 !important; margin-bottom:7px !important; box-shadow:0 3px 10px rgba(34,197,94,.3) !important; line-height:1 !important; }
#sc-root .sc-ok-title { display:block !important; font-weight:700 !important; color:#15803d !important; margin-bottom:6px !important; font-size:14px !important; line-height:1.4 !important; }
#sc-root .sc-ok-detail { display:block !important; font-size:12.5px !important; color:#374151 !important; margin-top:4px !important; line-height:1.5 !important; }

/* ═══════════ INPUT AREA ═══════════ */
#sc-ia { display:flex !important; align-items:center !important; gap:8px !important; padding:10px 12px 12px !important; border-top:1px solid #e2e8f0 !important; background:#fff !important; flex-shrink:0 !important; }
#sc-inp { display:block !important; flex:1 !important; padding:10px 15px !important; border:1.5px solid #e2e8f0 !important; border-radius:24px !important; font-size:13.5px !important; font-family:var(--sc-font) !important; background:#f4f6fa !important; color:#0f172a !important; line-height:1.4 !important; transition:border-color .18s,box-shadow .18s,background .18s !important; outline:none !important; }
#sc-inp:focus { border-color:#0A66C2 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(10,102,194,.1) !important; }
#sc-inp::placeholder { color:#94a3b8 !important; }
#sc-inp:disabled { opacity:.55 !important; cursor:not-allowed !important; }
#sc-snd { display:flex !important; align-items:center !important; justify-content:center !important; width:40px !important; height:40px !important; border-radius:50% !important; background:linear-gradient(135deg,#0A66C2,#084fa0) !important; border:none !important; cursor:pointer !important; flex-shrink:0 !important; box-shadow:0 3px 10px rgba(10,102,194,.3) !important; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .18s !important; }
#sc-snd:hover  { transform:scale(1.1) !important; box-shadow:0 5px 16px rgba(10,102,194,.4) !important; }
#sc-snd:active { transform:scale(.92) !important; }
#sc-snd:disabled { opacity:.45 !important; cursor:not-allowed !important; transform:none !important; }
#sc-snd svg { display:block !important; width:18px !important; height:18px !important; fill:#fff !important; }

/* ═══════════ EMAIL WARNING ═══════════ */
#sc-root .sc-email-warn { display:block !important; margin-top:7px !important; padding:8px 11px !important; background:#fef9c3 !important; border-left:3px solid #eab308 !important; border-radius:0 6px 6px 0 !important; font-size:12px !important; color:#854d0e !important; line-height:1.5 !important; }

/* ═══════════ POWERED BY ═══════════ */
#sc-root .sc-powered { display:block !important; text-align:center !important; font-size:10.5px !important; color:#94a3b8 !important; padding:5px 0 8px !important; background:#fff !important; flex-shrink:0 !important; }
#sc-root .sc-powered a { color:#94a3b8 !important; text-decoration:none !important; font-size:10.5px !important; font-weight:400 !important; line-height:inherit !important; display:inline !important; }
#sc-root .sc-powered a:hover { color:#0A66C2 !important; }
#sc-root .sc-div { display:block !important; border-top:1px solid #e2e8f0 !important; margin:10px 0 !important; }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:460px){
  #sc-win { width:calc(100vw - 16px) !important; right:8px !important; left:8px !important; bottom:82px !important; height:72vh !important; border-radius:16px !important; }
  #sc-fab.sc-right { right:16px !important; }
  #sc-fab.sc-left  { left:16px !important; }
}