/* =========================================================
   T2MEP Coding — Jigsaw Blocks (สไตล์ code.org / Blockly)
   หลักการ: บล็อกมี "รอยบาก (notch)" ด้านบน และ "ติ่ง (tab)" ด้านล่าง
            วาดด้วย clip-path บนตัวบล็อก แล้วให้บล็อกถัดไป margin-top ติดลบ
            เท่าความสูงติ่ง → ต่อกันแนบสนิทเหมือนจิ๊กซอว์

   v1.25.0 — ขนาดบล็อกทั้งหมดคุมด้วยตัวแปรชุดเดียวที่ .blocks-root
   ทำไม: เดิมความสูง/ระยะขอบ/ฟอนต์เป็นเลขตายตัวกระจายอยู่ 6 กฎ พอจะย่อบล็อก
   ต้องไล่แก้ทีละที่แล้วมักลืมบางตัว (เช่นโพรงของ repeat) จนสัดส่วนเพี้ยน
   ตอนนี้เหลือ "จุดเดียวที่ต้องแก้" คือบล็อกตัวแปรข้างล่างนี้
   ========================================================= */

.blocks-root{
  --notch-x:20px;    /* ตำแหน่งเริ่มรอยบากจากซ้าย */
  --notch-w:26px;    /* ความกว้างรอยบาก */
  --notch-h:8px;     /* ความสูงติ่ง/รอยบาก */
  --blk-r:10px;      /* ความมนมุมบล็อก (ใช้กับ shadow layer) */
  --arm:16px;        /* ความหนาแขนซ้ายของบล็อกตัว C */

  /* ---- ชุดขนาดบล็อก (แบบ "กะทัดรัด" — วัดจริงได้ สูง 37px · ระยะห่าง 29px) ----
     พื้นที่ Workspace บนจอโรงเรียน (1024×545) สูง 318px
     ของเดิมสูง 49px/ห่าง 39px เห็นได้ 7 บล็อก · ชุดนี้เห็นได้ 10 บล็อก */
  --blk-h:36px;      /* min-height ของบล็อก (border-box) */
  --blk-py:6px;      /* ระยะขอบบน-ล่างในบล็อก */
  --blk-px:14px;     /* ระยะขอบซ้าย-ขวาในบล็อก */
  --blk-fs:15px;     /* ขนาดตัวอักษรบนบล็อก */
  --blk-icon:16px;   /* ขนาด emoji บนบล็อก */
  --blk-gap:6px;     /* ช่องไฟระหว่าง icon / label / dropdown */
}

/* ---------- โครงบล็อกเดี่ยว ---------- */
.blk-wrap{
  position:relative;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.18)) drop-shadow(0 4px 7px rgba(40,18,80,.16));
  touch-action:none;
}
.blk-wrap + .blk-wrap{ margin-top:calc(-1 * var(--notch-h)); }

.blk{
  position:relative;
  display:flex; align-items:center; gap:var(--blk-gap);
  min-height:var(--blk-h);
  padding:var(--blk-py) var(--blk-px) calc(var(--blk-py) + var(--notch-h)) var(--blk-px);
  color:#fff; font-family:var(--font-code); font-weight:700; font-size:var(--blk-fs);
  letter-spacing:.2px; line-height:1.15;
  background:var(--blk-c,#1e9ec9);
  cursor:grab;
  user-select:none; -webkit-user-select:none;
  clip-path:polygon(
    0 0,
    var(--notch-x) 0,
    calc(var(--notch-x) + 6px) var(--notch-h),
    calc(var(--notch-x) + var(--notch-w) - 6px) var(--notch-h),
    calc(var(--notch-x) + var(--notch-w)) 0,
    100% 0,
    100% calc(100% - var(--notch-h)),
    calc(var(--notch-x) + var(--notch-w)) calc(100% - var(--notch-h)),
    calc(var(--notch-x) + var(--notch-w) - 6px) 100%,
    calc(var(--notch-x) + 6px) 100%,
    var(--notch-x) calc(100% - var(--notch-h)),
    0 calc(100% - var(--notch-h))
  );
  transition:filter .12s ease;
}
.blk:active{ cursor:grabbing; }

/* เส้นไฮไลต์บนหัวบล็อกให้ดูนูน */
.blk::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:rgba(255,255,255,.32); pointer-events:none;
}

.blk__icon{ font-size:var(--blk-icon); line-height:1; }
.blk__label{ white-space:nowrap; }
/* อังกฤษตัวหลักเท่า .blk · ไทยตัวเล็กจาง ๆ ต่อท้าย — ไม่ดันความสูงบล็อก */
.blk__label--bi{ display:inline-flex; align-items:baseline; gap:5px; }
.blk__en{ font-weight:800; }
.blk__th{ font-size:calc(var(--blk-fs) - 4px); font-weight:600; opacity:.78; }

