/* ظرف کارت‌ها؛ جای واقعی‌اش را JS کنار منوی راست می‌چیند */
#fab-left{
  position:fixed; left:24px; bottom:16px; z-index:1200;
  pointer-events:none; direction:rtl;
}

/* آیتم‌ها: ردیفی (کنار هم) + انیمیشن اسلاید از چپ منو */
#fab-left .fab-left-items{
  display:flex; flex-direction:row; gap:10px; align-items:flex-end;
  transform:translateX(16px); opacity:0; /* ← فقط همین جهت اسلاید برعکس شد */
  transition:transform .18s ease, opacity .18s ease;
}
#fab-left.open .fab-left-items{ transform:translateX(0); opacity:1; }

/* کارت‌ها یک اندازه ثابت */
.fab-left-card{
  pointer-events:auto; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12); color:#111;
  font-size:14px; line-height:1.2;
  flex:0 0 180px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fab-left-card .icon{ font-size:18px }
.fab-left-card:hover{ border-color:rgba(0,0,0,.12); transform:translateY(-1px) }
.fab-left-card:active{ transform:translateY(0) }

/* موبایل: همچنان کنار هم ولی کوچیک‌تر، فاصله از لبه‌ها بیشتر */
@media (max-width:520px){
  #fab-left{ left:20px; bottom:calc(14px + env(safe-area-inset-bottom)) }
  #fab-left .fab-left-items{ gap:8px }
  .fab-left-card{
    flex-basis:100px; max-width:100px;
    padding:8px 10px; border-radius:12px; font-size:13px;
  }
  .fab-left-card .icon{ font-size:16px }
}
/* اطمینان از اینکه هیچ‌وقت به لبه‌ها نچسبد */
@supports (inset: auto){
  #fab-left{ inset:auto auto calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
}