body {
    --top-bar-height: 50px; /* Define a CSS variable for top bar height */
    --panel-gap: 10px; /* Standard gap between panels */
    --admin-panel-min-height: 40px; /* Approx height of admin toggle button */
    --admin-panel-max-height: 250px; /* Approx max height of admin content when open */

    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #eee;
    background-color: #333;
    /* Hide default system cursor to show only our custom cursor */
}

/* New: Classes to control system cursor visibility */
.system-cursor-active {
    cursor: default;
}

.custom-cursor-active {
    cursor: none;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

#ui-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--top-bar-height); /* Set a fixed height for the bar */
    background-color: rgba(0, 0, 0, 0.7); /* Solid background for the bar */
    padding: 0 20px; /* Horizontal padding, vertical padding controlled by height */
    border-radius: 0; /* No rounded corners for a full-width bar */
    z-index: 100;
    display: flex;
    align-items: center; /* Vertically align items in the center */
    gap: 10px;
    box-sizing: border-box; /* Include padding in the height calculation */
}

#ui-panel button,
#editor-panel button,
#admin-panel button,
#toolbox-panel button, /* Added toolbox panel buttons */
#saved-models-panel button { /* Added saved models panel buttons */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
}

#ui-panel button:hover,
#editor-panel button:hover,
#admin-panel button:hover,
#toolbox-panel button:hover, /* Added toolbox panel buttons */
#saved-models-panel button:hover { /* Added saved models panel buttons */
    background-color: #0056b3;
}

#ui-panel button.tool-btn.active,
#ui-panel button.shape-option-btn.active { /* Added active style for shape option buttons */
    background-color: #0056b3; /* Darker blue to indicate active */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.separator {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 5px;
}

#editor-panel {
    position: absolute;
    bottom: var(--panel-gap); /* Moved to bottom */
    right: var(--panel-gap);  /* Moved to right */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 5px;
    z-index: 90;
    width: 200px;
    /* The panel itself is always visible, but its content will be toggled */
}

#editor-panel h3 {
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

#editor-panel label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
}

#editor-panel label.checkbox-label {
    display: flex; /* Use flex to align checkbox and text */
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

#editor-panel input[type="checkbox"] {
    margin-right: 5px;
    width: auto; /* Override default input width */
    margin-bottom: 0; /* Override default input margin */
}

#editor-panel input[type="text"],
#editor-panel input[type="color"],
#editor-panel select,
#admin-passcode-area input[type="password"] { /* Added admin input */
    width: calc(100% - 10px);
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #333;
    color: #eee;
    font-size: 1em;
}

#editor-panel input[type="color"] {
    height: 30px; /* Make color input larger */
    padding: 0; /* Remove padding for color input */
}

#editor-panel button {
    width: 100%;
    margin-top: 10px;
}

#editor-panel input:disabled,
#editor-panel select:disabled,
#editor-panel button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* NEW: Size property input group */
#editor-panel .input-group {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

#editor-panel .input-group label {
    margin-bottom: 0; /* Reset margin for labels within group */
    flex-shrink: 0; /* Prevent labels from shrinking */
}

#editor-panel .input-group input[type="number"] {
    flex-grow: 1; /* Allow inputs to take up available space */
    width: auto; /* Override width: calc(100% - 10px) */
    margin-bottom: 0; /* Reset margin */
    text-align: center;
}

.hidden {
    display: none !important; /* Used for full panel hiding, like the overlay or explorer in play mode */
}

.panel-content-hidden {
    display: none; /* Used for hiding content *within* a panel */
}

#editor-content #multi-selection-message {
    text-align: center;
    font-style: italic;
    color: #aaa;
    margin-top: 20px;
}

#explorer-panel {
    position: absolute;
    top: var(--top-bar-height); /* Starts right below the top bar */
    right: var(--panel-gap); /* Aligned vertically with editor-panel on the right side */
    /* Calculate bottom based on editor-panel's assumed max full height + gap */
    /* Assumed max editor panel height is ~260px (including padding and content) */
    /* 10px from screen bottom + 260px (editor height) + 10px (gap) = 280px */
    bottom: calc(var(--editor-panel-height, 280px) + var(--panel-gap)); /* Editor panel is approx 280px high, accounting for content and padding */
    width: 200px; /* Set a consistent width, same as editor panel */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 5px;
    z-index: 90;
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Make editor content scrollable */
#editor-content {
    max-height: 250px; /* Max height for the editor content to make it scrollable */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 5px; /* Add some padding to prevent scrollbar from overlapping content */
}
/* Style for the scrollbar within editor-content */
#editor-content::-webkit-scrollbar {
    width: 8px; /* width of the entire scrollbar */
}

