/* Basic Reset & Font */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Courier New', Courier, monospace;
    padding: 10px; /* Overall padding */
    display: flex;
    gap: 10px;
    height: calc(100vh - 20px); /* Account for padding */
    transition: background-color 0.3s, color 0.3s;
}

/* --- THEME DEFINITIONS --- */
.theme-dark {
    --bg-body: #2B2B2B; --bg-panel: #3C3F41; --bg-element: #252526;
    --text-primary: #BBBBBB; --text-secondary: #888888; --text-header: #78C2C3;
    --border-color: #555555; --shadow-color: rgba(0,0,0,0.3);
    --button-primary-bg: #007bff; --button-primary-hover: #0056b3; --button-primary-text: #FFFFFF;
    --button-secondary-bg: #5A5A5A; --button-secondary-hover: #6A6A6A; --button-secondary-text: #FFFFFF;
    --button-theme-bg: #474A4C; --button-theme-hover: #5E6264; --button-theme-text: #E0E0E0; --button-theme-border: #6C7072;
    --button-disabled-bg: #444444; --button-disabled-text: #777777;
    --selected-bg: #007bff; --selected-text: #FFFFFF;
    --hover-bg: #4A4D4F;
}
.theme-medium {
    --bg-body: #505050; --bg-panel: #606060; --bg-element: #404040;
    --text-primary: #DDDDDD; --text-secondary: #AAAAAA; --text-header: #82D2D3;
    --border-color: #777777; --shadow-color: rgba(0,0,0,0.25);
    --button-primary-bg: #008CBA; --button-primary-hover: #007BAA; --button-primary-text: #FFFFFF;
    --button-secondary-bg: #707070; --button-secondary-hover: #808080; --button-secondary-text: #FFFFFF;
    --button-theme-bg: #505050; --button-theme-hover: #656565; --button-theme-text: #E8E8E8; --button-theme-border: #7A7A7A;
    --button-disabled-bg: #555555; --button-disabled-text: #888888;
    --selected-bg: #008CBA; --selected-text: #FFFFFF;
    --hover-bg: #595959;
}
.theme-normal { /* Light theme */
    --bg-body: #f0f0f0; --bg-panel: #e0e0e0; --bg-element: #ffffff;
    --text-primary: #333333; --text-secondary: #555555; --text-header: #0056b3;
    --border-color: #cccccc; --shadow-color: rgba(0,0,0,0.1);
    --button-primary-bg: #007bff; --button-primary-hover: #0056b3; --button-primary-text: #FFFFFF;
    --button-secondary-bg: #6c757d; --button-secondary-hover: #5a6268; --button-secondary-text: #FFFFFF;
    --button-theme-bg: #f8f9fa; --button-theme-hover: #e2e6ea; --button-theme-text: #212529; --button-theme-border: #ced4da;
    --button-disabled-bg: #cccccc; --button-disabled-text: #666666;
    --selected-bg: #d0e0f0; --selected-text: #333333;
    --hover-bg: #d0e0f0;
}
.theme-paper {
    --bg-body: #F5F5DC; --bg-panel: #E8E4C9; --bg-element: #FAF0E6;
    --text-primary: #5D4037; --text-secondary: #795548; --text-header: #A1887F;
    --border-color: #D2B48C; --shadow-color: rgba(85,60,42,0.15);
    --button-primary-bg: #8D6E63; --button-primary-hover: #795548; --button-primary-text: #FFFFFF;
    --button-secondary-bg: #BCAAA4; --button-secondary-hover: #A1887F; --button-secondary-text: #4E342E;
    --button-theme-bg: #EFEBE9; --button-theme-hover: #D7CCC8; --button-theme-text: #5D4037; --button-theme-border: #BCAAA4;
    --button-disabled-bg: #D7CCC8; --button-disabled-text: #A1887F;
    --selected-bg: #C5A99A; --selected-text: #FFFFFF;
    --hover-bg: #D7CCC8;
}
/* --- END THEME DEFINITIONS --- */

body { background-color: var(--bg-body); color: var(--text-primary); }
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

