:root {
            --bg-color: #131314;
            --chat-bg: #131314;
            --text-color: #e3e3e3;
            --user-msg-bg: #2b2c2e;
            --input-bg: #1e1f20;
            --border-color: #444746;
            --accent-color: #7468ff;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
        body { background-color: var(--bg-color); color: var(--text-color); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

        .chat-container { display: flex; flex-direction: column; flex: 1; height: 100%; background-color: var(--chat-bg); }
        
        .status-bar { padding: 10px 15%; font-size: 0.85rem; color: #aaa; border-bottom: 1px solid var(--border-color); background-color: #1e1f20; }
        
        .messages-zone { flex: 1; overflow-y: auto; padding: 20px 0; display: flex; flex-direction: column; }
        .message-row { width: 100%; padding: 20px 15%; display: flex; gap: 18px; animation: fadeIn 0.2s ease-out; }
        @media (max-width: 768px) { .message-row { padding: 15px 5%; } }
        
        .message-row.user { background-color: var(--user-msg-bg); }
        .avatar { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; flex-shrink: 0; }
        .user .avatar { background-color: #4a90e2; color: white; }
        .ai .avatar { background-color: var(--accent-color); color: white; }
        
        .message-content { line-height: 1.6; font-size: 1rem; white-space: pre-wrap; word-break: break-word; }

        .input-zone { padding: 20px 15%; background: linear-gradient(transparent, var(--chat-bg) 20%); }
        @media (max-width: 768px) { .input-zone { padding: 10px 5%; } }
        
        .input-wrapper { background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: 24px; display: flex; align-items: center; padding: 6px 14px 6px 20px; }
        .input-wrapper:focus-within { border-color: var(--accent-color); }
        
        #input-message { flex: 1; background: transparent; border: none; outline: none; color: var(--text-color); font-size: 1rem; padding: 10px 0; }
        
        #btn-send { background-color: var(--accent-color); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        #btn-send:disabled { background-color: #444746; cursor: not-allowed; }

        .typing-indicator { display: flex; gap: 4px; padding: 8px 0; }
        .dot { width: 8px; height: 8px; background-color: var(--text-color); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; opacity: 0.6; }
        .dot:nth-child(1) { animation-delay: -0.32s; }
        .dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }