:root {
    color-scheme: light dark;
    --bg-color: #fff;
    --text-color: #000;
    --border-color: #eee;
    --header-bg: #f9f9f9;
    --header-border: #e0e0e0;
    --header-text: #333;
    --message-bg: #e5e5ea;
    --message-text: #000;
    --timestamp-color: #8e8e93;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #000;
        --text-color: #fff;
        --border-color: #1c1c1e;
        --header-bg: #1c1c1e;
        --header-border: #2c2c2e;
        --header-text: #fff;
        --message-bg: #2c2c2e;
        --message-text: #fff;
        --timestamp-color: #8e8e93;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    justify-content: center;
    height: 100vh;
}

.chat-container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.chat-header {
    padding: 15px;
    border-bottom: 1px solid var(--header-border);
    background-color: var(--header-bg); /* Fallback */
    background-color: rgba(var(--header-bg), 0.8); /* Attempt at transparency if we had rgb vars */
    /* For true backdrop filter support with dynamic colors, we usually rely on the opacity of the bg color */
    /* Let's stick to simple solid or slightly transparent if we defined rgb components. 
       For now, using the variable directly which is solid. 
       To keep the blur effect nice, we might want to use a semi-transparent color for the variable or just keep it solid. 
       Let's use the variable but note that blur works best with transparency. 
       For simplicity in this refactor, I'll stick to the variable, but I'll make the light mode header slightly transparent 
       to match the original "f9f9f9" feel if it was meant to be translucent. 
       Actually, the original was #f9f9f9 with blur. To see the blur, it needs opacity.
    */
    background-color: var(--header-bg);
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Adjusting transparency manually for the "frosted glass" look if desired, 
   but variables make it tricky without splitting RGB. 
   We will trust the solid colors for now or simple hex.
*/

.header-icon {
    width: 24px;
    height: 24px;
}

.chat-header h1 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--header-text);
}

.messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 75%;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
}

/* Incoming message style (Gray, Left) */
.message.received {
    align-self: flex-start;
    background-color: var(--message-bg);
    color: var(--message-text);
    border-bottom-left-radius: 5px;
}

/* Outgoing message style (Blue, Right) */
.message.sent {
    align-self: flex-end;
    background-color: #007aff;
    color: #fff;
    border-bottom-right-radius: 5px;
}

/* Timestamp */
.timestamp {
    font-size: 0.7rem;
    color: var(--timestamp-color);
    margin-top: 5px;
    align-self: flex-start;
    margin-left: 10px;
}

.message.sent + .timestamp {
    align-self: flex-end;
    margin-left: 0;
    margin-right: 10px;
}

.chat-input {
    display: none; /* Shown via JS in interactive mode */
    padding: 10px 15px 20px 15px;
    border-top: 1px solid var(--border-color);
    background-color: var(--header-bg);
    gap: 10px;
    align-items: flex-end;
}

.chat-input textarea {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 15px;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: none;
    max-height: 100px;
    outline: none;
}

.chat-input button {
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 4px;
}

.chat-input button:disabled {
    background-color: var(--timestamp-color);
    cursor: default;
}