/* FAST-SSR Stories UI */
.akm-stories-section{ background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); margin:8px 0 16px; }
.akm-stories-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 10px; border-bottom:1px dashed #e5e7eb; margin-bottom:10px; }
.akm-stories-strip{ display:flex; gap:12px; overflow:auto; padding:8px 10px; }
.akm-stories-strip[data-dir="ltr"]{ direction:ltr; justify-content:flex-start; }
.akm-stories-strip[data-dir="rtl"]{ direction:rtl; justify-content:flex-end; }
.akm-story-vendor{ display:flex; flex-direction:column; align-items:center; width:86px; min-height:100px; }
.akm-story-bubble{ width:72px; height:72px; border-radius:999px; overflow:hidden; border:2px solid #1d4ed8; position:relative; box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer; }
.akm-story-bubble img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:999px; }
.akm-story-name{ margin-top:6px; font-size:12px; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; text-align:center; }
.akm-story-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:999px; background:#fff; color:#111827; box-shadow:0 2px 6px rgba(0,0,0,.15); pointer-events:none; }
.akm-story-play::before{ content:''; width:18px; height:18px; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path d=%22M8 5v14l11-7z%22/></svg>') no-repeat center/70%;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path d=%22M8 5v14l11-7z%22/></svg>') no-repeat center/70%; }