#editor-content::-webkit-scrollbar-track {
    background: #555; /* color of the tracking area */
    border-radius: 5px;
}

#editor-content::-webkit-scrollbar-thumb {
    background-color: #888; /* color of the scroll thumb */
    border-radius: 5px;
    border: 2px solid #555; /* creates padding around scroll thumb */
}

#editor-content::-webkit-scrollbar-thumb:hover {
    background-color: #bbb; /* color of the scroll thumb on hover */
}

#explorer-panel h3 {
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.explorer-section h4 {
    margin-top: 15px;
    margin-bottom: 8px;
    color: #ccc;
    display: flex; /* Use flexbox for icon alignment */
    align-items: center;
    gap: 5px;
}

/* New: Styles for workspace header with + button */
.workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute items horizontally */
    width: 100%;
}

.workspace-header .explorer-icon {
    margin-right: 0; /* Reset default margin to control spacing with gap */
}

.workspace-header > span { /* For the "Workspace" text */
    flex-grow: 1; /* Allow text to grow and push button to right */
    margin-left: 5px; /* Space after icon */
}

/* Styles for the new add button in explorer */
#workspace-add-dropdown-container {
    position: relative;
    display: inline-block;
    margin-left: auto; /* Push to the right */
}

#workspace-add-btn,
#saved-models-add-btn { /* Apply to saved models add button as well */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0 8px; /* Smaller padding for a plus button */
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em; /* Larger font for plus sign */
    line-height: 1.5; /* Center the plus sign */
    transition: background-color 0.2s;
    height: 24px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
}

#workspace-add-btn:hover,
#saved-models-add-btn:hover { /* Apply to saved models add button as well */
    background-color: #0056b3;
}

/* Explorer List Items */
#workspace-list,
#lighting-list,
.children-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#workspace-list li,
#lighting-list li,
.children-list li {
    display: flex; /* Use flexbox for layout inside list item */
    align-items: center;
    padding: 5px; /* Reduced padding */
    background-color: #333;
    border: 1px solid #555;
    border-radius: 3px;
    margin-bottom: 3px; /* Reduced margin */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#workspace-list li:hover,
#lighting-list li:hover,
.children-list li:hover {
    background-color: #444;
    border-color: #777;
}

#workspace-list li.selected,
#lighting-list li.selected,
.children-list li.selected {
    background-color: #007bff;
    border-color: #0056b3;
    color: white;
}

/* Indent children lists */
.children-list {
    margin-left: 20px; /* Indent children lists */
    border-left: 1px dashed rgba(255, 255, 255, 0.2); /* Visual indicator of hierarchy */
    padding-left: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
}
.children-list li {
    margin-bottom: 2px; /* Closer spacing for children */
}

/* Explorer Icons */
.explorer-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Expand/Collapse Toggle Button */
.expand-toggle {
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.8em;
    padding: 0 5px;
    cursor: pointer;
    flex-shrink: 0;
    width: 20px; /* Fixed width for toggle button */
    text-align: center;
}
.expand-toggle:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Placeholder for non-toggleable items to maintain alignment */
.expand-toggle-placeholder {
    width: 20px; /* Same width as expand-toggle button */
    flex-shrink: 0;
}

.object-name {
    flex-grow: 1; /* Allow name to take available space */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Dropdown specific styles */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-container button#add-part-btn {
    display: flex; /* Allows content inside to align */
    align-items: center;
    gap: 5px; /* Space between text and arrow */
    width: auto; /* Allow button to size to content */
    margin-top: 0; /* Override editor panel button margin */
}

.dropdown-container .arrow-down {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    vertical-align: middle;
}

/* New: arrow-right for nested dropdowns */
.dropdown-container .arrow-right {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg); /* Point right */
    -webkit-transform: rotate(-45deg);
    margin-left: auto; /* Push arrow to the right */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85); /* Darker background for dropdown */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    z-index: 10; /* Above other UI elements */
    top: calc(100% + 5px); /* Position slightly below the button */
    left: 0;
    border-radius: 4px;
    padding: 5px 0;
}

.dropdown-content button {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    width: 100%; /* Make dropdown buttons fill width */
    text-align: left;
    background: none; /* No background by default */
    border: none;
    border-radius: 0; /* No border radius for individual items */
    box-shadow: none; /* Remove shadow */
    margin-top: 0; /* Reset margin from general button style */
    display: flex; /* Use flex for icon/text/arrow alignment */
    align-items: center;
}

.dropdown-content button:hover {
    background-color: #007bff; /* Highlight on hover */
}

