:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a28;--bg-hover:#222235;--bg-glass:#12121ab3;--border:#ffffff0f;--border-focus:#8b5cf680;--text-primary:#e8e8f0;--text-secondary:#9898b0;--text-muted:#5a5a78;--accent:#8b5cf6;--accent-hover:#a78bfa;--accent-glow:#8b5cf640;--success:#34d399;--error:#f87171;--warning:#fbbf24;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 24px #0006;--shadow-lg:0 8px 48px #00000080;--font-sans:"Inter", -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--transition:.2s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}body{background-image:radial-gradient(80% 60% at 50% -20%,#8b5cf614,#0000),radial-gradient(60% 40% at 80% 100%,#3b82f60d,#0000)}#app{flex-direction:column;height:100dvh;display:flex}.header{border-bottom:1px solid var(--border);background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.header-brand{align-items:center;gap:12px;display:flex}.header-logo{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--accent), #6366f1);color:#fff;width:36px;height:36px;box-shadow:0 0 20px var(--accent-glow);justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.header-title{letter-spacing:-.02em;font-size:16px;font-weight:600}.header-subtitle{color:var(--text-muted);margin-top:1px;font-size:11px;font-weight:400}.header-actions{align-items:center;gap:8px;display:flex}.status-dot{background:var(--text-muted);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse-dot}.status-dot.online{background:var(--success)}.status-dot.offline{background:var(--error)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.status-label{color:var(--text-secondary);font-size:12px}.btn-icon{border-radius:var(--radius-sm);border:1px solid var(--border);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;display:flex}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary);border-color:#ffffff1a}.chat-area{scroll-behavior:smooth;flex:1;padding:24px;overflow-y:auto}.chat-area::-webkit-scrollbar{width:6px}.chat-area::-webkit-scrollbar-track{background:0 0}.chat-area::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100%;animation:.6s fadeIn;display:flex}.empty-icon{border-radius:var(--radius-lg);background:linear-gradient(135deg,#8b5cf626,#6366f11a);border:1px solid #8b5cf633;justify-content:center;align-items:center;width:72px;height:72px;font-size:32px;display:flex}.empty-title{letter-spacing:-.02em;font-size:20px;font-weight:600}.empty-desc{color:var(--text-secondary);max-width:400px;font-size:14px;line-height:1.6}.empty-suggestions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}.suggestion-chip{border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-radius:999px;padding:8px 16px;font-size:13px}.suggestion-chip:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text-primary);transform:translateY(-1px)}.message{gap:12px;max-width:820px;margin-bottom:24px;margin-left:auto;margin-right:auto;animation:.3s slideUp;display:flex}.message.user{flex-direction:row-reverse}.message-avatar{border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;display:flex}.message.user .message-avatar{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6)}.message.assistant .message-avatar{background:linear-gradient(135deg, var(--bg-tertiary), var(--bg-hover));border:1px solid var(--border);color:var(--accent)}.message-content{flex:1;min-width:0}.message-bubble{border-radius:var(--radius-md);word-wrap:break-word;padding:14px 18px;font-size:14px;line-height:1.7}.message.user .message-bubble{background:linear-gradient(135deg,#6366f126,#8b5cf61a);border:1px solid #8b5cf626;border-top-right-radius:4px}.message.assistant .message-bubble{background:var(--bg-secondary);border:1px solid var(--border);border-top-left-radius:4px}.message-images{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.message-image{border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border);cursor:pointer;max-width:280px;max-height:200px;transition:transform var(--transition)}.message-image:hover{transform:scale(1.02)}.message-time{color:var(--text-muted);margin-top:6px;font-size:11px}.typing-indicator{gap:4px;padding:4px 0;display:flex}.typing-indicator span{background:var(--text-muted);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite bounce}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.input-area{border-top:1px solid var(--border);background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-shrink:0;padding:16px 24px 20px}.image-preview-bar{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.image-preview-item{border-radius:var(--radius-sm);border:1px solid var(--border);animation:.2s scaleIn;position:relative;overflow:hidden}.image-preview-item img{object-fit:contain;background:var(--bg-tertiary);width:120px;height:120px;display:block}.image-preview-remove{color:#fff;cursor:pointer;opacity:0;width:18px;height:18px;transition:opacity var(--transition);background:#000000b3;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:10px;display:flex;position:absolute;top:2px;right:2px}.image-preview-item:hover .image-preview-remove{opacity:1}.input-row{align-items:flex-end;gap:8px;max-width:820px;margin:0 auto;display:flex}.input-wrapper{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--transition), box-shadow var(--transition);flex:1;align-items:flex-end;padding:4px;display:flex}.input-wrapper:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.input-wrapper textarea{color:var(--text-primary);font-family:var(--font-sans);resize:none;background:0 0;border:none;outline:none;flex:1;max-height:160px;padding:8px 12px;font-size:14px;line-height:1.5}.input-wrapper textarea::placeholder{color:var(--text-muted)}.btn-attach{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-attach:hover{color:var(--accent);background:#8b5cf61a}.btn-send{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent), #6366f1);color:#fff;cursor:pointer;width:42px;height:42px;transition:all var(--transition);box-shadow:0 2px 12px var(--accent-glow);border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-send:hover{box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px)}.btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none}.input-hint{text-align:center;color:var(--text-muted);margin-top:8px;font-size:11px}.settings-panel{background:var(--bg-secondary);border-left:1px solid var(--border);z-index:100;width:360px;height:100%;box-shadow:var(--shadow-lg);flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:-380px}.settings-panel.open{right:0}.settings-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.settings-header h3{font-size:15px;font-weight:600}.settings-body{flex:1;padding:20px;overflow-y:auto}.setting-group{margin-bottom:24px}.setting-label{color:var(--text-secondary);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:500;display:flex}.setting-value{font-family:var(--font-mono);color:var(--accent);font-size:12px}input[type=range]{-webkit-appearance:none;background:var(--bg-hover);border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--accent-glow);border-radius:50%}.setting-input{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-mono);transition:border-color var(--transition);outline:none;padding:8px 12px;font-size:13px}.setting-input:focus{border-color:var(--border-focus)}.overlay{z-index:90;opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.overlay.visible{opacity:1;pointer-events:all}.lightbox{z-index:200;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.lightbox img{border-radius:var(--radius-md);max-width:90vw;max-height:90vh;box-shadow:var(--shadow-lg)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.drop-overlay{border:2px dashed var(--accent);z-index:300;pointer-events:none;background:#8b5cf614;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.drop-overlay.active{display:flex}.drop-label{background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--accent);color:var(--accent);box-shadow:0 0 40px var(--accent-glow);padding:16px 32px;font-size:16px;font-weight:500}@media (width<=640px){.header{padding:10px 16px}.chat-area{padding:16px}.input-area{padding:12px 16px 16px}.message{gap:8px}.message-bubble{padding:10px 14px;font-size:13px}.suggestions{flex-direction:column}.settings-panel{width:100%;right:-100%}}