/* =========================
   kb-viewer / assets/module.css
   Scoped root: .ms-kb
   ========================= */

/* رنگ‌ها و متغیرها */
.ms-kb{
  --kb-gap: 24px;
  --kb-radius: 16px;
  --kb-surface: #ffffff;
  --kb-soft: #f5f7ff;
  --kb-text: #0f1230;
  --kb-muted: #6b7190;
  --kb-brand: #5b6cff;
  --kb-brand-2: #7a86ff;
  --kb-accent: #ff6a95;
  --kb-shadow: 0 10px 24px rgba(15,18,48,.08);
  --kb-sticky-offset: 88px; /* از render یا JS ست می‌شود */
  font-family: IRANSans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ms-kb__container{max-width:1200px;margin:0 auto;padding:20px}

/* ===== KPI bar ===== */
.ms-kb__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.ms-kb__kpi{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#eef1ff,#fff);border:1px solid #e6e9fb;border-radius:16px;padding:12px 14px;box-shadow:0 10px 22px rgba(15,18,48,.06)}
.ms-kb__kpi-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--kb-brand),var(--kb-brand-2));box-shadow:0 10px 22px rgba(91,108,255,.25)}
.ms-kb__kpi-val{font-size:18px;font-weight:900;color:var(--kb-text)}
.ms-kb__kpi-label{font-size:12px;color:var(--kb-muted)}
@media (max-width:720px){.ms-kb__kpis{grid-template-columns:1fr 1fr}}

/* ===== Title & Search ===== */
.ms-kb__head{margin:10px 0 8px}
.ms-kb__title{font-size:30px;margin:0;color:var(--kb-text);font-weight:800}
.ms-kb__searchbar{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e9ecf7;border-radius:14px;padding:12px;box-shadow:0 8px 22px rgba(15,18,48,.05);margin:12px 0 20px}
.ms-kb__search-input{flex:1 1 auto;padding:12px 14px;border:1px solid #e8eaf4;border-radius:12px;background:#fff}
.ms-kb__search-btn,.ms-kb__reset-btn{padding:10px 14px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--kb-brand),var(--kb-brand-2));color:#fff;cursor:pointer;font-weight:700;box-shadow:0 8px 18px rgba(91,108,255,.22)}
.ms-kb__reset-btn[hidden]{display:none!important}

/* ===== Layout: فهرست راست، محتوا چپ ===== */
.ms-kb__layout{display:grid;gap:var(--kb-gap);grid-template-columns:320px 1fr;grid-template-areas:"aside content"}
.ms-kb__aside{grid-area:aside;position:sticky;top:var(--kb-sticky-offset);height:fit-content}
.ms-kb__content{grid-area:content}
.ms-kb:not(.ms-kb--swap) .ms-kb__layout{grid-template-columns:1fr 320px;grid-template-areas:"content aside"}
@media (max-width:992px){.ms-kb__layout{grid-template-columns:1fr;grid-template-areas:"content" "aside"}}

/* ===== محتوا ===== */
.ms-kb__category{background:var(--kb-surface);border-radius:var(--kb-radius);box-shadow:var(--kb-shadow);padding:18px;margin-bottom:var(--kb-gap)}
.ms-kb__cat-title{font-size:22px;margin:0 0 12px;font-weight:800;color:var(--kb-text)}
.ms-kb__articles{display:grid;gap:14px}

/* کارت مقاله با هدر داخلی */
.ms-kb__article{
  background:var(--kb-soft); border-radius:16px; border:1px solid #edf0fb;
  box-shadow:0 6px 14px rgba(15,18,48,.05);
  overflow:hidden;
  scroll-margin-top: calc(var(--kb-sticky-offset) + 24px);
}
.ms-kb__article-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(135deg,#f8f9ff,#eef1ff);
  border-bottom:1px solid #e8ecff;
}
.ms-kb__article-title{margin:0;font-size:18px;font-weight:900;color:var(--kb-text)}
.ms-kb__article-date{font-size:12px;color:var(--kb-muted);margin-inline-start:8px}
.ms-kb__article-actions{display:flex;gap:8px;align-items:center}

