Hey we have this webpage in different files, js, cs and HTML, we want to keep it that way, but how do we move the position of the different menus and areas? For example, we want to move the room window to the center of the web, and move the theme selector to the bottom right and make it smaller, and move the area selector to the bottom and make it wide instead of tall



<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LLM Controlled Environment</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <!-- Central Display Area -->
        <div id="central-display">
            <div id="room-background">
                <div class="character" id="character"></div>
                <!-- Message Bubbles Container -->
                <div id="message-bubbles"></div>
            </div>
            <div class="room-label" id="current-room-label">Bedroom</div>
            <!-- Hover Info (Optional) -->
            <!-- You can add additional elements here if needed -->
        </div>

        <!-- Chatbox Area -->
        <div id="chat-container">
            <div id="chat"></div>
            <div id="input-area">
                <input type="text" id="input" placeholder="Enter your message here..." autofocus>
                <button id="send">Send</button>
            </div>
        </div>

        <!-- Possible Rooms Section -->
        <div id="possible-rooms-container">
            <h2>Available Rooms</h2>
            <ul id="possible-rooms">
                <li data-room="kitchen">Kitchen</li>
                <li data-room="living_room">Living Room</li>
                <li data-room="bedroom">Bedroom</li>
                <li data-room="study">Study</li>
                <li data-room="library">Library</li>
                <li data-room="garden">Garden</li>
                <!-- Add more rooms as needed -->
            </ul>
        </div>

        <!-- Theme Selection Section -->
        <div id="theme-selector">
            <h2>Select Theme</h2>
            <select id="theme-dropdown">
                <option value="default">Bubblegum Dream</option>
                <option value="dark">Midnight Blue</option>
                <option value="pastel">Pastel Paradise</option>
                <!-- Add more themes as needed -->
            </select>
        </div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>





/* static/styles.css */

/* CSS Variables for Themes */
:root {
    --primary-color: rgba(173, 216, 230, 0.7); /* Default: Light Blue Translucent */
    --secondary-color: rgba(135,206,250,0.5); /* Lighter Blue */
    --accent-color: #173b13; /* Deep green for text */
    --outline-color: #f596ff; /* Pink  */
    --background-color: #E0F7FA; /* Light Cyan */
    --character-color: #f596ff; /* Pink */
    --button-color: #f2dc18; /* Yellow */
    --button-hover-color: #63B3ED; /* Light Dodger Blue */
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background-color); /* Soft pastel background */
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
}

.container {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex-wrap: wrap;
}

/* Central Display Styles */
#central-display {
    position: relative;
    width: 400px;
    height: 400px;
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    box-shadow: 0 9px 60px rgba(0, 0, 0, 0.2);
    border: 12px solid var(--outline-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

#room-background {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.room-label {
    position: absolute;
    bottom: 10px;
    background: var(--secondary-color);
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    color: var(--accent-color);
    backdrop-filter: blur(5px);
    font-size: 1.2em;
}

/* Character Styles */
.character {
    width: 80px;
    height: 80px;
    background-color: var(--character-color);
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, background-color 0.5s ease;
    cursor: pointer;
}

.character:hover {
    transform: translate(-50%, 50%) scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

/* Message Bubbles */
#message-bubbles {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    pointer-events: none;
    z-index: 10;
}

.message-bubble {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-size: 0.9em;
    animation: fadeOut 5s forwards;
    max-width: 70%;
}

.message-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20%;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
}

@keyframes fadeOut {
    0% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* Chatbox Styles */
#chat-container {
    width: 350px;
    display: flex;
    flex-direction: column;
}

#chat {
    flex: 1;
    background: rgba(173, 216, 230, 0.5); /* Translucent Blue */
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    overflow-y: auto;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    max-height: 400px; /* Fixed height */
}

#chat div {
    margin-bottom: 15px;
}

#chat strong {
    color: #333;
}

#chat .user {
    text-align: right;
    color: darkblue;
}

#chat .assistant {
    text-align: left;
    color: navy;
}

#chat .assistant-action {
    background-color: rgba(173, 216, 230, 0.3);
    padding: 10px 15px;
    border-radius: 15px;
    display: inline-block;
}

.error { 
    color: #FF4D4D; 
    font-weight: bold;
}

/* Input Area */
#input-area {
    display: flex;
    gap: 10px;
}

#input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background: rgba(173, 216, 230, 0.5);
    backdrop-filter: blur(5px);
    outline: none;
    color: #333;
    font-size: 1em;
}

#send {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: var(--button-color);
    color: var(--accent-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#send:hover {
    background-color: var(--button-hover-color);
}

/* Possible Rooms Section */
#possible-rooms-container {
    width: 200px;
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border: 3px solid var(--outline-color);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#possible-rooms-container h2 {
    text-align: center;
    color: var(--accent-color);
}

#possible-rooms {
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0 0;
}

#possible-rooms li {
    padding: 8px 12px;
    margin-bottom: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: var(--accent-color);
}

#possible-rooms li:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateX(5px);
}

/* Theme Selector Section */
#theme-selector {
    width: 200px;
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border: 3px solid var(--outline-color);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#theme-selector h2 {
    text-align: center;
    color: var(--accent-color);
}

#theme-dropdown {
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    cursor: pointer;
    color: var(--accent-color);
    transition: background 0.3s ease;
}

#theme-dropdown:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Scrollbar Styling */
#chat::-webkit-scrollbar {
    width: 8px;
}

#chat::-webkit-scrollbar-thumb {
    background: rgba(173, 216, 230, 0.5);
    border-radius: 4px;
}

#chat::-webkit-scrollbar-thumb:hover {
    background: rgba(173, 216, 230, 0.7);
}