/* ═══ ویجت پشتیبانی آنلاین — سبک گفتینو (خودمیزبان) ═══ */
.spw { position: fixed; z-index: 9999; bottom: 18px; inset-inline-start: 18px; font-family: inherit; }
.spw__bubble {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0d9be0, #3bb7f8);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(13, 155, 224, .65);
  transition: transform .25s var(--ease, ease), box-shadow .25s;
}
.spw__bubble:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 38px -12px rgba(13, 155, 224, .75); }
.spw__bubble .spw__close {
  display: none; font-size: 26px; line-height: 1; font-weight: 300;
}
.spw__bubble.is-open svg:first-of-type { display: none; }
.spw__bubble.is-open .spw__close { display: block; }
.spw__dot {
  position: absolute; top: 3px; inset-inline-end: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff5252; border: 2px solid #fff;
  animation: spwPulse 1.6s infinite;
}
@keyframes spwPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.spw__panel {
  position: absolute; bottom: 72px; inset-inline-start: 0;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(15, 26, 47, .45);
  border: 1px solid #e3edf6;
  animation: spwIn .3s var(--ease, ease);
}
@keyframes spwIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.spw__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  background: linear-gradient(135deg, #0b7fc0, #3bb7f8);
  color: #fff;
}
.spw__head-ava { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 17px; }
.spw__head-txt { flex: 1; }
.spw__head-txt b { display: block; font-size: 14px; }
.spw__head-txt small { display: block; font-size: 10.8px; opacity: .92; }
.spw__min { border: 0; background: rgba(255,255,255,.16); color: #fff; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 18px; line-height: 1; }
.spw__min:hover { background: rgba(255,255,255,.3); }
.spw__msgs {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: #f7fbfe;
}
.spw__msg { display: flex; }
.spw__msg.is-me { justify-content: flex-start; flex-direction: row-reverse; }
.spw__bubble-in {
  max-width: 82%;
  font-size: 13px; line-height: 1.9;
  padding: 9px 13px 6px;
  border-radius: 14px 14px 14px 5px;
  background: #fff; border: 1px solid #e0edf8;
  box-shadow: 0 4px 12px -8px rgba(15, 26, 47, .3);
  word-break: break-word;
}
.spw__msg.is-me .spw__bubble-in {
  background: linear-gradient(135deg, #0d9be0, #3bb7f8);
  color: #fff; border: 0;
  border-radius: 14px 14px 5px 14px;
  box-shadow: 0 8px 18px -10px rgba(13, 155, 224, .55);
}
.spw__bubble-in time { display: block; font-size: 9.5px; margin-top: 3px; opacity: .65; text-align: left; }
.spw__greet { text-align: center; padding: 8px 16px 4px; }
.spw__greet b { display: block; font-size: 13.5px; color: #12395c; }
.spw__greet p { font-size: 11.5px; color: #7b8494; margin: 4px 0 8px; line-height: 1.9; }
.spw__name { padding: 0 14px 6px; }
.spw__name input {
  width: 100%; box-sizing: border-box; border: 1.5px solid #e0edf8; border-radius: 11px;
  padding: 8px 12px; font-family: inherit; font-size: 12.5px; background: #f8fbfe; color: #101f3d;
}
.spw__form {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid #e6f0f8; background: #fff;
}
.spw-hp { position: absolute; inset-inline-start: -9999px; }
.spw__form input[type="text"] {
  flex: 1; border: 1.5px solid #e0edf8; border-radius: 12px;
  padding: 10px 13px; font-family: inherit; font-size: 13px; background: #f8fbfe; color: #101f3d;
}
.spw__form input[type="text"]:focus { outline: none; border-color: #3bb7f8; background: #fff; box-shadow: 0 0 0 3px rgba(59,183,248,.15); }
.spw__form button {
  width: 42px; height: 40px; border: 0; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #0d9be0, #3bb7f8); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(13, 155, 224, .6);
  transition: transform .2s;
}
.spw__form button:hover { transform: translateY(-2px); }
@media (max-width: 480px) {
  .spw { bottom: 14px; inset-inline-start: 14px; }
  .spw__panel { width: calc(100vw - 24px); height: min(480px, calc(100vh - 120px)); }
}