/* style.css */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

:root {
    --accent-color: #64b5f6;
    /* Dark Theme (default) */
    --bg-color: #222;
    --control-bg: #333;
    --control-border: #555;
    --text-color: #eee;
    --text-color-muted: #999;
    --handle-border-color: #fff;
    --handle-shadow-color: #000;
    --checkerboard-light: #f0f0f0;
    --checkerboard-dark: #ffffff;
}

body.light-mode {
    /* Light Theme */
    --bg-color: #f0f0f0;
    --control-bg: #ffffff;
    --control-border: #ccc;
    --text-color: #222;
    --text-color-muted: #666;
    --handle-border-color: #000;
    --handle-shadow-color: #fff;
    --checkerboard-light: #e0e0e0;
    --checkerboard-dark: #f0f0f0;
}

/* Disable transitions during initial load to prevent layout flicker and miscalculations.
   This class is added by JS at the start and removed after the first render. */
body.is-loading main,
body.is-loading #left-panel-container,
body.is-loading #right-panel-container,
body.is-loading .top-panel-container,
body.is-loading .layers-panel {
    transition: none !important;
}

.hidden {
    display: none !important;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0;
    /* Use a fixed height and prevent overflow to create a stable, non-scrolling app layout.
       This ensures that the main content area correctly calculates its available space. */
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

/* --- Menu Bar Styles --- */
#menu-bar {
    display: flex;
    background-color: var(--control-bg);
    border-bottom: 1px solid var(--control-border);
    padding: 0 0.5rem;
    user-select: none;
    z-index: 100;
}

.menu-item {
    position: relative;
}

.menu-title {
    /* Reset button styles to look like a span */
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    width: 100%;
    /* Original styles */
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.menu-item:hover .menu-title, .menu-item .menu-title.active {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

.collaborator-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%; /* Make it a circle */
    border: 1px solid var(--control-border);
    flex-shrink: 0;
}

.menu-icon {
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    border: 1px solid var(--control-border);
}

.menu-right-group {
    margin-left: auto;
    display: flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 0 0 5px 5px;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Align right-side dropdowns to the right edge of their parent to prevent overflow */
#collaborators-dropdown {
    right: 0;
}

.dropdown-content.visible {
    display: block;
}

.dropdown-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    display: block; /* Important for labels */
}
/* A simple separator for dropdown menus */
.dropdown-separator {
    height: 1px;
    background-color: var(--control-border);
    margin: 0.5rem 0;
}

.dropdown-item:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

/* Style for dropdown items that can be toggled 'on' (active) */
.dropdown-item.active {
    position: relative;
    padding-right: 2rem; /* Make space for the checkmark */
}

.dropdown-item.active::before {
    content: '✓';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

.project-status {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color-muted);
    border: 1px solid var(--control-border);
    border-radius: 15px;
    margin: auto 0.75rem; /* center vertically and add horizontal margin */
    height: 26px;
    transition: all 0.3s ease-in-out;
    user-select: none;
}

.project-status.cloud {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.project-status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    background-color: var(--text-color-muted); /* Default for local */
    transition: background-color 0.3s ease-in-out;
}

.project-status.cloud::before {
    background-color: var(--accent-color);
    box-shadow: 0 0 4px var(--accent-color);
}

.project-status.read-only {
    color: #f44336; /* A red color for warning */
    border-color: #f44336;
    margin-left: 0.25rem; /* Reduce left margin to be closer to the cloud indicator */
}

.project-status.read-only::before {
    display: none; /* The read-only indicator doesn't need a status dot */
}

/* --- Save Status Indicator --- */
.save-status {
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color-muted);
    margin: auto 0;
    height: 26px;
    user-select: none;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.save-status.saving {
    color: var(--accent-color);
}

.save-status.saved {
    color: #4caf50;
}

.save-status.error {
    color: #f44336;
}

/* --- Version History --- */
.version-header-date { flex: 1.5; }
.version-header-label { flex: 2; }
.version-header-actions { flex: 0.8; text-align: center; }

.version-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--control-border);
    cursor: default;
    font-size: 0.85rem;
}

.version-item:hover {
    background-color: var(--control-bg-hover);
}

.version-item-date {
    flex: 1.5;
    color: var(--text-color);
}

.version-item-label {
    flex: 2;
    color: var(--text-color-muted);
    font-style: italic;
}

.version-item-actions {
    flex: 0.8;
    text-align: center;
}

.version-restore-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
}

.version-restore-btn:hover {
    filter: brightness(1.2);
}

.shortcut {
    float: right;
    color: var(--text-color-muted);
    margin-left: 2rem;
}

/* --- Submenu Styles --- */
.submenu-item {
    position: relative;
}

.submenu-title {
    /* Reset button styles */
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    width: 100%;
    /* Original styles */
    padding: 0.75rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    display: block;
    position: relative; /* For the arrow */
    /* Ensure space for the arrow icon */
    padding-right: 2rem;
}

.submenu-title::after {
    content: '▶';
    font-size: 0.7em;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-muted);
}

.submenu-item:hover .submenu-title,
.submenu-item:hover .submenu-title::after {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

.submenu-content {
    display: none;
    position: absolute;
    left: 100%; /* Position to the right */
    top: -1px; /* Align with top border of parent */
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 0 5px 5px 5px;
    min-width: 200px;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.2);
    z-index: 2; /* Ensure it's above other dropdown items */
}

.submenu-item:hover .submenu-content {
    display: block;
}

