/* ==========================================================================
   mobile-shell.css — إصلاح هيكل الجوّال + قائمة الحساب (دفعة التصحيح البصري)
   --------------------------------------------------------------------------
   يُحمَّل بعد design-system وchat فتعلو قواعده. يعالج جذرياً ما كشفته لقطة
   الجوّال: (١) الملحّن مبتور — لأن 100vh يتجاوز منفذ العرض المرئي مع أشرطة
   المتصفح الديناميكية ⇒ dvh. (٢) ازدواج تنقّل — الشريط الجانبي rail يزاحم
   الشريط السفلي ⇒ على ≤768px يختفي الـrail كلياً والسفلي هو التنقّل الوحيد.
   (٣) المحتوى خلف الشريط السفلي ⇒ المساحة الرئيسية تُقتطع بارتفاعه فيستقر
   الملحّن مرئياً فوقه وفوق لوحة المفاتيح.
   وفيه أنماط لوحة الحساب (منبثقة سطح المكتب + ورقة الجوّال) — بادئة acct-*.
   ========================================================================== */

/* ارتفاع منفذ العرض الديناميكي — على كل المقاسات (يصلح سطح المكتب أيضاً) */
.app-shell{height:100vh;height:100dvh}
.auth-shell{min-height:100vh;min-height:100dvh}

/* ── لوحة الحساب: مشتركة بين المنبثقة والورقة ────────────────────────────── */
.acct-panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:236px}
.acct-id{display:flex;align-items:center;gap:var(--sp-3)}
.acct-avatar{width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--accent-on);display:grid;place-items:center;
  font-weight:var(--fw-black);font-size:var(--fs-lg)}
.acct-meta{min-width:0}
.acct-name{font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-user{font-size:var(--fs-xs);color:var(--text-3)}
.acct-links{display:flex;flex-direction:column;gap:2px;
  border-block:1px solid var(--border);padding-block:var(--sp-2)}
.acct-link{display:flex;align-items:center;gap:var(--sp-3);
  padding:.6rem .7rem;border-radius:var(--r-md);color:var(--text-2);
  text-decoration:none;font-size:var(--fs-sm);font-weight:600;
  min-height:var(--touch-min)}
.acct-link:hover{background:var(--bg-raised);color:var(--text-1)}
.acct-link i{width:20px;text-align:center;opacity:.85}
.acct-logout{display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.65rem 1rem;border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);
  border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);
  font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  min-height:var(--touch-min)}
.acct-logout:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 16%,transparent)}
.acct-logout:disabled{opacity:.6;cursor:not-allowed}

/* زنّاد الحساب في الشريط الجانبي (سطح المكتب) */
.rail-avatar{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--accent-on);display:grid;place-items:center;
  font-weight:var(--fw-black);font-size:var(--fs-sm);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-on) 30%,transparent)}
.rail .acct-trigger{margin-top:var(--sp-2)}

/* ── الجوّال ≤768px ──────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* (٢) الشريط الجانبي يختفي كلياً — الشريط السفلي هو التنقّل الوحيد */
  .rail{display:none}

  /* (٣) المساحة الرئيسية تُقتطع بارتفاع الشريط السفلي وهامش أمان iOS،
     فيقف ملحّن الدردشة (sticky bottom) مرئياً فوقه مباشرة */
  .main{padding-bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px))}
  /* إلغاء الحشوة السفلية القديمة المضاعفة داخل main-body (كانت لتفادي الشريط) */
  .main-body{padding-bottom:var(--sp-6)}

  /* الشريط السفلي: هامش أمان iOS + توزيع مريح لخمسة أزرار */
  .botnav{height:calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    border-top:1px solid color-mix(in srgb,#000 12%,transparent)}
  .botnav .botnav-btn{flex:1;max-width:88px}

  /* صورة الحساب في الشريط السفلي */
  .bot-avatar{width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-strong));
    color:var(--accent-on);display:grid;place-items:center;
    font-weight:var(--fw-black);font-size:.85rem}

  /* ورقة الحساب السفلية */
  .acct-sheet-scrim{position:fixed;inset:0;z-index:58;background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px)}
  .acct-sheet{position:fixed;inset-inline:0;z-index:59;
    bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px));
    background:var(--bg-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--sp-5) var(--sp-5) var(--sp-4);
    box-shadow:0 -12px 40px rgba(0,0,0,.28)}
  .acct-sheet .acct-panel{min-width:0}
}

/* على العريض تبقى ورقة الجوّال مخفية دوماً (الشرط في Razor يكفي، وهذا صمّام) */
@media (min-width:769px){
  .acct-sheet,.acct-sheet-scrim{display:none}
}