:root {
    --background-color: #f0f2f5;
    --text-color: #050505;
    --secondary-text-color: #65676b;
    --bubble-background: #e4e6eb;
    --user-bubble-background: #0084ff;
    --user-bubble-text: #ffffff;
    --border-color: #ced0d4;
    --button-color: #4a4a4a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); }
#app-container { display: flex; flex-direction: column; height: 100%; width: 100%; max-width: 800px; margin: 0 auto; background-color: #ffffff; }
#chat-view { flex-grow: 1; display: flex; flex-direction: column; overflow-y: hidden; }
#welcome-screen { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; transition: opacity 0.3s ease-out; }
#welcome-screen.hidden { display: none; }
.profile-pic { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
#welcome-screen h1 { font-size: 24px; font-weight: 600; }
.description, .creator { color: var(--secondary-text-color); margin-top: 4px; }
#chat-log { flex-grow: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.bot-message, .user-message { display: flex; align-items: flex-start; gap: 10px; max-width: 85%; }
.user-message { align-self: flex-end; }
.bot-message-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.message-bubble { padding: 10px 14px; border-radius: 18px; line-height: 1.5; }
.bot-message .message-bubble { background-color: var(--bubble-background); color: var(--text-color); border-top-left-radius: 4px; }
.user-message .message-bubble { background-color: var(--user-bubble-background); color: var(--user-bubble-text); align-self: flex-end; border-top-right-radius: 4px; }
.message-bubble strong { font-weight: 600; }
.typing-indicator { display: flex; align-items: center; gap: 5px; padding: 10px 14px; }
.typing-indicator .dot { width: 8px; height: 8px; background-color: var(--secondary-text-color); border-radius: 50%; animation: wave 1.3s infinite ease-in-out; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#input-form { padding: 10px 16px; background-color: #ffffff; }
.input-wrapper { display: flex; align-items: center; background-color: var(--bubble-background); border-radius: 24px; padding: 4px; }
#user-input { flex-grow: 1; border: none; outline: none; background-color: transparent; padding: 10px; font-size: 16px; color: var(--text-color); }
#send-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background-color: var(--button-color); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background-color 0.2s; }
#send-btn:hover { background-color: #2c2c2c; }
#send-btn:disabled { background-color: #bdbdbd; cursor: not-allowed; transform: scale(1); }
footer { text-align: center; padding: 10px; font-size: 12px; color: var(--secondary-text-color); background-color: #ffffff; }