/* style.css - Rewritten & Updated */

:root {
    --btn-blue-bg: #5996ff;
    --btn-blue-hover: #74a7ff;
    --btn-blue-active: #2c72ff;
    --btn-red-bg: #f55653;
    --btn-red-hover: #f07270;
    --btn-red-active: #D32F2F;
    --btn-green-bg: #83de86;
    --btn-green-hover: #a2dfa5;
    --btn-green-active: #388E3C;
    --btn-disabled-bg: #BDBDBD;
    --btn-text-color: #FFFFFF;
    --btn-disabled-text-color: #494949;

    /* Adjusted offset for column max-height.
       Recalculate based on: body margins + .main-container margins + h1/h2 heights & margins + .content-wrapper margin-bottom
       Example: 0 (body) + 20px (main-container m-y) + ~50px (headers) + 15px (content-wrapper m-b) = ~85px.
       Let's use 90px as a round number.
    */
    --vertical-offset-for-columns: 90px;
}

/* Basic Body Styles */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff; /* Or your page's main background */
    color: #333;
    line-height: 1.5;
}

/* Text Highlight Styles */
.text-highlight-blue,
.text-highlight-red,
.text-highlight-green {
    padding: 0.05em 0.2em;
    border-radius: 3px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--btn-text-color);
}
.text-highlight-blue { background-color: var(--btn-blue-bg); }
.text-highlight-blue:hover { background-color: var(--btn-blue-hover); cursor: default; }
.text-highlight-red { background-color: var(--btn-red-bg); }
.text-highlight-red:hover { background-color: var(--btn-red-hover); cursor: default; }
.text-highlight-green { background-color: var(--btn-green-bg); }
.text-highlight-green:hover { background-color: var(--btn-green-hover); cursor: default; }

/* Main Page Layout */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 72%;
    width: 98%;
    margin: 10px auto;
    padding: 0 5px;
    box-sizing: border-box;
}

h1, h2 {
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.75em;
    color: #444;
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }

.content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 15px;
}

/* Column Styles */
.maze-column, /* This is also #maze-demo */
.sidebar-column {
    flex: 1 1 0; /* Equal width distribution */
    box-sizing: border-box;
    /* max-height: calc(100vh - var(--vertical-offset-for-columns)); */
}



.maze-column { /* Specifics for #maze-demo */
    display: flex;
    flex-direction: column;
    align-items: center;    /* Center children horizontally */
    /* justify-content is dynamic based on loading state */
    
    min-width: 300px;
    position: relative;
    /* max-height: calc(100vh - var(--vertical-offset-for-columns)); */
    overflow: hidden;
    padding: 10px; /* Content will be centered within this padding box */
    box-sizing: border-box;

}

.sidebar-column {
    flex: 1 1 0;
    box-sizing: border-box;
    /* max-height: calc(100vh - var(--vertical-offset-for-columns)); */
    min-width: 300px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    overflow-y: auto;          /* Keep for vertical scroll if content is tall */
    overflow-x: hidden;        /* ADD THIS: This will hide the horizontal scrollbar immediately */
                               /* While this hides the symptom, we should also try to fix the cause below */
    overflow-wrap: break-word; /* ADD THIS: Helps break long words within any text elements */
    word-break: break-word;    /* ADD THIS: More aggressive word breaking if needed */
}

.sidebar-column p {
    font-size: 0.85em;
    line-height: 1.4;
    color: #555;
    margin-bottom: 0.75em;
    /* overflow-wrap: break-word; /* Moved to .sidebar-column for broader effect */
    /* word-break: break-word;    /* Moved to .sidebar-column for broader effect */
}

.sidebar-column h3 {
    margin-top: 0;
    text-align: center;
    color: #444;
    margin-bottom: 10px;
    overflow-wrap: break-word; /* ADD THIS: Ensure h3 text also wraps if too long */
    word-break: break-word;    /* ADD THIS */
}