/* دکمه‌های رنگی و گرد */
.ms-kb__btn{
  --bg: #5b6cff; --bg2:#7a86ff;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:12px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--bg),var(--bg2));
  box-shadow:0 10px 18px rgba(91,108,255,.22);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.ms-kb__btn:hover{transform:translateY(-2px);box-shadow:0 14px 24px rgba(91,108,255,.28);filter:saturate(1.05)}
.ms-kb__btn i{font-size:14px}

/* تم‌های رنگی برای هر اکشن */
.ms-kb__btn--play  {--bg:#5b6cff;--bg2:#ff6a95}
.ms-kb__btn--print {--bg:#00b894;--bg2:#55efc4}
.ms-kb__btn--link  {--bg:#fa8231;--bg2:#fd9644}
.ms-kb__btn--toggle{--bg:#a55eea;--bg2:#8854d0}
.ms-kb__btn--share {--bg:#0984e3;--bg2:#74b9ff}

.ms-kb__article-body{padding:14px 16px;color:var(--kb-text);line-height:1.9;font-size:15px}

/* ===== Sidebar / TOC ===== */
.ms-kb__toc{background:var(--kb-surface);border-radius:var(--kb-radius);box-shadow:var(--kb-shadow);padding:12px}
.ms-kb__toc-section{border:1px solid #eef1fb;border-radius:12px;margin-bottom:10px;overflow:hidden}
.ms-kb__toc-cat{cursor:pointer;list-style:none;padding:12px 14px;background:#f5f7ff;font-weight:900;color:var(--kb-text)}
.ms-kb__toc-list{margin:0;padding:10px 10px 14px;list-style:none;display:grid;gap:8px}
.ms-kb__toc-link{display:block;padding:10px 12px;border:1px solid #eef1fb;border-radius:10px;background:#fff;color:var(--kb-text);text-decoration:none;transition:transform .12s ease, box-shadow .15s ease, background .15s}
.ms-kb__toc-link:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,18,48,.06)}
.ms-kb__toc-link.is-active{background:#eef1ff;border-color:#dfe4ff;box-shadow:0 10px 22px rgba(91,108,255,.12)}

/* ===== Modal Video ===== */
.ms-kb__modal[hidden]{display:none!important}
.ms-kb__modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center}
.ms-kb__modal-backdrop{position:absolute;inset:0;background:rgba(5,8,32,.55);backdrop-filter:blur(6px)}
.ms-kb__modal-dialog{position:relative;width:min(1000px,92vw);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:kbPop .18s ease-out}
@keyframes kbPop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.ms-kb__modal-close{position:absolute;top:-46px;inset-inline-end:0;background:#fff;border:0;border-radius:12px;padding:8px 12px;cursor:pointer;font-weight:800}
.ms-kb__modal-media,.ms-kb__modal-media iframe,.ms-kb__modal-media video{width:100%;height:100%;border:0;display:block}

/* Helpers */
.ms-kb__alert{background:#fff3f3;border:1px solid #ffdede;color:#8b0000;border-radius:12px;padding:10px 12px;margin:8px 0}
.ms-kb__article.is-highlight{outline:2px solid #cfd6ff;box-shadow:0 0 0 6px #eef1ff;border-color:#cfd6ff}

/* Dark */
@media (prefers-color-scheme: dark){
  .ms-kb{--kb-surface:#0f1220;--kb-soft:#151935;--kb-text:#e6e8f5;--kb-muted:#9aa1c7}
  .ms-kb__toc,.ms-kb__category{box-shadow:none;border:1px solid rgba(255,255,255,.06)}
  .ms-kb__kpi{background:linear-gradient(135deg,#101637,#0f1220);border-color:#1a1f3d}
  .ms-kb__toc-link{background:#0f1220;border-color:#1a1f3d}
  .ms-kb__toc-link.is-active{background:#151c3b;border-color:#2a3270}
}
/* Toast: پیام کوتاه پایین صفحه */
.ms-kb__toast {
  position: fixed;
  inset-inline-start: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #2b2e4a, #3f448a);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  font-size: 14px;
  z-index: 100000;          /* روی همه */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-kb__toast i { font-size: 14px; }
.ms-kb__toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* === Play button: ثابت، هاله پالس، رینگ چرخان === */
.ms-kb__btn--play{
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* دکمه play هنگام hover دیگر بالا/پایین نپرد */
.ms-kb__btn--play:hover{ transform: none !important; }

/* هالهٔ پالس (خارج دکمه) */
.ms-kb__btn--play::after,
.ms-kb__btn--play::before{
  content:"";
  position:absolute;
  inset:-4px;                    /* کمی بزرگ‌تر از خود دکمه 36px */
  border-radius:14px;
  z-index:-1;
  pointer-events:none;
}
.ms-kb__btn--play::after{
  background: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: kb-play-pulse 1.9s ease-out infinite;
  opacity:.65;
}
.ms-kb__btn--play::before{
  background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0));
  animation: kb-play-pulse 2.3s ease-out infinite .35s;
  opacity:.35;
}

/* خود آیکن: دیسک سفید ثابت در مرکز */
.ms-kb__btn--play i{
  display:grid; place-items:center;
  width:22px; height:22px;
  border-radius:50%;
  background:##8458b5;              /* دیسک سفید */
  color: #ffffff;       /* مثلث همرنگ برند */
  font-size:12px;               /* اندازه مثلث */
  line-height:1;
  position: relative;
  z-index:1;                    /* بالاتر از هاله */
  transform: none !important;   /* کاملاً ثابت بماند */
}

/* رینگ چرخان دور آیکن (حول مرکز) */
.ms-kb__btn--play i::after{
  content:"";
  position:absolute;
  inset:-5px;                   /* شعاع رینگ */
  border-radius:50%;
  border:2px solid rgba(255,255,255,.65);   /* رینگ روشن */
  border-top-color: rgba(255,255,255,0);    /* گپ برای حس چرخش */
  border-right-color: rgba(255,255,255,.35);
  border-left-color: rgba(255,255,255,.35);
  animation: kb-spin 1.6s linear infinite;  /* چرخش پیوسته */
  pointer-events:none;
}

/* keyframes */
@keyframes kb-play-pulse{
  0%   { transform: scale(1);   opacity:.65; filter: blur(0); }
  60%  { transform: scale(1.8); opacity:.12; filter: blur(2px); }
  100% { transform: scale(2.1); opacity:0;   filter: blur(3px); }
}
@keyframes kb-spin{
  to { transform: rotate(360deg); }
}

/* احترام به کاهش حرکت */
@media (prefers-reduced-motion: reduce){
  .ms-kb__btn--play::before,
  .ms-kb__btn--play::after,
  .ms-kb__btn--play i::after { animation: none !important; }
}