.dropdown-container.active > .dropdown-content {
    display: block;
}

/* Styles for nested dropdowns */
.nested-dropdown-container {
    position: relative; /* Essential for positioning nested content */
    display: block; /* Make it take full width of parent dropdown */
}

.nested-dropdown-container > button {
    width: 100%; /* Ensure nested buttons fill parent dropdown width */
}

.nested-dropdown-container .dropdown-content.nested-content {
    position: absolute; /* Position relative to the nested-dropdown-container */
    top: 0; /* Align with the top of the parent nested button */
    left: 100%; /* Appear to the right of the parent nested button */
    margin-left: 5px; /* Small gap between parent and nested dropdown */
    min-width: 120px; /* Smaller width for nested options */
}

.nested-dropdown-container.active > .dropdown-content.nested-content {
    display: block;
}

#custom-cursor {
    position: absolute;
    z-index: 9999; /* Ensure custom cursor is always on top of all other UI elements, including any browser default (though disabled) */
    pointer-events: none; /* Make sure the image doesn't block clicks on elements underneath */
    /* Set default size for the arrow cursor (Cursor.png) */
    width: 96px;
    height: 96px;
}

/* NEW: Marquee selection box styling */
#marquee-box {
    position: absolute;
    border: 2px solid #00f; /* Blue border */
    background-color: rgba(0, 0, 255, 0.1); /* Semi-transparent blue fill */
    pointer-events: none; /* Crucial: ensures clicks pass through to canvas below */
    z-index: 99; /* Below custom cursor, above canvas */
}

/* NEW: Admin Panel Styling */
#admin-panel {
    position: absolute;
    bottom: var(--panel-gap);
    left: var(--panel-gap);
    z-index: 95; /* Below UI panel (100), above editor/explorer (90) */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px; /* Initial padding */
    border-radius: 5px;
    display: flex; /* Use flex to arrange button and content vertically */
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    gap: 5px; /* Space between button and content */
    transition: all 0.3s ease-in-out; /* Smooth transition for size/shape changes */
    width: 200px; /* Fixed width for left column panels */
    max-height: var(--admin-panel-max-height); /* Set max height for open state */
    overflow-y: auto; /* Enable scrolling for admin content */
}

/* Adjust panel padding when content is visible using :has (modern browsers) */
/* Fallback: if :has is not supported, the padding will remain 10px when open */
#admin-panel:has(#admin-content:not(.hidden)) {
    padding: 15px; /* Increased padding when content is visible */
}

/* NEW: Toolbox Panel Styling */
#toolbox-panel {
    position: absolute;
    top: var(--top-bar-height); /* Starts right below the top bar */
    left: var(--panel-gap);
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 5px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    /* This panel fills the space from top bar to the middle, then makes room for Saved Models */
    height: calc( (100vh - var(--top-bar-height) - var(--admin-panel-max-height) - (3 * var(--panel-gap))) / 2 );
    overflow-y: auto; /* Enable scrolling if content overflows */
}

#toolbox-panel h3 {
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Style for basic part buttons inside Toolbox */
#basic-parts-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#basic-parts-list button {
    width: 100%;
    padding: 8px 10px;
    text-align: center;
    border-radius: 4px;
    font-size: 0.95em;
    margin-top: 0; /* Override general button margin */
}

/* NEW: Saved Models Panel Styling */
#saved-models-panel {
    position: absolute;
    left: var(--panel-gap);
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 5px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    /* This panel fills the space from the middle to just above the admin panel */
    top: calc(var(--top-bar-height) + ((100vh - var(--top-bar-height) - var(--admin-panel-max-height) - (3 * var(--panel-gap))) / 2) + var(--panel-gap));
    height: calc( (100vh - var(--top-bar-height) - var(--admin-panel-max-height) - (3 * var(--panel-gap))) / 2 );
    overflow-y: auto; /* Enable scrolling if content overflows */
}

#saved-models-panel h3 {
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* New: Saved Models header with + button */
.saved-models-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute items horizontally */
    width: 100%;
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

#saved-models-add-dropdown-container {
    position: relative;
    display: inline-block;
    margin-left: auto; /* Push to the right */
}

#saved-models-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allow list to take up available height */
}

#saved-models-list::-webkit-scrollbar {
    width: 8px; /* width of the entire scrollbar */
}

#saved-models-list::-webkit-scrollbar-track {
    background: #555; /* color of the tracking area */
    border-radius: 5px;
}

#saved-models-list::-webkit-scrollbar-thumb {
    background-color: #888; /* color of the scroll thumb */
    border-radius: 5px;
    border: 2px solid #555; /* creates padding around scroll thumb */
}

