:root{--bg-primary:#0b0d14;--bg-secondary:#131722;--bg-tertiary:#1b2030;--bg-surface:#161b2abf;--bg-glass:#131722b3;--bg-hover:#ffffff0f;--border-color:#ffffff14;--border-active:#6366f180;--border-glow:#38bdf84d;--accent-primary:#6366f1;--accent-secondary:#a855f7;--accent-cyan:#06b6d4;--accent-emerald:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--gradient-brand:linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%);--gradient-glow:radial-gradient(circle, #6366f140 0%, #06b6d40d 60%, transparent 100%);--gradient-user-msg:linear-gradient(135deg, #6366f12e 0%, #a855f71f 100%);--text-main:#f3f4f6;--text-muted:#9ca3af;--text-subtle:#6b7280;--sidebar-width:280px;--canvas-width:480px;--header-height:64px;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"Fira Code", monospace;--shadow-sm:0 2px 8px #0003;--shadow-md:0 8px 24px #00000059;--shadow-lg:0 16px 40px #00000080;--shadow-neon:0 0 20px #6366f159;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px}body.theme-oled{--bg-primary:#000;--bg-secondary:#0a0a0c;--bg-tertiary:#121216;--bg-surface:#0c0c10e6;--bg-glass:#08080ad9;--border-color:#ffffff1f;--accent-primary:#10b981;--accent-cyan:#38bdf8;--gradient-brand:linear-gradient(135deg, #10b981 0%, #38bdf8 100%)}body.theme-cyber{--bg-primary:#090314;--bg-secondary:#140826;--bg-tertiary:#200d3d;--bg-surface:#140826d9;--bg-glass:#120521cc;--border-color:#ec489940;--border-active:#ec4899b3;--accent-primary:#ec4899;--accent-secondary:#8b5cf6;--accent-cyan:#06b6d4;--gradient-brand:linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);--shadow-neon:0 0 25px #ec489966}body.theme-light{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--bg-surface:#ffffffe0;--bg-glass:#ffffffc7;--bg-hover:#0000000a;--border-color:#00000014;--border-active:#6366f166;--text-main:#0f172a;--text-muted:#475569;--text-subtle:#94a3b8;--gradient-user-msg:linear-gradient(135deg, #6366f11a 0%, #a855f714 100%);--shadow-sm:0 2px 8px #0000000d;--shadow-md:0 8px 24px #00000014;--shadow-lg:0 16px 40px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}#root{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.glass-panel{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color)}.glass-card{background:var(--bg-surface);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s}.gradient-text{background:var(--gradient-brand);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.btn-primary{background:var(--gradient-brand);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;align-items:center;gap:8px;min-height:36px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary:hover{opacity:.92;transform:translateY(-1px)}.btn-secondary{background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:6px;min-height:36px;padding:8px 14px;font-size:13px;font-weight:500;display:inline-flex}.btn-icon{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn-icon:hover{background:var(--bg-hover);color:var(--text-main)}.badge{text-transform:uppercase;border-radius:999px;align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:600;display:inline-flex}.badge-cyan{color:var(--accent-cyan);background:#06b6d426;border:1px solid #06b6d44d}.badge-purple{color:var(--accent-secondary);background:#a855f726;border:1px solid #a855f74d}.badge-emerald{color:var(--accent-emerald);background:#10b98126;border:1px solid #10b9814d}.chat-input-wrapper{box-sizing:border-box;flex-shrink:0;width:100%;max-width:860px;margin:0 auto;padding:0 12px 14px;position:relative}.chat-input-panel{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);background:var(--bg-glass);padding:10px 14px;transition:all .25s cubic-bezier(.16,1,.3,1)}.chat-input-panel:focus-within{border-color:var(--border-active);box-shadow:0 0 20px #6366f133, var(--shadow-lg)}.chat-input-panel.is-generating{border-color:var(--accent-cyan);box-shadow:0 0 20px #06b6d440}.chat-attachments-list{flex-wrap:wrap;gap:6px;margin-bottom:8px;display:flex}.chat-attachment-item{background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border-color);color:var(--text-main);align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:flex}.chat-attachment-item .remove-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex}.chat-attachment-item .remove-btn:hover{color:var(--accent-rose)}.chat-textarea{width:100%;color:var(--text-main);font-size:14px;font-family:var(--font-sans);resize:none;background:0 0;border:none;outline:none;max-height:180px;line-height:1.45}.chat-toolbar-container{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;gap:8px;width:100%;margin-top:8px;padding-top:6px;display:flex}.chat-toolbar-left{white-space:nowrap;-webkit-overflow-scrolling:touch;flex:1;align-items:center;gap:6px;min-width:0;padding-bottom:2px;display:flex;overflow-x:auto}.chat-toolbar-right{flex-shrink:0;align-items:center;gap:6px;margin-left:auto;display:flex}.input-pill-btn{border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border-radius:999px;flex-shrink:0;align-items:center;gap:5px;height:30px;padding:5px 11px;font-size:11px;font-weight:600;transition:all .2s;display:inline-flex}.input-pill-btn:hover{background:var(--bg-hover);color:var(--text-main)}.input-pill-btn.active-cyan{color:var(--accent-cyan);background:#06b6d426;border-color:#06b6d480;box-shadow:0 0 10px #06b6d433}.input-pill-btn.active-emerald{color:var(--accent-emerald);background:#10b98126;border-color:#10b98180;box-shadow:0 0 10px #10b98133}.input-pill-btn.active-purple{color:var(--accent-secondary);background:#a855f726;border-color:#a855f780;box-shadow:0 0 10px #a855f733}.input-voice-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.input-voice-btn.is-recording{color:var(--accent-rose);background:#f43f5e26;border-color:#f43f5e66}.btn-send-mobile{border-radius:var(--radius-md);flex-shrink:0;height:32px;padding:6px 14px;font-size:12px}@media (width<=640px){:root{--header-height:56px}.hide-mobile{display:none!important}.brand-title{font-size:14px!important}.brand-logo{width:28px!important;height:28px!important}.model-selector-btn{padding:4px 10px!important;font-size:11px!important}.welcome-hero-container{padding:20px 14px!important}.welcome-title{font-size:clamp(1.4rem,6vw,2rem)!important}.welcome-grid{grid-template-columns:1fr!important;gap:10px!important}.message-item-container{gap:10px!important;padding:12px 14px!important}.message-avatar{width:30px!important;height:30px!important}.sidebar-offcanvas{top:0;bottom:0;left:0;box-shadow:10px 0 30px #000c;z-index:110!important;width:82vw!important;max-width:300px!important;height:100vh!important;position:fixed!important}.canvas-offcanvas{inset:0;z-index:120!important;width:100vw!important;height:100vh!important;position:fixed!important}.modal-dialog{width:95vw!important;max-height:90vh!important;padding:16px!important}}@media (width<=768px){.chat-input-wrapper{padding:0 8px max(10px, env(safe-area-inset-bottom,10px));z-index:40;box-sizing:border-box;width:100%;position:sticky;bottom:0}.chat-input-panel{-webkit-backdrop-filter:blur(24px);border-color:var(--border-color);background:#0f121cf0;border-radius:18px;padding:8px 10px}.chat-textarea{max-height:110px;font-size:14px}.chat-toolbar-container{gap:6px;margin-top:6px;padding-top:6px}.chat-toolbar-left{scroll-snap-type:x mandatory;gap:6px}.input-pill-btn{scroll-snap-align:start;height:32px;padding:5px 10px;font-size:11px}.hide-mobile-sm{display:none!important}.btn-send-mobile{border-radius:12px!important;height:34px!important;padding:0 14px!important;font-size:12px!important;font-weight:700!important}.input-voice-btn{border-radius:10px!important;width:34px!important;height:34px!important}}@media (width>=641px) and (width<=1024px){.welcome-grid{grid-template-columns:repeat(2,1fr)!important}.canvas-offcanvas{top:var(--header-height);max-width:90vw;bottom:0;right:0;box-shadow:-10px 0 30px #000000b3;z-index:95!important;width:480px!important;position:fixed!important}}@media (width>=1025px){.welcome-grid{grid-template-columns:repeat(2,1fr)!important}}