/* Live support chat widget — فروشگاه شکیب */
.sf-live-wrap{
  position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:.65rem;
  pointer-events:none;
}
.sf-live-wrap > *{pointer-events:auto}

/* ── Teaser bubble ── */
.sf-live-teaser{
  position:relative;max-width:min(300px,calc(100vw - 2.5rem));
  padding:.85rem 1rem .85rem .9rem;
  background:linear-gradient(135deg,rgba(12,20,32,.97),rgba(8,14,24,.98));
  color:#e8f4ff;border:1px solid rgba(56,189,248,.35);
  border-radius:16px 16px 4px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 24px rgba(14,165,233,.15);
  font-size:.88rem;line-height:1.65;cursor:pointer;
  transform-origin:bottom right;
  animation:sfTeaserIn .45s cubic-bezier(.22,1,.36,1);
}
.sf-live-teaser.hidden{display:none}
.sf-live-teaser.is-leaving{animation:sfTeaserOut .32s ease forwards}
.sf-live-teaser::after{
  content:'';position:absolute;inset-inline-end:1.35rem;bottom:-7px;
  width:14px;height:14px;background:inherit;
  border-inline-end:1px solid rgba(56,189,248,.35);
  border-bottom:1px solid rgba(56,189,248,.35);
  transform:rotate(45deg);border-radius:0 0 3px 0;
}
.sf-live-teaser-head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem;
}
.sf-live-teaser-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700;color:#7dd3fc;letter-spacing:.02em;
}
.sf-live-teaser-badge i{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px #22c55e;animation:sfPulseDot 1.8s ease infinite;
}
.sf-live-teaser-close{
  border:0;background:rgba(255,255,255,.1);color:#94a3b8;
  width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:1rem;line-height:1;
  flex-shrink:0;transition:background .2s,color .2s;
}
.sf-live-teaser-close:hover{background:rgba(255,255,255,.18);color:#fff}
.sf-live-teaser-text{color:#dbeafe;font-weight:500}
.sf-live-teaser-cta{
  margin-top:.5rem;font-size:.78rem;color:#38bdf8;font-weight:700;
  display:inline-flex;align-items:center;gap:.25rem;
}

@keyframes sfTeaserIn{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes sfTeaserOut{
  to{opacity:0;transform:translateY(8px) scale(.96)}
}
@keyframes sfPulseDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}

/* ── FAB button ── */
.sf-live-fab{
  position:relative;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(145deg,#22d3ee 0%,#0ea5e9 38%,#0369a1 100%);
  box-shadow:0 12px 32px rgba(3,105,161,.5),0 0 0 0 rgba(14,165,233,.45);
  display:grid;place-items:center;padding:0;
  transition:transform .25s ease,box-shadow .25s ease;
  animation:sfFabGlow 3s ease infinite;
}
.sf-live-fab:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 40px rgba(3,105,161,.55),0 0 28px rgba(56,189,248,.35);
}
.sf-live-fab:active{transform:translateY(-1px) scale(.98)}
.sf-live-fab svg{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.sf-live-fab-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(125,211,252,.45);
  animation:sfFabRing 2.4s ease-out infinite;
  pointer-events:none;
}
.sf-live-fab-badge{
  position:absolute;top:-2px;inset-inline-start:-2px;
  min-width:18px;height:18px;padding:0 5px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;font-size:.65rem;font-weight:800;border-radius:999px;
  display:grid;place-items:center;border:2px solid #0c1420;
  box-shadow:0 2px 8px rgba(239,68,68,.45);
}

@keyframes sfFabGlow{
  0%,100%{box-shadow:0 12px 32px rgba(3,105,161,.5),0 0 0 0 rgba(14,165,233,.35)}
  50%{box-shadow:0 14px 36px rgba(3,105,161,.55),0 0 0 10px rgba(14,165,233,0)}
}
@keyframes sfFabRing{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.35);opacity:0}
}

