.workspace-layout { display: flex; height: calc(100vh - var(--header-height)); width: 100%; overflow: hidden; position: relative; }

/* عرض پیش‌فرض 70% تعیین شده است */
.blockly-container { flex: 0 0 70%; position: relative; min-width: 30%; }
#blocklyDiv { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.active-sprite-indicator {
    position: absolute; top: 15px; right: 15px; background: var(--surface);
    border: 2px solid var(--primary); padding: 5px 15px; border-radius: 20px;
    display: flex; align-items: center; gap: 8px; z-index: 50; font-size: 12px;
    font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: var(--text);
}

.resizer { width: 6px; background: var(--border); cursor: col-resize; z-index: 100; transition: background 0.2s; flex-shrink: 0; }
.resizer:hover, .resizer.dragging { background: var(--primary); }
html.dark .resizer { background: #334155; }
html.dark .resizer:hover, html.dark .resizer.dragging { background: var(--primary); }

.blocklyToolboxDiv { background-color: #f1f5f9 !important; border-left: 2px solid var(--border) !important; box-shadow: -5px 0 20px rgba(0,0,0,0.05) !important; z-index: 100 !important; }
.blocklySvg { background-color: #ffffff !important; }

html.dark .blocklyToolboxDiv { background-color: #0f172a !important; border-left: 2px solid #334155 !important; box-shadow: -5px 0 20px rgba(0,0,0,0.4) !important; }
html.dark .blocklySvg { background-color: #1e293b !important; }
html.dark .blocklyTreeRow { color: #f8fafc !important; }
html.dark .blocklyToolboxCategoryLabel { color: #f8fafc !important; }
html.dark .blocklyTreeSelected { background-color: rgba(14, 165, 233, 0.2) !important; }
html.dark .blocklyTreeLabel { font-family: 'VazirMedium', Tahoma, sans-serif !important; font-size: 13px; }
html.dark .blocklyFlyoutBackground { fill: #0f172a !important; }

.execution-container { flex: 1 1 0%; display: flex; flex-direction: column; background: var(--bg); transition: 0.1s; z-index: 20; min-width: 300px; overflow: hidden; }
.execution-container:fullscreen { width: 100vw; height: 100vh; flex: none; border: none; padding-bottom: 20px; }
.execution-container:-webkit-full-screen { width: 100vw; height: 100vh; flex: none; border: none; padding-bottom: 20px; }

.toolbar { background: var(--surface); padding: 10px 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

.action-buttons { display: flex; gap: 12px; align-items: center; background: var(--input-bg); padding: 6px 12px; border-radius: 30px; border: 1px solid var(--border); }
.play-btn, .stop-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; color: white; border: none; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.15); }
.play-btn { background: #10b981; } .play-btn:hover { background: #059669; transform: scale(1.05); }
.stop-btn { background: #ef4444; } .stop-btn:hover { background: #dc2626; transform: scale(1.05); }

/* حالت قفل شدن حین اجرا */
body.is-running .sprite-manager-wrapper { pointer-events: none; opacity: 0.5; filter: grayscale(1); }
body.is-running .blocklyToolboxDiv { pointer-events: none; opacity: 0.6; }
body.is-running #dragResizer { pointer-events: none; }

.view-toggles { display: flex; gap: 5px; }
.view-toggles button { padding: 6px 10px; font-size: 11px; }

.stage-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #e5e7eb; position: relative; overflow: auto; padding: 30px 0; }
html.dark .stage-wrapper { background: #0f172a; }

.stage-container { position: relative; transform-origin: center center; direction: ltr; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; }
.visual-stage { background-color: #ffffff; position: relative; overflow: hidden; background-position: 0 0; background-repeat: no-repeat; box-shadow: 0 0 20px rgba(0,0,0,0.2); border: 1px solid var(--border); flex-shrink: 0; box-sizing: border-box; }

.stage-container.grid-active .visual-stage {
    background-image: linear-gradient(to right, rgba(14, 165, 233, 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(14, 165, 233, 0.2) 1px, transparent 1px);
    background-size: 50px 50px;
}

.rulers-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; direction: ltr; }
.stage-container.grid-active .rulers-overlay { display: block; }
.ruler-label-x { position: absolute; top: -20px; font-size: 12px; font-weight: bold; color: var(--text-muted); transform: translateX(-50%); white-space: nowrap; }
.ruler-label-y { position: absolute; left: -32px; font-size: 12px; font-weight: bold; color: var(--text-muted); transform: translateY(-50%); width: 25px; text-align: right; }

.sprite-element { position: absolute; transition: opacity 0.3s ease; display: flex; justify-content: center; align-items: center; transform-origin: center center; cursor: grab; user-select: none; }
.sprite-element:active { cursor: grabbing; }
.sprite-bg-layer { position: absolute; inset: 0; z-index: 1; }
.sprite-asset-layer { position: relative; width: 100%; height: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; }
.sprite-asset-layer img { width: 100%; height: 100%; object-fit: contain; }
.sprite-text-layer { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 2px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 3; font-weight: bold; pointer-events: none; }
.speech-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #ffffff; color: #000; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 10; border: 2px solid var(--primary); white-space: nowrap; display: none; opacity: 0; transition: 0.3s; pointer-events: none; }
.speech-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: var(--primary) transparent transparent transparent; }
.var-monitor { position: absolute; background: rgba(255,255,255,0.9); border: 1px solid #ccc; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: #333; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 50; pointer-events: none; }

.sprite-manager-wrapper { display: flex; height: 110px; background: var(--surface); border-bottom: 3px solid var(--border); flex-shrink: 0; }
.stage-settings { padding: 10px 15px; border-left: 2px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; min-width: 90px; }
.stage-settings:hover { background: rgba(14, 165, 233, 0.05); color: var(--primary); }
.stage-settings-img { width: 45px; height: 35px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 5px; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; color: var(--text-muted); font-size: 18px; }

.sprite-manager { flex: 1; display: flex; align-items: center; padding: 10px; gap: 10px; overflow-x: auto; }
.sprite-item { position: relative; width: 65px; height: 75px; border-radius: 8px; border: 2px solid var(--border); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; opacity: 0.6; font-size: 11px; flex-shrink: 0; transition: 0.2s; background: var(--card); overflow: hidden; }
.sprite-item:hover { opacity: 0.9; }
.sprite-item.active { opacity: 1; border-color: var(--primary); background: rgba(14,165,233,0.1); font-weight: bold; color: var(--primary); box-shadow: 0 2px 8px rgba(14,165,233,0.2); }
.sprite-item i.sp-icon { font-size: 22px; margin-bottom: 5px; }
.sprite-item img.sp-img { width: 30px; height: 30px; object-fit: contain; margin-bottom: 5px; }
.sprite-name { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.sprite-edit-btn { position: absolute; top: 0; left: 0; width: 100%; height: 20px; background: var(--primary); color: white; display: none; justify-content: center; align-items: center; font-size: 10px; opacity: 0.9; z-index: 20; }
.sprite-item.active:hover .sprite-edit-btn { display: flex; }
.add-sprite-btn { border: 2px dashed var(--text-muted); color: var(--text-muted); background: transparent; height: 60px; }
.add-sprite-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(14,165,233,0.05); }

.console-output { flex: 1; padding: 15px; font-family: 'Courier New', monospace; font-size: 13px; overflow-y: auto; white-space: pre-wrap; direction: rtl; text-align: right; color: var(--text); background: var(--card); transition: flex 0.3s; }
.hidden-panel { display: none !important; flex: 0 !important; }
.expanded-panel { flex: 2 !important; }
.console-line { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }

.mobile-controls-panel { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 380px; margin: 20px auto; padding: 10px 15px; background: #ffffff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); z-index: 10; direction: ltr; box-sizing: border-box; flex-shrink: 0; gap: 10px; }
html.dark .mobile-controls-panel { background: #1e293b; border-color: #334155; }
.mobile-controls-panel .d-pad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mobile-controls-panel .d-pad-row { display: flex; gap: 8px; }
.m-btn { width: 45px; height: 45px; background: var(--input-bg); border: 2px solid var(--border); border-radius: 12px; font-size: 18px; display: flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; color: var(--text-muted); transition: 0.1s; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
html.dark .m-btn { background: #0f172a; border-color: #334155; }
.m-btn:hover { color: var(--primary); border-color: var(--primary); }
.m-btn:active { background: var(--primary); color: white; transform: scale(0.92); box-shadow: none; }
.m-btn.action-btn { width: auto; padding: 0 20px; height: 50px; border-radius: 30px; font-size: 14px; font-weight: bold; background: rgba(14, 165, 233, 0.1); color: var(--primary); border-color: rgba(14, 165, 233, 0.3); }
.m-btn.action-btn:active { background: var(--primary); color: white; }

.dialog-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.dialog-box { background: var(--surface); padding: 25px; border-radius: 16px; width: 100%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); direction: rtl; }
.icon-grid, .bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px; margin-top: 15px; max-height: 200px; overflow-y: auto; padding: 5px; direction: ltr; }
.bg-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.icon-selector-item, .img-selector-item { width: 50px; height: 50px; background: var(--input-bg); border: 2px solid var(--border); border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; color: var(--text); transition: 0.2s; }
.img-selector-item { background-size: contain; background-position: center; background-repeat: no-repeat; }
.icon-selector-item:hover, .icon-selector-item.selected, .img-selector-item:hover, .img-selector-item.selected { border-color: var(--primary); background-color: rgba(14,165,233,0.1); color: var(--primary); }
.bg-selector-item { height: 70px; background: var(--input-bg); border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: 0.2s; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; color: var(--text-muted); font-size: 24px; }
.bg-selector-item:hover, .bg-selector-item.selected { border-color: var(--primary); transform: scale(1.05); }
.input-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.input-row label { font-size: 12px; font-weight: bold; width: 80px; color: var(--text); }


/* ==========================================
   تب‌های لمسی و رابط ریسپانسیو اختصاصی موبایل
========================================== */
.mobile-bottom-nav { display: none; }
.dirty-indicator { display: none; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; margin-right: 5px; }

@media (max-width: 900px) {
    .mobile-bottom-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0;
        height: 50px; background: var(--surface); border-top: 1px solid var(--border);
        z-index: 1000; box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    }
    .mobile-bottom-nav .nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        color: var(--text-muted); font-size: 10px; gap: 3px; cursor: pointer; transition: 0.2s; position: relative;
    }
    .mobile-bottom-nav .nav-item i { font-size: 16px; }
    .mobile-bottom-nav .nav-item.active { color: var(--primary); }

    .mobile-bottom-nav .dirty-indicator { position: absolute; top: 6px; right: 28%; border: 1px solid var(--surface); }

    .workspace-layout { height: calc(100vh - var(--header-height) - 50px); flex-direction: column; position: relative; }
    .resizer { display: none !important; }

    /* تب کدنویسی: کدهای Blockly کل صفحه را پر می‌کنند */
    .workspace-layout.tab-code .blockly-container {
        display: block !important; flex: none !important;
        width: 100% !important; height: calc(100% - 75px) !important;
    }

    /* کانتینر اجرا را مخفی نمی‌کنیم تا لیست شکلک‌ها حفظ شوند، فقط آن را نامرئی و شیشه‌ای می‌کنیم */
    .workspace-layout.tab-code .execution-container {
        display: block !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: transparent; border: none; z-index: 50; pointer-events: none;
    }

    /* این بخش‌ها مخفی می‌شوند */
    .workspace-layout.tab-code .toolbar,
    .workspace-layout.tab-code .stage-wrapper,
    .workspace-layout.tab-code .console-output,
    .workspace-layout.tab-code .mobile-controls-panel { display: none !important; }

    /* نوار شکلک‌ها پایین صفحه با قابلیت کلیک */
    .workspace-layout.tab-code .sprite-manager-wrapper {
        display: flex !important; position: absolute; bottom: 0; left: 0; width: 100%;
        height: 75px; border-top: 2px solid var(--border); background: var(--surface); z-index: 100;
        pointer-events: auto; /* تا کلیک روی شکلک‌ها کار کند */
    }

    .workspace-layout.tab-code .stage-settings { display: none !important; }
    .workspace-layout.tab-code .sprite-manager { padding: 5px 10px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
    .workspace-layout.tab-code .sprite-item { width: 50px; height: 55px; flex-shrink: 0; margin-top: 5px; }
    .workspace-layout.tab-code .sprite-item .sp-icon { font-size: 16px; margin-bottom: 2px; }
    .workspace-layout.tab-code .sprite-item .sprite-name { font-size: 9px; }

    /* حالت تب ۲: استیج بازی */
    .workspace-layout.tab-stage .blockly-container { display: none !important; }
    .workspace-layout.tab-stage .active-sprite-indicator { display: none !important; }
    .workspace-layout.tab-stage .execution-container { display: flex !important; flex: 1; height: 100%; min-width: 100%; border: none; position: relative; bottom: auto; left: auto; pointer-events: auto; }
    .workspace-layout.tab-stage .sprite-manager-wrapper,
    .workspace-layout.tab-stage .console-output { display: none !important; }
    .workspace-layout.tab-stage .mobile-controls-panel { max-width: 320px; padding: 10px; margin: 10px auto; gap: 5px; }
    .workspace-layout.tab-stage .m-btn { width: 40px; height: 40px; font-size: 16px; }
    .workspace-layout.tab-stage .m-btn.action-btn { height: 45px; font-size: 12px; padding: 0 15px; }

    /* حالت تب ۳: شکلک‌ها و تنظیمات */
    .workspace-layout.tab-sprites .blockly-container { display: none !important; }
    .workspace-layout.tab-sprites .active-sprite-indicator { display: none !important; }
    .workspace-layout.tab-sprites .execution-container { display: flex !important; flex: 1; height: 100%; min-width: 100%; border: none; position: relative; bottom: auto; left: auto; background: var(--bg); pointer-events: auto; }
    .workspace-layout.tab-sprites .toolbar,
    .workspace-layout.tab-sprites .stage-wrapper,
    .workspace-layout.tab-sprites .console-output { display: none !important; }
    .workspace-layout.tab-sprites .sprite-manager-wrapper { display: flex !important; height: 100%; flex-direction: column; }
    .workspace-layout.tab-sprites .stage-settings { border-left: none; border-bottom: 2px dashed var(--border); width: 100%; padding: 15px; flex-direction: row; gap: 15px; }
    .workspace-layout.tab-sprites .sprite-manager { flex-wrap: wrap; overflow-y: auto; padding: 15px; align-content: flex-start; justify-content: center; }
    .workspace-layout.tab-sprites .sprite-item { width: 80px; height: 90px; }
}



html.dark .blocklyToolbox {
    background-color: #0f172a !important; /* رنگ پس‌زمینه دارک */
    color: #f8fafc !important; /* رنگ متن دارک */
    border-left: 1px solid #334155;
}