#saved-models-list::-webkit-scrollbar-thumb:hover {
    background-color: #bbb; /* color of the scroll thumb on hover */
}

#saved-models-list li {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 3px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#saved-models-list li:hover {
    background-color: #444;
    border-color: #777;
}

#saved-models-list li img {
    width: 24px; /* Larger icons for saved models assets */
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Admin Panel - Toolbox Management Specific Styles */
.admin-section {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #555;
}

.admin-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
}

.admin-section button {
    width: 100%;
    margin-bottom: 10px;
}

#admin-toolbox-list-container {
    margin-top: 10px;
    max-height: 150px; /* Limit height and make scrollable */
    overflow-y: auto;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 5px;
    background-color: #333;
}
#admin-toolbox-list-container h5 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #ccc;
    font-size: 0.9em;
}

#admin-toolbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#admin-toolbox-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #444;
    color: #eee;
}

#admin-toolbox-list li:last-child {
    border-bottom: none;
}

#admin-toolbox-list li span {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

#admin-toolbox-list li .delete-asset-btn {
    background-color: #dc3545; /* Red color for delete */
    padding: 4px 8px;
    font-size: 0.8em;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    width: auto; /* Override 100% width */
    margin-top: 0; /* Override general button margin-top */
}

#admin-toolbox-list li .delete-asset-btn:hover {
    background-color: #c82333;
}

/* NEW: Mobile Controls Overlay */
#mobile-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000; /* Above everything else */
    display: flex; /* Use flex to layout movement and look areas */
    pointer-events: none; /* By default, allow clicks to pass through */
}

#mobile-movement-area {
    flex-grow: 1; /* Takes left half */
    background-color: rgba(0, 255, 0, 0.0); /* Transparent */
    pointer-events: auto; /* Enable touch events here */
}

#mobile-look-area {
    flex-grow: 1; /* Takes right half */
    background-color: rgba(0, 0, 255, 0.0); /* Transparent */
    pointer-events: auto; /* Enable touch events here */
}

#mobile-jump-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.7);
    color: white;
    font-size: 1.2em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    z-index: 1001; /* Above movement/look areas */
    pointer-events: auto; /* Enable touch events here */
}

#mobile-jump-btn:active {
    background-color: rgba(0, 86, 179, 0.9);
}

/* Media queries for mobile devices */
@media (max-width: 768px) {
    #ui-panel {
        height: auto; /* Allow height to adjust */
        flex-wrap: wrap; /* Wrap buttons to next line */
        padding: 10px;
        gap: 5px;
    }
    #ui-panel button {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    .separator {
        display: none; /* Hide separators on small screens */
    }
    #editor-panel,
    #explorer-panel,
    #toolbox-panel,
    #saved-models-panel,
    #admin-panel {
        width: 160px; /* Narrower panels */
        padding: 10px;
        font-size: 0.9em;
    }
    #editor-panel input,
    #editor-panel select {
        padding: 3px;
        margin-bottom: 5px;
    }
    #editor-panel label {
        margin-bottom: 3px;
    }
    #editor-panel button {
        padding: 6px 10px;
    }

    /* Adjust positions to stack better */
    #editor-panel {
        right: 5px;
        bottom: 5px;
        top: auto; /* Reset top */
        height: auto; /* Allow height to shrink */
    }
    #explorer-panel {
        right: 5px;
        top: calc(var(--top-bar-height) + 5px); /* Adjusted top */
        /* Make explorer slightly shorter than editor panel might take up */
        bottom: calc(var(--panel-gap) + 200px + 5px); 
        height: calc(100vh - var(--top-bar-height) - 210px); /* Adjust height to fit above editor */
    }

    #toolbox-panel {
        left: 5px;
        top: calc(var(--top-bar-height) + 5px);
        height: calc( (100vh - var(--top-bar-height) - var(--admin-panel-max-height) - (3 * var(--panel-gap))) / 2 ); /* Maintain ratio */
    }
    #saved-models-panel {
        left: 5px;
        top: calc(var(--top-bar-height) + ((100vh - var(--top-bar-height) - var(--admin-panel-max-height) - (3 * var(--panel-gap))) / 2) + var(--panel-gap));
        height: calc( (100vh - var(--top-bar-height) - var(--admin-panel-max-height) - (3 * var(--panel-gap))) / 2 );
    }
    #admin-panel {
        left: 5px;
        bottom: 5px;
    }

    /* Hide custom cursor on mobile */
    #custom-cursor {
        display: none !important;
    }
}