/* Loading State Styles for #maze-demo */
#maze-demo.loading-active {
    /* background-color: #f0f0f0; /* REMOVED: No faint grey background */
    /* border-radius: 4px;       /* REMOVED: No distinct box style for loading */
    /* padding-top: 0;           /* REMOVED: Padding handled by .maze-column or not needed */
    /* padding-bottom: 0;        /* REMOVED */

    /* Key for centering loader: .maze-column is already display:flex, flex-direction:column */
    justify-content: center; /* Vertically center the active children (loader & status) */
    /* align-items: center; is inherited from .maze-column for horizontal centering */

    /* Ensure it has some height to center within, using its max-height constraint */
    /* min-height: 200px; /* Optional: only if it might collapse too much */
}

#maze-demo.loading-active #mazeCanvas,
#maze-demo.loading-active .canvas-hint,
#maze-demo.loading-active .attention-grid,
#maze-demo.loading-active #controls {
    display: none !important;
}

#maze-demo.loading-complete {
    background-color: transparent; /* Ensure no lingering loading background */
    padding: 10px; /* Restore normal padding */
    justify-content: flex-start; /* Reset justify-content after loading */
}
#maze-demo.loading-complete #loadingIndicator { display: none !important; }
#maze-demo.loading-complete #mazeCanvas { display: block; }
#maze-demo.loading-complete .canvas-hint { display: block; }
#maze-demo.loading-complete .attention-grid { display: grid; }
#maze-demo.loading-complete #controls { display: flex; }


/* Components within Maze Column */
#loadingIndicator {
    display: none; /* JS changes to flex; initially hidden by stylesheet */
    flex-direction: row; /* Align bars horizontally */
    justify-content: center;
    align-items: center;
    gap: calc(5px * 2.5);
    height: calc(28px * 3); /* 84px */
    /* margin-top / margin-bottom are removed to allow true centering via flexbox */
    /* margin-top: 20px; */
    /* margin-bottom: 0; /* Status is below */
    width: auto; /* Let it size by content (bars) */
    max-width: 100%; /* Don't overflow column */
}


/* Add this new rule or add to existing #maze-demo.loading-active styles */
#maze-demo.loading-active #loadingIndicator {
    order: 1; /* Loader appears first during loading */
}

.loading-indicator .loading-bar {
    width: calc(6px * 3); /* 18px */
    height: 100%;
    border-radius: calc(2px * 2); /* 4px */
    animation: loading-pulse 1.2s infinite ease-in-out;
}
/* Rainbow Colors (Keep as is) */
.loading-indicator .loading-bar:nth-child(1) { background-color: hsl(0, 90%, 55%); animation-delay: -1.08s; }
.loading-indicator .loading-bar:nth-child(2) { background-color: hsl(36, 90%, 55%); animation-delay: -0.96s; }
.loading-indicator .loading-bar:nth-child(3) { background-color: hsl(72, 90%, 55%); animation-delay: -0.84s; }
.loading-indicator .loading-bar:nth-child(4) { background-color: hsl(108, 90%, 55%); animation-delay: -0.72s; }
.loading-indicator .loading-bar:nth-child(5) { background-color: hsl(144, 90%, 55%); animation-delay: -0.60s; }
.loading-indicator .loading-bar:nth-child(6) { background-color: hsl(180, 90%, 55%); animation-delay: -0.48s; }
.loading-indicator .loading-bar:nth-child(7) { background-color: hsl(216, 90%, 55%); animation-delay: -0.36s; }
.loading-indicator .loading-bar:nth-child(8) { background-color: hsl(252, 90%, 55%); animation-delay: -0.24s; }
.loading-indicator .loading-bar:nth-child(9) { background-color: hsl(288, 90%, 55%); animation-delay: -0.12s; }
.loading-indicator .loading-bar:nth-child(10) { background-color: hsl(324, 90%, 55%); animation-delay: 0s; }

@keyframes loading-pulse {
    0%, 80%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    40% { transform: scaleY(1.0); opacity: 1.0; }
}

