/* ═══════════════════════════════════════════════════════
   JM Digital Lab — Block Engine (Scratch 3 style)
   Used by: logic, loop, ifgate
═══════════════════════════════════════════════════════ */

/* ── Scratch 3 category colours ── */
:root {
  --blk-motion:    #4C97FF;
  --blk-motion-d:  #3373CC;
  --blk-control:   #FFAB19;
  --blk-control-d: #CF8B17;
  --blk-logic:     #9966FF;
  --blk-logic-d:   #7A52CC;
}

/* ── Panel layout ─────────────────────────────────────── */
.blocks-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.blocks-palette {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 8px 10px 10px;
}
.palette-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 7px;
}
.palette-row { display: flex; flex-wrap: wrap; gap: 6px; }

.blocks-workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px 24px;
  scrollbar-width: none;
}
.blocks-workspace::-webkit-scrollbar { display: none; }

.ws-empty {
  text-align: center;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  opacity: 0.4;
  padding: 8px 0 4px;
  pointer-events: none;
  user-select: none;
}

/* ── Block base ───────────────────────────────────────── */
.blk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  cursor: grab;
  user-select: none;
  touch-action: none;
  white-space: nowrap;
  position: relative;
}
.blk:active { cursor: grabbing; }
.blk .blk-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }

/* Palette block */
.blk-palette {
  padding: 7px 12px;
  font-size: 0.83rem;
  box-shadow: 0 3px 0 rgba(0,0,0,0.28);
}
.blk-palette:hover  { filter: brightness(1.12); }
.blk-palette:active { filter: brightness(0.9); transform: scale(0.95); }

/* ── Workspace block ──────────────────────────────────── */
.blk-ws {
  display: flex;
  width: 100%;
  /* padding-top 14px = 8px slot area + 6px space before content */
  padding: 14px 10px 8px 14px;
  margin-bottom: 8px; /* equals bump height — bump fills this gap exactly */
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.28);
}

/* Slot (notch) at top — dark inset where previous block's bump connects */
.blk-ws::before {
  content: '';
  position: absolute;
  top: 0; left: 12px;
  width: 24px; height: 8px;
  background: rgba(0,0,0,0.28);
  border-radius: 0 0 5px 5px;
  pointer-events: none;
  z-index: 1;
}

/* Bump (tab) at bottom — coloured tab connects to next block's slot */
.blk-ws::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 12px;
  width: 24px; height: 8px;
  background: inherit;   /* inherits category colour from .blk-motion/control/logic */
  border-radius: 0 0 5px 5px;
  pointer-events: none;
  z-index: 2;
}

/* Execution highlight */
.blk-ws.exec, .blk-c-head.exec {
  outline: 3px solid #ffd60a;
  outline-offset: 1px;
  filter: brightness(1.35);
}

/* Source block while dragging */
.blk-ws.is-src, .blk-c.is-src { opacity: 0.18; }

/* ── Category background colours ─────────────────────── */
.blk-motion  { background: var(--blk-motion); }
.blk-control { background: var(--blk-control); }
.blk-logic   { background: var(--blk-logic); }