main {
    display: grid;
    flex: 1;
    gap: 0.5rem;
    /* Use CSS variables for panel widths to improve resize performance. */
    --left-panel-width: 250px;
    --right-panel-width: 350px;
    --top-panel-height: 245px;
    grid-template-columns: var(--left-panel-width) 1fr var(--right-panel-width);
    /* Adjusted column widths */
    grid-template-rows: var(--top-panel-height) 1fr;
    padding: 0.25rem;
    transition: --left-panel-width 0.3s ease-in-out, --right-panel-width 0.3s ease-in-out, --top-panel-height 0.3s ease-in-out;
    /* This is crucial for flexbox/grid interaction. It allows the grid to shrink below its content's
       intrinsic size, which is necessary for the `1fr` row height to be calculated correctly. */
    min-height: 0;
}

.top-panel-container {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    display: flex;
    transition: all 0.3s ease-in-out;
}

.side-panel-container#left-panel-container {
    grid-column: 1;
    grid-row: 2;
}

.animation-frames-toolbar {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1; /* Make it fill the container */
    min-height: auto;
    overflow: hidden;
    padding: 0.5rem;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.layers-panel {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 5px 5px 5px 5px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    position: relative; /* For positioning the resize handle */
    min-height: 0; /* Prevents the panel from growing with its content */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    flex: 1;
}

.editor-column {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 2;
    min-height: 0; /* Prevents flexbox/grid sizing issues */
}

.canvas-container {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.floating-controls-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zoom-display {
    background-color: rgba(51, 51, 51, 0.7);
    border: 1px solid var(--control-border);
    border-radius: 10px;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-color);
    user-select: none;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    height: 36px;
    display: flex;
    align-items: center;
}

.floating-canvas-button {
    /* Icon button styles from other parts of the app */
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--control-border);
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0; /* Hide text if any */
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

.floating-controls-container:hover .floating-canvas-button,
.floating-controls-container:hover .zoom-display {
    opacity: 1;
}

.floating-canvas-button:hover {
    /* background-color: var(--control-bg); - Removed for consistency with other icon buttons */
    border-color: var(--accent-color);
}

/* Remove the border in light mode as it looks out of place */
body.light-mode .floating-canvas-button {
    border: none;
}

#centerCanvasBtn {
    background-image: url('assets/center.png');
}

#checkerboard {
    background-image: repeating-conic-gradient(var(--checkerboard-light) 0% 25%, var(--checkerboard-dark) 0% 50%);
    background-size: 20px 20px;
    position: absolute;
    z-index: -1;
}

#gridCanvas,
#drawingCanvas,
#selectionCanvas,
#brushPreviewCanvas,
#remoteCursorsCanvas {
    /* Canvases are transparent to show the checkerboard behind them */
    background-color: transparent;
    position: absolute;
    /* Force hardware acceleration by promoting to a new compositing layer. This can fix performance issues on large canvases. */
    transform: translateZ(0);
    /* Ensure crisp scaling, which can also improve performance. */
    image-rendering: pixelated;
}

#selectionCanvas {
    z-index: 3; /* On top of the grid */
    pointer-events: none; /* Let mouse events pass through */
}

#remoteCursorsCanvas {
    z-index: 4; /* On top of selection, but below floating controls */
    pointer-events: none; /* Let mouse events pass through */
}

#brushPreviewCanvas {
    z-index: 1;
    /* Let mouse events pass through to the grid canvas */
    pointer-events: none;
}

#gridCanvas {
    /* Place grid on top of the brush preview */
    z-index: 2; /* Below selection, receives mouse events */
    cursor: crosshair;
}

/* Custom cursor for the eye dropper tool */
#gridCanvas.eyedropper-active {
    cursor: copy;
}

#drawingCanvas {
    z-index: 0; /* Base layer for the art */
}

.controls {
    display: flex; /* Make children (handle and wrapper) fill height */
    flex-direction: column;
    min-height: 0; /* Allow this panel to shrink and scroll */
    position: relative; /* For positioning the resize handle */
    flex: 1;
    min-width: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    border: 1px solid var(--control-border);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden; /* Clip the scroll wrapper to the rounded corners */
}

.controls-scroll-wrapper {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 0.5rem;
    background-color: var(--control-bg);
}

#right-panel-container {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
}

/* Add a separator between collapsible sections, but not before the first one.
   Using the adjacent sibling combinator is more robust than :first-child
   because it isn't affected by other elements like the resize handle. */
.controls .collapsible-section + .collapsible-section {
    border-top: 1px solid var(--control-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.controls h4,
.animation-frames-toolbar h4,
.layers-panel h4 {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem 0;
    text-align: left;
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
}

#frameCountDisplay,
#layerCountDisplay {
    color: var(--text-color-muted);
    font-size: 1rem;
    font-weight: 400;
    margin-left: 0.5rem;
}

/* --- Canvas Resize Controls --- */
.dimension-inputs {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0;
}

.dimension-inputs > div {
    flex: 1;
}

#applyCanvasSizeBtn {
    width: 100%;
}

.toggle-controls-group {
    display: flex;
    flex-wrap: wrap; /* Allow controls to wrap on smaller screens */
    justify-content: flex-start; /* Group controls to the left */
    align-items: center;
    gap: 1rem; /* Add space between the two toggle controls */
    margin-top: 0.75rem;
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between label and checkbox */
}

.toggle-control label {
    margin-bottom: 0; /* Override default label margin */
}

.resize-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem; /* Add breathing room below */
    gap: 1rem;
}
.resize-options label {
    margin-bottom: 0;
    white-space: nowrap; /* Prevent the label from wrapping */
}

/* --- Collapsible Panel Styles --- */
.controls .collapsible-section > h4 {
    cursor: grab;
    position: relative; /* For positioning the icon */
    user-select: none; /* Prevent text selection on click */
    padding-right: 1.5rem; /* Space for the icon */
    padding-left: 1.6rem; /* Space for the drag handle icon and some buffer */
}