/* ── Chat panel ── */
.sf-live-panel{
  position:fixed;inset-inline-end:1rem;bottom:5.6rem;z-index:61;
  width:min(380px,calc(100vw - 1.5rem));height:min(520px,70vh);
  background:#0c1420;color:#e8eef7;border:1px solid rgba(255,255,255,.12);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform-origin:bottom right;animation:sfLiveIn .28s ease;
}
@keyframes sfLiveIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.sf-live-panel.hidden{display:none}
.sf-live-head{
  padding:.85rem 1rem;background:linear-gradient(120deg,#0ea5e9,#075985);
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
}
.sf-live-head b{font-size:1rem}
.sf-live-head small{display:block;opacity:.9;font-weight:500;font-size:.78rem}
.sf-live-close{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:1.1rem}
.sf-live-body{flex:1;overflow:auto;padding:.9rem;display:flex;flex-direction:column;gap:.55rem;background:radial-gradient(600px 200px at 100% 0%,rgba(14,165,233,.12),transparent)}
.sf-live-msg{max-width:100%;padding:.65rem .8rem;border-radius:14px;line-height:1.65;white-space:pre-wrap;font-size:.92rem;flex:1}
.sf-live-msg-row{display:flex;align-items:flex-end;gap:.5rem;max-width:92%}
.sf-live-msg-row.user{align-self:flex-end;flex-direction:row-reverse}
.sf-live-msg-row.admin{align-self:flex-start}
.sf-live-msg.user{background:rgba(14,165,233,.22)}
.sf-live-msg.admin{background:rgba(255,255,255,.08)}
.sf-live-msg em{display:block;font-style:normal;opacity:.65;font-size:.72rem;margin-bottom:.2rem}
.sf-live-msg-text{word-break:break-word}
.sf-live-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2);flex-shrink:0}
.sf-live-head-av{width:40px;height:40px}
.sf-av-letter{display:inline-grid;place-items:center;background:linear-gradient(135deg,#0ea5e9,#0369a1);color:#fff;font-weight:800;font-size:.85rem;text-transform:uppercase}
.sf-live-head-brand{display:flex;align-items:center;gap:.65rem}
.sf-live-status-dot::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-inline-end:.35rem;box-shadow:0 0 8px #22c55e;vertical-align:middle}
.sf-live-foot{display:flex;gap:.45rem;padding:.75rem;border-top:1px solid rgba(255,255,255,.1);align-items:flex-end}
.sf-live-foot-main{flex:1;display:grid;gap:.35rem}
.sf-live-foot-tools{display:flex;align-items:center;gap:.4rem;min-height:1.2rem}
.sf-live-file-btn{cursor:pointer;font-size:1.1rem;opacity:.85}
.sf-live-file-name{font-size:.75rem;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-live-attach-img{max-width:min(220px,100%);border-radius:10px;margin-top:.35rem;display:block;border:1px solid rgba(255,255,255,.12)}
.sf-live-attach-file{display:inline-block;margin-top:.35rem;color:#7dd3fc;font-size:.85rem;text-decoration:none}
.sf-live-foot textarea{
  flex:1;min-height:44px;max-height:110px;resize:vertical;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);color:inherit;padding:.55rem .7rem;font:inherit
}
.sf-live-foot button{border:0;border-radius:12px;padding:.65rem .85rem;background:#38bdf8;color:#041018;font-weight:700;cursor:pointer;display:grid;place-items:center;min-width:46px}
.sf-live-login{padding:1.2rem;text-align:center;line-height:1.8}
.sf-live-login a{color:#7dd3fc;font-weight:700}
.sf-live-hint{opacity:.7;font-size:.85rem;text-align:center;padding:.5rem}
.sf-live-typing{padding:.35rem .9rem;font-size:.78rem;opacity:.75;display:flex;align-items:center;gap:.45rem;border-top:1px solid rgba(255,255,255,.06)}
.sf-live-typing.hidden{display:none}
.sf-live-typing-dots{display:inline-flex;gap:3px}
.sf-live-typing-dots i{width:5px;height:5px;border-radius:50%;background:#7dd3fc;animation:sfTypeDot 1s ease infinite}
.sf-live-typing-dots i:nth-child(2){animation-delay:.15s}
.sf-live-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes sfTypeDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sf-live-offline{margin:.5rem .9rem 0;padding:.55rem .7rem;border-radius:10px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.35);font-size:.8rem;line-height:1.55;color:#fde68a}
.sf-live-offline.hidden{display:none}
.sf-live-csat{padding:.75rem .9rem;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:.45rem;font-size:.85rem}
.sf-live-csat.hidden{display:none}
.sf-live-csat p{margin:0;opacity:.85}
.sf-live-csat-stars{display:flex;gap:.25rem}
.sf-live-csat-stars button{border:0;background:transparent;color:#64748b;font-size:1.35rem;cursor:pointer;padding:0 .1rem}
.sf-live-csat-stars button.on{color:#fbbf24}
.sf-live-csat textarea{border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:inherit;padding:.45rem .55rem;font:inherit;resize:vertical}
.sf-live-csat button#sf-live-csat-send{border:0;border-radius:10px;padding:.5rem;background:#22c55e;color:#052e16;font-weight:700;cursor:pointer}
.sf-live-msg{position:relative}
.sf-live-msg-status{position:absolute;inset-inline-end:.45rem;bottom:.25rem;font-size:.68rem;opacity:.55}

@media(max-width:520px){
  .sf-live-wrap{inset-inline-end:.65rem;bottom:.65rem}
  .sf-live-panel{inset-inline:.5rem;bottom:5.2rem;width:auto;height:min(68vh,560px)}
  .sf-live-teaser{max-width:calc(100vw - 1.5rem);font-size:.84rem}
}
