body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
    margin: 0; /* Remove default margin */
    background-color: #f8f9fa;
    overflow: hidden; /* Prevent scrolling on the body itself */
}

/* Style for copyright notice at the top of the app */
.app-copyright {
    font-size: 0.75em;
    color: #adb5bd; /* Light gray */
    text-align: center;
    padding: 5px 0;
    margin-bottom: 10px; /* Space below copyright */
}


/* Add padding back to main content areas, excluding the canvas container */
h1, .controls, .message-area, .properties-area, .step-controls {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px); /* Adjust width considering padding */
    box-sizing: border-box; /* Include padding in width calculation */
}
h1 {
    margin-top: 20px; /* Add top margin back */
    text-align: center; /* Center heading */
}
.controls, .message-area, .properties-area, .step-controls {
    max-width: 900px; /* Optional: Limit width of controls etc. */
    align-self: center; /* Center these elements */
}

h1 {
    color: #343a40;
}

/* New container for all control groups */
.controls-container {
    display: flex;
    flex-wrap: wrap; /* Allow groups to wrap on smaller screens */
    justify-content: center; /* Center groups horizontally */
    gap: 15px; /* Space between groups */
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 8px;
    max-width: 950px; /* Adjust max-width if needed */
    align-self: center;
}

/* Styling for individual control groups */
.control-group {
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px 15px;
    background-color: #f8f9fa; /* Slightly different background for groups */
    text-align: center;
    min-width: 200px; /* Give groups a minimum width */
    flex: 1; /* Allow groups to grow */
}

.control-group h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

/* Adjust spacing and alignment within groups */
.control-group > div {
    margin-bottom: 10px; /* Increased space between rows */
    display: flex; /* Use flex for alignment */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center items */
    align-items: center; /* Align items vertically */
    gap: 8px; /* Space between items in a row */
}
.control-group > div:last-child {
    margin-bottom: 0;
}


/* Style for Tree Type Selector (remains mostly the same) */
.tree-type-selector {
    margin-bottom: 10px;
    display: inline-block; /* Keep elements together */
    text-align: left; /* Align labels left */
}
.tree-type-selector label {
    margin: 0 10px 0 5px;
    font-weight: normal;
    cursor: pointer;
}
.tree-type-selector input[type="radio"] {
    cursor: pointer;
    vertical-align: middle; /* Align radio button with label text */
}
.tree-type-selector > label:first-of-type { /* The main "Tree Type:" label */
    font-weight: bold;
    margin-left: 0;
}

/* Ensure consistent margins for inputs/buttons within groups */
.control-group input[type="number"],
.control-group input[type="text"],
.control-group button,
.control-group select {
    margin: 3px; /* Add small margin around all controls */
}


.controls input[type="number"] { /* Keep specific input styling */
    padding: 8px;
    /* margin-right: 5px; Use gap now */
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Style text input like number input */
.controls input[type="text"] { /* Keep specific input styling */
    padding: 8px;
    /* margin-right: 5px; Use gap now */
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 120px; /* Give it some base width */
}

.controls button { /* Keep general button styling */
    padding: 8px 12px;
    /* margin-left: 5px; Use gap now */
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.controls button:hover {
    background-color: #0056b3;
}

.controls button#deleteBtn {
    background-color: #dc3545;
}
.controls button#deleteBtn:hover {
    background-color: #c82333;
}
/* Updated selector for the clear button */
.controls button#clearTreeBtn {
    background-color: #6c757d;
}
.controls button#clearTreeBtn:hover {
    background-color: #5a6268;
}

/* Style for the new speed control */
.controls label[for="speedControl"] {
    margin-left: 15px; /* Add some space before the label */
    font-weight: bold;
    color: #495057;
}

.controls select#speedControl { /* Keep specific select styling */
    padding: 6px 8px;
    /* margin-left: 5px; Use gap now */
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

/* Remove HR styling as they are no longer used */
/*
.controls hr {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid #ced4da;
}
*/

.message-area {
    margin-bottom: 15px;
    min-height: 1.5em; /* Reserve space for messages */
    color: #495057;
}