/* Add a drag handle icon for better discoverability */
.controls .collapsible-section > h4::after {
    /* Use the vertical ellipsis character for a clean, theme-friendly drag handle */
    content: '⋮';
    font-size: 1.6rem; /* Make the icon a bit larger and bolder */
    font-weight: bold;
    line-height: 1; /* Adjust line height for better vertical centering */
    color: var(--text-color-muted);
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6; /* Mute the icon slightly */
}

/* Add a toggle icon */
.controls .collapsible-section > h4::before {
    content: '−'; /* Minus sign for expanded state */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}

/* Change icon and hide content for collapsed state */
.controls .collapsible-section.collapsed > h4::before {
    content: '+';
}
.controls .collapsible-section.collapsed > *:not(h4) {
    display: none;
}

.collapsible-section {
    position: relative; /* Needed for the drag-over pseudo-element */
}

.collapsible-section.dragging {
    opacity: 0.5;
}

.collapsible-section.drag-over::before {
    content: '';
    position: absolute;
    top: -4px; /* Position in the middle of the gap */
    left: 5px;
    right: 5px;
    height: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

/* --- Side Panel Collapse Styles --- */
.side-panel-container {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent grid blowout */
    /* This is crucial. As a grid item that is also a flex container, it needs min-height: 0
       to allow its flex children (the panels) to shrink and respect the `1fr` row height. */
    min-height: 0;
    transition: all 0.3s ease-in-out;
}

.panel-toggle-button {
    position: absolute;
    top: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    z-index: 20; /* Above resize handle */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text-color);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.top-panel-container:hover .panel-toggle-button,
.side-panel-container:hover .panel-toggle-button {
    opacity: 1;
    pointer-events: auto;
}

.panel-toggle-button::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Use a filter to make the icons theme-aware (e.g., black icon in assets folder) */
}

.panel-toggle-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    transform: scale(1.1);
}

#toggleLeftPanelBtn {
    right: -12px; /* Position it so it hangs over the right edge */
    left: auto;
}

#toggleLeftPanelBtn::before {
    background-image: url('assets/chevronleft.png');
}

/* --- Right Panel Toggle Button --- */
#toggleRightPanelBtn {
    left: -12px; /* Position it so it hangs over the left edge */
    right: auto;
}

/* Collapsed State */
main.left-panel-collapsed {
    --left-panel-width: 12px;
}

main.left-panel-collapsed .layers-panel {
    visibility: hidden;
    opacity: 0;
}

main.left-panel-collapsed #left-panel-container {
    background-color: var(--control-bg);
    /* Use the border shorthand and then remove the left border for robustness. */
    border: 1px solid var(--control-border);
    border-left: none;
    border-radius: 0 5px 5px 0;
    position: relative; /* Create a stacking context */
    z-index: 1; /* Ensure it renders above the adjacent canvas column */
}

main.left-panel-collapsed #toggleLeftPanelBtn::before {
    background-image: url('assets/chevronright.png');
}

main.left-panel-collapsed #toggleLeftPanelBtn {
    /* The original centering logic (left: 50%; transform: translateX(-50%))
       causes the 24px button to overflow the 12px collapsed panel by 6px
       on the left, which is outside the viewport. This new positioning
       aligns the button's left edge with the panel's left edge, making it
       overflow only to the right (over the canvas), which is acceptable. */
    left: 0;
    transform: none;
    /* Always show the button when the panel is collapsed */
    opacity: 1;
    pointer-events: auto;
}

/* --- Top Panel Toggle Button --- */
#toggleTopPanelBtn {
    right: 0.5rem;
    top: 0.5rem;
    transform: none;
}

#toggleTopPanelBtn::before {
    /* Use chevron icons to match the side panels */
    background-image: url('assets/chevronup.png');
}

main.top-panel-collapsed {
    --top-panel-height: 12px;
}

main.top-panel-collapsed .animation-frames-toolbar {
    visibility: hidden;
    opacity: 0;
}

main.top-panel-collapsed .top-panel-container {
    background-color: var(--control-bg);
    border-bottom: 1px solid var(--control-border);
    border-left: 1px solid var(--control-border);
    border-right: 1px solid var(--control-border);
    border-radius: 0 0 5px 5px;
}

main.top-panel-collapsed #toggleTopPanelBtn::before {
    background-image: url('assets/chevrondown.png');
}

main.top-panel-collapsed #toggleTopPanelBtn {
    /* The original centering logic (top: 50%, transform: translateY(-50%))
       causes the 24px button to be centered in the 12px collapsed panel,
       making its top half get cut off by the menu bar. This new positioning
       aligns the button's top edge with the container's top edge, moving it
       down so it's fully visible. */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Always show the button when the panel is collapsed */
    opacity: 1;
    pointer-events: auto;
}

/* Explicitly hide resize handles when panels are collapsed to prevent layout issues. */
main.left-panel-collapsed .resize-handle-left,
main.right-panel-collapsed .resize-handle-right {
    display: none;
}

/* --- Right Panel Collapsed State --- */
main.right-panel-collapsed {
    --right-panel-width: 12px;
}

main.right-panel-collapsed .controls {
    display: none;
}

main.right-panel-collapsed #right-panel-container {
    background-color: var(--control-bg);
    /* Use the border shorthand and then remove the right border for robustness. */
    border: 1px solid var(--control-border);
    border-right: none;
    border-radius: 5px 0 0 5px;
    position: relative; /* Create a stacking context */
    z-index: 1; /* Ensure it renders above the adjacent canvas column */
}

#toggleRightPanelBtn::before {
    background-image: url('assets/chevronright.png');
}

