/* Soft blue chat widget */
.fnsp-widget{
  max-width: 760px;
  border: 1px solid #d6ecff;
  background: #f6fbff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(17, 88, 160, .08);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
.fnsp-header{
  padding: 14px 16px;
  background: linear-gradient(135deg, #eaf5ff, #f6fbff);
  border-bottom: 1px solid #d6ecff;
  display:flex;
  align-items:center;
  gap:10px;
}
.fnsp-badge{
  font-size: 12px;
  font-weight: 700;
  color: #0b4b88;
  background:#d9eeff;
  border: 1px solid #bfe3ff;
  padding: 6px 10px;
  border-radius: 999px;
}
.fnsp-title{
  font-size: 15px;
  font-weight: 700;
  color:#0a2f52;
}
.fnsp-body{
  height: 380px;
  overflow:auto;
  padding: 14px 14px 18px 14px;
}

.fnsp-msg{display:flex;margin: 10px 0;}
.fnsp-msg-bot{justify-content:flex-start;}
.fnsp-msg-user{justify-content:flex-end;}
.fnsp-bubble{
  max-width: 78%;
  padding: 12px 12px;
  border-radius: 16px;
  line-height:1.45;
  font-size: 14px;
}
.fnsp-msg-bot .fnsp-bubble{
  background:#ffffff;
  border:1px solid #d6ecff;
  color:#0a2f52;
  border-top-left-radius: 10px;
}
.fnsp-msg-user .fnsp-bubble{
  background:#0b70d6;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.25);
  border-top-right-radius: 10px;
}
.fnsp-inputbar{
  min-height:56px;
  padding: 12px;
  border-top: 1px solid #d6ecff;
  display:flex;
  gap:10px;
  align-items:center;
  background:#f6fbff;
}
.fnsp-input{
  flex:1;
  border-radius: 999px;
  border:1px solid #cfe6ff;
  padding: 10px 14px;
  outline:none;
  background:#ffffff;
  font-size: 14px;
}
.fnsp-input:focus{
  border-color:#5aa8ff;
  box-shadow: 0 0 0 3px rgba(90,168,255,.18);
}
.fnsp-send{
  border-radius: 999px;
  border:1px solid #0b70d6;
  background:#0b70d6;
  color:#fff;
  padding: 10px 14px;
  cursor:pointer;
  font-weight:700;
  font-size: 14px;
}
.fnsp-send[disabled]{
  opacity:.7; cursor:not-allowed;
}
.fnsp-widget.fnsp-loading .fnsp-send span::after{
  content:'…';
  display:inline-block;
  margin-left:6px;
}
.fnsp-footnote{
  padding: 0 14px 12px 14px;
  color:#35607f;
  font-size: 12px;
}
.fnsp-error{
  padding: 10px 12px;
  border: 1px solid #ffd1d1;
  background: #fff5f5;
  border-radius: 12px;
  color:#8a1f1f;
}


/* Prevent theme overrides + ensure input bar is visible */
.fnsp-widget, .fnsp-widget *{ box-sizing:border-box; }
.fnsp-inputbar{
  min-height:56px; display:flex !important; visibility:visible !important; opacity:1 !important; }
.fnsp-input{ display:block !important; width:100% !important; min-height:44px; }

/* Header pro look */
.fnsp-brand{display:flex; align-items:center; gap:10px;}
.fnsp-avatar{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#0b70d6; color:#fff; font-weight:800; font-size:12px;
  box-shadow: 0 6px 18px rgba(11,112,214,.22);
}
.fnsp-headtext{display:flex; flex-direction:column; gap:2px;}
.fnsp-subtitle{font-size:12px; color:#35607f; font-weight:600;}

/* Typing indicator */
.fnsp-dots{display:inline-flex; gap:4px; align-items:center;}
.fnsp-dots i{
  width:6px; height:6px; border-radius:999px;
  background:#6aa9e6;
  display:inline-block;
  animation: fnspDot 1.2s infinite ease-in-out;
}
.fnsp-dots i:nth-child(2){ animation-delay:.15s; }
.fnsp-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes fnspDot{
  0%, 80%, 100% { transform: translateY(0); opacity:.55; }
  40% { transform: translateY(-3px); opacity:1; }
}


/* Make input bar always visible */
.fnsp-widget{ position:relative; }
.fnsp-inputbar{
  min-height:56px;
  position: sticky;
  bottom: 0;
  z-index: 5;
}


/* Avatar image + online dot */
.fnsp-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.fnsp-online-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#27c07d;
  box-shadow: 0 0 0 4px rgba(39,192,125,.18);
  display:inline-block;
  animation: fnspPulse 1.4s infinite ease-in-out;
}
@keyframes fnspPulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:.55; }
  100%{ transform:scale(1); opacity:1; }
}
.fnsp-brand{ position:relative; }
.fnsp-online-dot{ margin-left:-6px; margin-top:22px; }