body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    display: flex;
    width: 95%;
    max-width: 1200px;
    height: 80vh;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.palette, .workspace, .output {
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #eee;
}

.palette {
    width: 200px;
    background-color: #eef;
    flex-shrink: 0;
    flex-basis: 200px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.palette h4 {
    margin: 0 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #ccc;
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
}

.block {
    color: white;
    padding: 10px;
    border-radius: 4px;
    cursor: grab;
    user-select: none;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    min-height: 30px;
    margin-bottom: 0;
}

.block:hover {
    opacity: 0.9;
}

.palette > .category-section > .block {
    margin-bottom: 0;
}

.palette .category-section .block[data-type="turn_counter_clockwise"] + .block[data-type="go_to_random"] {
    margin-top: 20px;
}

.category-section > .block {
    width: fit-content;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
}

.workspace .block {
    cursor: move;
    margin-bottom: 0;
    width: calc(100% - 10px);
    box-sizing: border-box;
}

.motion-block {
    background-color: #4a90e2;
}
.workspace .motion-block {
    background-color: #87baf2;
}

.pen-block {
    background-color: #20b2aa;
}
.workspace .pen-block {
    background-color: #66cdaa;
}

.control-block {
    background-color: #ffab19;
}
.workspace .control-block {
    background-color: #ffc14c;
}

.events-block {
    background-color: #ffab19;
}
.workspace .events-block {
    background-color: #ffc14c;
}

.sensing-block {
    background-color: #5cbfe6;
}
.workspace .sensing-block {
    background-color: #8ed1ee;
}

.looks-block {
    background-color: #9966ff;
}
.workspace .looks-block {
    background-color: #b299ff;
}

.sound-block {
    background-color: #cf63cf;
}
.workspace .sound-block {
    background-color: #e088e0;
}

.operators-block {
    background-color: #59c059;
}
.workspace .operators-block {
    background-color: #87d187;
}

.variables-block {
    background-color: #ff8c1a;
}
.workspace .variables-block {
    background-color: #ffaf58;
}

.palette .block[data-type="variable_reporter"],
.workspace .block[data-type="variable_reporter"],
.condition-slot .block[data-type="variable_reporter"] {
    border-radius: 20px;
    padding: 5px 15px;
    width: fit-content;
    max-width: 100%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.workspace .block[data-type="variable_reporter"] {
    box-shadow: none;
}

.reporter-block {
    border-radius: 20px;
    padding: 5px 10px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
}

.operators-block.reporter-block {
    background-color: #59c059;
}

.workspace .operators-block.reporter-block {
    background-color: #87d187;
    box-shadow: none;
}

.reporter-block input[type="number"],
.reporter-block input[type="text"] {
    width: 40px;
    padding: 3px 5px;
    font-size: 0.9em;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

.reporter-block span {
    font-weight: bold;
}

.block.placeholder {
    font-style: italic;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.8);
    justify-content: center;
    cursor: default;
    box-shadow: none;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.1);
}

.block.placeholder[draggable="true"] {
    cursor: default !important;
}

.block[data-type="touching_edge"] {
    border-radius: 0; 
    clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0% 50%);
    padding: 5px 25px;
    width: fit-content;
    box-sizing: border-box;
    background-color: #5cbfe6; 
}

.workspace .block[data-type="touching_edge"] {
    background-color: #8ed1ee; 
}

.condition-slot .block[data-type="touching_edge"] {
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    padding: 5px 25px; 
    background-color: #5cbfe6; 
    margin: 0;
    box-shadow: none;
}

.palette .sensing-block:not([data-type="touching_edge"]) {
    padding: 10px;
    border-radius: 4px;
    clip-path: none;
}

.workspace {
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #eee;
    flex-grow: 1;
    position: relative;
}

.workspace > .block:not(:last-child) {
    margin-bottom: 5px;
}

.workspace > .complex-block:last-child {
    margin-bottom: 0;
}

.nested-area > .block {
    margin-bottom: 5px;
}

.nested-area > .block:last-child {
    margin-bottom: 0;
}

.workspace-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ccc;
    font-size: 1.2em;
    pointer-events: none;
}

.output {
    width: 300px;
    background-color: #eff;
    flex-shrink: 0;
    flex-basis: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-right: none;
}

.stage-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}

#outputCanvas {
    border: 1px solid #ccc;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

#speechBubble {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 0.9em;
    color: #333;
    max-width: 150px;
    word-wrap: break-word;
    bottom: calc(50% + 15px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

#speechBubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.9);
}

#speechBubble.visible {
    opacity: 1;
}

#stageVariableDisplays {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.variable-stage-display {
    background-color: rgba(255, 140, 26, 0.85);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variable-stage-display .var-name {
    font-weight: bold;
    margin-right: 10px;
}

.variable-stage-display .var-value {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

#greenFlagButton {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

#greenFlagButton img {
    height: 30px;
    width: auto;
    vertical-align: middle;
}

#greenFlagButton:hover {
    background-color: #388E3C;
}

#stopButton {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

#stopButton:hover {
    background-color: #d32f2f;
}

#clearCodeButton {
    padding: 10px 20px;
    background-color: #9e9e9e;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

#clearCodeButton:hover {
    background-color: #757575;
}

#trashArea {
    width: 100%;
    padding: 15px;
    background-color: #ffe0e0;
    border: 2px dashed #ff6666;
    border-radius: 8px;
    text-align: center;
    color: #ff3333;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    cursor: default;
    box-sizing: border-box;
}

#trashArea.drag-over {
    background-color: #ffcccc;
    border-color: #ff0000;
}

#trashIcon {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    pointer-events: none;
}