main.right-panel-collapsed #toggleRightPanelBtn::before {
    background-image: url('assets/chevronleft.png');
}

main.right-panel-collapsed #toggleRightPanelBtn {
    right: 0;
    left: auto;
    transform: none;
    /* Always show the button when the panel is collapsed */
    opacity: 1;
    pointer-events: auto;
}

/* --- Right Panel Resize Handle --- */
.resize-handle-right {
    position: absolute;
    left: 0; /* Align with the very edge of the panel */
    top: 0;
    width: 8px; /* Make the entire left padding area the handle */
    height: 100%;
    cursor: col-resize;
    z-index: 10; /* Ensure it's on top of other elements */
}

.resize-handle-left {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}

.tool-button-group {
    display: grid;
    /* Use auto-fill to create as many columns as can fit, with a minimum size. */
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    column-gap: 0.25rem; /* Horizontal spacing */
    row-gap: 0.25rem;    /* Vertical spacing */
}

/* New style for the container of tool modifiers like mirror toggles */
.tool-modifiers-group {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.contextual-tool-options-container {
    margin-top: 0.75rem;
}

/* Hide the container and its border if it has no visible children */
.contextual-tool-options-container:not(:has(> :not(.hidden))) {
    display: none;
}

label {
    display: block;
    margin-bottom: 0.3rem;
}

select,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"] {
    background-color: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--text-color);
    padding: 0.3rem;
    width: 100%; /* This can be overridden for specific controls */
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-color);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--control-border);
    border-radius: 3px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--bg-color); /* Checkmark color to contrast with blue bg */
    /* Windows High Contrast Mode */
    background-color: CanvasText;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

input[type="checkbox"]:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.color-picker-hidden {
    height: 0;
    position: absolute;
    visibility: hidden;
    width: 0;
}

button {
    background-color: var(--accent-color);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--bg-color);
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.1s ease-in-out;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* Prevents click and hover events on disabled buttons */
}

.dropdown-item.disabled {
    color: var(--text-color-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.dropdown-item.disabled-feature {
    color: var(--text-color-muted);
    cursor: not-allowed;
    /* We don't use pointer-events: none here so the title tooltip still works on hover. */
}

.dropdown-item.disabled-feature:hover {
    /* Override the default hover effect to keep it looking disabled */
    background-color: var(--control-bg);
}

.modal-button-secondary {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--text-color);
}

.modal-button-secondary:hover {
    background-color: var(--bg-color);
    border-color: var(--accent-color);
}

.submenu-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    display: block;
    position: relative; /* for checkmark */
}

.submenu-option:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

.submenu-option.active {
    padding-right: 2rem; /* Make space for the checkmark on the right */
}
.submenu-option.active::before {
    content: '✓';
    position: absolute;
    right: 0.75rem;
}
/* Make icon buttons more rounded for a softer look */
.tool-button,
.transform-action-button,
.tool-modifier-button,
.playback-icon-button,
.frame-action-button,
.layer-action-button {
    border-radius: 10px;
}

.floating-canvas-button {
    border-radius: 10px;
}

button:hover {
    border-color: var(--accent-color);
}

/* Active (click-down) state for icon buttons */
.tool-button:active,
.transform-action-button:active,
.playback-icon-button:active,
.frame-action-button:active,
.layer-action-button:active {
    border-color: #39FF14;}

.tool-button,
.transform-action-button {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    height: 40px;
    width: 40px;
}

.tool-modifier-button {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    height: 40px;
    width: 40px;
}

.tool-modifier-button.active {
    box-shadow: 0 0 8px #39FF14;
    border-color: #39FF14;
}

#mirrorXToggleBtn {
    background-image: url('assets/mirrorx.png');
}

#mirrorYToggleBtn {
    background-image: url('assets/mirrory.png');
}

.tool-options h5 {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem 0; /* Remove top margin to reduce space */
    text-transform: uppercase;
}

/* Style for the disabled brush size section */
#brush-size-options.disabled {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#brushSizeValue {
    font-size: 0.9rem;
    min-width: 30px; /* Prevent layout shift */
    text-align: right;
}

/* --- Custom Slider Styles --- */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    background: transparent;
    margin: 0;
}

input[type=range]:focus {
    outline: none;
}

/* Webkit (Chrome, Safari) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--bg-color);
    border-radius: 2px;
    border: 1px solid var(--control-border);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--control-border);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--text-color);
    cursor: pointer;
    margin-top: -7px; /* Center thumb on track */
}

/* Firefox */
input[type=range]::-moz-range-track {
    width: 100%; height: 4px; cursor: pointer; background: var(--bg-color); border-radius: 2px; border: 1px solid var(--control-border);
}

input[type=range]::-moz-range-thumb {
    border: 1px solid var(--control-border); height: 16px; width: 16px; border-radius: 50%; background: var(--text-color); cursor: pointer;
}

.tool-button.active {
    box-shadow: 0 0 8px #39FF14;
    border-color: #39FF14;
}

.animation-header-with-buttons {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.animation-header-with-buttons > h4 {
    /* Override the generic h4 margin to allow for correct vertical alignment */
    margin-bottom: 0;
}

.layer-header-with-buttons {
    align-items: center;
    display: flex;
    justify-content: space-between;
    /* Reduce margin to create more vertical space for the content below,
       preventing it from being cut off at the bottom of the panel. */
    margin-bottom: 0.25rem;
    width: 100%;
}

.toolbar-content {
    display: flex;
    /* Allow this container to grow and fill the remaining vertical space
       within the toolbar, ensuring the parent's padding is respected. */
    flex: 1;
    gap: 0.75rem;
    justify-content: flex-start;
}

.animation-preview-panel {
    background-color: var(--bg-color);
    border-radius: 3px;
    padding: 0.5rem;
    height: 100%;
}

.playback-icon-button {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 32px;
    padding: 0;
    width: 32px;
}

.animation-preview-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Align items to the top */
    gap: 0.75rem;
    position: relative;
}

