/* مختبر تشابك — الواجهة الجديدة (v2). بتشتغل فوق lab.css بنفس متغيّراته، وما بتغيّر ولا وظيفة.
   الترتيب: شريط أقسام جانبي، مساحة العمل الأكبر بالنص، الكود جنبها (بينطوى)، والمراقبة لوحة تحت. */

.lab.lab-v2 {
  --sim: var(--accent);
  --real: #d97706;
  --mode: var(--sim);
  --rail: 76px;
  --dock: 30%;
  --circuit: .64;
}
.lab.lab-v2[data-theme="dark"] { --real: #f0a54a; --circuit: .64; }
.lab.lab-v2[data-wmode="real"] { --mode: var(--real); }

/* الشريط العلوي: خط رفيع بلون الوضع (تركواز للمحاكاة، برتقالي للقطع الحقيقية) */
.lab-v2 .lb-top { border-top: 3px solid var(--mode); transition: border-color .25s; gap: 14px; }
.lab-v2 .lb-run { margin-inline-start: 0; flex: 1; justify-content: center; }
.lab-v2 .lb-menu { margin-inline-start: auto; }
/* حالة التشغيل سطر واحد، عشان الشريط العلوي ما يصير سطرين */
.lab-v2 .lb-status { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 861px) { .lab-v2 .lb-top { flex-wrap: nowrap; } }

/* مفتاح الوضع: كبير وواضح، كل وضع بلونه */
.lab-v2 .lb-wmode { padding: 4px; gap: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lab-v2 .lb-wmode button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.lab-v2 .lb-wmode button.on { color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--mode) 40%, transparent); }
.lab-v2[data-wmode="sim"] .lb-wmode button.on { background: var(--sim); }
.lab-v2[data-wmode="real"] .lb-wmode button.on { background: var(--real); }
.v2-mode-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.v2-mode-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mode); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode) 22%, transparent); }

/* الهيكل */
.lab-v2 .v2-body { flex: 1; display: flex; min-height: 0; }
.lab-v2 .v2-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.lab-v2 .v2-stage > .lb-main { flex: 1; min-height: 0; }

/* الشريط الجانبي */
.v2-rail { flex: 0 0 var(--rail); display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; background: var(--panel); border-inline-end: 1px solid var(--line); overflow-y: auto; }
.v2-rail-btn { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 2px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font-size: 11.5px; line-height: 1.2; transition: background .15s, color .15s; }
.v2-rail-btn svg { width: 22px; height: 22px; }
.v2-rail-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.v2-rail-btn.on, .v2-rail-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-2); }
.v2-rail-btn.on::before, .v2-rail-btn[aria-pressed="true"]::before { content: ""; position: absolute; inset-inline-start: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
.v2-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2-rail-sep { height: 1px; margin: 6px 10px; background: var(--line); }
/* بالوضع الحقيقي، قسم «لوحة حقيقية» بيلمع بلونه عشان الطالب يعرف وين أدواته */
.lab-v2[data-wmode="real"] .v2-rail-btn[data-k="hw"] { color: var(--real); }
.lab-v2[data-wmode="real"] .v2-rail-btn[data-k="hw"]::after { content: ""; position: absolute; top: 8px; inset-inline-end: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--real); }

/* مساحة العمل هي الأكبر، والكود بينطوى */
.lab-v2 .lb-circuit { transition: flex-basis .2s ease; }
.lab-v2[data-wmode="real"] .lb-canvas { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--real) 30%, transparent); }
.lab-v2.v2-code-off .lb-code, .lab-v2.v2-code-off .lb-split { display: none; }
.lab-v2.v2-code-off .lb-circuit { flex: 1 1 auto; }
.lab-v2 .lb-split { flex-basis: 5px; }

