/* Clinic Story – front */
.clst-root{position:fixed;z-index:2147482000;display:flex;align-items:center;gap:10px;direction:rtl;pointer-events:none;font-family:inherit;line-height:1.4}
.clst-root.clst-right{right:14px;flex-direction:row}
.clst-root.clst-left{left:14px;flex-direction:row-reverse}
.clst-root *{box-sizing:border-box}

.clst-bubble{pointer-events:auto;position:relative;width:70px;height:70px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
	filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));animation:clst-shake 3.6s ease-in-out infinite;transform-origin:50% 50%}
.clst-bubble:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #d62976}
.clst-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);animation:clst-spin 5s linear infinite}
.clst-seen .clst-ring{background:#c9cdd3;animation:none}
.clst-avatar{position:absolute;inset:3px;border-radius:50%;border:3px solid #fff;background:#f1f1f4 center/cover no-repeat;overflow:hidden}
.clst-avatar video{width:100%;height:100%;object-fit:cover;display:block}
.clst-badge{position:absolute;top:-2px;left:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff2d55;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.clst-seen .clst-badge{display:none}

.clst-tip{pointer-events:auto;cursor:pointer;position:relative;background:#fff;color:#1d1d1f;font-size:13px;font-weight:700;padding:8px 13px;border-radius:999px;white-space:nowrap;
	box-shadow:0 6px 18px rgba(0,0,0,.18);animation:clst-blink 1.5s ease-in-out infinite}
.clst-tip:after{content:"";position:absolute;top:50%;width:10px;height:10px;background:#fff;transform:translateY(-50%) rotate(45deg)}
.clst-right .clst-tip:after{right:-4px}
.clst-left .clst-tip:after{left:-4px}

@keyframes clst-shake{0%,62%,100%{transform:rotate(0) scale(1)}65%{transform:rotate(-13deg) scale(1.08)}69%{transform:rotate(11deg) scale(1.08)}73%{transform:rotate(-9deg) scale(1.06)}77%{transform:rotate(7deg) scale(1.04)}81%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}89%{transform:rotate(0)}}
@keyframes clst-spin{to{transform:rotate(360deg)}}
@keyframes clst-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.96)}}
@keyframes clst-fade{from{opacity:0}to{opacity:1}}
@keyframes clst-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes clst-rot{to{transform:rotate(360deg)}}

/* ---------- Viewer ---------- */
.clst-overlay{position:fixed;inset:0;z-index:2147483000;background:rgba(12,12,18,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:clst-fade .2s ease;direction:rtl;font-family:inherit}
.clst-viewer{position:absolute;top:10px;right:10px;bottom:10px;left:10px;margin:auto;max-width:440px;max-height:880px;border-radius:18px;overflow:hidden;background:#000;color:#fff;
	box-shadow:0 24px 60px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.35);animation:clst-pop .25s ease;user-select:none;-webkit-user-select:none;touch-action:none}
