:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.5;--bg: #0a0a0a;--bg-surface: #141414;--bg-surface-hover: #1e1e1e;--bg-sidebar: #111111;--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15);--text: #fafafa;--text-secondary: rgba(255, 255, 255, .55);--text-muted: rgba(255, 255, 255, .35);--accent: #8b5cf6;--accent-dim: rgba(139, 92, 246, .15);--user-bubble: #1a1a2e;--assistant-bubble: transparent;--code-bg: rgba(255, 255, 255, .06);--sidebar-width: 260px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);overflow:hidden}.app-layout{display:flex;height:100vh;overflow:hidden}.sidebar-overlay{display:none}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100vh;overflow:hidden;transition:transform .25s ease}.sidebar-header{padding:16px;border-bottom:1px solid var(--border)}.new-chat-btn{width:100%;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.875rem;cursor:pointer;transition:all .15s}.new-chat-btn:hover{background:var(--bg-surface-hover);border-color:var(--border-hover)}.sidebar-list{flex:1;overflow-y:auto;padding:8px}.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--text-secondary);transition:all .15s;gap:8px}.sidebar-item:hover{background:var(--bg-surface-hover);color:var(--text)}.sidebar-item.active{background:var(--accent-dim);color:var(--text)}.sidebar-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.sidebar-delete{opacity:0;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;transition:all .15s}.sidebar-item:hover .sidebar-delete{opacity:1}.sidebar-delete:hover{color:#ef4444;background:#ef44441a}.sidebar-footer{padding:16px;border-top:1px solid var(--border)}.sidebar-footer-brand{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-muted)}.logo-mark-sm{width:24px;height:24px;background:linear-gradient(135deg,var(--accent),#a78bfa);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;color:#fff}.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh}.chat-header{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);gap:16px;flex-shrink:0;background:var(--bg)}.sidebar-toggle{display:none}.header-brand{display:flex;align-items:center;gap:10px;flex:1}.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--accent),#a78bfa);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff}.brand-name{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#c4b5fd,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mode-switcher{display:flex;gap:4px;background:var(--bg-surface);padding:4px;border-radius:10px;border:1px solid var(--border)}.mode-btn{padding:6px 12px;border:none;background:transparent;border-radius:7px;cursor:pointer;font-size:.9rem;transition:all .15s;color:var(--text-muted)}.mode-btn:hover{background:var(--bg-surface-hover);color:var(--text)}.mode-btn.active{background:var(--accent-dim);color:var(--accent);box-shadow:0 0 8px #8b5cf626}.chat-messages{flex:1;overflow-y:auto;padding:24px 0;scroll-behavior:smooth}.msg-row{display:flex;gap:12px;padding:16px 24px;max-width:800px;margin:0 auto;width:100%}.msg-row.msg-user{justify-content:flex-end}.msg-row.msg-assistant{justify-content:flex-start}.avatar{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;margin-top:2px}.avatar-grok{background:linear-gradient(135deg,var(--accent),#a78bfa);color:#fff}.avatar-user{background:var(--bg-surface-hover);color:var(--text-secondary);border:1px solid var(--border)}.msg-bubble{max-width:70%;min-width:0}.msg-sender{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:4px;display:flex;align-items:center;gap:6px}.mode-badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;background:var(--accent-dim);color:var(--accent);padding:1px 6px;border-radius:4px;font-weight:600}.msg-content{font-size:.9375rem;line-height:1.65;color:var(--text);word-break:break-word}.msg-user .msg-content{background:var(--user-bubble);padding:12px 16px;border-radius:16px 16px 4px;border:1px solid var(--border)}.msg-assistant .msg-content{padding:0}.msg-content strong{font-weight:600;color:#e0e0e0}.msg-content em{font-style:italic;color:var(--text-secondary)}.msg-content code{background:var(--code-bg);padding:2px 6px;border-radius:4px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.85em;border:1px solid var(--border)}.msg-content pre{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin:10px 0;overflow-x:auto}.msg-content pre code{background:none;border:none;padding:0;font-size:.825rem;line-height:1.6}.msg-content p{margin:0 0 8px}.msg-content p:last-child{margin-bottom:0}.msg-content ul,.msg-content ol{margin:8px 0;padding-left:20px}.msg-content li{margin:4px 0}.msg-content h2,.msg-content h3,.msg-content h4{margin:12px 0 6px;font-weight:600}.msg-content h2{font-size:1.15rem}.msg-content h3{font-size:1.05rem}.msg-content h4{font-size:.95rem}.msg-content a{color:var(--accent);text-decoration:none}.msg-content a:hover{text-decoration:underline}.msg-content hr{border:none;border-top:1px solid var(--border);margin:12px 0}.msg-content p>br+br{display:block;content:"";margin-top:4px}.typing-indicator{display:flex;gap:6px;max-width:800px;margin:0 auto;width:100%;padding:20px 24px 20px 68px}.typing-indicator span{width:8px;height:8px;background:var(--accent);border-radius:50%;opacity:.4;animation:typingBounce 1.2s ease-in-out infinite}.typing-indicator span:nth-child(2){animation-delay:.15s}.typing-indicator span:nth-child(3){animation-delay:.3s}@keyframes typingBounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1}}.file-input-hidden{display:none}.attach-btn{width:36px;height:36px;background:transparent;border:none;border-radius:10px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.attach-btn:hover:not(:disabled){background:var(--bg-surface-hover);color:var(--text)}.attach-btn:disabled{opacity:.3;cursor:not-allowed}.image-preview-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px}.image-preview-thumb{width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0;border:1px solid var(--border)}.image-preview-thumb img{width:100%;height:100%;object-fit:cover}.image-preview-name{flex:1;font-size:.8rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-preview-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;transition:all .15s}.image-preview-remove:hover{color:#ef4444;background:#ef44441a}.msg-image-wrap{margin-bottom:8px;border-radius:12px;overflow:hidden;border:1px solid var(--border);max-width:400px}.msg-image{display:block;width:100%;height:auto;max-height:300px;object-fit:cover}.msg-image-name{display:block;font-size:.7rem;color:var(--text-muted);padding:4px 8px;background:var(--bg-surface)}.chat-input-wrap{padding:0 24px 20px;max-width:800px;margin:0 auto;width:100%;flex-shrink:0}.chat-input-box{display:flex;align-items:flex-end;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:6px;transition:border-color .2s}.chat-input-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.chat-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:.9375rem;padding:10px 12px;resize:none;max-height:200px;line-height:1.5;font-family:inherit}.chat-input::placeholder{color:var(--text-muted)}.chat-input:disabled{opacity:.5}.send-btn{width:36px;height:36px;background:var(--accent);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.send-btn:hover:not(:disabled){background:#7c3aed;transform:scale(1.05)}.send-btn:disabled{opacity:.3;cursor:not-allowed}.input-footer{text-align:center;font-size:.7rem;color:var(--text-muted);margin-top:8px}.icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;transition:all .15s}.icon-btn:hover{background:var(--bg-surface-hover);color:var(--text)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.error-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 20px;background:#ef44441a;border-bottom:1px solid rgba(239,68,68,.2);color:#fca5a5;font-size:.8rem;flex-shrink:0}.error-dismiss{background:none;border:none;color:#fca5a5;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;opacity:.7;transition:opacity .15s}.error-dismiss:hover{opacity:1}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;width:90%;max-width:520px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;animation:slideUp .2s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}.settings-header h2{font-size:1.1rem;font-weight:600;background:linear-gradient(135deg,#c4b5fd,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.settings-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px}.settings-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.5}.settings-desc strong{color:var(--text)}.settings-label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:500;color:var(--text-secondary)}.settings-input{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:.875rem;font-family:SF Mono,Fira Code,monospace;outline:none;transition:border-color .15s}.settings-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.settings-input::placeholder{color:var(--text-muted)}.settings-hint{font-size:.75rem;color:var(--text-muted);font-weight:400}.settings-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.settings-presets-label{font-size:.8rem;color:var(--text-muted);margin-right:4px}.preset-btn{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 12px;color:var(--text-secondary);font-size:.78rem;cursor:pointer;transition:all .15s}.preset-btn:hover{background:var(--bg-surface-hover);border-color:var(--border-hover);color:var(--text)}.settings-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border)}.settings-btn{padding:8px 20px;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s;border:none}.settings-btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-secondary)}.settings-btn-secondary:hover{background:var(--bg-surface-hover);color:var(--text)}.settings-btn-primary{background:var(--accent);color:#fff}.settings-btn-primary:hover{background:#7c3aed}@media(max-width:768px){.sidebar{position:fixed;left:0;top:0;z-index:100;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sidebar-toggle{display:flex}.msg-bubble{max-width:85%}.chat-input-wrap{padding:0 12px 12px}.msg-image-wrap{max-width:100%}.image-preview-bar{margin-bottom:6px}.msg-row{padding:12px 16px}.mode-switcher{gap:2px;padding:3px}.mode-btn{padding:4px 8px;font-size:.8rem}}