/* Followers & Notifications UI */
.akm-fn-notify{ position:fixed; left:16px; right:auto; bottom:96px; z-index:9999; font-family:inherit; }
.akm-fn-bell{ background:#000!important; border:1px solid #eee; border-radius:999px; padding:10px 14px; display:flex; align-items:center; gap:8px; box-shadow:0 6px 18px rgba(0,0,0,.08); cursor:pointer; }
.akm-fn-badge{ background:#e11d48; color:#fff; padding:2px 6px; border-radius:999px; font-size:12px; font-weight:600; }
.akm-fn-panel{ position:absolute; left:0; right:auto; bottom:56px; width:320px; max-height:60vh; overflow:auto; background:#fff; border:1px solid #eee; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.12); }
.akm-fn-head{ padding:12px 14px; font-weight:700; border-bottom:1px solid #f1f1f1; }
.akm-fn-list{ padding:8px; }
.akm-fn-item{ padding:10px 8px; border-radius:10px; border:1px solid #f3f4f6; margin-bottom:8px; }
.akm-fn-item.is-read{ opacity:.7; }
.akm-fn-title{ font-weight:700; margin-bottom:4px; }
.akm-fn-body{ font-size:13px; color:#374151; margin-bottom:4px; }
.akm-fn-time{ font-size:12px; color:#6b7280; }
.akm-fn-actions{ padding:8px; border-top:1px solid #f1f1f1; }

.akm-fn-listgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:12px; }
.akm-fn-card{ display:flex; align-items:center; gap:12px; padding:10px; border:1px solid #eee; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.akm-fn-card img{ width:44px; height:44px; border-radius:999px; object-fit:cover; }
.akm-fn-meta{ flex:1; }
.akm-fn-name{ font-weight:700; }
.akm-fn-time{ font-size:12px; color:#6b7280; }
.akm-fn-actions{ display:flex; gap:8px; }
.akm-fn-btn{ padding:6px 10px; border-radius:10px; border:1px solid #ddd; background:#f8fafc; cursor:pointer; }
.akm-mail-card{ border:1px solid #eee; border-radius:12px; background:#fff; padding:10px; margin-bottom:10px; box-shadow:0 8px 24px rgba(0,0,0,.06); cursor:pointer; }
.akm-mail-card.is-read{ opacity:.8; }
.akm-mail-subj{ font-weight:700; }
.akm-mail-time{ font-size:12px; color:#6b7280; margin-bottom:4px; }
.akm-mail-body{ font-size:14px; color:#111827; }

.akm-fn-follow.is-following{ background:#111827; color:#fff; }

@media (max-width:640px){
  .akm-fn-notify{ right:12px; bottom:84px; }
  .akm-fn-panel{ width:92vw; right:-12px; }
}


/* Stories */
.akm-story-uploader{ padding:12px; border:1px solid #eee; border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.akm-story-preview{ width:200px; height:200px; border-radius:16px; overflow:hidden; background:#f6f7f9; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.akm-story-preview img{ max-width:100%; max-height:100%; display:block; }
.akm-story-actions{ display:flex; gap:8px; margin-bottom:10px; }
.akm-story-mine{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
.akm-story-card{ border:1px solid #eee; border-radius:12px; padding:8px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.03); display:flex; flex-direction:column; gap:8px; }
.akm-story-card img{ width:100%; height:160px; object-fit:cover; border-radius:8px; }

.akm-stories{ padding:12px 0; margin:10px 0; }
.akm-stories-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.akm-story-bubble{ width:80px; height:80px; border-radius:50%; overflow:hidden; border:2px solid #10b981; flex:0 0 auto; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.akm-story-bubble img{ width:100%; height:100%; object-fit:cover; display:block; }


/* White/Blue buttons */
.akm-fn-btn{ background:#fff; color:#1d4ed8; border:1px solid #1d4ed8; border-radius:12px; padding:8px 12px; font-weight:600; cursor:pointer; }
.akm-fn-btn.primary{ background:#1d4ed8; color:#fff; }
.akm-fn-btn:is(:hover,:focus){ opacity:.92; }
/* Follow area */
.akm-follow-area{ position:relative; z-index:10; }
.akm-follow-wrap{ display:inline-flex; align-items:center; gap:10px; }
.akm-follow-counts{ font-weight:600; color:#111827; }
/* Fallback fixed position */
#akm-follow-area:not(:has(.akm-follow-wrap)){ position:fixed; top:90px; right:16px; background:transparent; }

/* Stories bubble smaller + clickable */
.akm-story-bubble{ width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid #1d4ed8; flex:0 0 auto; box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer; }

/* Lightbox */
.akm-story-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:99999; }
.akm-story-lightbox-inner{ max-width:92vw; max-height:92vh; }
.akm-story-lightbox-inner img{ max-width:100%; max-height:100%; display:block; border-radius:12px; }

/* FB-like Stories bar */
.akm-stories-bar{ display:flex; gap:12px; padding:12px 16px; overflow-x:auto; background:#fff; border-bottom:1px solid #f3f4f6; }
.akm-story-vendor{ width:80px; flex:0 0 auto; text-align:center; cursor:pointer; }
.akm-story-avatar{ width:64px; height:64px; border-radius:50%; border:2px solid #1d4ed8; overflow:hidden; margin:0 auto 6px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.akm-story-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.akm-story-name{ font-size:12px; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.akm-story-meta-top{ position:absolute; top:14px; left:14px; right:auto; color:#fff; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.akm-story-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:100000; }
.akm-story-lightbox-inner{ position:relative; max-width:92vw; max-height:92vh; }
.akm-story-lightbox-inner img{ max-width:100%; max-height:100%; border-radius:12px; display:block; }

/* Store page stories wrapper inside hero */
.akm-stories{ margin-top:8px; }
.akms-hero-inner .akm-stories-strip{ padding-top:4px; }


/* v1.6.2 forced tabs visibility */
.akm-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.akm-tab{padding:8px 12px;border-radius:10px;border:1px solid #ffffff22;background:#ffffff10;cursor:pointer}
.akm-tab.active{background:#1b5e20;color:#fff;border-color:#1b5e20}
.akm-panel{display:none}
.akm-panel.active{display:block}



/* v1.6.6 — UI polish */
.akm-fn-btn{padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:filter .15s ease, transform .05s ease}
.akm-fn-btn:active{transform:scale(0.98)}
.akm-fn-btn.primary{background:#2e7d32;border-color:#2e7d32;color:#fff}
.akm-fn-btn.danger{background:#b71c1c;border-color:#b71c1c;color:#fff}
.akm-fn-btn:hover{filter:brightness(1.06)}

/* Store name: 2-line clamp in RTL */
.akm-fn-meta{flex:1;min-width:0}
.akm-fn-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.3;direction:rtl;unicode-bidi:plaintext}
.akm-fn-name a{display:inline;white-space:inherit;text-decoration:none;color:inherit}



/* v1.6.7 — Fix vertical time + stable card layout (RTL-safe) */
.akm-fn-card{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px}
.akm-fn-card img{grid-column:1; width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid #00000022}
.akm-fn-meta{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.akm-fn-actions{grid-column:3;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.akm-fn-time{white-space:nowrap;direction:ltr;unicode-bidi:isolate;opacity:.75;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.akm-fn-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.3;direction:rtl;unicode-bidi:plaintext;max-width:100%}
.akm-fn-name a{display:inline;white-space:inherit;text-decoration:none;color:inherit}



/* === AKM Ultra Enhancements (v1.6.7+custom) === */
.akm-story-bubble { position: relative; }
.akm-story-badge {
  position: absolute; top: 6px; right: 6px; padding: 2px 6px;
  font-size: 11px; line-height: 1.2; border-radius: 10px;
  background: rgba(0,0,0,.65); color: #fff; backdrop-filter: saturate(140%) blur(2px);
}
.akm-story-vendor { position: relative; }
.akm-story-avatar { position: relative; }
.akm-story-avatar .akm-story-count{
  position:absolute; bottom:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  font-size: 11px; border-radius: 9px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.akm-story-lightbox .akm-story-time{
  position:absolute; top:10px; right:10px; font-size:13px; padding:4px 8px; background:rgba(0,0,0,.6); color:#fff; border-radius:8px;
}

/* Single-line store name (ellipsis) */
.akm-store-header .store-title,
.akms-title-wrap .akms-title,
.akm-store-hero .akm-store-title,
.akms-name,
.akm-store-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block;
}


/* === Compact follower cards (RTL) === */
.akm-fn-card.akm-fn-compact{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border-radius:16px;
  background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.06);
  direction: rtl;
}
.akm-fn-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.akm-fn-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 56px; }
.akm-fn-meta{ min-width:0; }
.akm-fn-name a{ display:block; font-weight:700; text-decoration:none; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 240px; }
@media (max-width: 480px){ .akm-fn-name a{ max-width: 160px; } }
.akm-fn-sub{ font-size:12px; color:#6b7280; margin-top:2px; }
.akm-fn-actions{ display:flex; gap:8px; }

.akm-icon-btn{
  width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; cursor:pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.akm-icon-btn:hover{ box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.akm-icon-btn:active{ transform: translateY(1px); }
.akm-icon-btn svg{ width:18px; height:18px; fill: currentColor; }

.akm-follow-icon.is-following{ border-color:#ef4444; color:#ef4444; }


/* === UI Fix: enforce icon size/visibility & layout === */
.akm-fn-card.akm-fn-compact{ direction: rtl; }
.akm-fn-card.akm-fn-compact .akm-fn-main{ flex:1; } /* give name more room */
.akm-fn-card.akm-fn-compact .akm-fn-actions{ flex:0 0 auto; }

.akm-fn-card.akm-fn-compact .akm-icon-btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:38px !important; height:38px !important;
  padding:0 !important; line-height:1 !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important; color:#0f172a !important;
  overflow:hidden; box-shadow:none; text-indent:0;
}
.akm-fn-card.akm-fn-compact .akm-icon-btn svg{ display:block; width:18px; height:18px; }
.akm-fn-card.akm-fn-compact .akm-icon-btn svg *{ fill: currentColor !important; stroke: none !important; }
.akm-fn-card.akm-fn-compact .akm-icon-btn:hover{ box-shadow:0 2px 6px rgba(0,0,0,.08); }
.akm-fn-card.akm-fn-compact .akm-follow-icon.is-following{ border-color:#ef4444 !important; color:#ef4444 !important; }

/* Name width on small screens */
@media (max-width: 480px){
  .akm-fn-card.akm-fn-compact .akm-fn-name a{ max-width: 72vw; }
}


/* Story bubble ring frame */
.akm-story-bubble.akm-ring{ position:relative; padding:3px; border-radius:999px; background: conic-gradient(#f59e0b, #ef4444, #8b5cf6, #3b82f6, #10b981, #f59e0b); }
.akm-story-bubble.akm-ring img{ width:72px; height:72px; border-radius:999px; background:#fff; display:block; }
.akm-story-bubble .akm-story-badge{
  position:absolute; top:6px; right:6px; padding:2px 6px;
  font-weight:600; font-variant-numeric: tabular-nums;
  font-size:12px; line-height:1.2; border-radius:10px;
  background:rgba(0,0,0,.65); color:#fff;
}

/* Lightbox viewer */
.akm-story-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.akm-story-card{
  width:min(92vw, 420px); background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative;
  border:1px solid #e5e7eb;
}
.akm-story-progress{ height:3px; background:#f1f5f9; }
.akm-story-progress > div{ height:3px; width:0%; background:#0ea5e9; transition:none; }

.akm-story-media img{ display:block; width:100%; height:auto; max-height:65vh; object-fit:contain; background:#000; }
.akm-story-caption{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:10px; }
.akm-story-vendor{ font-weight:700; color:#0f172a; font-size:14px; }
.akm-story-ttl{ font-variant-numeric: tabular-nums; font-size:12px; color:#475569; }


/* Friends stories card */
.akm-stories-section{
  direction: rtl;
  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-head h3{
  margin:0; font-size:16px; font-weight:800; color:#0f172a;
}

/* Fallback text */
.akm-following-stories-fallback{ opacity:.8; font-size:13px; margin-top:6px; display:block; }

/* Bubble ring (kept) */
.akm-story-bubble.akm-ring{ position:relative; padding:3px; border-radius:999px; background: conic-gradient(#f59e0b, #ef4444, #8b5cf6, #3b82f6, #10b981, #f59e0b); }
.akm-story-bubble.akm-ring img{ width:72px; height:72px; border-radius:999px; background:#fff; display:block; }
.akm-story-bubble .akm-story-badge{
  position:absolute; top:6px; right:6px; padding:2px 6px;
  font-weight:600; font-variant-numeric: tabular-nums;
  font-size:12px; line-height:1.2; border-radius:10px;
  background:rgba(0,0,0,.65); color:#fff;
}

/* Lightbox viewer (kept + enhancements) */
.akm-story-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.akm-story-card{
  width:min(92vw, 420px); background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative;
  border:1px solid #e5e7eb;
}
.akm-story-progress{ height:3px; background:#f1f5f9; }
.akm-story-progress > div{ height:3px; width:0%; background:#0ea5e9; transition:none; }


.akm-story-media img{ display:block; width:100%; height:auto; max-height:65vh; object-fit:contain; background:#000; }
.akm-story-caption{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:10px; }
.akm-story-vendor{ font-weight:800; color:#0f172a; font-size:14px; text-decoration:none; }
.akm-story-vendor:hover{ text-decoration:underline; }
.akm-story-ttl{ font-variant-numeric: tabular-nums; font-size:12px; color:#475569; }

.akm-story-actions{ display:flex; justify-content:flex-end; padding:0 12px 12px; }
.akm-story-skip{
  background:#ef4444; color:#fff; border:none; border-radius:10px; padding:8px 12px;
  font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.akm-story-skip:hover{ filter: brightness(0.95); }

.akm-story-close{
  position:absolute; top:8px; left:8px; width:36px; height:36px; border-radius:999px;
  background:#ef4444; color:#fff; border:1px solid #dc2626; cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.akm-story-close:hover{ filter: brightness(0.95); }


/* Time label with clock icon (red) */
.akm-story-ttl{
  display:flex; align-items:center; gap:6px;
  color:#ef4444; font-variant-numeric: tabular-nums;
}
.akm-ttl-icon{ width:16px; height:16px; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.75a10.25 10.25 0 1 0 0 20.5 10.25 10.25 0 0 0 0-20.5Zm0 1.5a8.75 8.75 0 1 1 0 17.5 8.75 8.75 0 0 1 0-17.5Zm-.75 3.5h1.5v5.19l4.12 2.38-.75 1.3-4.87-2.81V6.75Z"/></svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.75a10.25 10.25 0 1 0 0 20.5 10.25 10.25 0 0 0 0-20.5Zm0 1.5a8.75 8.75 0 1 1 0 17.5 8.75 8.75 0 0 1 0-17.5Zm-.75 3.5h1.5v5.19l4.12 2.38-.75 1.3-4.87-2.81V6.75Z"/></svg>') no-repeat center/contain;
}

/* Vendor link with avatar */
.akm-story-vendor{ display:flex; align-items:center; gap:8px; text-decoration:none; color:#0f172a; }
.akm-story-vendor:hover{ text-decoration:underline; }
.akm-story-avatar{ width:28px; height:28px; border-radius:999px; object-fit:cover; border:1px solid #e5e7eb; }


/* Vendor avatar red ring indicator */
.akms-avatar.akm-has-story img,
.store-avatar.akm-has-story img,
.dokan-avatar.akm-has-story img{
  box-shadow: 0 0 0 3px #ef4444, 0 0 0 6px rgba(239,68,68,.25);
  border-radius: 12px;
}

/* Popover for avatar actions */
.akm-avatar-pop{
  position:absolute; display:none; z-index:99999; direction:rtl;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); padding:6px;
}
.akm-avatar-pop button{
  width:100%; display:block; text-align:right; border:none; background:transparent;
  padding:8px 10px; cursor:pointer; border-radius:8px; font-weight:700; color:#0f172a;
}
.akm-avatar-pop button:hover{ background:#f8fafc; }
.akm-avatar-pop button[data-act="story"]{ color:#0ea5e9; }
.akm-avatar-pop button[data-act="image"]{ color:#475569; }


/* === AKM Ultra FN: Draggable Notification FAB === */
#akmNotifyFab{
  position:fixed; bottom:18px; right:18px; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:#111; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25);
  cursor:grab; user-select:none; transition:transform .15s ease, box-shadow .2s ease;
}
#akmNotifyFab.akm-dragging{ cursor:grabbing; transform:scale(.96); box-shadow:0 6px 16px rgba(0,0,0,.2); }
#akmNotifyFab .akm-badge{ position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; border-radius:11px;
  background:#e02424; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 6px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
#akmNotifyPanel{
  position:fixed; right:18px; bottom:84px; width:320px; max-height:60vh; overflow:auto; background:#fff; color:#111;
  border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.22); z-index:99998; display:none;
}
#akmNotifyPanel.akm-open{ display:block; }
#akmNotifyPanel header{ padding:10px 12px; font-weight:700; border-bottom:1px solid #eee; display:flex; align-items:center; gap:8px; }
#akmNotifyPanel .akm-list{ list-style:none; margin:0; padding:0; }
#akmNotifyPanel .akm-item{ padding:10px 12px; border-bottom:1px solid #f2f2f2; }
#akmNotifyPanel .akm-item.unread{ background:#f9fbff; font-weight:600; }
#akmNotifyPanel .akm-actions{ padding:8px 12px; display:flex; justify-content:space-between; gap:8px; border-top:1px solid #eee; }

/* === AKM Ultra FN: Stories skeleton (FAST shortcode) === */
.akm-stories-fast{ display:flex; gap:10px; align-items:center; overflow:auto; padding:8px; }
.akm-story-skel{ width:64px; height:64px; border-radius:50%; position:relative; overflow:hidden; background:#eee; }
.akm-story-skel::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-100%); animation:akmShimmer 1.2s infinite; }
@keyframes akmShimmer{ 100% { transform:translateX(100%); } }
.akm-story{ width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid #1a73e8; }
.akm-story img{ width:100%; height:100%; object-fit:cover; display:block; }



/* === AKM Ultra FN: generic draggable hook (for existing bell) === */
.akm-draggable{ cursor:grab; user-select:none; z-index:99999; }
.akm-draggable.akm-dragging{ cursor:grabbing; }