.clst-viewer *{box-sizing:border-box}
.clst-bg{position:absolute;inset:-30px;background:center/cover no-repeat;filter:blur(28px) brightness(.55);transform:scale(1.1)}
.clst-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.clst-stage img,.clst-stage video{position:relative;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.clst-spinner{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:clst-rot .8s linear infinite;z-index:2}

.clst-top{position:absolute;top:0;left:0;right:0;z-index:4;padding:10px 10px 28px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.clst-bars{display:flex;gap:4px;direction:rtl}
.clst-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.clst-bar i{position:absolute;top:0;bottom:0;inset-inline-start:0;width:0;background:#fff;border-radius:3px}
.clst-head{display:flex;align-items:center;gap:8px;margin-top:10px}
.clst-h-av{width:34px;height:34px;border-radius:50%;background:#444 center/cover no-repeat;border:2px solid #fff;flex:none}
.clst-h-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clst-h-time{font-size:12px;opacity:.75;white-space:nowrap}
.clst-sp{flex:1}
.clst-btn{all:unset;box-sizing:border-box;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:#fff}
.clst-btn:hover{background:rgba(255,255,255,.15)}
.clst-btn:focus{outline:none!important;box-shadow:none}
.clst-btn:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.8)}
.clst-btn svg{width:22px;height:22px;display:block}

.clst-tap{position:absolute;top:80px;bottom:90px;z-index:3;-webkit-tap-highlight-color:transparent}
.clst-tap-prev{left:0;width:32%}
.clst-tap-next{right:0;width:68%}

.clst-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:40px 16px 18px;background:linear-gradient(transparent,rgba(0,0,0,.65));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.clst-cap{font-size:15px;font-weight:600;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.6);line-height:1.7}
.clst-link{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#111!important;text-decoration:none!important;font-weight:700;font-size:14px;padding:10px 22px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.clst-cap:empty,.clst-link[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.clst-bubble,.clst-ring,.clst-tip{animation:none}}
@media (max-width:380px){.clst-tip{font-size:12px;padding:7px 10px}.clst-bubble{width:62px;height:62px}}

/* فلش‌های قبلی/بعدی – مینیمال */
.clst-arrow{all:unset;box-sizing:border-box;position:absolute;top:50%;z-index:4;width:38px;height:38px;margin-top:-19px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
	color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.25);transition:opacity .2s,background .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.clst-arrow svg{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.clst-arrow:hover{background:rgba(255,255,255,.32)}
.clst-arrow:active{transform:scale(.9)}
.clst-arrow:focus{outline:none!important}
.clst-arrow:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.clst-arrow-prev{left:10px}
.clst-arrow-next{right:10px}
.clst-arrow.clst-off{opacity:0;pointer-events:none}
.clst-arrow.clst-last{opacity:.55}
.clst-viewer .clst-arrow,.clst-viewer .clst-arrow:focus{background:rgba(255,255,255,.18)!important;color:#fff!important;border:0!important}
.clst-viewer .clst-arrow:hover{background:rgba(255,255,255,.32)!important}
.clst-viewer .clst-btn,.clst-viewer .clst-btn:focus{background:transparent!important;color:#fff!important;border:0!important}
.clst-viewer .clst-btn:hover{background:rgba(255,255,255,.15)!important}

/* v1.3 – جابجایی جهت: چپ = بعدی، راست = قبلی */
.clst-viewer .clst-tap-prev{left:auto;right:0;width:32%}
.clst-viewer .clst-tap-next{right:auto;left:0;width:68%}
.clst-viewer .clst-arrow-prev{left:auto;right:10px}
.clst-viewer .clst-arrow-next{right:auto;left:10px}

/* دکمه سه‌بعدی «مشاوره آنلاین» – ۱۰ پیکسل از پایین استوری */
.clst-cta{position:absolute;z-index:6;left:50%;bottom:10px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
	padding:13px 24px 13px 16px;border-radius:999px;text-decoration:none!important;color:#fff!important;font-weight:800;font-size:16px;letter-spacing:-.2px;
	background:linear-gradient(180deg,#4ade80 0%,#22c55e 45%,#16a34a 100%);
	border-top:1px solid rgba(255,255,255,.6);
	box-shadow:0 6px 0 #0d6b2f,0 12px 22px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 6px rgba(0,0,0,.18);
	text-shadow:0 1px 1px rgba(0,0,0,.3);transform:translateX(-50%);
	animation:clst-cta-in .6s cubic-bezier(.2,1.6,.4,1) both,clst-cta-shake 2.2s ease-in-out .7s infinite;-webkit-tap-highlight-color:transparent}
.clst-cta:active{box-shadow:0 2px 0 #0d6b2f,0 5px 10px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.4);margin-bottom:-4px}
.clst-cta:before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(74,222,128,.75);animation:clst-cta-ring 1.6s ease-out infinite;pointer-events:none}
.clst-cta-ic{width:30px;height:30px;border-radius:50%;background:#fff;color:#16a34a;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.25);flex:none}
.clst-cta-ic svg{width:17px;height:17px;display:block;animation:clst-ring-ic 1.1s ease-in-out infinite}
.clst-cta-on .clst-bottom{padding-bottom:86px}
@keyframes clst-cta-in{0%{opacity:0;transform:translate(-50%,140%) scale(.7)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes clst-cta-shake{0%,60%,100%{transform:translateX(-50%) rotate(0)}64%{transform:translateX(-50%) rotate(-4deg) scale(1.05)}68%{transform:translateX(-50%) rotate(4deg) scale(1.05)}72%{transform:translateX(-50%) rotate(-3deg)}76%{transform:translateX(-50%) rotate(2deg)}80%{transform:translateX(-50%) rotate(0)}}
@keyframes clst-cta-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.45)}}
@keyframes clst-ring-ic{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.clst-cta,.clst-cta:before,.clst-cta-ic svg{animation:none}}