*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0a0a;--bg-secondary: #111111;--bg-tertiary: #1a1a1a;--bg-hover: #202020;--bg-active: #252525;--border: #252525;--border-light: #2e2e2e;--text-primary: #e8e8e8;--text-secondary: #999999;--text-muted: #555555;--accent: #7c6af7;--accent-hover: #6b59e8;--accent-dim: rgba(124, 106, 247, .15);--user-bubble-bg: #1a1830;--user-bubble-border: #2d2850;--ai-bubble-bg: #141414;--danger: #ef4444;--success: #22c55e;--warning: #f59e0b;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow: 0 4px 24px rgba(0, 0, 0, .4);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3)}html,body,#root{height:100%;width:100%;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}a{color:var(--accent);text-decoration:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app{display:flex;height:100%;width:100%;background:var(--bg-primary)}.sidebar{width:260px;min-width:260px;height:100%;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width .2s ease,min-width .2s ease,opacity .2s ease;overflow:hidden}.sidebar.collapsed{width:0;min-width:0;opacity:0;pointer-events:none}.sidebar-header{padding:16px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}.sidebar-logo{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),#a78bfa);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}.sidebar-title{font-size:13px;font-weight:600;color:var(--text-primary);flex:1}.new-chat-btn{padding:9px 12px;margin:8px;border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--bg-tertiary);color:var(--text-secondary);display:flex;align-items:center;gap:8px;font-size:13px;transition:all .15s;cursor:pointer;width:calc(100% - 16px)}.new-chat-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.sidebar-conversations{flex:1;overflow-y:auto;padding:4px 8px}.sidebar-section-label{font-size:11px;font-weight:500;color:var(--text-muted);padding:8px 8px 4px;text-transform:uppercase;letter-spacing:.05em}.conversation-item{padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s;position:relative}.conversation-item:hover{background:var(--bg-hover)}.conversation-item.active{background:var(--accent-dim)}.conversation-title{flex:1;font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item.active .conversation-title{color:var(--text-primary)}.conversation-delete{opacity:0;padding:3px 5px;border-radius:4px;color:var(--text-muted);font-size:13px;transition:all .1s}.conversation-item:hover .conversation-delete{opacity:1}.conversation-delete:hover{color:var(--danger);background:#ef44441a}.sidebar-footer{padding:12px;border-top:1px solid var(--border)}.settings-btn{width:100%;padding:9px 12px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);transition:all .15s}.settings-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.main-area{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden}.chat-header{height:54px;min-height:54px;padding:0 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--bg-primary)}.toggle-sidebar-btn{padding:6px;border-radius:var(--radius-sm);color:var(--text-muted);transition:all .15s}.toggle-sidebar-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.model-badge{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--bg-tertiary);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.model-badge:hover{border-color:var(--accent);color:var(--text-primary)}.model-dot{width:6px;height:6px;border-radius:50%;background:var(--success)}.header-spacer{flex:1}.header-actions{display:flex;gap:4px}.icon-btn{padding:7px;border-radius:var(--radius-sm);color:var(--text-muted);transition:all .15s;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.welcome-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:24px;overflow-y:auto}.welcome-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--accent) 0%,#a78bfa 100%);border-radius:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #7c6af74d}.welcome-icon svg{width:32px;height:32px;color:#fff}.welcome-heading{text-align:center}.welcome-heading h1{font-size:26px;font-weight:600;color:var(--text-primary);margin-bottom:8px;line-height:1.3}.welcome-heading p{font-size:14px;color:var(--text-secondary)}.welcome-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:600px}.suggestion-chip{padding:8px 14px;border-radius:20px;border:1px solid var(--border-light);background:var(--bg-tertiary);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .15s}.suggestion-chip:hover{border-color:var(--accent);color:var(--text-primary);background:var(--accent-dim)}.messages-container{flex:1;overflow-y:auto;padding:20px 0 8px;display:flex;flex-direction:column}.message-row{display:flex;padding:6px 20px;gap:12px;max-width:900px;width:100%;margin:0 auto}.message-row.user{justify-content:flex-end}.message-avatar{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;margin-top:4px}.message-avatar.ai{background:linear-gradient(135deg,var(--accent),#a78bfa);color:#fff}.message-avatar.user{background:var(--bg-tertiary);border:1px solid var(--border-light);color:var(--text-secondary)}.message-content-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.message-row.user .message-content-wrapper{align-items:flex-end;max-width:78%;flex:unset}.message-bubble{padding:11px 15px;border-radius:var(--radius-md);line-height:1.7;font-size:14px;word-break:break-word}.message-bubble.user{background:var(--user-bubble-bg);border:1px solid var(--user-bubble-border);color:var(--text-primary);border-bottom-right-radius:4px}.message-bubble.ai{background:transparent;padding:2px 0 0}.message-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}.attachment-img{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-light);max-width:220px}.attachment-img img{display:block;max-width:100%;max-height:160px;object-fit:cover}.attachment-file{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary)}.message-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.message-row:hover .message-actions{opacity:1}.message-action-btn{padding:3px 8px;border-radius:6px;font-size:11px;color:var(--text-muted);background:var(--bg-secondary);border:1px solid var(--border);display:flex;align-items:center;gap:4px;transition:all .1s;cursor:pointer}.message-action-btn:hover{color:var(--text-secondary);border-color:var(--border-light)}.markdown-content h1,.markdown-content h2,.markdown-content h3{margin:14px 0 6px;font-weight:600;line-height:1.3;color:var(--text-primary)}.markdown-content h1{font-size:20px}.markdown-content h2{font-size:17px}.markdown-content h3{font-size:15px}.markdown-content p{margin-bottom:8px}.markdown-content p:last-child{margin-bottom:0}.markdown-content ul,.markdown-content ol{padding-left:20px;margin-bottom:8px}.markdown-content li{margin-bottom:4px}.markdown-content code{font-family:Fira Code,Cascadia Code,JetBrains Mono,monospace;font-size:13px;background:var(--bg-tertiary);padding:1px 5px;border-radius:4px;border:1px solid var(--border-light);color:#c4a8ff}.markdown-content pre{margin:10px 0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-light)}.markdown-content pre code{background:none;border:none;padding:0;color:inherit;font-size:13px}.code-block-wrapper{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-light);margin:10px 0}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;background:#161622;border-bottom:1px solid var(--border-light);font-size:11px;color:var(--text-muted);font-family:monospace}.code-copy-btn{padding:3px 8px;border-radius:4px;font-size:11px;background:var(--bg-hover);border:1px solid var(--border-light);color:var(--text-secondary);cursor:pointer;transition:all .1s;font-family:sans-serif}.code-copy-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--text-primary)}.markdown-content blockquote{border-left:3px solid var(--accent);padding-left:14px;color:var(--text-secondary);margin:8px 0;font-style:italic}.markdown-content table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}.markdown-content th,.markdown-content td{padding:8px 12px;border:1px solid var(--border-light);text-align:left}.markdown-content th{background:var(--bg-tertiary);font-weight:600}.markdown-content tr:hover td{background:#ffffff05}.markdown-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.markdown-content hr{border:none;border-top:1px solid var(--border-light);margin:12px 0}.typing-indicator{display:flex;align-items:center;gap:5px;padding:6px 0 4px}.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:typing-bounce 1.4s infinite ease-in-out}.typing-dot:nth-child(1){animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}.input-area{padding:10px 20px 18px;background:var(--bg-primary)}.input-area-inner{max-width:860px;margin:0 auto}.file-previews{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.file-preview-item{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 8px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);max-width:200px}.file-preview-item img{width:24px;height:24px;object-fit:cover;border-radius:3px}.file-preview-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-preview-remove{padding:2px 3px;border-radius:3px;color:var(--text-muted);font-size:14px;line-height:1;transition:color .1s;flex-shrink:0;cursor:pointer}.file-preview-remove:hover{color:var(--danger)}.input-box{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 10px 14px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:border-color .2s,box-shadow .2s}.input-box:focus-within{border-color:#7c6af780;box-shadow:0 0 0 3px var(--accent-dim)}.input-box textarea{flex:1;resize:none;background:none;color:var(--text-primary);font-size:14px;line-height:1.6;max-height:180px;min-height:24px;overflow-y:auto;padding:0;font-family:inherit}.input-box textarea::placeholder{color:var(--text-muted)}.input-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-bottom:1px}.attach-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .15s}.attach-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.send-btn{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .15s}.send-btn:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.05)}.send-btn:disabled{background:var(--bg-hover);color:var(--text-muted);cursor:not-allowed}.send-btn.stop{background:var(--danger)}.send-btn.stop:hover{background:#dc2626}.input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:7px}.modal-overlay{position:fixed;inset:0;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-xl);width:100%;max-width:480px;box-shadow:var(--shadow);overflow:hidden;animation:modal-in .18s ease}@keyframes modal-in{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:16px;font-weight:600}.modal-close{padding:6px;border-radius:var(--radius-sm);color:var(--text-muted);transition:all .15s}.modal-close:hover{background:var(--bg-hover);color:var(--text-secondary)}.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:18px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.form-input{padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;transition:border-color .15s;width:100%}.form-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-dim)}.form-select{padding:10px 32px 10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;cursor:pointer;width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666' stroke-width='2'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}.form-select:focus{border-color:var(--accent);outline:none}.form-hint{font-size:11px;color:var(--text-muted)}.form-textarea{padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;resize:vertical;min-height:80px;font-family:inherit;width:100%}.form-textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-dim)}.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}.modal-footer-right{display:flex;gap:8px}.btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;transition:all .15s;cursor:pointer}.btn-secondary{background:var(--bg-tertiary);border:1px solid var(--border-light);color:var(--text-secondary)}.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.connection-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-dot.connected{background:var(--success)}.status-dot.disconnected{background:var(--danger)}.status-dot.checking{background:var(--warning);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.error-banner{display:flex;align-items:center;gap:8px;padding:9px 16px;background:#ef44441a;border:1px solid rgba(239,68,68,.25);border-radius:var(--radius-sm);font-size:13px;color:#f87171;max-width:860px;width:calc(100% - 40px);margin:8px auto 0}.error-banner-close{margin-left:auto;color:#f87171;opacity:.6;cursor:pointer}.error-banner-close:hover{opacity:1}@media(max-width:640px){.sidebar{position:absolute;z-index:50;height:100%;box-shadow:var(--shadow)}.message-row.user .message-content-wrapper{max-width:90%}}