/* عارض الاستوري لصفحة u.php — الجزء الثاني */
.profile-avatar.sv-has{cursor:pointer;isolation:isolate}
.profile-avatar.sv-has .avatar-open,.profile-avatar.sv-has>.avatar{position:relative;z-index:1}
.sv-ring{position:absolute;inset:-5px;border-radius:50%;z-index:0;pointer-events:none;padding:3px;
  background:conic-gradient(from 0deg,#8b3dff,#3b82f6,#ff3d9a,#8b3dff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  animation:svSpin 3.2s linear infinite;opacity:0;transform:scale(.85);transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.3,.4,1)}
.profile-avatar.sv-has .sv-ring{opacity:1;transform:scale(1)}
.profile-avatar.sv-seen .sv-ring{background:#b8bcc6;animation:none}
.profile-avatar.sv-has:not(.sv-seen)::after{content:"";position:absolute;inset:-9px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(139,61,255,.28),transparent 70%);animation:svGlow 2.4s ease-in-out infinite}
.profile-avatar.sv-has:focus-visible{outline:none}
.profile-avatar.sv-has:focus-visible .sv-ring{box-shadow:0 0 0 3px rgba(59,130,246,.5)}
@keyframes svSpin{to{transform:rotate(360deg)}}
@keyframes svGlow{50%{transform:scale(1.08);opacity:.55}}

/* الطبقة */
.sv-ov{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(6,6,12,.94);
  opacity:0;transition:opacity .28s ease;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  font-family:inherit;color:#fff}
.sv-ov.on{opacity:1}
.sv-stage{position:relative;width:100%;height:100%;max-width:min(440px,calc((100vh - 40px)*9/16));max-height:calc(100vh - 40px);
  aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 90px -20px rgba(0,0,0,.8);
  transform:scale(.92) translateY(18px);transition:transform .38s cubic-bezier(.16,1,.3,1),border-radius .2s;will-change:transform}
.sv-ov.on .sv-stage{transform:none}
.sv-ov.dragging .sv-stage{transition:none}
@media (max-width:600px){.sv-stage{max-width:none;max-height:none;height:100%;height:100dvh;aspect-ratio:auto;border-radius:0}}

.sv-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.sv-media img,.sv-media video{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;pointer-events:none}
.sv-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:svIn .32s ease both}
@keyframes svIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.sv-text{padding:80px 28px 130px;font-size:clamp(20px,5.6vw,28px);line-height:1.7;font-weight:800;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;
  text-shadow:0 2px 12px rgba(0,0,0,.25);max-height:100%;overflow:hidden}
.sv-shade-t,.sv-shade-b{position:absolute;inset-inline:0;pointer-events:none;z-index:2}
.sv-shade-t{top:0;height:120px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.sv-shade-b{bottom:0;height:200px;background:linear-gradient(transparent,rgba(0,0,0,.7))}

/* الأشرطة */
.sv-bars{position:absolute;top:10px;inset-inline:10px;display:flex;gap:4px;z-index:5;direction:rtl}
.sv-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden}
.sv-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:right center;transform:scaleX(0)}
.sv-bar.done i{transform:scaleX(1)}

/* الرأس */
.sv-head{position:absolute;top:22px;inset-inline:12px;display:flex;align-items:center;gap:10px;z-index:6}
.sv-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.85);background:#444;display:grid;place-items:center;font-weight:800;font-size:15px}
.sv-who{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sv-who b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-who small{font-size:12.5px;opacity:.8;white-space:nowrap}
.sv-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;padding:0;transition:background .15s,transform .15s}
.sv-btn:hover{background:rgba(255,255,255,.14)}
.sv-btn:active{transform:scale(.9)}
.sv-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.sv-btn[hidden]{display:none}

