/**
 * Block Styling System (Scratch 3.0 Compatible)
 * Visual puzzle shapes, notches, tabs, C-mouths, and color palettes.
 */

.block-element {
  position: absolute;
  color: white;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  touch-action: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: filter 0.15s, box-shadow 0.15s;
  z-index: 10;
}

/* Palette items in toolbox must NOT be absolute, and must flow sequentially */
.block-element.is-palette,
.toolbox-block-item .block-element {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: inline-block !important;
  margin: 4px 0 10px 0 !important;
  z-index: 1;
}

.block-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  background-color: #22c55e;
  border: 1.5px solid white;
  border-radius: 50%;
  color: white;
  font-size: 0.65rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  margin: 0 2px;
  vertical-align: middle;
}

.block-element:active {
  cursor: grabbing;
}

.block-element.block-dragging {
  z-index: 1000 !important;
  opacity: 0.95;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

/* Active Execution Glow / Aura (Scratch 3.0 Compatible, Zero Layout Shift) */
@keyframes blockExecutingPulse {
  0% {
    box-shadow: 0 0 0 3px #ffe600, 0 0 16px 4px rgba(255, 230, 0, 0.9), inset 0 0 6px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px #fff266, 0 0 26px 8px rgba(255, 230, 0, 1), inset 0 0 10px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 0 3px #ffe600, 0 0 16px 4px rgba(255, 230, 0, 0.9), inset 0 0 6px rgba(255, 255, 255, 0.5);
  }
}

.block-element.block-executing {
  z-index: 999 !important;
}

.block-element.block-executing > .block-body,
.block-element.block-executing > .block-hat-top,
.block-element.block-executing > .block-c-divider-body,
.block-element.block-executing > .block-c-bottom-bar {
  border-color: #ffffff !important;
  animation: blockExecutingPulse 0.9s infinite ease-in-out !important;
  filter: brightness(1.15) !important;
}

.block-element.block-executing > .block-notch-top {
  background-color: #ffe600 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 8px #ffe600 !important;
}

/* Body Shape */
.block-body {
  background-color: var(--block-color);
  border: 1px solid var(--block-border);
  padding: 7px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Hat Blocks (Events) */
.block-hat > .block-hat-top {
  width: 86px;
  height: 14px;
  background-color: var(--block-color);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border: 1px solid var(--block-border);
  border-bottom: none;
  margin-bottom: -1px;
}

.block-hat > .block-body {
  border-top-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Standard Top Notch (Protruding tab) */
.block-notch-top {
  position: absolute;
  top: -4px;
  left: 16px;
  width: 16px;
  height: 5px;
  background-color: var(--block-color);
  border-top: 1px solid var(--block-border);
  border-left: 1px solid var(--block-border);
  border-right: 1px solid var(--block-border);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 2;
}

/* Bottom Indentation (Matching puzzle socket cutout) */
.block-indent-bottom {
  position: absolute;
  bottom: 0px;
  left: 16px;
  width: 16px;
  height: 5px;
  background-color: #ffffff;
  border-top: 1px solid var(--block-border);
  border-left: 1px solid var(--block-border);
  border-right: 1px solid var(--block-border);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 2;
}

.is-palette .block-indent-bottom {
  background-color: #f8fafc;
}

.block-element.has-next > .block-indent-bottom {
  display: none;
}

/* C-Block Loops & Conditionals (Repeat, Forever, If, If-Else) */
.block-c_block,
.block-c_block_else {
  display: flex;
  flex-direction: column;
}

.block-c_block > .block-body,
.block-c_block_else > .block-body:first-child {
  border-bottom-left-radius: 0;
}

.block-c-divider-body {
  border-radius: 0 !important;
  padding: 3px 12px !important;
  font-weight: 700;
  min-height: 22px;
  align-self: flex-start;
  margin-left: 0;
  border-left: 1px solid var(--block-border);
  border-right: 1px solid var(--block-border);
  z-index: 2;
}

.block-c-mouth-else {
  margin-top: 0;
}

.block-key-custom-input {
  width: 38px !important;
  text-align: center;
  font-weight: bold;
  text-transform: lowercase;
}

.block-c-mouth {
  min-height: 28px;
  margin-left: 16px;
  border-left: 12px solid var(--block-color);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.block-c-inner-slot {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 24px;
}

.block-c-bottom-bar {
  width: 60px;
  height: 12px;
  background-color: var(--block-color);
  border-bottom: 1px solid var(--block-border);
  border-right: 1px solid var(--block-border);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-bottom: 4px;
}

/* Repeat forever is terminal - clean flat bottom bar, cannot connect below */
[data-type="repeat_forever"] > .block-c-bottom-bar {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0;
}

/* Stacked sub-blocks: relative flow, seamless notch alignment */
.block-element .block-element {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin-top: -1px;
  filter: none !important;
}

/* Ensure C-mouth inner slot stacks its children vertically */
.block-c-inner-slot > .block-element {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin-top: 0 !important;
}
.block-c-inner-slot > .block-element + .block-element {
  margin-top: -1px !important;
}

/* C-mouth open state during drag hover */
.block-c-mouth.mouth-hover-active {
  min-height: 54px !important;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

/* Embedded Block Inputs (White pills) & Reporter Sockets */
.block-arg-wrapper,
.block-arg-socket {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  margin: 0 2px;
}

.block-arg-socket.socket-snap-target {
  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 3px #38bdf8, 0 0 14px #0284c7 !important;
  border-radius: 14px !important;
  animation: socketPulse 0.7s infinite alternate;
}

@keyframes socketPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Reporter blocks (Pill / Oval shape) */
.block-element.block-reporter > .block-body {
  border-radius: 16px !important;
  padding: 5px 12px;
}

/* Embedded reporter block inside an argument socket */
.block-arg-socket > .block-element.block-reporter {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)) !important;
}

.block-arg-socket > .block-element.block-reporter > .block-body {
  padding: 2px 10px !important;
  font-size: 0.74rem !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3);
}

.block-input {
  background: white;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
  transition: all 0.15s;
}

.block-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}

.block-number {
  width: 52px;
  text-align: center;
}

.block-text {
  min-width: 75px;
}

.block-select {
  padding-right: 14px;
}

.block-color-select {
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

.block-message-custom-input {
  width: 70px !important;
  text-align: center;
  font-weight: bold;
}

.block-label-text {
  padding: 0 1px;
}

/* Workspace Context Menu (Duplicate / Delete) */
.wedo-context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 4px;
  z-index: 10000;
  min-width: 155px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}

.wedo-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.wedo-context-menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.wedo-context-menu-item.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.wedo-context-menu-item .item-icon {
  font-size: 0.95rem;
}