/* Basic Reset & Body Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column; /* Ensure body takes height */
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main Container Layout */
.container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Take remaining vertical space */
    background-color: #f4f4f4; /* Default light background */
}

/* Controls Panel */
.controls {
    padding: 15px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap; /* Allow controls to wrap on smaller screens */
    gap: 20px; /* Spacing between control groups */
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Spacing within a control group */
}

.control-group label {
    font-weight: 500;
    white-space: nowrap; /* Prevent labels from breaking */
}

.controls input[type="text"],
.controls select,
.controls button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}

.controls input[type="color"] {
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 35px; /* Match other inputs roughly */
    width: 40px;
    cursor: pointer;
    background-color: #fff; /* Ensure picker background is visible */
}

.controls button {
    background-color: #6441a5; /* Twitch Purple */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.controls button:hover {
    background-color: #503480;
}

.controls input[type="range"] {
    cursor: pointer;
}

/* Info text for non-functional controls */
.info-text {
    font-size: 0.8em;
    color: #666;
    width: 100%; /* Take full width if wraps */
    flex-basis: 100%;
    text-align: center;
    padding-top: 5px;
}
.control-group.info-only label,
.control-group.info-only span {
    color: #888; /* Dim the labels for info-only controls */
}


/* Chat Container */
.chat-container {
    flex-grow: 1; /* Takes up remaining space */
    padding: 10px; /* Optional space around the iframe */
    background-color: #ffffff; /* Default background for the container */
    transition: background-color 0.3s ease;
    display: flex; /* Needed for iframe to fill height */
}

#twitch-chat-iframe {
    width: 100%;
    height: 100%;
    border: none; /* Remove default iframe border */
}

/* --- Theme Styles --- */

/* Light Theme (Default) */
body.theme-light { background-color: #f8f8f8; color: #333; }
.theme-light .container { background-color: #f4f4f4; }
.theme-light .controls { background-color: #ffffff; border-bottom: 1px solid #ccc; color: #333; }
.theme-light .controls input, .theme-light .controls select { border: 1px solid #ccc; background-color: #fff; color: #333; }
.theme-light .info-text { color: #666; }
/* .theme-light .chat-container { background-color: #ffffff; } -> Handled by color picker now */

/* Dark Theme */
body.theme-dark { background-color: #1c1c1e; color: #e1e1e1; }
.theme-dark .container { background-color: #222224; }
.theme-dark .controls { background-color: #2a2a2d; border-bottom: 1px solid #444; color: #e1e1e1; }
.theme-dark .controls input, .theme-dark .controls select { border: 1px solid #555; background-color: #3a3a3c; color: #e1e1e1; }
.theme-dark .controls input[type="color"] { background-color: #3a3a3c; } /* Adjust color picker bg */
.theme-dark .controls button { background-color: #7a5fb8; }
.theme-dark .controls button:hover { background-color: #9173d1; }
.theme-dark .info-text { color: #aaa; }
/* .theme-dark .chat-container { background-color: #2e2e2e; } -> Handled by color picker now */
.theme-dark .control-group.info-only label,
.theme-dark .control-group.info-only span {
    color: #aaa;
}


/* Cozy Theme */
body.theme-cozy { background-color: #fdf6e3; color: #657b83; }
.theme-cozy .container { background-color: #eee8d5; }
.theme-cozy .controls { background-color: #fdf6e3; border-bottom: 1px solid #eee8d5; color: #586e75; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.theme-cozy .controls input, .theme-cozy .controls select { border: 1px solid #cdc8b8; background-color: #fff; color: #586e75; }
.theme-cozy .controls input[type="color"] { background-color: #fff; }
.theme-cozy .controls button { background-color: #268bd2; } /* Solarized Blue */
.theme-cozy .controls button:hover { background-color: #1a6b9f; }
.theme-cozy .info-text { color: #93a1a1; }
/* .theme-cozy .chat-container { background-color: #fdf6e3; } -> Handled by color picker now */
.theme-cozy .control-group.info-only label,
.theme-cozy .control-group.info-only span {
    color: #93a1a1;
}

/* Simple Responsiveness for controls */
@media (max-width: 768px) {
    .controls {
        flex-direction: column;
        align-items: stretch; /* Make controls take full width */
        gap: 15px;
    }
    .control-group {
        justify-content: space-between; /* Space out label and input */
    }
     .info-text {
        text-align: left;
        padding-top: 0;
    }
}

@media (max-width: 480px) {
     .control-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
     .control-group input,
     .control-group select,
     .control-group button {
         width: 100%; /* Make inputs/buttons full width */
     }
     .control-group input[type="range"] {
         width: calc(100% - 50px); /* Adjust range width */
     }
      .control-group input[type="color"] {
         width: 50px; /* Fixed width for color picker */
         height: 30px;
     }
}