/* Styling for the new properties display */
.properties-area {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f1f3f5; /* Slightly different background */
    border: 1px solid #dee2e6;
    border-radius: 5px;
    min-width: 200px; /* Give it some width */
    text-align: left;
}
.properties-area h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #495057;
    border-bottom: 1px solid #ced4da;
    padding-bottom: 5px;
}
.properties-area p {
    margin: 5px 0;
    font-size: 0.9em;
}
.properties-area span {
    font-weight: bold;
    color: #0056b3;
}

/* Styling for Step Controls */
.step-controls {
    margin-bottom: 15px;
    padding: 8px;
    background-color: #d1ecf1; /* Light cyan background */
    border: 1px solid #bee5eb;
    border-radius: 5px;
    display: flex; /* Use flexbox for layout */
    gap: 10px; /* Space between buttons */
    justify-content: center; /* Center buttons */
}
.step-controls button {
    padding: 6px 10px;
    font-size: 0.9em;
    background-color: #17a2b8; /* Teal color */
}
.step-controls button:hover {
    background-color: #138496;
}
.step-controls button#stepCancelBtn {
    background-color: #ffc107; /* Warning yellow */
    color: #343a40;
}
.step-controls button#stepCancelBtn:hover {
     background-color: #e0a800;
}


.canvas-container {
    position: relative; /* Needed for absolute positioning of children */
    border: 1px solid #dee2e6;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-grow: 1; /* Allow container to grow vertically */
    width: 100%; /* Span full width */
    margin-top: 15px; /* Add some space above the canvas */
    /* height: 550px; /* Remove fixed height */
    overflow: hidden; /* Prevent scrollbars within the container */
    box-sizing: border-box; /* Include border/padding in height */
    display: flex; /* Use flex to help canvas fill space */
}

/* New styles for the view controls container */
.view-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(248, 249, 250, 0.85); /* Light background, slightly transparent */
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column; /* Stack controls vertically */
    align-items: flex-end; /* Align items to the right */
    gap: 8px; /* Space between button and zoom control */
    z-index: 10; /* Ensure it's above the canvas drawing */
}

/* Style the reset button within the view controls */
.view-controls #resetViewBtn {
    padding: 6px 12px; /* Slightly larger padding */
    font-size: 0.9em;
    background-color: #17a2b8; /* Teal color, similar to step controls */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.view-controls #resetViewBtn:hover {
    background-color: #138496; /* Darker teal on hover */
}

/* Adjust zoom control styles now that it's inside view-controls */
.view-controls #zoom-control {
    display: flex;
    align-items: center;
    gap: 5px; /* Smaller gap for zoom elements */
}

.view-controls #zoom-control label {
    font-weight: normal; /* Less prominent label */
    font-size: 0.85em;
    color: #333;
}
.view-controls #zoom-control input[type="range"] {
    width: 80px; /* Slightly smaller slider */
}
.view-controls #zoom-control span {
    font-size: 0.85em;
    min-width: 30px;
    text-align: right;
    color: #333;
}

/* New style for copyright inside canvas */
#canvas-copyright {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.75em;
    color: #adb5bd; /* Light gray color */
    z-index: 10; /* Ensure it's above canvas drawing but below controls */
    background-color: rgba(255, 255, 255, 0.7); /* Slight white background */
    padding: 2px 4px;
    border-radius: 3px;
}


#bstCanvas {
    display: block;
    width: 100%; /* Make canvas fill container width */
    height: 100%; /* Make canvas fill container height */
}

/* Basic node styling (drawn on canvas, but can add related styles here if needed) */

/* Footer Styling */
.copyright-footer {
    margin-top: 20px; /* Space above the footer */
    padding: 10px 0;
    text-align: center;
    font-size: 0.8em;
    color: #6c757d; /* Gray color */
    width: 100%;
    /* Optional: Add a border top */
    /* border-top: 1px solid #dee2e6; */
}

/* Removed Fixed Zoom Control Styling as it's now part of .view-controls */