.panel {
    background-color: var(--bg-panel);
    padding: 15px; border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.story-structures-panel { width: 20%; }
.settings-panel { width: 25%; }
.step-boxes-panel { width: 35%; }
.generated-story-panel { width: 20%; }

.theme-selector { display: flex; gap: 5px; margin-bottom: 10px; }
.theme-button { /* Specific styling for theme buttons */
    font-size: 0.8em;
    padding: 5px 8px;
    width: auto;
    flex-grow: 1;
    background-color: var(--button-theme-bg);
    color: var(--button-theme-text);
    border: 1px solid var(--button-theme-border);
}
.theme-button:hover {
    background-color: var(--button-theme-hover);
}
.theme-button.active-theme { /* Style for the currently active theme button */
    background-color: var(--selected-bg);
    color: var(--selected-text);
    border-color: var(--selected-bg);
}


.framework-list {
    list-style: none; padding: 0; margin: 0;
    flex-grow: 1; overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: 4px;
    background-color: var(--bg-element); min-height: 100px;
}
.framework-list li {
    padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.framework-list li:last-child { border-bottom: none; }
.framework-list li:hover { background-color: var(--hover-bg); }
.framework-list li.selected { background-color: var(--selected-bg); color: var(--selected-text); }

.keywords-input, .step-box {
    width: calc(100% - 22px); padding: 10px; border-radius: 4px;
    border: 1px solid var(--border-color); background-color: var(--bg-element);
    color: var(--text-primary); font-family: 'Courier New', Courier, monospace;
}
.step-box { min-height: 50px; resize: none; overflow-y: hidden; font-size: 0.9em; line-height: 1.5; }
#story-output {
    flex-grow: 1; white-space: pre-wrap; overflow-y: auto; font-size: 0.95em; line-height: 1.6;
    background-color: var(--bg-element); padding: 10px; border-radius: 4px;
    border: 1px solid var(--border-color); color: var(--text-primary);
}
#story-output p { text-indent: 2em; margin-top: 0; margin-bottom: 1em; }
#story-output p:first-child { text-indent: 0; }
#story-output em { color: var(--text-secondary); }

.slider-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.slider-group { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; }
.slider-group label { flex-basis: 50%; text-align: right; padding-right: 10px; color: var(--text-primary); }
.slider-group input[type="range"] { flex-grow: 1; margin: 0 5px; }
.slider-group .value-display { flex-basis: 10%; text-align: left; min-width: 20px; color: var(--text-primary); }

.slider-like-group {
    display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; font-size: 0.9em;
}
.slider-like-group .slider-control { display: flex; align-items: center; gap: 10px; }
.slider-like-group input[type="range"] { flex-grow: 1; }
.slider-like-group label, .slider-like-group span { color: var(--text-primary); }

button {
    padding: 10px 15px;
    border: none; border-radius: 4px;
    cursor: pointer; transition: background-color 0.2s, color 0.2s;
    width: 100%; box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace; font-weight: bold;
}
#generate-btn, #bake-story-btn {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}
#generate-btn:hover, #bake-story-btn:hover {
    background-color: var(--button-primary-hover);
}

#random-keywords-btn, #randomize-sliders-btn, #reset-sliders-btn {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}
#random-keywords-btn:hover, #randomize-sliders-btn:hover, #reset-sliders-btn:hover {
    background-color: var(--button-secondary-hover);
}
button:disabled {
    background-color: var(--button-disabled-bg) !important; /* Ensure override */
    color: var(--button-disabled-text) !important; /* Ensure override */
    cursor: not-allowed;
}

h3 {
    margin-top: 5px; margin-bottom: 8px; color: var(--text-header);
    border-bottom: 1px solid var(--border-color); padding-bottom: 5px;
}
.center-panel-header {
    font-size: 1.1em; font-weight: bold; padding: 10px; background-color: var(--bg-element);
    border: 1px solid var(--border-color); border-radius: 4px;
    min-height: 40px; text-align: center; margin-bottom: 10px; color: var(--text-primary);
}
.step-boxes-container { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.status-message {
    padding: 10px; background-color: var(--bg-element); border: 1px solid var(--border-color);
    border-radius: 4px; margin-top: 10px; font-style: italic; font-size: 0.9em; color: var(--text-secondary);
}
#estimated-words-container {
    font-size: 0.9em; padding: 8px; background-color: var(--bg-element); border: 1px solid var(--border-color);
    border-radius: 4px; text-align: center; margin-top: auto; color: var(--text-primary);
}
.slider-buttons-group { display: flex; gap: 10px; margin-top: 5px; }