#status {
    display: none; /* JS changes to flex; initially hidden by stylesheet */
    margin-top: 15px; /* Space below the loader */
    /* margin-bottom: 10px; /* Removed, let parent centering handle it */
    font-weight: bold;
    font-size: clamp(14px, 2.8vw, 22px);
    white-space: normal; /* Allow wrapping if needed, though JS sets a specific short message */
    overflow: visible;   /* Allow wrapping */
    min-height: 1.3em;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 350px; /* Constrain width of status text for better readability */
    color: #555;
    box-sizing: border-box;
    padding: 2px 6px;
    line-height: 1.3;
}

/* Add this new rule or add to existing #maze-demo.loading-active styles */
#maze-demo.loading-active #status {
    order: 2; /* Status appears after loader during loading */
}

.canvas-hint {
    width: 100%; max-width: 600px; box-sizing: border-box; margin: 8px 0;
    padding: 6px 10px; background-color: #fff8e1; color: #5f4f00;
    border: 1px solid #ffecb3; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: clamp(10px, 1.6vw, 12px); text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
    opacity: 1; transition: opacity 0.5s ease-out;
    flex-shrink: 0;
}
.canvas-hint.hidden { opacity: 0; pointer-events: none; }

#mazeCanvas {
    display: none; /* JS changes to block */
    margin: 0 auto 5px auto; border: 1px solid #555; image-rendering: pixelated;
    image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;
    width: 100%; max-width: 600px; height: auto; aspect-ratio: 1 / 1;
    box-sizing: border-box; flex-shrink: 1; flex-grow: 0;
}

.attention-grid {
    display: none; /* JS changes to grid */
    grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); gap: 2px;
    margin-top: 5px; margin-bottom: 8px; max-width: 600px; width: 100%;
    box-sizing: border-box; padding: 0; flex-shrink: 0;
}
.attention-grid canvas {
    width: 100%; aspect-ratio: 1 / 1; height: auto; display: block;
    background-color: #ccc; image-rendering: pixelated;
    border: 1px solid #bbb; border-radius: 2px; box-sizing: border-box;
}

#controls {
    display: none; /* JS changes to flex */
    flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 5px; padding: 8px 5px; margin-top: 5px; margin-bottom: 0;
    max-width: 600px; width: 100%; box-sizing: border-box;
    background-color: #f8f8f8; border-radius: 4px; border: 1px solid #e0e0e0;
    font-size: 0.85em; flex-shrink: 0;
}
#controls .control-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 5px; align-items: center; width: 100%; }
#controls .control-group.button-group { flex-wrap: nowrap; gap: 1px; }
#controls .control-group.button-group button {
    flex: 1 1 0%; border: none; border-radius: 0; padding: 8px 5px; margin: 0;
    font-size: 0.9em; font-weight: 500; color: var(--btn-text-color); text-align: center;
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color 0.2s ease; -webkit-appearance: none; -moz-appearance: none;
    appearance: none; line-height: 1.4;
}
#controls .control-group.button-group button:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.2); }

/* Button Theming (copied from your styles) */
#controls .control-group.button-group #solveButton,
#controls .control-group.button-group #teleportButton,
#controls .control-group.button-group #loadNewMazeButton,
#controls .control-group.button-group #skipAnimationButton { background-color: var(--btn-blue-bg); }
#controls .control-group.button-group #solveButton:not(:disabled):hover,
#controls .control-group.button-group #teleportButton:not(:disabled):hover,
#controls .control-group.button-group #loadNewMazeButton:not(:disabled):hover,
#controls .control-group.button-group #skipAnimationButton:not(:disabled):hover { background-color: var(--btn-blue-hover); }
#controls .control-group.button-group #solveButton:not(:disabled):active,
#controls .control-group.button-group #teleportButton:not(:disabled):active,
#controls .control-group.button-group #loadNewMazeButton:not(:disabled):active,
#controls .control-group.button-group #skipAnimationButton:not(:disabled):active { background-color: var(--btn-blue-active); }
#controls .control-group.button-group #toggleModeButton.move-button-red-theme { background-color: var(--btn-red-bg); }
#controls .control-group.button-group #toggleModeButton.move-button-red-theme:not(:disabled):hover { background-color: var(--btn-red-hover); }
#controls .control-group.button-group #toggleModeButton.move-button-red-theme:not(:disabled):active { background-color: var(--btn-red-active); }
#controls .control-group.button-group #toggleModeButton.move-button-green-theme { background-color: var(--btn-green-bg); }
#controls .control-group.button-group #toggleModeButton.move-button-green-theme:not(:disabled):hover { background-color: var(--btn-green-hover); }
#controls .control-group.button-group #toggleModeButton.move-button-green-theme:not(:disabled):active { background-color: var(--btn-green-active); }
#controls .control-group.button-group button:disabled { background-color: var(--btn-disabled-bg); color: var(--btn-disabled-text-color); cursor: not-allowed; opacity: 0.7; border-color: transparent; }