.complex-block .nested-area {
    margin-top: 5px;
    padding: 5px 10px 10px 25px;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    min-height: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.complex-block > span,
.complex-block > .input-slot,
.complex-block > .condition-slot,
.complex-block > select,
.complex-block > input[type="color"],
.complex-block > img {
    vertical-align: top;
}

.condition-slot {
    width: auto;
    min-width: 40px;
    min-height: 22px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    padding: 0px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.condition-slot.drag-over {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: #333;
    border-style: dashed;
}

.block[data-type="greater_than"],
.block[data-type="less_than"],
.block[data-type="equal_to"],
.block[data-type="and"],
.block[data-type="or"],
.block[data-type="not"] {
    border-radius: 0; 
    clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0% 50%);
    padding: 5px 25px; 
    width: fit-content; 
}

.workspace .block[data-type="greater_than"],
.workspace .block[data-type="less_than"],
.workspace .block[data-type="equal_to"],
.workspace .block[data-type="and"],
.workspace .block[data-type="or"],
.workspace .block[data-type="not"] {
    background-color: #87d187; 
    box-shadow: none; 
}

.condition-slot .block[data-type="greater_than"],
.condition-slot .block[data-type="less_than"],
.condition-slot .block[data-type="equal_to"],
.condition-slot .block[data-type="and"],
.condition-slot .block[data-type="or"],
.condition-slot .block[data-type="not"] {
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    padding: 5px 25px; 
    margin: 0; 
    box-shadow: none; 
    background-color: #59c059; 
    width: auto;
    max-width: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    cursor: grab;
    min-height: 18px;
    height: auto;
    line-height: 1.2;
    box-sizing: border-box;
    font-size: 0.9em;
}

.input-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 22px;
    padding: 0 2px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 11px;
    vertical-align: middle;
    margin: 0 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    line-height: 1;
    position: relative;
    flex-shrink: 0;
}

.input-slot > input {
    border: none;
    background-color: transparent;
    padding: 2px 4px;
    min-width: 25px;
    width: 35px;
    max-width: 60px;
    text-align: center;
    border-radius: 9px;
    height: 18px;
    box-sizing: border-box;
    font-size: 0.9em;
    color: #333;
    outline: none;
    line-height: 1.2;
}

.input-slot .block {
    padding: 2px 8px; 
    margin: 0;
    font-size: 0.9em;
    min-height: 18px;
    height: auto;
    line-height: 1.2;
    box-shadow: none;
    cursor: grab;
    display: inline-flex;
    vertical-align: middle;
    box-sizing: border-box;
    flex-shrink: 1;
}

.input-slot .block[data-type="touching_edge"] {
    padding: 5px 15px; 
}

.input-slot.drag-over {
    border: 1px dashed #333;
    background-color: rgba(0, 0, 0, 0.2);
}

#makeVariableButton {
    background-color: #ff8c1a;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 10px;
    align-self: flex-start;
}

#makeVariableButton:hover {
    background-color: #e07b17;
}

#variableDisplayList {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 0.9em;
    color: #555;
}

#variableDisplayList li {
    background-color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 3px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#variableDisplayList .var-name {
    font-weight: bold;
    margin-right: 10px;
}

#variableDisplayList .var-value {
    background-color: #ffaf58;
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.85em;
}

#variableBlocksContainer .block {
    margin-bottom: 10px;
}

.block img {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

.block input[type="number"],
.block input[type="text"] {
    width: auto;
    min-width: 35px;
    max-width: 60px;
    padding: 3px 5px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    flex-shrink: 0;
    text-align: center;
    z-index: 1;
    position: relative;
    line-height: 1.2;
    height: auto;
    vertical-align: middle;
}

.block[data-type="go_to"] input[type="number"] {
    min-width: 30px;
    max-width: 50px;
}

.block select,
.block input[type="color"] {
    vertical-align: middle;
    margin: 0 3px;
}

.block input[type="color"] {
    width: 40px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.reporter-block input[type="number"],
.reporter-block input[type="text"] {
    width: 35px;
    padding: 3px 5px;
    font-size: 0.9em;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

#recordSoundButton {
    background-color: #cf63cf;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 10px;
    align-self: flex-start;
}

#recordSoundButton:hover {
    background-color: #c05cb0;
}

#recordedSoundBlocksContainer .block {
    margin-bottom: 10px;
}

#recordedSoundBlocksContainer:not(:empty) ~ .placeholder[data-type="placeholder_sound"] {
    display: none;
}

.block select {
    padding: 3px 5px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
}

.block[data-type="greater_than"].reporter-block,
.block[data-type="less_than"].reporter-block,
.block[data-type="equal_to"].reporter-block,
.block[data-type="and"].reporter-block,
.block[data-type="or"].reporter-block,
.block[data-type="not"].reporter-block {
     border-radius: 0; 
     padding: 5px 25px; 
}

.condition-slot .block {
    margin: 0;
    width: auto;
    max-width: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    box-shadow: none;
    cursor: grab;
    padding: 2px 8px; 
    min-height: 18px;
    height: auto;
    line-height: 1.2;
    box-sizing: border-box;
    font-size: 0.9em;
}

.condition-slot .block[data-type="greater_than"],
.condition-slot .block[data-type="less_than"],
.condition-slot .block[data-type="equal_to"],
.condition-slot .block[data-type="and"],
.condition-slot .block[data-type="or"],
.condition-slot .block[data-type="not"],
.condition-slot .block[data-type="touching_edge"] {
    padding: 5px 25px; 
}

.condition-slot .block[data-type="variable_reporter"] {
    padding: 2px 8px; 
}