.animation-preview-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.preview-canvas-container {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 3px;
    box-sizing: border-box;
    flex: 1; /* Grow to fill available vertical space */
    min-height: 0; /* Allow shrinking in the flex column */
    aspect-ratio: 1 / 1; /* Make it a square */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.playback-controls {
    display: flex;
        flex-direction: column;
        /* Center the playback controls vertically relative to the preview */
        justify-content: center;
    gap: 0.5rem;
}

#animationPreview {
    /* The canvas itself is borderless; it fits inside its container */
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated; /* Ensure crisp scaling */
    min-width: 150px;
}

.fps-control {
    align-items: center;
    display: flex;
    gap: 0.25rem;
}

.fps-control .stepper-label {
    margin-bottom: 0;
}

/* --- Stepper Input Styles (for FPS control) --- */
.stepper-input {
    display: flex;
    align-items: center;
}

.stepper-btn {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: bold;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 26px; /* Vertically center the text */
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.stepper-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

.stepper-btn:first-child {
    border-radius: 5px 0 0 5px;
}

.stepper-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.stepper-input input[type="number"] {
    text-align: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    width: 50px; /* Give it a fixed width */
    height: 28px;
    padding: 0.3rem 0.1rem;
}

/* Remove the default outline on the input... */
.stepper-input input[type="number"]:focus {
    outline: none;
}

/* ...and apply a focus style to the entire component for better UX */
.stepper-input.is-focused {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
    border-radius: 5px; /* Match the button radius for a clean look */
}

#frameDisplay {
    display: flex;
    flex: 1;
    gap: 0.5rem;
    height: 100%; /* Match the height of the animation preview panel */
    min-width: 0;
    overflow-x: scroll;
    /* Reserve space for the scrollbar to prevent the container from resizing when it appears */
    scrollbar-gutter: stable;
    /* Align thumbnails to the bottom to close the large gap above the scrollbar. */
    align-items: flex-end;
    /* Add a small amount of padding so the thumbnails don't sit directly on the scrollbar. */
    padding-bottom: 4px;
}

.frames-with-actions-container {
    background-color: var(--bg-color);
    border-radius: 3px;
    display: flex; /* This is the key: it lays out the buttons and frame list side-by-side. */
    align-items: center; /* This vertically centers the buttons next to the frame list. */
    flex: 1; /* Allows this new panel to grow and fill the available space. */
    gap: 0.75rem;
    height: 100%; /* Match the height of the animation preview panel. */
    min-width: 0;
    overflow: hidden; /* Clips the contents to the rounded corners. */
    padding: 0.5rem;
}

#layerDisplay {
    background-color: var(--bg-color);
    border-radius: 3px;
    display: flex; /* Parent is a flex container, this is needed for flex: 1 */
    flex: 1; /* Make this element grow to fill available space */
    flex-direction: column;
    /* Vertical layout */
    gap: 0.5rem;
    min-height: 0; /* Allow this element to shrink and scroll properly */
    overflow-y: scroll;
    /* Vertical scrolling */
    padding: 0.5rem;
}

/* --- START: Layer Item Style Updates --- */
.layer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--control-border);
    border-radius: 5px;
    cursor: grab;
    transition: all 0.1s ease-in-out;
    position: relative;
}

.layer-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 4px var(--accent-color);
}

.layer-item.dragging {
    opacity: 0.5;
}

.layer-item.drag-over::before {
    content: '';
    position: absolute;
    top: -4px; /* Position in the middle of the gap */
    left: 5px;
    right: 5px;
    height: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.layer-item.active {
    border-color: #39FF14;
    box-shadow: 0 0 8px #39FF14;
}

.layer-thumbnail-container {
    width: 100%; /* Make width responsive to the panel size */
    aspect-ratio: 1 / 1; /* Maintain a square shape */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 3px;
    overflow: hidden;
    /* Hide any overflow if canvas is too big */
}

.layer-thumbnail {
    max-width: 100%;
    max-height: 100%;
    /* Let the canvas scale within the container while maintaining aspect ratio */
    image-rendering: pixelated; /* Ensures crisp pixels when scaled */
    /* Border and background are now on the container */
}

.layer-controls {
    display: flex;
    align-items: center;
    width: 100%; /* Make controls width responsive */
}

.layer-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.layer-name-input {
    flex-grow: 1;
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--accent-color);
    border-radius: 3px;
    color: var(--text-color);
    font-family: inherit;
    font-size: inherit;
    padding: 1px 3px;
    margin: 0;
    box-shadow: 0 0 4px var(--accent-color);
    outline: none;
}

.layer-visibility-toggle {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --- START: Copy Layer to Frame Styles --- */
.layer-copy-to-frame-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2; /* Above visibility toggle */
    width: auto;
    height: auto;
    padding: 2px 5px;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--text-color);
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    pointer-events: none;
    transition: all 0.2s;
}

.layer-item:hover .layer-copy-to-frame-btn {
    opacity: 1;
    pointer-events: auto;
}

.layer-copy-to-frame-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

/* --- END: Copy Layer to Frame Styles --- */

/* --- END: Layer Item Style Updates --- */