#controls .checkbox-group { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 10px; width: auto; margin-top: 5px; }
#controls .checkbox-group > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
#controls .checkbox-group > div > div { display: flex; align-items: center; }
#controls .slider-group { display: flex; align-items: center; justify-content: center; gap: 5px; width: 95%; max-width: 400px; margin-top: 8px; }
#controls .slider-group label { font-size: 0.9em; white-space: nowrap; }
#controls input[type="range"] { flex-grow: 1; cursor: pointer; height: 8px; }
#controls #fpsValueDisplay { font-size: 0.9em; font-weight: bold; min-width: 28px; text-align: right; }
#controls label { cursor: pointer; user-select: none; font-size: 0.9em; }
#controls input[type="checkbox"] { cursor: pointer; width: 13px; height: 13px; margin-right: 3px; vertical-align: middle; }
#controls button:not(.control-group.button-group button) { padding: 4px 8px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; border-radius: 3px; background-color: #e9e9e9; transition: background-color 0.2s ease, border-color 0.2s ease; }
#controls button:disabled:not(.control-group.button-group button) { cursor: not-allowed; opacity: 0.6; }
#controls button:not(:disabled):not(.control-group.button-group button):hover { background-color: #dcdcdc; border-color: #bbb;}

/* Neural Dynamics Section Styling */
.main-container > h2:has(+ #neuralDynamicsContainer) { width: 100%; max-width: 1000px; text-align: center; margin-top: 15px; margin-bottom: 0.5em; }
#neuralDynamicsContainer.dynamics-grid { width: 100%; max-width: 800px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 2px; margin-top: 5px; background-color: transparent; border: none; padding: 0; }
.dynamics-grid canvas { width: 100%; height: 35px; background-color: rgb(234, 234, 242); display: block; border: none; border-radius: 3px; overflow: hidden; box-shadow: 0px 1px 1px rgba(0,0,0,0.08); }

/* Media Queries */
/* Find this existing media query block */

@media (max-width: 1500px) {
    .main-container {
        max-width: 80%;        
    }
}

@media (max-width: 1400px) {
    .main-container {
        max-width: 85%;        
    }
}

@media (max-width: 1200px) {
    .main-container {
        max-width: 95%;        
    }
}


@media (max-width: 1000px) {
    .main-container {
        max-width: 98%;        
    }
}

@media (max-width: 850px) {
    .main-container {
        /* This was the previous change, let's adjust it further */
        /* padding-left: 2px; */
        /* padding-right: 2px; */

        /* NEW: Make .main-container wider at this breakpoint */
        width: 98%;         /* Or even 98% or 100% if you want it closer to screen edges */
        max-width: none;    /* Remove the global 72% max-width restriction */
                            /* Alternatively, you could set max-width: 850px; if you want to cap it at the breakpoint's edge */
        padding-left: 10px; /* Adjust padding for the new wider container */
        padding-right: 10px;
        /* margin-left: auto; and margin-right: auto; are inherited for centering */
    }

    .content-wrapper {
        flex-direction: column;
        align-items: center; /* This will center the columns if they are narrower than content-wrapper (due to their own max-width) */
        gap: 15px;
        margin-bottom: 10px;
        width: 100%; /* This is correct: it takes full width of the (now wider) .main-container */
    }

    .maze-column,
    .sidebar-column {
        flex-basis: auto;
        width: 100%;        /* They will try to take 100% of .content-wrapper */
        
        /* IMPORTANT: Decide on the max-width for the columns themselves in this stacked view.
           If you want them to use almost all the space .main-container now provides: */
        max-width: 100%;    /* This will make them fill the .content-wrapper,
                               which fills the .main-container (minus .main-container's padding) */
        /* OR, if you still want a readability cap on the content columns themselves,
           but larger than before: */
        /* max-width: 700px; */ /* Example: increase from 550px */
        
        min-width: unset;
        flex-grow: 0;
        max-height: none;
        box-sizing: border-box;
    }
    .maze-column {
        order: 1; /* Maze on top */
        padding: 10px; /* Keep internal padding */
    }
    .sidebar-column {
        order: 2; /* Sidebar below maze */
        overflow-y: visible;
        padding: 15px; /* Keep internal padding */

        /* From previous fix for horizontal scrollbar */
        overflow-x: hidden;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .sidebar-column h3 {
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* ... other styles within this media query like .main-container > h2:has(...) ... */
    .main-container > h2:has(+ #neuralDynamicsContainer) { max-width: 95%; }
    #neuralDynamicsContainer.dynamics-grid { max-width: 95%; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
}

@media (max-width: 768px) {
    .main-container { width: 98%; padding: 0 2px; margin-top: 5px; }
    h1 { font-size: 1.5em; } h2 { font-size: 1.2em; margin-top: 10px;}
    .main-container > h2:has(+ #neuralDynamicsContainer) { margin-top: 5px; }
    #controls { padding: 5px; gap: 3px 5px; }
    #controls .control-group { gap: 2px 4px; }
    #controls .checkbox-group { gap: 8px; }
    #mazeCanvas { width: 100%; margin-bottom: 3px; }
    .attention-grid { gap: 1px; padding: 0; grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)); }
    .sidebar-column { width: 100%; padding: 10px; }
    #neuralDynamicsContainer.dynamics-grid { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 1px; max-width: 100%; }
    .dynamics-grid canvas { height: 30px; }
    #controls .control-group.button-group { flex-wrap: nowrap !important; }
    #controls .control-group.button-group button { font-size: 0.85em; padding: 7px 4px; }
    #controls .control-group.button-group button:not(:last-child) { border-right: none; }
}

@media (max-width: 480px) {
    .main-container { max-width: 100%; width: 100%; margin: 5px 0; padding: 0; }
    .content-wrapper { gap: 10px; margin-bottom: 5px;}
    .maze-column, .sidebar-column { padding: 5px; max-width: 100%; }
    .sidebar-column p { font-size: 0.8em; }
    #loadingIndicator { height: calc(28px * 2.5); gap: calc(5px * 2); }
    .loading-indicator .loading-bar { width: calc(6px * 2.5); border-radius: calc(2px * 1.5); }
    #status { font-size: clamp(10px, 2.2vw, 13px); }
    .canvas-hint { font-size: clamp(8px, 1.6vw, 10px); padding: 3px 5px; margin: 5px 0;}
    #mazeCanvas { margin-bottom: 2px; }
    .attention-grid { grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); margin-bottom: 5px;}
    #controls { font-size: 0.8em; padding: 3px;}
    #controls .control-group.button-group button { font-size: 0.75em; padding: 6px 2px; }
    #controls .checkbox-group { flex-direction: column; align-items: center; gap: 1px; }
    #controls .checkbox-group > div { align-items: center; }
    #controls .slider-group { width: 100%; gap: 3px;}
    #controls .slider-group label { font-size: 0.85em;}
    #controls input[type="range"] { height: 6px;}
    #controls #fpsValueDisplay { font-size: 0.85em; min-width: 20px;}
    #controls input[type="checkbox"] { width: 11px; height: 11px; }
}

/* Old overlay styles are removed as the HTML overlay is removed */