/* ---------- หมวดสี ----------
   ต้องใช้ตัวเชื่อม > (ลูกโดยตรง) ห้ามใช้ช่องว่าง (ลูกหลานทั้งหมด)
   ของเดิมเขียน `.cat-control .blk` ซึ่งกินไปถึงบล็อกที่วางอยู่ในโพรงของ repeat ด้วย
   และมี specificity เท่ากับ `.cat-motion .blk` พอดี (0,2,0)
   กฎของ control อยู่บรรทัดล่างกว่าจึงชนะ → move forward ในโพรงกลายเป็นสีส้ม
   เปลี่ยนเป็น > แล้วแต่ละบล็อกจะถือสีของหมวดตัวเองเสมอ ไม่ว่าซ้อนอยู่ลึกแค่ไหน */
.cat-motion  > .blk,  .cat-motion  > .cblk{ --blk-c:var(--cat-motion);  --blk-d:var(--cat-motion-d); }
.cat-action  > .blk,  .cat-action  > .cblk{ --blk-c:var(--cat-action);  --blk-d:var(--cat-action-d); }
.cat-control > .blk,  .cat-control > .cblk{ --blk-c:var(--cat-control); --blk-d:var(--cat-control-d); }
.cat-sense   > .blk,  .cat-sense   > .cblk{ --blk-c:var(--cat-sense);   --blk-d:var(--cat-sense-d); }
.cat-event   > .blk,  .cat-event   > .cblk{ --blk-c:var(--cat-event);   --blk-d:var(--cat-event-d); }

/* เลี้ยวซ้าย/ขวาต้องต่างจาก motion ฟ้าทั้งหมวด — เด็กจำสีคู่ทิศได้เร็วกว่าอ่านคำ
   ใช้ data-type ที่ workspace.js แปะไว้แล้ว (ไม่เพิ่ม attribute ใหม่)
   specificity สูงกว่า .cat-motion > .blk จึงทับสีฟ้าได้แม้ซ้อนในโพรง repeat */
