/* --- 2. Layout & Panels --- */
.header {
    height: 42px;
    background: var(--bg-panel-alt);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
    z-index: 100;
    flex: none;
    overflow-x: auto;
    white-space: nowrap;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.header::-webkit-scrollbar { height: 0px; }

.header-left, .header-right {
    display: flex;
    gap: 6px;
    align-items: center;
}
.logo {
    font-weight: 800;
    color: var(--accent);
    font-size: 13px;
    margin-left: 8px;
    display: inline-block;
    letter-spacing: 0.5px;
}

.workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    /* [v4.4.5 fix-error-2] allow workspace to shrink to zero so timeline sticks to top */
    min-height: 0;
}

.panel {
    width: 280px;
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    z-index: 50;
    border-inline-start: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
}

/* [v4.7.49] اللوحات تطفو فوق الكنفاس (overlay) بدل مشاركته مساحة flex.
   هكذا توسيع/طي أي لوحة لا يغيّر عرض منطقة الكنفاس إطلاقاً فلا يتحرك
   الكنفاس أبداً. تُثبَّت كل لوحة على حافة مساحة العمل المنطقية
   (inline-start/end تحترم الاتجاه rtl تلقائياً). */
.panel {
    position: absolute;
    top: 0;
    bottom: 0;
}
#leftPanel {
    inset-inline-start: 0;
    /* [v4.7.52] المحتوى يتمرر داخل .panel-scroll فقط، فالتذييل (الشعار) ثابت */
    overflow-y: hidden;
}
#rightPanel {
    inset-inline-end: 0;
    /* [v4.7.52] نفس البنية: التمرير داخل الحاوية والتذييل ثابت أسفل اللوحة */
    overflow-y: hidden;
}

/* [v4.7.52] حاوية قابلة للتمرير داخل لوحة الأدوات (يسار/يمين حسب rtl).
   تملأ بقية المساحة، فيبقى الشعار الذي بعدها تذييلاً ثابتاً أسفل اللوحة
   ويتحرك معها عند التوسيع/الطي دون أن يتمرر بعيداً. */
.panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* [v4.7.57] لوحة الأدوات اليمنى (#leftPanel): السكرول على الجانب الخارجي
   (يمين اللوحة) بعيداً عن مقبض السحب الذي يقع على حافتها الداخلية.
   الحيلة: نجعل الحاوية نفسها ltr فينتقل السكرول إلى اليمين، ثم نعيد
   المحتوى rtl على أبنائها المباشرين فيبقى التخطيط الداخلي كما هو تماماً
   بلا أي كسر (أي عنصر كان يرث rtl يبقى rtl صراحةً). */
#leftPanel .panel-scroll {
    direction: ltr;
}
#leftPanel .panel-scroll > * {
    direction: rtl;
}

/* [v4.7.59] سكرول لوحتَي الأدوات (اليمين واليسار): تغليض بسيط جداً
   أفقياً/عمودياً (5px → 4px) — أرفع خصوصية من القاعدة العامة. */
#leftPanel .panel-scroll::-webkit-scrollbar,
#rightPanel .panel-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
#leftPanel .panel-scroll,
#rightPanel .panel-scroll {
    scrollbar-width: thin;
    scrollbar-color: #3a3d46 transparent;
}

/* CRITICAL FIX: Remove transition from panels to fix drag lag */
/* .panel { transition: none; } -- no transition on panels */

@media (max-width: 600px) {
    .panel { width: 220px; }
    .logo { font-size: 11px; margin-left: 5px; }
}

.panel::-webkit-scrollbar { width: 5px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: #3a3d46; border-radius: 3px; }
.panel::-webkit-scrollbar-thumb:hover { background: #4a4d56; }

.viewport {
    /* [v4.7.49] الكنفاس يملأ كامل مساحة العمل (absolute) خلف اللوحات
       الطافية فلا يتغيّر حجمه/موضعه عند توسيع أو طي أي لوحة. */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex: none;
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    touch-action: none;
}
/* [v4.7.49] مقابض تغيير عرض اللوحات: تطفو أيضاً فوق الكنفاس وتُثبَّت
   على حافة كل لوحة بواسطة JS (positionPanelResizers) حتى لا تشغّل flex. */
.workspace .resizer-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
}
canvas {
    display: block;
    touch-action: none;
}