.frame-thumbnail-container {
    background-color: var(--control-bg);
    border: 2px solid var(--control-border);
    border-radius: 3px;
    box-sizing: border-box;
    cursor: grab;
    height: 170px;
    width: 170px;
    min-width: 170px; /* Keep container from shrinking */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.frame-thumbnail {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated; /* Ensures crisp pixels when scaled */
}

.frame-thumbnail-container.active-frame {
    border-color: #39FF14;
    box-shadow: 0 0 8px #39FF14;
}

.frame-thumbnail-container.dragging {
    opacity: 0.4;
}

/* The indicator line for where the frame will be dropped */
.frame-thumbnail-container.drag-over::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    /* Position it to the left of the container, in the gap */
    left: -4px;
    width: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
    z-index: 10;
}

/* --- Style for when copy mode is active --- */
body.is-copying-layer .frame-thumbnail-container {
    cursor: copy;
    border-color: var(--accent-color);
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

body.is-copying-layer .frame-thumbnail-container.active-frame {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-color);
}

.frame-actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5rem;
    justify-content: center;
}

.frame-action-button {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    height: 30px;
    padding: 0;
    text-align: center;
    width: 30px;
}

/* Hide the default spinners on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- Toast Notification Styles --- */

@keyframes fade-in-out-top-right {

    0%,
    100% {
        opacity: 0;
        transform: translateX(20px);
    }

    10%,
    90% {
        opacity: 1;
        transform: translateX(0);
    }
}

#toastContainer {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 1000;
}

.toast {
    animation: fade-in-out-top-right 2s ease-in-out forwards;
    background-color: var(--control-bg);
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: var(--text-color);
    font-size: 0.95rem;
    min-width: 250px;
    padding: 1rem 1.5rem;
}

.toast.info {
    border-left-color: var(--accent-color);
}

.toast.success {
    border-left-color: #4CAF50;
}

.toast.error {
    border-left-color: #f44336;
}

/* --- Tooltip Styles --- */
@keyframes fade-in-then-out {
    0% {
        opacity: 0;
        transform: translate(-50%, -80%);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -100%);
    }

    85% {
        opacity: 1;
        transform: translate(-50%, -100%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -120%);
    }
}

.tool-tooltip {
    animation: fade-in-then-out 1.5s ease-in-out forwards;
    background-color: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    z-index: 1001;
}

#palette-select {
    margin-bottom: 0.75rem;
}

.color-swatch {
    border: 2px solid var(--control-border);
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    height: 40px;
    transition: all 0.1s ease-in-out;
    width: 40px;
}

.main-swatch-container {
    position: relative;
    display: flex;
    gap: 0.5rem; /* Use rem for consistency */
    align-items: center;
    flex: 1; /* Allow this container to grow and shrink */
    min-width: 0; /* Important for flex items to shrink below their content size */
}

.main-color-swatch {
    /* width: 150px; */ /* Remove fixed width */
    flex: 1; /* Allow swatches to share the available space */
    min-width: 40px; /* Prevent them from becoming too small */
    height: 40px;
    border: 1px solid var(--control-border);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative; /* For positioning the hover label */
    overflow: hidden; /* To contain the label within the rounded corners */
}

.color-swatch:not(.active-swatch):hover,
.main-color-swatch:not(.active-swatch):hover {
    border-color: var(--accent-color);
}

.color-swatch.active-swatch,
.main-color-swatch.active-swatch {
    border-color: #39FF14;
    box-shadow: 0 0 8px #39FF14;
}

.main-color-swatch.active-swatch {
    transform: scale(1.1);
    z-index: 3;
}

.main-color-swatch::before {
    content: ''; /* Content is set via ID selectors */
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none; /* So it doesn't interfere with clicks */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 1; /* Ensure it's above the swatch background */
}

#primaryColorSwatch::before {
    content: 'Primary';
}

#secondaryColorSwatch::before {
    content: 'Secondary';
}

.main-color-swatch:hover::before {
    opacity: 1;
}

/* --- Custom Color Picker --- */
#customColorPicker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

#saturation-brightness-box {
    width: 100%;
    height: 150px;
    position: relative;
    cursor: crosshair;
    border: 1px solid var(--control-border);
    border-radius: 3px;
    overflow: hidden; /* Clip pseudo-elements to the border-radius */
}

/* Use pseudo-elements for the saturation/value gradients. This is a more robust
   rendering technique than layering multiple background-images. */
#saturation-brightness-box::before,
#saturation-brightness-box::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none; /* Allow clicks to pass through to the box */
}

#saturation-brightness-box::before {
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

#saturation-brightness-box::after {
    background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

#color-picker-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--handle-border-color);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--handle-shadow-color), inset 0 0 0 1.5px var(--handle-shadow-color);
    transform: translate(-50%, -50%);
    pointer-events: none; /* So it doesn't interfere with mouse events on the box */
}

.color-sliders {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.color-slider-track {
    width: 100%;
    height: 16px;
    border-radius: 3px;
    position: relative;
    border: 1px solid var(--control-border);
}

#hue-slider-track {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

#alpha-slider-track {
    position: relative;
}

/* Use a pseudo-element for the checkerboard background. This is more robust
   and separates the static pattern from the dynamic color gradient, fixing
   initial rendering bugs. */
#alpha-slider-track::before,
#alpha-slider-track::after {
    content: '';
    position: absolute;
    inset: 0; /* A shorthand for top, right, bottom, left */
    border-radius: 3px; /* Match parent's border-radius */
    pointer-events: none; /* It's just for display */
}

#alpha-slider-track::before {
    /* Add a checkerboard pattern as the base layer for the alpha slider.
       This makes transparency obvious and helps fix initial rendering bugs
       by giving the browser a static background to draw. */
    background-image: repeating-conic-gradient(var(--checkerboard-light) 0% 25%, var(--checkerboard-dark) 0% 50%);
    background-size: 16px 16px; /* A smaller size is appropriate for the slider track */
    z-index: 1; /* Sits below the color gradient */
}