.blk-wrap[data-type="turn_left"]  > .blk{ --blk-c:#e23d3d; --blk-d:#c62828; }
.blk-wrap[data-type="turn_right"] > .blk{ --blk-c:#1f6fdb; --blk-d:#1557b0; }
.blk-wrap[data-type="turn_left"]  > .blk .blk__icon,
.blk-wrap[data-type="turn_right"] > .blk .blk__icon{
  font-size:calc(var(--blk-icon) + 6px); font-weight:900;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",sans-serif;
}

/* ---------- ช่องกรอกค่าในบล็อก (dropdown / number) ---------- */
.blk-input{
  font-family:var(--font-code); font-weight:800; font-size:calc(var(--blk-fs) - 1.5px);
  color:#2a2140; background:#fff;
  border:0; border-radius:999px;
  padding:calc(var(--blk-py) * .45) 9px; min-width:40px; text-align:center;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.14);
  cursor:pointer;
}
.blk-input:focus{ outline:2.5px solid var(--gold-400); }
select.blk-input{ padding-right:7px; }

/* ---------- บล็อกตัว C (repeat / if) ---------- */
/* หมายเหตุ: สีพื้นอยู่ที่ head / arm / foot แยกกัน ไม่ใช่ที่ .cblk
   เพราะถ้าใส่ที่ .cblk แล้ว clip-path ของ head จะไม่เห็นรอยบาก */
.cblk{ position:relative; background:transparent; }

.cblk__head{
  position:relative;
  background:var(--blk-c,#e8467e);
  display:flex; align-items:center; gap:var(--blk-gap);
  min-height:var(--blk-h); padding:var(--blk-py) var(--blk-px);
  color:#fff; font-family:var(--font-code); font-weight:700; font-size:var(--blk-fs);
  cursor:grab; user-select:none;
  clip-path:polygon(
    0 0,
    var(--notch-x) 0,
    calc(var(--notch-x) + 6px) var(--notch-h),
    calc(var(--notch-x) + var(--notch-w) - 6px) var(--notch-h),
    calc(var(--notch-x) + var(--notch-w)) 0,
    100% 0, 100% 100%, 0 100%
  );
}
.cblk__head::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:rgba(255,255,255,.32); pointer-events:none;
}

/* แขนซ้ายของตัว C */
.cblk__arm{ background:var(--blk-c,#e8467e); }

/* โพรงด้านใน: เว้นแขนซ้ายไว้ให้เห็นสีบล็อก */
.cblk__body{
  margin-left:var(--arm);
  min-height:calc(var(--blk-h) - 6px);
  padding:calc(var(--notch-h) + 4px) 8px 5px 8px;
  background:var(--ws-bg);
  border-radius:0 10px 10px 0;
  box-shadow:inset 3px 0 6px rgba(0,0,0,.10);
  position:relative;
}
/* ติ่งเล็กในโพรง เพื่อบอกว่าต่อบล็อกตรงนี้ได้ */
.cblk__body::before{
  content:""; position:absolute; top:0; left:calc(var(--notch-x) - var(--arm) + 6px);
  width:calc(var(--notch-w) - 12px); height:var(--notch-h);
  background:var(--blk-c); border-radius:0 0 6px 6px;
}
.cblk__body:empty::after{
  content:"วางบล็อกที่นี่";
  display:block; text-align:center; padding:5px 0;
  font-size:12px; font-weight:700; color:#9d92bb; letter-spacing:.3px;
}

.cblk__foot{
  background:var(--blk-c,#e8467e);
  height:calc(var(--blk-h) * .5 + var(--notch-h));
  padding-bottom:var(--notch-h);
  clip-path:polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch-h)),
    calc(var(--notch-x) + var(--notch-w)) calc(100% - var(--notch-h)),
    calc(var(--notch-x) + var(--notch-w) - 6px) 100%,
    calc(var(--notch-x) + 6px) 100%,
    var(--notch-x) calc(100% - var(--notch-h)),
    0 calc(100% - var(--notch-h))
  );
}

/* ---------- Hat block: when run ---------- */
.hat{
  position:relative;
  display:flex; align-items:center; gap:var(--blk-gap);
  background:var(--cat-event);
  color:#4a2f00;
  font-family:var(--font-code); font-weight:900; font-size:calc(var(--blk-fs) + 1.5px);
  padding:calc(var(--blk-py) + 8px) 22px calc(var(--blk-py) + var(--notch-h)) 20px;
  border-radius:28px 28px 4px 4px;
  filter:drop-shadow(0 3px 0 var(--cat-event-d)) drop-shadow(0 6px 10px rgba(40,18,80,.2));
  clip-path:polygon(
    0 22px,
    /* ส่วนโค้งหมวกจำลองด้วยหลายจุด */
    5px 12px, 16px 5px, 30px 2px, 46px 0,
    100% 0, 100% calc(100% - var(--notch-h)),
    calc(var(--notch-x) + var(--notch-w)) calc(100% - var(--notch-h)),
    calc(var(--notch-x) + var(--notch-w) - 6px) 100%,
    calc(var(--notch-x) + 6px) 100%,
    var(--notch-x) calc(100% - var(--notch-h)),
    0 calc(100% - var(--notch-h))
  );
  cursor:default;
}

/* ---------- Toolbox ---------- */
.toolbox{
  padding:12px 12px 24px;
  overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(180deg,#fbf9ff,#f3edfd);
  /* บล็อกใน toolbox เป็นแค่ "ตัวอย่างให้ลาก" จึงบีบขอบซ้าย-ขวาให้พอดีคอลัมน์
     ⚠️ ต้องคุมด้วยตัวแปร ห้ามเขียน padding ทับ เพราะ .blk ใช้ padding แบบ
     shorthand ที่มี var(--notch-h) อยู่ — เขียนทับแล้วติ่งจิ๊กซอว์จะหายไป */
  --blk-px:12px;
  --blk-fs:14.5px;
  --blk-icon:15.5px;
}
.toolbox .blk__label{ white-space:normal; }
.toolbox .blk__label--bi{ flex-wrap:wrap; gap:0 5px; }
.toolbox .blk-input{ min-width:36px; padding:3px 7px; }
.toolbox .cblk__body{ min-height:22px; padding:calc(var(--notch-h) + 3px) 7px 4px; }
.toolbox .cblk__body:empty::after{ content:""; padding:0; }
.toolbox .cblk__foot{ height:calc(var(--blk-h) * .4 + var(--notch-h)); }
.tb-group{ margin-bottom:13px; }
.tb-group__title{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 6px 2px;
}
.tb-group__dot{ width:10px; height:10px; border-radius:50%; background:var(--dot,#ccc); }

.toolbox .blk-wrap + .blk-wrap{ margin-top:6px; }   /* ใน toolbox ไม่ต้องต่อกัน */
.toolbox .blk-wrap[data-locked="1"]{ opacity:.34; pointer-events:none; filter:grayscale(.8); }

.tb-count{
  margin-left:auto; font-size:11.5px; font-weight:900;
  background:rgba(0,0,0,.22); color:#fff; padding:2px 8px; border-radius:999px;
}

/* ---------- Workspace ---------- */
.workspace{
  position:relative;
  overflow:auto;
  padding:14px 14px 120px;
  background:
    radial-gradient(circle at 1px 1px, rgba(90,60,150,.16) 1px, transparent 0) 0 0/22px 22px,
    var(--ws-bg);
}
.script-body{ min-height:56px; padding-top:2px; }
.script-body:empty::after{
  content:"⬅ ลากบล็อกคำสั่งมาต่อตรงนี้";
  display:block; padding:12px 4px; font-size:13.5px; font-weight:800; color:#9385b8;
}

/* ---------- บล็อกลอย (orphan) — ไม่ได้ต่อกับ 🏁 when run ----------
   วางเป็น position:absolute ลูกโดยตรงของ .workspace (ซึ่ง position:relative + overflow:auto)
   → เลื่อนจอแล้วบล็อกลอยเลื่อนตามเนื้อหาเอง ไม่ต้องคำนวณ scroll ซ้ำตอนวาด
   ⚠️ ใช้ opacity/filter เป็นค่าคงที่ ไม่ใช่ keyframes — ถ้าเป็นแอนิเมชัน
      แท็บที่ถูกซ่อนจะหยุดเดินแล้วค้างที่เฟรมแรก (กฎเหล็กใน CLAUDE.md) */
.orphan-stack{
  position:absolute;
  opacity:.62;
  filter:grayscale(.85);
  z-index:1;
}
.orphan-stack .blk,
.orphan-stack .cblk__head{ cursor:grab; }

/* ---------- สถานะระหว่างรัน ----------
   นีออนเหลือง-ส้ม ขอบหนา + pulse ด้วย box-shadow อย่างเดียว
   ห้ามใส่ opacity ใน keyframes (แท็บถูกซ่อนแล้วแอนิเมชันค้าง กล่องจะบังจอ) */
.blk-wrap.running > .blk,
.blk-wrap.running > .cblk > .cblk__head{
  box-shadow:inset 0 0 0 4px #ffe566, 0 0 0 3px #ff8a00, 0 0 16px 3px rgba(255,140,0,.95);
  animation:blkRunGlow .7s ease-in-out infinite;
}
.blk-wrap.running{
  filter:drop-shadow(0 0 16px #ff9a1a) drop-shadow(0 0 6px #ffe566);
  z-index:2;
}
@keyframes blkRunGlow{
  0%,100%{ box-shadow:inset 0 0 0 4px #ffe566, 0 0 0 3px #ff8a00, 0 0 16px 3px rgba(255,140,0,.95); }
  50%{ box-shadow:inset 0 0 0 5px #fff8b0, 0 0 0 5px #ff6a00, 0 0 28px 7px rgba(255,100,0,1); }
}
@media (prefers-reduced-motion:reduce){
  .blk-wrap.running > .blk,
  .blk-wrap.running > .cblk > .cblk__head{ animation:none; }
}
.blk-wrap.err > .blk{ animation:shake .38s ease; }

/* ระหว่างรัน/รอครู — บล็อกลอยต้องจางกว่าสคริปต์หลักที่กำลังทำงานอยู่ */
.ws-readonly .orphan-stack{ opacity:.4; }

/* ---------- ลากวาง ---------- */
/* .drag-ghost เป็น "กล่องห่อ" เสมอ (แม้ลากบล็อกเดียว) เพราะตั้งแต่ v1.25.0
   การลากจะพาบล็อกที่ต่ออยู่ข้างใต้มาด้วยทั้งชุด → ghost มีได้หลายบล็อก
   ต้องมีคลาส blocks-root ติดไปด้วย ไม่งั้นตัวแปร --notch-* หาไม่เจอ
   (ghost แปะที่ document.body ซึ่งอยู่นอก .blocks-root) แล้วรอยบากจะหายทั้งชุด */
.drag-ghost{
  position:fixed; z-index:90; pointer-events:none;
  opacity:.92; transform-origin:20px 20px;
  transform:rotate(-2.5deg) scale(1.04);
  filter:drop-shadow(0 10px 18px rgba(35,18,70,.42));
}
.drop-line{
  position:fixed; z-index:70; pointer-events:none;
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-400),#fff5d6,var(--gold-400));
  box-shadow:0 0 14px 3px rgba(255,201,77,.9);
  transition:top .07s ease, left .07s ease, width .07s ease;
}
.trash-hot{
  outline:4px dashed #e0413f; outline-offset:-8px;
  background:linear-gradient(180deg,#ffecec,#ffdede) !important;
}
body.dragging{ cursor:grabbing; }
body.dragging *{ cursor:grabbing !important; }