@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
        
        :root {
            --bg-gradient-start: #667eea;
            --bg-gradient-end: #764ba2;
            --chat-bg: #fff;
            --header-bg: #564aba;
            --header-text: #fff;
            --messages-bg: #f9f9fb;
            --user-bubble-bg: #564aba;
            --user-bubble-text: #fff;
            --system-bubble-bg: #e9e9eb;
            --system-bubble-text: #333;
            --input-bg: #fff;
            --input-text: #333;
            --input-border: #ddd;
            --input-focus-border: #564aba;
            --scrollbar-thumb: #b3aef6;
            --send-button-bg: #564aba;
            --send-button-text: #fff;
        }

        [data-theme="dark"] {
            --bg-gradient-start: #232526;
            --bg-gradient-end: #414345;
            --chat-bg: #2c2f33;
            --header-bg: #7289da;
            --messages-bg: #36393f;
            --user-bubble-bg: #7289da;
            --system-bubble-bg: #4f545c;
            --system-bubble-text: #dcddde;
            --input-bg: #40444b;
            --input-text: #dcddde;
            --input-border: #2c2f33;
            --input-focus-border: #7289da;
            --scrollbar-thumb: #7289da;
            --send-button-bg: #7289da;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: 'Nunito', sans-serif;
            background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.4s ease;
        }

        .chat-container {
            background: var(--chat-bg);
            width: 400px;
            max-width: 95vw;
            height: 600px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: background 0.4s ease;
        }

        header {
            background: var(--header-bg);
            color: var(--header-text);
            padding: 15px 20px;
            font-size: 1.3rem;
            font-weight: 700;
            user-select: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.4s ease, color 0.4s ease;
        }
        
        .theme-switch-wrapper { display: flex; align-items: center; gap: 8px; }
        .theme-switch { display: inline-block; height: 20px; position: relative; width: 40px; }
        .theme-switch input { display:none; }
        .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 20px; }
        .slider:before { background-color: #fff; bottom: 2px; content: ""; height: 16px; left: 2px; position: absolute; transition: .4s; width: 16px; border-radius: 50%; }
        input:checked + .slider { background-color: #667eea; }
        input:checked + .slider:before { transform: translateX(20px); }

        .messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--messages-bg);
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: background 0.4s ease;
        }
        
        .message {
            max-width: 85%;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            animation: fadeIn 0.3s ease forwards;
        }
        .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
        .message-body { display: flex; flex-direction: column; }
        .message-content { padding: 12px 18px; border-radius: 20px; font-size: 0.95rem; line-height: 1.4; }
        .message-timestamp { font-size: 0.75rem; color: #999; margin-top: 4px; }
        .message.user { align-self: flex-end; flex-direction: row-reverse; }
        .message.user .message-body { align-items: flex-end; }
        .message.user .message-content { background: var(--user-bubble-bg); color: var(--user-bubble-text); border-bottom-right-radius: 4px; }
        .message.system { align-self: flex-start; }
        .message.system .message-body { align-items: flex-start; }
        .message.system .message-content { background: var(--system-bubble-bg); color: var(--system-bubble-text); border-bottom-left-radius: 4px; }

        .input-area {
            padding: 10px 15px;
            display: flex;
            gap: 10px;
            align-items: center;
            border-top: 1px solid var(--input-border);
            background: var(--input-bg);
        }
        .input-area input {
            flex: 1;
            padding: 12px 20px;
            border-radius: 22px;
            border: 1px solid var(--input-border);
            font-size: 1rem;
            outline: none;
            background: var(--input-bg);
            color: var(--input-text);
            transition: all 0.3s ease;
        }
        .input-area input:focus { border-color: var(--input-focus-border); }

        .input-area button {
            background: var(--send-button-bg);
            color: var(--send-button-text);
            border: none;
            width: 44px;
            height: 44px;
            font-size: 1.5rem;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: filter 0.2s ease, transform 0.2s ease;
        }
        .input-area button:hover { filter: brightness(1.15); transform: scale(1.05); }

        .messages::-webkit-scrollbar { width: 8px; }
        .messages::-webkit-scrollbar-track { background: transparent; }
        .messages::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 10px; }
        @keyframes fadeIn { 
            from { opacity: 0; transform: translateY(8px); } 
            to   { opacity: 1; transform: translateY(0); } 
        }