#alpha-slider-track::after {
    background-image: var(--alpha-gradient); /* Controlled by JS */
    z-index: 2; /* Sits on top of the checkerboard, but below the slider thumb */
}

.color-sliders input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    z-index: 3; /* Ensure the interactive slider is on top of all background layers */
    top: 0;
    left: 0;
    margin: 0;
    cursor: pointer;
}

.color-sliders input[type="range"]::-webkit-slider-runnable-track {
    height: 16px; /* Match the container height */
    background: transparent;
    border: none;
}
.color-sliders input[type="range"]::-moz-range-track {
    height: 16px;
    background: transparent;
    border: none;
}

.color-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 20px;
    background: var(--text-color);
    border: 1px solid #888;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    margin-top: -2px;
}

.color-inputs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem; /* Add space below the inputs */
}

.color-input-group {
    flex-grow: 1;
}

#rgb-input-container {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.rgb-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rgb-input-wrapper label {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.rgb-input {
    text-align: center;
    padding: 0.3rem 0.1rem; /* Adjust padding for smaller inputs */
    width: 45px;
    -moz-appearance: textfield; /* Hide number spinners in Firefox */
    appearance: textfield;
}

.rgb-input::-webkit-outer-spin-button,
.rgb-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#toggleColorModeBtn {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--text-color);
    flex-shrink: 0;
    min-width: 50px;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

#toggleColorModeBtn:hover {
    border-color: var(--accent-color);
}

/* --- Palette Styles --- */
.custom-swatch-wrapper {
    position: relative;
}

.remove-swatch-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background-color: #f44336;
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none; /* Make it non-interactive when invisible */
    transition: opacity 0.2s, pointer-events 0.2s;
    z-index: 2;
}

.custom-swatch-wrapper:hover .remove-swatch-btn {
    opacity: 1;
    pointer-events: auto; /* Make it interactive only when visible */
}

.main-color-picker-area {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative; /* To anchor the hidden color input */
}

.tool-button#eyedropper-btn {
    flex-shrink: 0; /* Prevent the button from shrinking */
}

.color-swatches {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

.add-color-swatch {
    align-items: center;
    border: 2px dashed var(--control-border);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--control-border);
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 40px;
    justify-content: center;
    transition: all 0.1s ease-in-out;
    width: 40px;
}
.add-color-swatch:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* --- Scrollbar Styles --- */

/* For Webkit browsers (Chrome, Safari) */
#frameDisplay::-webkit-scrollbar {
    height: 10px;
}

#layerDisplay::-webkit-scrollbar,
.controls::-webkit-scrollbar {
    width: 10px;
}

#frameDisplay::-webkit-scrollbar-track,
#layerDisplay::-webkit-scrollbar-track,
.controls::-webkit-scrollbar-track {
    background: var(--control-bg);
    border-radius: 5px;
}

#frameDisplay::-webkit-scrollbar-thumb,
#layerDisplay::-webkit-scrollbar-thumb,
.controls::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

#frameDisplay::-webkit-scrollbar-thumb:hover,
#layerDisplay::-webkit-scrollbar-thumb:hover,
.controls::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox */
#frameDisplay,
#layerDisplay,
.controls {
    scrollbar-color: var(--accent-color) var(--control-bg);
    scrollbar-width: thin;
}

/* Layer Styles */
.layer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.layer-action-button {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    padding: 0;
}

.toggle-control select {
    /* Override the default 100% width for selects inside a toggle group */
    width: auto;
    min-width: 90px; /* Give it a bit of space */
}

/* --- Modal Styles --- */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Above everything else */
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-box {
    position: relative;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    text-align: center;
    z-index: 2001;
}

.modal-box p {
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Ensure the generic confirmation modal appears on top of any other open modal. */
#confirmationModal {
    z-index: 2002;
}

/* --- Specific Modal Styles --- */
/* We move the inline styles from the HTML to here for better maintainability. */
#authModal .modal-box {
    text-align: left;
    width: 100%; /* Make the box fill its container, up to the max-width */
    max-width: 580px; /* Wider for better layout with validation messages */
}

#accountModal .modal-box {
    text-align: left;
    max-width: 350px;
}

/* Make the "My Projects" modal wider and give it a fixed width
   to prevent it from resizing when the project list loads. */
#myProjectsModal .modal-box {
    width: 1050px;
    max-width: 95vw;
}

/* Make history modal wider for the table layout */
#historyModal .modal-box {
    width: 550px;
    max-width: 90vw;
}

/* Make collaborators modal wider for the table layout */
#collaboratorsModal .modal-box {
    width: 900px;
    max-width: 95vw;
}

/* Make the project name/save modal wider for the list */
#projectNameModal .modal-box {
    width: 500px;
    max-width: 90vw;
}

/* Make the help modal wider and its content scrollable */
#helpModal .modal-box {
    width: 90vw;
    max-width: 960px;
}

.help-content {
    max-height: 70vh; /* Limit height and allow scrolling */
    overflow-y: auto;
    padding: 0.5rem; /* Add some padding for the scrollbar */
}

/* --- Authentication Modal Specific Styles --- */
.auth-buttons {
    justify-content: center; /* Center the buttons */
    margin-top: 1.5rem;      /* Add space above the buttons */
}

.auth-link-button {
    background: none;
    border: none;
    color: var(--accent-color);
    padding: 0;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none; /* No underline by default */
    transition: color 0.2s ease-in-out;
    /* Center the link button below the main action buttons */
    display: block;
    margin: 1rem auto 0;
}

