*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#0b141a;--bg-chat:#0b141a;--bg-header:#1f2c34;--bg-input:#1f2c34;--bg-msg-user:#005c4b;--bg-msg-ai:#1f2c34;--text-primary:#e9edef;--text-secondary:#8696a0;--accent:#00a884;--accent-hover:#06cf9c;--border:#2a3942;--code-bg:#111b21}body{font-family:Inter,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden}.app,body{height:100vh}.app{display:flex;flex-direction:column;max-width:900px;margin:0 auto}.header{gap:12px;padding:10px 16px;background:var(--bg-header);border-bottom:1px solid var(--border)}.header,.header-avatar{display:flex;align-items:center;flex-shrink:0}.header-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00d4aa);justify-content:center;font-size:1.1rem;font-weight:700;color:#fff}.header-info h1{font-size:1rem;font-weight:600;color:var(--text-primary)}.header-status{font-size:.75rem;color:var(--accent);display:flex;align-items:center;gap:4px}.header-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}.chat-area{flex:1 1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.chat-area::-webkit-scrollbar{width:6px}.chat-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.message{max-width:85%;padding:8px 12px;border-radius:8px;font-size:.9rem;line-height:1.5;position:relative;animation:msgIn .2s ease-out;word-wrap:break-word}@keyframes msgIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message-user{background:var(--bg-msg-user);align-self:flex-end;border-bottom-right-radius:2px}.message-ai{background:var(--bg-msg-ai);align-self:flex-start;border-bottom-left-radius:2px}.message-time{font-size:.65rem;color:var(--text-secondary);text-align:right;margin-top:4px}.message-ai .msg-name{font-size:.75rem;color:var(--accent);font-weight:600;margin-bottom:2px}.message pre{background:var(--code-bg);border:1px solid var(--border);border-radius:6px;padding:10px;margin:8px 0;overflow-x:auto;font-size:.8rem;line-height:1.4}.message code,.message pre{font-family:JetBrains Mono,Fira Code,monospace}.message code,.message p code{font-size:.82rem}.message p code{background:var(--code-bg);padding:2px 5px;border-radius:3px}.typing{display:flex;gap:4px;padding:12px 16px;align-self:flex-start;background:var(--bg-msg-ai);border-radius:8px}.typing span{width:7px;height:7px;border-radius:50%;background:var(--text-secondary);animation:bounce 1.4s ease-in-out infinite}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.input-area{display:flex;align-items:flex-end;gap:8px;padding:10px 16px;background:var(--bg-input);border-top:1px solid var(--border);flex-shrink:0}.input-area textarea{flex:1 1;background:var(--bg-primary);border:1px solid var(--border);border-radius:20px;padding:10px 16px;color:var(--text-primary);font-family:Inter,sans-serif;font-size:.9rem;resize:none;outline:none;max-height:120px;min-height:42px;line-height:1.4;transition:border-color .2s}.input-area textarea:focus{border-color:var(--accent)}.input-area textarea::placeholder{color:var(--text-secondary)}.send-btn{width:42px;height:42px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .1s;flex-shrink:0}.send-btn:hover{background:var(--accent-hover)}.send-btn:active{transform:scale(.95)}.send-btn:disabled{opacity:.4;cursor:not-allowed}.send-btn svg{fill:#fff;width:20px;height:20px}.welcome{text-align:center;padding:40px 20px;color:var(--text-secondary)}.welcome h2{font-size:1.3rem;color:var(--text-primary);margin-bottom:8px}.welcome p{font-size:.85rem}@media (max-width:600px){.message{max-width:92%;font-size:.85rem}.header-info h1{font-size:.9rem}}