/* المؤشرات */
.sv-paused{position:absolute;top:50%;left:50%;z-index:4;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
.sv-ov.is-paused .sv-paused{opacity:1;transform:none}
.sv-ov.is-paused .sv-head,.sv-ov.is-paused .sv-foot{opacity:.0;transition:opacity .25s}
.sv-head,.sv-foot{transition:opacity .25s}
.sv-paused svg{width:26px;height:26px;fill:#fff}
.sv-load{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:svRot .8s linear infinite;z-index:3;display:none}
.sv-ov.loading .sv-load{display:block}
@keyframes svRot{to{transform:rotate(360deg)}}
.sv-err{font-size:14px;opacity:.8}

/* الأسفل */
.sv-foot{position:absolute;bottom:0;inset-inline:0;z-index:6;padding:0 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;align-items:stretch}
.sv-cap{font-size:15px;line-height:1.6;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 1px 6px rgba(0,0,0,.7);max-height:30vh;overflow:auto}
.sv-cap:empty{display:none}
.sv-reply{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}
.sv-reply:hover{background:rgba(255,255,255,.18)}
.sv-reply:active{transform:scale(.98)}
.sv-reply svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* أسهم الكمبيوتر */
.sv-nav{position:absolute;top:50%;z-index:100001;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#111;cursor:pointer;display:grid;place-items:center;transition:opacity .2s,transform .15s}
.sv-nav:hover{transform:scale(1.08)}
.sv-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sv-nav[disabled]{opacity:0;pointer-events:none}
.sv-nav.prev{right:calc(50% - min(220px,(100vh - 40px)*9/32) - 64px)}
.sv-nav.next{left:calc(50% - min(220px,(100vh - 40px)*9/32) - 64px)}
@media (max-width:600px),(hover:none){.sv-nav{display:none}}
.sv-close-x{position:fixed;top:16px;left:16px;z-index:100001}
@media (max-width:600px){.sv-close-x{display:none}}

/* إظهار الاستوري للزائر بوضوح */
.sv-teaser{display:flex;flex-direction:column;align-items:center;gap:10px;margin:12px auto 4px;max-width:100%;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.sv-teaser.on{opacity:1;transform:none}
.sv-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#8b3dff,#3b82f6 55%,#ff3d9a);box-shadow:0 8px 24px -8px rgba(139,61,255,.6);transition:transform .15s}
.sv-badge:hover{transform:translateY(-1px) scale(1.03)}
.sv-badge em{font-style:normal;font-weight:600;font-size:12px;opacity:.85;padding-inline-start:8px;border-inline-start:1px solid rgba(255,255,255,.4)}
.sv-badge.is-seen{background:rgba(127,127,140,.18);color:inherit;box-shadow:none}
.sv-badge.is-seen em{border-color:currentColor;opacity:.6}
.sv-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:svDot 1.6s ease-out infinite}
@keyframes svDot{70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.sv-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 6px 6px;max-width:100%;scrollbar-width:none;scroll-snap-type:x mandatory}
.sv-strip::-webkit-scrollbar{display:none}
.sv-thumb{position:relative;flex:0 0 auto;width:62px;height:96px;border-radius:12px;overflow:hidden;cursor:pointer;scroll-snap-align:start;padding:0;background:#222;
  border:2.5px solid transparent;background-clip:padding-box;outline:2.5px solid #8b3dff;outline-offset:-1px;transition:transform .15s,outline-color .2s}
.sv-thumb:hover{transform:translateY(-2px)}
.sv-thumb.seen{outline-color:#b8bcc6;opacity:.75}
.sv-thumb img,.sv-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sv-thumb-text{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:10px;font-weight:800;line-height:1.4;overflow:hidden}
.sv-thumb-ago{position:absolute;bottom:0;inset-inline:0;padding:10px 2px 3px;font-size:9.5px;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.sv-play{position:absolute;top:6px;inset-inline-start:6px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.sv-play svg{width:10px;height:10px;fill:#fff}
.sv-count{margin-inline-start:auto;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.35)}
.sv-count:empty{display:none}
.sv-hint{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;animation:svIn .3s ease both}
.sv-hint-row{display:flex;width:100%;gap:10px}
.sv-hint-zone{flex:1;padding:28px 6px;border:2px dashed rgba(255,255,255,.5);border-radius:14px;font-weight:800}
.sv-hint-zone.l{flex:2}
.sv-hint ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;line-height:1.6}
.sv-hint-ok{min-height:46px;padding:0 22px;border:0;border-radius:999px;background:#fff;color:#111;font:inherit;font-weight:800;cursor:pointer}

@media (prefers-reduced-motion:reduce){.sv-dot,.sv-ring,.profile-avatar.sv-has::after,.sv-item{animation:none!important}.sv-stage,.sv-ov{transition:none}}

/* v3 — توهج أقوى ووضوح أكبر للاستوري غير المشاهدة */
.profile-avatar.sv-has:not(.sv-seen) .sv-ring{inset:-7px;
  background:conic-gradient(from 0deg,#ff3d9a,#ffb800,#8b3dff,#3b82f6,#00e0ff,#ff3d9a);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5px));
  filter:drop-shadow(0 0 6px rgba(255,61,154,.9)) drop-shadow(0 0 14px rgba(139,61,255,.7));
  animation:svSpin 2.4s linear infinite}
.profile-avatar.sv-has:not(.sv-seen)::after{inset:-22px;
  background:radial-gradient(circle,rgba(255,61,154,.55),rgba(139,61,255,.35) 45%,transparent 72%);
  animation:svGlow2 1.8s ease-in-out infinite}
@keyframes svGlow2{0%,100%{transform:scale(.95);opacity:.75}50%{transform:scale(1.15);opacity:1}}
.profile-avatar.sv-has:not(.sv-seen) .avatar-open,.profile-avatar.sv-has:not(.sv-seen)>.avatar{animation:svBeat 2.4s ease-in-out infinite}
@keyframes svBeat{0%,100%{transform:scale(1)}8%{transform:scale(1.05)}16%{transform:scale(1)}24%{transform:scale(1.03)}32%{transform:scale(1)}}

.sv-badge:not(.is-seen){font-size:15px;padding:10px 20px;background-size:200% 200%;
  background-image:linear-gradient(120deg,#ff3d9a,#8b3dff,#3b82f6,#ff3d9a);
  box-shadow:0 0 0 3px rgba(255,61,154,.25),0 0 22px rgba(255,61,154,.65),0 0 44px rgba(139,61,255,.45);
  animation:svFlow 3s linear infinite,svBadgeGlow 1.8s ease-in-out infinite}
@keyframes svFlow{to{background-position:200% 0}}
@keyframes svBadgeGlow{50%{box-shadow:0 0 0 6px rgba(255,61,154,.15),0 0 32px rgba(255,61,154,.9),0 0 64px rgba(139,61,255,.6)}}

.sv-thumb:not(.seen){outline:3px solid #ff3d9a;box-shadow:0 0 12px rgba(255,61,154,.7),0 0 24px rgba(139,61,255,.45);animation:svThumb 2s ease-in-out infinite}
@keyframes svThumb{50%{box-shadow:0 0 18px rgba(255,61,154,.95),0 0 36px rgba(139,61,255,.6)}}

@media (prefers-reduced-motion:reduce){.sv-badge,.sv-thumb,.profile-avatar .avatar-open,.profile-avatar>.avatar{animation:none!important}}

/* ===== الجزء الثاني (الدفعة الأولى): ردود الفعل + الرد السري ===== */
.sv-reply[hidden]{display:none!important}
.sv-reacts{display:flex;justify-content:center;gap:6px;flex-wrap:nowrap;direction:rtl}
.sv-react{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(15,12,35,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.sv-react:hover{transform:translateY(-3px) scale(1.08)}
.sv-react:active{transform:scale(.9)}
.sv-react.on{background:linear-gradient(135deg,rgba(124,92,255,.75),rgba(255,111,216,.7));border-color:rgba(255,255,255,.6);box-shadow:0 0 18px rgba(255,111,216,.55);transform:scale(1.1)}
.sv-replybox{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 6px 4px 4px;padding-inline-start:14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:rgba(10,8,28,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s}
.sv-replybox:focus-within{border-color:#4fd1ff;box-shadow:0 0 0 3px rgba(79,209,255,.18),0 0 24px rgba(124,92,255,.35)}
.sv-replybox.busy{opacity:.6;pointer-events:none}
.sv-lock{font-size:14px;opacity:.85}
.sv-replyin{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;font-size:15px;padding:8px 0}
.sv-replyin::placeholder{color:rgba(255,255,255,.65)}
.sv-replysend{flex:none;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7c5cff,#4fd1ff);transition:opacity .2s,transform .15s}
.sv-replysend:disabled{opacity:.35;cursor:default}
.sv-replysend:not(:disabled):active{transform:scale(.9)}
.sv-replysend svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.sv-ov.is-typing .sv-reacts{display:none}
.sv-ov.is-typing .sv-shade-b{opacity:1}
.sv-fly{position:absolute;z-index:9;pointer-events:none;transform:translate(-50%,0);animation:svFly 1.5s cubic-bezier(.2,.7,.3,1) forwards;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
@keyframes svFly{0%{opacity:0;transform:translate(-50%,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) rotate(var(--rot)) scale(1.2)}}
.sv-fly.big{left:50%;top:42%;font-size:110px;transform:translate(-50%,-50%);animation:svPop 1s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes svPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.9)}}
.sv-toast{position:absolute;z-index:10;top:72px;left:50%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,rgba(124,92,255,.92),rgba(79,209,255,.88));color:#fff;font-size:14px;font-weight:600;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s,transform .25s;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sv-toast.bad{background:linear-gradient(135deg,rgba(255,80,120,.95),rgba(255,111,216,.9))}
.sv-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:380px){.sv-react{width:38px;height:38px;font-size:19px}.sv-reacts{gap:4px}}
@media (prefers-reduced-motion:reduce){.sv-fly{animation-duration:.01s}.sv-react{transition:none}}

/* الملصقات التفاعلية — الجزء ١ */
.sv-stk{position:absolute;z-index:6;left:50%;transform:translate(-50%,-50%);width:min(82%,320px);padding:14px;border-radius:22px;background:rgba(255,255,255,.96);color:#14141f;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);text-align:center;animation:svStkIn .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes svStkIn{from{opacity:0;transform:translate(-50%,-40%) scale(.85)}}
.sv-stk-q{font-weight:900;font-size:16px;line-height:1.5;margin-bottom:10px;word-break:break-word}
.sv-stk-question .sv-stk-q,.sv-stk-slider .sv-stk-q{background:linear-gradient(135deg,#7c5cff,#ff6fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-stk-opts{display:flex;flex-direction:column;gap:8px}
.sv-stk-opt{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border:0;border-radius:14px;background:#f0eef8;color:#14141f;font:inherit;font-weight:800;cursor:pointer}
.sv-stk-opt i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#c9bbff,#a6e8ff);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.sv-stk-opt span,.sv-stk-opt em{position:relative;font-style:normal}
.sv-stk-opts.done .sv-stk-opt{cursor:default}.sv-stk-opt.mine{box-shadow:inset 0 0 0 2px #7c5cff}
.sv-stk-opt.right i{background:linear-gradient(90deg,#86efac,#bbf7d0)}.sv-stk-opt.wrong i{background:linear-gradient(90deg,#fca5a5,#fecaca)}
.sv-stk-face{font-size:36px;transition:transform .1s;margin:-4px 0 4px}
.sv-stk-range{width:100%;accent-color:#ff6fd8;height:28px}
.sv-stk-avg{display:block;font-size:12px;opacity:.7;min-height:16px}
.sv-stk-ask{display:flex;gap:8px}.sv-stk-ask input{flex:1;min-width:0;padding:12px 14px;border:0;border-radius:14px;background:#f0eef8;font:inherit;color:#14141f}
.sv-stk-ask button{width:44px;border:0;border-radius:14px;background:linear-gradient(135deg,#7c5cff,#ff6fd8);cursor:pointer}.sv-stk-ask button:disabled{opacity:.45}
.sv-stk-ask svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}