/* ============================================================
   arHSEman AI Loading — نسخه‌ی جمع‌وجور (درون‌کارتی)
   طراحی، رنگ‌ها و انیمیشن‌ها دقیقاً همان arhseman_loading.html
   است؛ فقط اندازه‌ی نمایش کوچک‌تر شده تا مثل لودینگ قبلیِ هر
   ماژول، فقط همان کارت/باکس را پر کند نه کل صفحه را.
   ============================================================ */
:root{
  --ahl-blue-deep:#0f2f6b;
  --ahl-blue-mid:#1a56d6;
  --ahl-blue-light:#8fb3ff;
  --ahl-green-deep:#1c8a3c;
  --ahl-green-mid:#3ac95a;
  --ahl-green-light:#b9ecc4;
  --ahl-text-light:#9aa7bd;
}

/* دیگر position:fixed نیست — مثل لودینگ قبلی، فقط داخل همان
   کارت/باکسی که در آن قرار می‌گیرد نمایش داده می‌شود. */
.ahl-overlay{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  font-family:"Vazirmatn","Tahoma","Segoe UI",sans-serif;
}
.ahl-overlay.hidden{ display:none !important; }

.ahl-screen{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

/* ---------- ring (سایز جمع‌وجور) ---------- */
.ahl-ring-wrap{
  position:relative;
  width:110px;
  height:110px;
}
.ahl-ring-svg{
  width:100%;
  height:100%;
  animation: ahl-spin 3.2s linear infinite;
  transform-origin:50% 50%;
  filter: drop-shadow(0 0 6px rgba(26,86,214,0.15));
}
@keyframes ahl-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.ahl-glow-dot{
  filter: drop-shadow(0 0 6px rgba(120,170,255,0.9)) drop-shadow(0 0 14px rgba(120,170,255,0.6));
}

/* ---------- inner white circle + logo ---------- */
.ahl-inner-circle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  border-radius:50%;
  background:#ffffff;
  box-shadow: 0 6px 20px rgba(20,50,110,0.10), 0 2px 6px rgba(20,50,110,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  animation: ahl-pulse 3.2s ease-in-out infinite;
  overflow:hidden;
}
@keyframes ahl-pulse{
  0%,100%{ box-shadow: 0 6px 20px rgba(20,50,110,0.10), 0 2px 6px rgba(20,50,110,0.06);}
  50%{ box-shadow: 0 8px 28px rgba(20,86,214,0.18), 0 3px 10px rgba(20,86,214,0.10);}
}

.ahl-logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- text block ---------- */
.ahl-status-title{
  font-size:14px;
  font-weight:700;
  color:var(--ahl-blue-deep);
  text-align:center;
}
.ahl-status-sub{
  font-size:12px;
  color:var(--ahl-text-light);
  text-align:center;
  margin-top:4px;
}

/* ---------- bouncing dots ---------- */
.ahl-dots{
  display:flex;
  gap:8px;
  margin-top:2px;
}
.ahl-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  animation: ahl-bounce 1.2s ease-in-out infinite;
}
.ahl-dot:nth-child(1){ background:var(--ahl-blue-mid); animation-delay:0s; }
.ahl-dot:nth-child(2){ background:var(--ahl-green-mid); animation-delay:0.18s; }
.ahl-dot:nth-child(3){ background:var(--ahl-blue-light); animation-delay:0.36s; }
@keyframes ahl-bounce{
  0%,60%,100%{ transform:translateY(0); opacity:0.55; }
  30%{ transform:translateY(-6px); opacity:1; }
}

/* حالت فشرده‌تر برای جاهایی که فضای خیلی کمی دارند (چت، باکس‌های ریز) */
.ahl-overlay.ahl-compact .ahl-ring-wrap{ width:74px; height:74px; }
.ahl-overlay.ahl-compact .ahl-inner-circle{ width:52px; height:52px; }
.ahl-overlay.ahl-compact .ahl-status-title{ font-size:12.5px; }
.ahl-overlay.ahl-compact .ahl-status-sub{ font-size:10.5px; }
.ahl-overlay.ahl-compact{ padding:10px 8px; }
.ahl-overlay.ahl-compact .ahl-screen{ gap:8px; }

/* حالت خیلی ریز و افقی برای متن‌های تک‌خطی جایگزین‌شده (مثل «در حال بارگذاری...») */
.ahl-overlay.ahl-micro{ padding:6px 4px; justify-content:flex-start; }
.ahl-overlay.ahl-micro .ahl-screen{ flex-direction:row; gap:8px; justify-content:flex-start; }
.ahl-overlay.ahl-micro .ahl-ring-wrap{ width:22px; height:22px; flex:none; }
.ahl-overlay.ahl-micro .ahl-inner-circle{ width:15px; height:15px; box-shadow:none; }
.ahl-overlay.ahl-micro .ahl-status-title{ font-size:12.5px; text-align:start; }
.ahl-overlay.ahl-micro .ahl-status-sub{ display:none; }
.ahl-overlay.ahl-micro .ahl-dots{ display:none; }

@media (max-width:480px){
  .ahl-ring-wrap{ width:90px; height:90px; }
  .ahl-inner-circle{ width:64px; height:64px; }
  .ahl-status-title{ font-size:13px; }
  .ahl-status-sub{ font-size:11px; }
}

/* ---------- نسخه‌ی افقیِ کوچک (برای متن‌های لودینگ درون‌خطی مثل لیست‌ها) ---------- */
.ahl-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:"Vazirmatn","Tahoma","Segoe UI",sans-serif;
}
.ahl-inline-ring{
  width:15px;
  height:15px;
  border-radius:50%;
  border:2.5px solid rgba(26,86,214,0.15);
  border-top-color:var(--ahl-blue-mid);
  animation: ahl-spin 0.8s linear infinite;
  flex-shrink:0;
}
.ahl-inline-text{
  font-size:12px;
  color:var(--ahl-text-light);
}

/* ---------- رینگ بسیار کوچک برای داخل دکمه‌ها/نشانگرهای کوچک ---------- */
.ahl-micro{
  display:inline-block;
  width:13px;
  height:13px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  opacity:0.9;
  animation:ahl-spin 0.8s linear infinite;
  vertical-align:-2px;
}