.auth-link-button:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.auth-error {
    color: #f44336;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    min-height: 2.2em; /* Reserve space for two lines of text */
    line-height: 1.1em;
    visibility: hidden; /* Hide by default, but reserve space */
}

@keyframes progress-bar-stripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}

/* --- Progress Modal Styles --- */
.progress-bar-container {
    width: 100%;
    height: 20px;
    background-color: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: 5px;
    margin-top: 1rem;
    overflow: hidden; /* Ensures the inner bar respects the border-radius */
}

.progress-bar {
    width: 0%; /* Initial width */
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 3px; /* Slightly smaller radius than container */
    transition: width 0.2s ease-out;
    /* Add a subtle striped animation to indicate activity even when progress is slow. */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    animation: progress-bar-stripes 2s linear infinite;
}

/* --- My Projects Modal Styles (Table Format) --- */
.projects-table-container {
    background-color: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: 5px;
}

.projects-table-header {
    display: flex;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid var(--control-border);
    font-weight: bold;
    color: var(--text-color-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    align-items: center;
    /* Since the list container below has `scrollbar-gutter: stable`, it always
       reserves space for a scrollbar. We add matching padding to the header's
       right side to ensure the columns stay perfectly aligned. 15px is a
       common width for default browser scrollbars. */
    padding-right: calc(1rem + 15px);
    /* Add overflow: hidden to ensure the flex items do not spill out of the container
       when the modal shrinks. This works with `min-width: 0` on the child to force it
       to shrink and truncate. */
    overflow: hidden;
}

/* Override default list styles to make it part of the table */
.projects-list-container {
    max-height: 60vh;
    overflow-y: auto;
    background-color: transparent;
    border: none;
    padding: 0;
    min-height: 200px; /* Ensure it has some height even when empty */
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap, borders will separate items */
    scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
}

.project-header-thumbnail,
.project-item-thumbnail {
    width: 80px;
    flex-shrink: 0;
    padding-right: 1rem;
}

.project-item-thumbnail {
    /* Center the container vertically */
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-item-thumbnail-container {
    width: 64px; /* Fixed size for the container */
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 3px;
    overflow: hidden;
}

.project-header-name,
.project-item-name {
    flex-grow: 1;
    padding-right: 1rem;
    /* Add these properties to both for consistency and to fix the header */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Allow flex item to shrink below its content size */
    min-width: 0;
}

.project-item-thumbnail-canvas {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.project-header-date-updated,
.project-item-date-updated,
.project-header-date-created,
.project-item-date-created {
    width: 200px;
    flex-shrink: 0;
    padding-right: 1rem;
}

.project-header-actions,
.project-item-actions {
    width: 60px;
    flex-shrink: 0;
    text-align: right;
}

.project-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--control-border);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.project-item:last-child {
    border-bottom: none;
}

.project-item:hover {
    background-color: var(--control-bg);
}

.project-item-name {
    font-weight: bold;
}

.project-item-shared-indicator {
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--text-color-muted);
    margin-left: 0.5rem;
    font-style: italic;
}

.project-item-date-updated,
.project-item-date-created {
    font-size: 0.8rem;
    color: var(--text-color-muted);
}

.project-item-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.leave-project-btn,
.delete-project-btn {
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--text-color);
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.leave-project-btn:hover,
.delete-project-btn:hover {
    background-color: #f44336; /* Red for a destructive action */
    border-color: #f44336;
    color: var(--bg-color);
}

/* --- History Modal Styles (Table Format) --- */
.history-table-container {
    background-color: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: 5px;
}

.history-table-header {
    display: flex;
    padding: 0.5rem 0.5rem;
    border-bottom: 2px solid var(--control-border);
    font-weight: bold;
    color: var(--text-color-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.history-header-time,
.history-timestamp {
    width: 100px;
    flex-shrink: 0;
    font-family: monospace;
}

.history-header-user,
.history-user {
    width: 120px;
    flex-shrink: 0;
    padding-left: 0.5rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-header-event,
.history-message {
    flex-grow: 1;
    padding-left: 0.5rem;
}

.history-item {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--control-border);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
}

.history-item:last-child {
    border-bottom: none;
}

.history-timestamp {
    color: var(--text-color-muted);
}

/* --- Collaborators Modal Styles (Table Format) --- */
.collaborators-table-container {
    background-color: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: 5px;
}

.collaborators-table-header {
    display: flex;
    padding: 0.5rem 0.5rem;
    border-bottom: 2px solid var(--control-border);
    font-weight: bold;
    color: var(--text-color-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.collaborator-item {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--control-border);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.collaborator-item:last-child {
    border-bottom: none;
}

.collaborator-header-name,
.collaborator-name {
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
}

.collaborator-header-email,
.collaborator-email {
    flex-grow: 1;
    padding-left: 0.5rem;
}

.collaborator-header-date-shared,
.collaborator-date-shared,
.collaborator-header-date-accessed,
.collaborator-date-accessed {
    width: 200px;
    flex-shrink: 0;
    padding-left: 0.5rem;
    text-align: right;
    color: var(--text-color-muted);
}

.collaborator-date-accessed {
    color: var(--text-color-muted);
}

/* --- Help Modal Responsive Layout --- */
.help-content {
    display: grid;
    /* Create responsive columns: they will be at least 280px wide,
       and will auto-fit as many as possible. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.help-section h4 {
    margin-top: 0;
    border-bottom: 1px solid var(--control-border);
    padding-bottom: 0.5rem;
}

.shortcut-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr; /* Two columns: one for keys, one for description */
    gap: 0.5rem 1rem;
    align-items: center;
}

.shortcut-list dt { font-weight: bold; }
.shortcut-list dd { margin: 0; }