/* === AKM Stories Quick Wins (2025-10-20) === */
.akm-stories-bar{ display:flex; gap:10px; align-items:center; overflow-x:auto; padding:8px 6px; }
.akm-story-bubble{ position:relative; width:72px; flex:0 0 auto; cursor:pointer; }
.akm-story-bubble img{ width:72px; height:72px; border-radius:50%; display:block; }
.akm-ring img{ padding:2px; border:3px solid transparent; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff,#fff), radial-gradient(circle at top left, #ff4d4d, #ff9d00, #ff4dd2); }
.akm-ring.akm-seen img{ background-image: linear-gradient(#fff,#fff), linear-gradient(#bbb,#ccc); opacity: 0.8; }
.akm-story-badge{ position:absolute; right:-2px; bottom:-2px; font-size:11px; background:#111; color:#fff; border-radius:10px; padding:2px 6px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.akm-story-name{ margin-top:6px; font-size:12px; text-align:center; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72px; }

/* Skeleton shimmer */
.akm-story-skel{ width:72px; height:72px; border-radius:50%; background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%; animation: akmShimmer 1.2s ease-in-out infinite; }
@keyframes akmShimmer { 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* Lightbox viewer */
.akm-story-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:9999; }
.akm-story-lightbox-inner{ position:relative; max-width:92vw; max-height:92vh; }
.akm-story-lightbox-inner img{ max-width:92vw; max-height:92vh; display:block; }
.akm-story-progress{ position:absolute; top:8px; left:4px; height:3px; width:0%; background:#fff; transition:width .1s linear; }


/* Add bubble (+ Your Story) */
.akm-story-add { position:relative; }
.akm-story-add img{ background:#fafafa; border:2px dashed #bbb; }
.akm-add-plus{ position:absolute; right:-4px; top:-4px; width:20px; height:20px; border-radius:50%; background:#0a7; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,.25); }


/* Ensure names show nicely under bubbles (RTL) */
.akm-story-name{ display:block; margin-top:6px; font-size:12px; text-align:center; direction: rtl; }
.akm-stories-bar{ justify-content:flex-start; align-items:flex-start; }


/* + قصتي bubble styles */
.akm-story-add img { background:#fafafa; border:2px dashed #bbb; }
.akm-add-plus { position:absolute; right:-4px; top:-4px; width:20px; height:20px;
  border-radius:50%; background:#0a7; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,.25); }


/* My Story: distinct frame */
.akm-my-story img{ padding:2px; border:3px solid transparent;
  background-origin: border-box; background-clip: content-box, border-box;
  background-image: linear-gradient(#fff,#fff), radial-gradient(circle at top left, #2dd4bf, #22c55e); /* teal->green */
}
.akm-story-name{ display:block; margin-top:6px; font-size:12px; text-align:center; direction: rtl; }


/* Force show vendor titles under bubbles and allocate space */
.akm-stories, .akm-stories-bar{ min-height: 110px; }
.akm-stories-bar{ align-items:flex-start !important; gap: 10px; }
.akm-story-bubble{ width: 68px; position: relative; }
.akm-story-bubble img{ width: 56px; height: 56px; border-radius: 50%; display:block; margin: 0 auto; }
.akm-story-name{ display:block !important; margin-top:6px; font-size:12px; text-align:center; line-height:1.2; max-width:66px; direction: rtl;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111; }
.akm-story-badge{ right:-2px; bottom:-2px; font-size:10px; padding:2px 5px; }


/* === AKM Addon7: enforce horizontal row & visible names === */
.akm-stories, .akm-stories-bar{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px 4px;
}
.akm-story-bubble{
  flex: 0 0 auto !important;
  width: 72px !important;
  text-align: center;
  position: relative;
}
.akm-story-bubble img{
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 auto !important;
}
.akm-story-name{
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  max-width: 72px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  direction: rtl !important;
  color: #111 !important;
}
/* My Story badge/frame */
.akm-my-story img{
  padding: 2px !important;
  border: 3px solid transparent !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  background-image: linear-gradient(#fff,#fff), radial-gradient(circle at top left, #2dd4bf, #22c55e) !important;
}


/* === AKM Addon8: remove blur/dimming and enforce row + titles === */
.akm-stories, .akm-stories-bar{ display:flex !important; flex-direction:row !important; align-items:flex-start !important; gap:12px !important; overflow-x:auto; overflow-y:visible; padding:6px 4px; }
.akm-story-bubble{ flex:0 0 auto !important; width:72px !important; text-align:center; position:relative; }
.akm-story-bubble img{ width:60px !important; height:60px !important; border-radius:50% !important; display:block !important; margin:0 auto !important; filter:none !important; opacity:1 !important; }
.akm-story-bubble.akm-seen img{ filter:none !important; opacity:1 !important; }
.akm-story-bubble::before, .akm-story-bubble::after{ filter:none !important; backdrop-filter:none !important; }
.akm-story-name{ display:block !important; margin-top:6px !important; font-size:12px !important; line-height:1.2 !important; max-width:72px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; direction:rtl !important; color:#111 !important; }
.akm-my-story img{ padding:2px !important; border:3px solid transparent !important; background-origin:border-box !important; background-clip:content-box, border-box !important; background-image:linear-gradient(#fff,#fff), radial-gradient(circle at top left, #2dd4bf,#22c55e) !important; }


/* === AKM Addon9: Cards layout for stories === */
.akm-stories-section .akm-stories,
.akm-stories-section .akm-stories-bar{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:14px !important;
  overflow-x:auto;
  overflow-y:visible;
  padding:6px 4px;
}
.akm-stories-section .akm-story-bubble{
  position:relative;
  flex:0 0 auto !important;
  width:160px !important;
  text-align:start;
}
.akm-stories-section .akm-story-bubble img{
  width:160px !important;
  height:220px !important;
  border-radius:16px !important;
  display:block !important;
  margin:0 !important;
  object-fit:cover !important;
  filter:none !important;
  opacity:1 !important;
}
.akm-stories-section .akm-story-bubble.akm-seen img{ filter:none !important; opacity:1 !important; }
.akm-stories-section .akm-story-bubble::before,
.akm-stories-section .akm-story-bubble::after{ content:none !important; background:none !important; box-shadow:none !important; filter:none !important; backdrop-filter:none !important; }

/* In-card header: avatar + name (top overlay) */
.akm-stories-section .akm-card-header{
  position:absolute;
  top:8px; left:8px; right:8px;
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}
.akm-stories-section .akm-card-avatar{ width:24px; height:24px; border-radius:50%; display:block; pointer-events:none; }
.akm-stories-section .akm-card-name{
  color:#fff; font-size:12px; font-weight:600;
  max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:rtl; pointer-events:none;
}

/* Bottom-right TTL badge */
.akm-stories-section .akm-story-badge{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.6); color:#fff;
  padding:2px 6px; border-radius:12px; font-size:11px;
}

/* Hide legacy below-title */
.akm-stories-section .akm-story-name{ display:none !important; }

/* My Story special frame + plus button */
.akm-stories-section .akm-my-story img{
  padding:2px !important; border:3px solid transparent !important;
  background-origin:border-box !important;
  background-clip:content-box, border-box !important;
  background-image:linear-gradient(#fff,#fff),
                   radial-gradient(circle at top left, #2dd4bf, #22c55e) !important;
}
.akm-stories-section .akm-my-story .akm-add-plus{
  position:absolute; top:10px; right:10px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0a7; color:#fff; font-weight:700; pointer-events:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}


/* === AKM Addon10: Card fix (no ring, no double outlines) === */
.akm-stories-section .akm-stories,
.akm-stories-section .akm-stories-bar{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:14px !important;
  overflow-x:auto;
  overflow-y:visible;
  padding:6px 4px;
}

/* Base bubble becomes a card */
.akm-stories-section .akm-story-bubble{
  position:relative;
  flex:0 0 auto !important;
  width:168px !important;
  text-align:start;
  border:none !important;
  box-shadow:none !important;
  border-radius:16px !important;
  overflow:visible !important;
}

/* Image as cover */
.akm-stories-section .akm-story-bubble img{
  width:168px !important;
  height:228px !important;
  border-radius:16px !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  filter:none !important;
  opacity:1 !important;
}

/* Kill circular ring styles from legacy .akm-ring */
.akm-stories-section .akm-story-bubble.akm-ring,
.akm-stories-section .akm-story-bubble.akm-ring *{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  filter:none !important;
}
.akm-stories-section .akm-story-bubble.akm-ring::before,
.akm-stories-section .akm-story-bubble.akm-ring::after{
  content:none !important;
}

/* In-card header (avatar + name) */
.akm-stories-section .akm-card-header{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}
.akm-stories-section .akm-card-avatar{ width:24px; height:24px; border-radius:50%; display:block; pointer-events:none; }
.akm-stories-section .akm-card-name{
  color:#fff; font-size:12px; font-weight:600;
  max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:rtl; pointer-events:none;
}

/* TTL badge bottom-right */
.akm-stories-section .akm-story-badge{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,0,0,.6); color:#fff;
  padding:2px 6px; border-radius:12px; font-size:11px;
}

/* Hide legacy below-title */
.akm-stories-section .akm-story-name{ display:none !important; }

/* My Story special frame + plus */
.akm-stories-section .akm-my-story img{
  padding:2px !important; border:3px solid transparent !important;
  background-origin:border-box !important;
  background-clip:content-box, border-box !important;
  background-image:linear-gradient(#fff,#fff),
                   radial-gradient(circle at top left, #2dd4bf, #22c55e) !important;
}
.akm-stories-section .akm-my-story .akm-add-plus{
  position:absolute; top:12px; right:12px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0a7; color:#fff; font-weight:700; pointer-events:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}


/* === AKM Addon12: Cards SAFE (JS-only) === */
.akm-stories-section .akm-stories,
.akm-stories-section .akm-stories-bar{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:14px !important;
  overflow-x:auto;
  overflow-y:visible;
  padding:6px 4px;
}
.akm-stories-section .akm-story-bubble{
  position:relative;
  flex:0 0 auto !important;
  width:168px !important;
  text-align:start;
  border:none !important;
  box-shadow:none !important;
  border-radius:16px !important;
}
.akm-stories-section .akm-story-bubble img{
  width:168px !important;
  height:228px !important;
  border-radius:16px !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  filter:none !important; opacity:1 !important;
}
.akm-stories-section .akm-story-bubble.akm-ring img{ padding:0 !important; border:0 !important; background:none !important; border-radius:16px !important; }
.akm-stories-section .akm-story-bubble.akm-ring,
.akm-stories-section .akm-story-bubble.akm-ring *{ background:none !important; box-shadow:none !important; filter:none !important; }
.akm-stories-section .akm-story-bubble.akm-ring::before,
.akm-stories-section .akm-story-bubble.akm-ring::after{ content:none !important; }

.akm-stories-section .akm-card-header{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}
.akm-stories-section .akm-card-avatar{ width:24px; height:24px; border-radius:50%; display:block; pointer-events:none; }
.akm-stories-section .akm-card-name{ color:#fff; font-size:12px; font-weight:600; max-width:120px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:rtl; pointer-events:none; }
.akm-stories-section .akm-story-badge{ position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff;
  padding:2px 6px; border-radius:12px; font-size:11px; }
.akm-stories-section .akm-story-name{ display:none !important; }

.akm-stories-section .akm-my-story img{
  padding:2px !important; border:3px solid transparent !important;
  background-origin:border-box !important;
  background-clip:content-box, border-box !important;
  background-image:linear-gradient(#fff,#fff),
                   radial-gradient(circle at top left, #2dd4bf, #22c55e) !important;
}
.akm-stories-section .akm-my-story .akm-add-plus{
  position:absolute; top:12px; right:12px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0a7; color:#fff; font-weight:700; pointer-events:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}


/* === AKM Addon13: Circles layout (red halo for new stories) === */
.akm-stories-section .akm-stories,
.akm-stories-section .akm-stories-bar{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:12px !important;
  overflow-x:auto;
  overflow-y:visible;
  padding:6px 4px;
}

/* Reset any card remnants */
.akm-stories-section .akm-card-header{ display:none !important; }

/* Bubble base */
.akm-stories-section .akm-story-bubble{
  position:relative;
  flex:0 0 auto !important;
  width:72px !important;
  text-align:center;
}

/* Circular image with ring technique */
.akm-stories-section .akm-story-bubble img{
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  display:block !important;
  margin:0 auto !important;
  border:3px solid transparent !important;
  background-origin:border-box !important;
  background-clip:content-box, border-box !important;
  /* default: gray ring for seen */
  background-image: linear-gradient(#fff,#fff), radial-gradient(circle at center, #d1d5db, #9ca3af) !important;
  filter:none !important; opacity:1 !important;
}

/* Unseen/new story: red halo */
.akm-stories-section .akm-story-bubble.akm-unseen img{
  background-image: linear-gradient(#fff,#fff), radial-gradient(circle at center, #ef4444, #b91c1c) !important;
}

/* Story name below bubble */
.akm-stories-section .akm-story-name{
  display:block !important;
  margin-top:6px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  max-width:72px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  direction:rtl !important;
  color:#111 !important;
}

/* My Story unique frame (teal/green) */
.akm-stories-section .akm-my-story img{
  background-image: linear-gradient(#fff,#fff), radial-gradient(circle at center, #2dd4bf, #22c55e) !important;
}

/* Neutralize any legacy ring pseudo elements */
.akm-stories-section .akm-story-bubble.akm-ring,
.akm-stories-section .akm-story-bubble.akm-ring *{ background:none !important; box-shadow:none !important; filter:none !important; }
.akm-stories-section .akm-story-bubble.akm-ring::before,
.akm-stories-section .akm-story-bubble.akm-ring::after{ content:none !important; }


/* === AKM Addon15: force names under default auto shortcode === */
.akm-stories-section .akm-following-auto .akm-story-name{
  display:block !important;
  margin-top:6px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  max-width:72px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  direction:rtl !important;
  color:#111 !important;
}


/* === AKM Addon17: Nice full names + overlay header with close & link === */
/* Bigger bubble width to allow 2-line titles */
.akm-stories-section .akm-following-auto .akm-story-bubble{
  width: 88px !important;
}
.akm-stories-section .akm-following-auto .akm-story-bubble img{
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
}
/* Two-line name, elegant clamp */
.akm-stories-section .akm-following-auto .akm-story-name{
  display:block !important;
  margin:6px auto 0 !important;
  max-width:88px !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:#111 !important;
  text-align:center;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal !important;
}
/* Tooltip expansion on hover (desktop) */
@media (hover:hover){
  .akm-stories-section .akm-following-auto .akm-story-bubble:hover .akm-story-name{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:-40px;
    background:#fff; padding:4px 8px; border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    z-index:5; max-width:200px; -webkit-line-clamp:unset;
  }
}

/* Overlay refined UI */
.akm-story-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:9999; }
.akm-story-card{ position:relative; width:min(92vw, 520px); height:min(88vh, 820px); background:#000; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.akm-story-media{ position:absolute; inset:52px 0 56px 0; display:flex; align-items:center; justify-content:center; }
.akm-story-media img{ max-width:100%; max-height:100%; display:block; }

.akm-story-topbar{ position:absolute; top:0; left:0; right:0; height:52px; display:flex; align-items:center; gap:10px; padding:8px 12px; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.akm-story-close{ margin-left:auto; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.08); color:#fff; font-size:22px; line-height:32px; }
.akm-story-close:hover{ background:rgba(255,255,255,.18); }

.akm-story-vendor{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.akm-story-avatar{ width:28px; height:28px; border-radius:50%; display:block; }
.akm-story-vendor-name{ color:#fff; font-weight:700; font-size:13px; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.akm-story-visit{ margin-left:8px; color:#fff; font-size:12px; opacity:.9; text-decoration:underline; }

.akm-story-progress{ position:absolute; top:48px; left:0; right:0; height:3px; background:rgba(255,255,255,.2); }
.akm-story-progress > div{ height:100%; width:0%; background:#fff; }

.akm-story-bottombar{ position:absolute; left:0; right:0; bottom:0; height:56px; display:flex; align-items:center; justify-content:flex-end; padding:8px 12px; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.akm-story-button{ border:1px solid rgba(255,255,255,.35); color:#fff; background:transparent; padding:6px 10px; border-radius:10px; cursor:pointer; }
.akm-story-button:hover{ background:rgba(255,255,255,.08); }