/* ── Delete button ───────────────────────────────────── */
.blk-del {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.blk-del:hover { background: rgba(220,50,40,0.75); color: #fff; }

/* ── C-block (REPEAT / IF) ───────────────────────────── */
.blk-c { margin-bottom: 8px; position: relative; } /* position needed for z-index stacking */

/* Header */
.blk-c-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 8px 14px;
  border-radius: 4px 4px 0 0;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  cursor: grab;
  user-select: none;
  touch-action: none;
  position: relative;
  box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}
.blk-c-head:active { cursor: grabbing; }

/* Slot at top of C-header */
.blk-c-head::before {
  content: '';
  position: absolute;
  top: 0; left: 12px;
  width: 24px; height: 8px;
  background: rgba(0,0,0,0.28);
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}
.blk-c-head .blk-icon { font-size: 1.05rem; flex-shrink: 0; }

/* Repeat count buttons */
.blk-c-opts { display: flex; gap: 3px; margin-left: 4px; }
.blk-c-opt {
  width: 24px; height: 22px;
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.blk-c-opt.sel {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.65);
  color: #fff;
}
.blk-c-opt:hover:not(.sel) { background: rgba(255,255,255,0.12); }

/* Condition chip buttons (IF) */
.blk-c-cond { display: flex; gap: 4px; margin-left: 4px; }
.blk-cond-opt {
  height: 22px; padding: 0 8px;
  border-radius: 11px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.65);
  font-family: 'Kanit', sans-serif;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.blk-cond-opt.sel {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Body (inner drop area) — left arm shows category colour */
.blk-c-body {
  min-height: 44px;
  padding: 10px 6px 6px 10px;
  background: rgba(0,0,0,0.14);
  border-left: 10px solid var(--blk-control-d);
  position: relative;
  transition: background 0.1s;
}
.blk-c-body.blk-motion  { border-left-color: var(--blk-motion-d); }
.blk-c-body.blk-control { border-left-color: var(--blk-control-d); }
.blk-c-body.blk-logic   { border-left-color: var(--blk-logic-d); }
.blk-c-body.drop-active  { background: rgba(0,212,170,0.12); }

/* Inner slot at top of body */
.blk-c-body::before {
  content: '';
  position: absolute;
  top: 0; left: 18px;
  width: 24px; height: 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}

/* ELSE body */
.blk-c-body2 {
  min-height: 44px;
  padding: 10px 6px 6px 10px;
  background: rgba(0,0,0,0.09);
  border-left: 10px solid rgba(122,82,204,0.55);
  position: relative;
  transition: background 0.1s;
}
.blk-c-body2.drop-active { background: rgba(0,212,170,0.1); }
.blk-c-body2::before {
  content: '';
  position: absolute;
  top: 0; left: 18px;
  width: 24px; height: 8px;
  background: rgba(0,0,0,0.18);
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}

/* Else divider */
.blk-c-else-label {
  display: flex;
  align-items: center;
}
.blk-c-else-label span {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  color: #fff;
  padding: 5px 14px;
}
.blk-c-else-label.blk-logic   { background: var(--blk-logic); }
.blk-c-else-label.blk-control { background: var(--blk-control); }

/* Footer cap */
.blk-c-foot {
  height: 16px;
  border-radius: 0 0 4px 4px;
  position: relative;
  box-shadow: 0 3px 0 rgba(0,0,0,0.22);
}
.blk-c-foot.blk-motion  { background: var(--blk-motion); }
.blk-c-foot.blk-control { background: var(--blk-control); }
.blk-c-foot.blk-logic   { background: var(--blk-logic); }

/* Bump at bottom of footer (same as .blk-ws::after) */
.blk-c-foot::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 12px;
  width: 24px; height: 8px;
  background: inherit;
  border-radius: 0 0 5px 5px;
  pointer-events: none;
  z-index: 2;
}

/* ── Workspace: Scratch-style bump/slot connection ────────────────────── */
/* Key: blocks must have z-index:auto (no per-block stacking context).
   ::after bump (z-index:2) and ::before slot (z-index:1) then compete in
   the shared parent context — bumps render above slots, slots above bodies.
   Slot is 2px wider each side than bump so dark slot "frames" the bump.
   margin-bottom:0 so bump overlaps into the next block's slot area. */
.blocks-workspace .blk-ws { margin-bottom: 0; }
.blocks-workspace .blk-c  { margin-bottom: 0; }
/* Widen slot 2px on each side to frame the bump */
.blocks-workspace .blk-ws::before     { left: 10px; width: 28px; }
.blocks-workspace .blk-c-head::before { left: 10px; width: 28px; }
.blk-c-head { box-shadow: none; }
.blk-c-body::before, .blk-c-body2::before { display: none; }
/* Hide dangling bump on the last block in any list */
.blk-last::after,
.blk-last .blk-c-foot::after { display: none; }

/* ── Drop gap ─────────────────────────────────────────── */
.drop-gap {
  height: 0;
  border-radius: 3px;
  margin: 0;
  transition: height 0.12s, background 0.12s, border-color 0.12s;
  position: relative;
}
.drop-gap.hovering {
  height: 20px;
  background: rgba(0,212,170,0.15);
  border: 1.5px dashed rgba(0,212,170,0.7);
}
.drop-gap.hovering::after {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #00d4aa;
}

/* ── Ghost (follows cursor during drag) ──────────────── */
.blk-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.92;
  transform: rotate(2deg) scale(1.06);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 480px) {
  .blk, .blk-c-head           { font-size: 0.76rem; gap: 5px; }
  .blk .blk-icon,
  .blk-c-head .blk-icon       { font-size: 0.9rem; }
  .blocks-palette             { padding: 5px 8px 7px; }
  .blk-palette                { padding: 4px 7px; font-size: 0.72rem; }
  .palette-row                { gap: 4px; }
  .blk-ws                     { padding: 11px 8px 7px 10px; }
  .blk-c-head                 { padding: 11px 8px 6px 10px; }
  .blk-c-opts                 { gap: 2px; margin-left: 2px; }
  .blk-c-opt                  { width: 19px; height: 18px; font-size: 0.62rem; }
  .blk-c-cond                 { gap: 3px; margin-left: 3px; }
  .blk-cond-opt               { height: 19px; padding: 0 5px; font-size: 0.67rem; }
  .blk-del                    { width: 18px; height: 18px; font-size: 0.58rem; }
  .blk-c-body,
  .blk-c-body2                { min-height: 34px; padding: 8px 4px 4px 8px; border-left-width: 8px; }
}

/* ── Mobile touch fix + C-block header wrap ──────────────── */
@media (max-width: 560px) {
  .blocks-palette   { touch-action: none; }
  .blocks-workspace { touch-action: none; }

  /* C-block header: [icon + label + ✕] row 1, [opts/cond] row 2 */
  .blk-c-head           { flex-wrap: wrap; row-gap: 4px; }
  .blk-c-head .blk-del  { order: 2; }
  .blk-c-opts,
  .blk-c-cond           { order: 3; width: 100%; margin: 0; }
}