.input-area {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}

#userInput {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    resize: vertical;
    min-height: 40px;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

#sendButton {
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#sendButton:hover {
    background-color: var(--accent-hover);
}

.save-load-controls {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}

#saveChatButton {
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#saveChatButton:hover {
    background-color: var(--accent-hover);
}

button#deleteChatButton {
    background-color: #ff4444;
    color: white;
    transition: background-color 0.3s;
}

button#deleteChatButton:hover {
    background-color: #cc0000;
}

button#deleteChatButton:disabled {
    background-color: var(--disabled-color);
    cursor: not-allowed;
}