/* المراقبة: لوحة تحت كل العرض */
.v2-dock { flex: 0 0 var(--dock); min-height: 44px; display: flex; flex-direction: column; border-top: 1px solid var(--line); transition: flex-basis .2s ease; }
.v2-dock .lb-console { flex: 1; min-height: 0; border-top: 0; }
.lab-v2.v2-dock-min .v2-dock { flex-basis: 42px; }
.lab-v2.v2-dock-min .v2-dock .lb-console > :not(.lb-tabs) { display: none !important; }
.v2-dock-toggle { margin-inline-start: auto; display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--con-tab); }
.v2-dock-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
.lab-v2.v2-dock-min .v2-dock-toggle svg { transform: rotate(180deg); }
.v2-dock-toggle:hover { background: #ffffff14; color: var(--con-tab-on); }
.lab-v2 .lb-tabs .lb-clear { margin-inline-start: 0; }

/* اللوحات المنبثقة (القطع الحقيقية، المشاريع، الذكاء) */
.v2-fly { position: absolute; z-index: 30; top: 12px; inset-inline-start: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto;
  padding: 14px 14px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px #0b1f3433; animation: v2in .18s ease-out; }
.v2-fly header { display: flex; align-items: center; justify-content: space-between; }
.v2-fly header b { font-size: 16px; color: var(--ink); }
.v2-fly[data-fly="hw"] header b { color: var(--real); }
.v2-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--muted); }
.v2-x svg { width: 18px; height: 18px; }
.v2-x:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.v2-lead { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.v2-group { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.v2-group h4 { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.v2-fly .lb-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; }
.v2-fly .lb-btn span { display: inline !important; }
.v2-fly .lb-btn:not([hidden]) { display: flex; }
.v2-ailab { text-decoration: none; }
/* أزرار الملفات أيقونات بس بالأصل: بنكتب اسمها من الـtitle تبعها */
.v2-fly .lb-btn:not(:has(span))::after { content: attr(title); }
/* حركة دخول خفيفة بالمكان بس (بدون شفافية، عشان اللوحة ما تعلق باهتة لو الحركة وقفت) */
@keyframes v2in { from { transform: translateY(-6px) scale(.985); } }

/* ===== الموبايل: الأقسام تحت، وكل شاشة لقسم واحد ===== */
@media (max-width: 860px) {
  .lab.lab-v2 { --rail: 64px; }
  .lab-v2 .lb-top { gap: 6px; }
  .lab-v2 .lb-run { flex-wrap: wrap; justify-content: flex-start; gap: 6px; width: 100%; }
  .lab-v2 .lb-board { max-width: 46%; }
  .lab-v2 .lb-wmode button { padding: 6px 12px; }
  .lab-v2 .lb-status { max-width: 100%; flex: 1 1 100%; }
  .v2-mode-badge { display: none; }
  .lab-v2 .v2-body { padding-bottom: var(--rail); }
  .v2-rail { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; height: var(--rail); flex-direction: row; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-inline-end: 0; border-top: 1px solid var(--line); overflow: hidden; }
  .v2-rail-btn { flex: 1; padding: 7px 0 5px; font-size: 10.5px; }
  .v2-rail-btn svg { width: 20px; height: 20px; }
  .v2-rail-btn.on::before, .v2-rail-btn[aria-pressed="true"]::before { inset-inline: 14px; top: -4px; bottom: auto; width: auto; height: 3px; }
  .v2-rail-sep { display: none; }
  .lab-v2 .lb-main { flex-direction: row; }
  .lab-v2 .lb-split { display: none; }
  .lab-v2 .lb-circuit, .lab-v2 .lb-code { flex: 1 1 auto !important; }
  .lab-v2[data-view="canvas"] .lb-code, .lab-v2[data-view="canvas"] .v2-dock { display: none; }
  .lab-v2[data-view="code"] .lb-circuit, .lab-v2[data-view="code"] .v2-dock { display: none; }
  .lab-v2[data-view="monitor"] .lb-main { display: none; }
  .lab-v2[data-view="monitor"] .v2-dock { flex: 1; }
  .v2-dock-toggle { display: none; }
  .v2-fly { position: fixed; top: auto; bottom: var(--rail); inset-inline: 0; width: 100%; max-height: 72vh; border-radius: 18px 18px 0 0; animation-name: v2up; }
  @keyframes v2up { from { transform: translateY(16px); } }
}

/* الأرجل: منطقة الكبسة أكبر (حدّ شفاف) بدون ما يكبر شكلها، ولمعة لما الماوس فوقها.
   الأرجل بينها ٩٫٦ بكسل، فالمنطقة لحد ٤٫٨ عشان ما تاخد رجل جارتها */
.lab-v2 .cv-pins .pin { fill: #1a9e8f99; stroke: transparent; stroke-width: 2.8px; transition: r .12s, fill .12s; }
.lab-v2 .cv-pins .pin.hole { fill: #1a9e8f33; stroke-width: 4px; }
.lab-v2 .cv-pins .pin:hover { fill: var(--accent); r: 4.6; filter: drop-shadow(0 0 3px var(--accent)); }
.lab-v2 .cv-wires .draft { stroke-width: 3; }

/* شكل أحلى: الأسلاك أسلاك حقيقية (حدّ غامق وظل خفيف)، والقطع مرفوعة عن السطح بظلها */
.lab-v2 .cv-wire .under { stroke: #0b1f3455; stroke-width: 5; }
.lab-v2 .cv-wire .line { stroke-width: 3.2; filter: drop-shadow(0 1.2px .6px #0b1f3440); }
.lab-v2 .cv-wire:hover .line { stroke-width: 3.8; }
.lab-v2 .cv-part > :first-child { filter: drop-shadow(0 5px 7px #0b1f3430) drop-shadow(0 1px 1px #0b1f3426); }
.lab-v2 .cv-part:hover > :first-child { filter: drop-shadow(0 9px 12px #0b1f3438) drop-shadow(0 1px 1px #0b1f3426); }
.lab-v2 .cv-part[data-id="bb"] > :first-child, .lab-v2 .cv-part:has(> tb-breadboard) > :first-child { filter: drop-shadow(0 3px 5px #0b1f3424); }
/* الرجل اللي السلك رح يلقطها (المغناطيس) */
.lab-v2 .cv-pins .pin.snap { fill: var(--accent); r: 5; filter: drop-shadow(0 0 4px var(--accent)); }

/* خلفية مساحة العمل نفس شبكة الصفحة الرئيسية: خطوط كحلية خفيفة بتختفي عند الأطراف، بدون توهّج ملوّن */
.lab-v2 .lb-canvas, .lab-v2 .lb-canvas.sim {
  background-color: #f6f8f9;
  background-image: none;
}
.lab-v2 .lb-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#144c6d14 1px, transparent 1px), linear-gradient(90deg, #144c6d14 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
}
.lab-v2[data-theme="dark"] .lb-canvas, .lab-v2[data-theme="dark"] .lb-canvas.sim {
  background-color: var(--bg);
  background-image: none;
}
.lab-v2[data-theme="dark"] .lb-canvas::before { background-image: linear-gradient(#4fd0bd12 1px, transparent 1px), linear-gradient(90deg, #4fd0bd12 1px, transparent 1px); }
/* القطع الحقيقية: الشبكة بتهدى عشان الانتباه يروح للرفع والمخطط */
.lab-v2 .real-mode .lb-canvas::before, .lab-v2.real-mode .lb-canvas::before { opacity: .45; }
/* شريط أدوات الدارة بالوضع الليلي: كان أبيض وأيقوناته فاتحة فما بتبيّن */
.lab-v2[data-theme="dark"] .lb-tools { background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--line); }
/* بالليلي: حدّ فاتح للأسلاك عشان الأسود (الأرضي) يبيّن على الخلفية الغامقة */
.lab-v2[data-theme="dark"] .cv-wire .under { stroke: #ffffff38; }

/* بطاقة فحص أرجل الـESP32: فوق مساحة العمل، بتتلوّن حسب الحالة وبتنفتح لحالها لما يصير غلط جديد */
.v2-pins { position: absolute; z-index: 6; top: 34px; inset-inline-end: 12px; width: max-content; max-width: min(360px, calc(100% - 24px)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px #0b1f341f; font-size: 13px; }
.v2-pins-h { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 600; color: var(--ink); border-radius: 12px; }
.v2-pins-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2-pins-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.v2-pins[data-state="warn"] .v2-pins-h::before { background: #d97706; }
.v2-pins[data-state="err"] .v2-pins-h::before { background: #dc2626; box-shadow: 0 0 0 3px #dc262626; }
.v2-pins ul { margin: 0; padding: 0 12px 12px; list-style: none; display: grid; gap: 8px; }
.v2-pins li { padding-inline-start: 10px; border-inline-start: 3px solid #d97706; line-height: 1.65; color: var(--ink-2); }
.v2-pins li.err { border-color: #dc2626; }
.v2-pins li b { margin-inline-end: 4px; color: var(--ink); direction: ltr; unicode-bidi: isolate; }
/* ألوان أرجل الـESP32 حسب شغلها (لما تبيّن): قراءة بس، فخ، تغذية، أرضي */
.lab-v2 .cv-pins .pin.esp-in { fill: #7c5cffaa; }
.lab-v2 .cv-pins .pin.esp-trap { fill: #dc2626b3; }
.lab-v2 .cv-pins .pin.esp-pwr { fill: #d23a3ab3; }
.lab-v2 .cv-pins .pin.esp-gnd { fill: #26282cb3; }
@media (max-width: 860px) { .v2-pins { top: 8px; inset-inline-end: 8px; font-size: 12.5px; } }
/* اسم الرجل اللي رح يلقطها السلك */
.lab-v2 .cv-pins .snap-tag { font: 700 11px/1 ui-monospace, monospace; fill: var(--ink); stroke: var(--panel); stroke-width: 4px; paint-order: stroke; pointer-events: none; direction: ltr; }
/* السعر قبل الخصم */
.v2-was { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: #dc2626; margin-inline-end: 6px; }

/* أزرار الهيدر السريعة: صغيرة وهادية، والذكاء الاصطناعي بلمسة لون */
.lab-v2 .v2-quick { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.lab-v2 .v2-q { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line, #d4dee3); background: #fff; color: var(--ink, #144c6d); font: 500 12.5px/1 var(--font, inherit); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.lab-v2 .v2-q svg { width: 15px; height: 15px; flex: none; }
.lab-v2 .v2-q:hover { background: #f3f7f8; border-color: #b8cad2; }
.lab-v2 .v2-q-ai { border-color: transparent; color: #fff; background: linear-gradient(120deg, #1a5a78, #1f8a8a 60%, #2fa597); box-shadow: 0 4px 12px -6px rgba(31, 138, 138, .7); }
.lab-v2 .v2-q-ai:hover { background: linear-gradient(120deg, #164f6a, #1c7d7d 60%, #2a978a); border-color: transparent; }
.lab-v2 .v2-q-ai i { font: 600 9.5px/1 var(--font, inherit); font-style: normal; letter-spacing: .05em; padding: 3px 5px; border-radius: 5px; background: rgba(255, 255, 255, .18); }
.lab-v2 .v2-usb { color: #9a4a1c; background: #fff7f1; border-color: #f4dccb; }
.lab-v2 .v2-usb i { width: 7px; height: 7px; border-radius: 50%; background: #e0782f; }
.lab-v2 .v2-usb.on { color: #16774f; background: #effaf4; border-color: #c9ebd8; cursor: default; }
.lab-v2 .v2-usb.on i { background: #1d9a6c; box-shadow: 0 0 0 3px rgba(29, 154, 108, .18); }
.lab-v2 .v2-q-up { background: var(--ink, #144c6d); border-color: transparent; color: #fff; }
.lab-v2 .v2-q-up:hover { background: #0f3d58; border-color: transparent; }
@media (max-width: 1700px) { .lab-v2 .v2-q:not(.v2-q-ai) span { display: none; } .lab-v2 .v2-q:not(.v2-q-ai) { width: 32px; padding: 0; justify-content: center; } .lab-v2 .v2-usb i { width: 9px; height: 9px; } }
@media (min-width: 861px) and (max-width: 1440px) { .lab-v2 .v2-mode-badge { display: none; } }
@media (max-width: 860px) { .lab-v2 .v2-quick { order: 9; margin-inline-start: 0; } .lab-v2 .v2-usb, .lab-v2 .v2-q-up { display: none; } }