:root{--bg-primary: #0f1117;--bg-secondary: #1a1d27;--bg-tertiary: #232733;--bg-elevated: #272b38;--bg-hover: rgba(255, 255, 255, .04);--surface-sidebar: #161920;--surface-chat: #0f1117;--surface-input: #1a1d27;--surface-header: rgba(15, 17, 23, .85);--bubble-user-bg: #3b82f6;--bubble-user-text: #ffffff;--bubble-bot-bg: #1e2231;--bubble-bot-border: #2a2f3e;--bubble-bot-text: #e2e8f0;--accent: #3b82f6;--accent-hover: #2563eb;--accent-light: rgba(59, 130, 246, .12);--accent-glow: rgba(59, 130, 246, .15);--accent-gradient: linear-gradient(135deg, #3b82f6, #6366f1);--status-online: #22c55e;--status-offline: #ef4444;--status-warning: #f59e0b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--text-inverse: #ffffff;--border: #1e2231;--border-light: #2a2f3e;--border-focus: #3b82f6;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .6);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .6875rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-md: .9375rem;--font-size-lg: 1.0625rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--header-height: 64px;--sidebar-width: 300px;--max-bubble-width: 72%;--input-radius: 24px;--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}.app{display:flex;height:100vh;height:100dvh;width:100vw;background:var(--bg-primary);position:relative;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--surface-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:transform var(--transition-slow);position:relative;z-index:2}.sidebar-header{height:var(--header-height);padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}.sidebar-header h2{font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.sidebar-header .connection-status{display:flex;align-items:center;gap:6px;font-size:var(--font-size-xs);color:var(--text-muted);font-weight:500}.sidebar-header .status-dot{width:7px;height:7px;border-radius:50%;background:var(--status-online);box-shadow:0 0 6px var(--status-online)}.sidebar-header .status-dot.disconnected{background:var(--status-offline);box-shadow:0 0 6px var(--status-offline)}.user-input-section{padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.user-input-section label{display:block;font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-weight:600}.user-input-group{display:flex;gap:8px}.user-input-group input{flex:1;padding:9px 14px;border-radius:10px;border:1px solid var(--border-light);background:var(--bg-tertiary);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);outline:none;transition:all var(--transition-fast)}.user-input-group input::placeholder{color:var(--text-muted)}.user-input-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.user-input-group button{padding:9px 18px;border-radius:10px;border:none;background:var(--accent);color:var(--text-inverse);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.user-input-group button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.user-input-group button:active{transform:translateY(0)}.sidebar-sessions{flex:1;overflow-y:auto;padding:12px}.sidebar-sessions::-webkit-scrollbar{width:4px}.sidebar-sessions::-webkit-scrollbar-track{background:transparent}.sidebar-sessions::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}.sessions-label{font-size:var(--font-size-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px 8px}.session-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all var(--transition-fast);margin-bottom:2px;border:1px solid transparent}.session-item:hover{background:var(--bg-hover)}.session-item.active{background:var(--accent-light);border-color:#3b82f633}.session-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-xs);flex-shrink:0;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-light);transition:all var(--transition-fast)}.session-item.active .session-avatar{background:var(--accent-gradient);color:var(--text-inverse);border-color:transparent;box-shadow:0 2px 8px #3b82f64d}.session-name{flex:1;font-weight:500;font-size:var(--font-size-sm);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-clear-btn{background:#ef444414;border:1px solid rgba(239,68,68,.15);color:#f87171;cursor:pointer;font-size:var(--font-size-xs);font-family:var(--font-family);padding:4px 8px;border-radius:6px;transition:all var(--transition-fast);font-weight:500;opacity:0}.session-item:hover .session-clear-btn,.session-item.active .session-clear-btn{opacity:1}.session-clear-btn:hover{background:#ef444426;border-color:#ef44444d}.sessions-empty{text-align:center;padding:24px 16px;color:var(--text-muted);font-size:var(--font-size-sm);line-height:1.6}.sidebar-close-button{display:none;background:transparent;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;align-items:center;justify-content:center;transition:all var(--transition-fast)}.sidebar-close-button:hover{color:var(--text-primary);background:var(--bg-hover)}.chat-area{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:var(--surface-chat)}.chat-header{height:var(--header-height);padding:0 24px;display:flex;align-items:center;gap:14px;background:var(--surface-header);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:relative;z-index:2;flex-shrink:0}.chat-header-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;position:relative}.chat-header-avatar:after{content:"";position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--status-online);border:2px solid var(--surface-header)}.chat-header-info{flex:1;min-width:0}.chat-header-name{font-size:var(--font-size-md);font-weight:600;color:var(--text-primary);line-height:1.3}.chat-header-status{font-size:var(--font-size-xs);color:var(--status-online);font-weight:500}.chat-header-actions{display:flex;align-items:center;gap:8px}.connection-indicator{display:flex;align-items:center;gap:6px;font-size:var(--font-size-xs);color:var(--text-muted);padding:5px 10px;border-radius:20px;background:var(--bg-secondary);border:1px solid var(--border)}.connection-dot{width:6px;height:6px;border-radius:50%;background:var(--status-online)}.connection-dot.disconnected{background:var(--status-offline)}.messages-container{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;scroll-behavior:smooth}.messages-container::-webkit-scrollbar{width:5px}.messages-container::-webkit-scrollbar-track{background:transparent}.messages-container::-webkit-scrollbar-thumb{background:#ffffff0f;border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:#ffffff1f}.welcome-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;gap:20px;flex:1}.welcome-icon{width:72px;height:72px;border-radius:20px;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 8px 24px #3b82f640;animation:welcome-float 5s ease-in-out infinite}@keyframes welcome-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.welcome-message h2{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.welcome-message p{font-size:var(--font-size-base);color:var(--text-secondary);max-width:380px;line-height:1.7}.welcome-features{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}.welcome-feature{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;background:var(--bg-secondary);border:1px solid var(--border);font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500}.welcome-feature-icon{font-size:14px}.message-row{display:flex;align-items:flex-end;gap:10px;animation:message-in .25s ease forwards;padding:2px 0}@keyframes message-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message-row.outgoing{justify-content:flex-end}.message-row.incoming{justify-content:flex-start}.bot-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;margin-bottom:2px}.message-bubble{max-width:var(--max-bubble-width);padding:10px 14px;border-radius:18px;position:relative;line-height:1.55;font-size:var(--font-size-md);word-wrap:break-word;overflow-wrap:break-word}.message-bubble.outgoing{background:var(--bubble-user-bg);color:var(--bubble-user-text);border-bottom-right-radius:6px;box-shadow:0 1px 3px #3b82f633}.message-bubble.incoming{background:var(--bubble-bot-bg);border:1px solid var(--bubble-bot-border);color:var(--bubble-bot-text);border-bottom-left-radius:6px}.message-text{margin-bottom:2px}.message-text p{margin-bottom:8px}.message-text p:last-child{margin-bottom:0}.message-text ul,.message-text ol{margin-bottom:8px;padding-left:18px}.message-text li{margin-bottom:4px}.message-text code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;background:#ffffff14;padding:2px 6px;border-radius:4px;font-size:.85em}.message-text pre{background:#0006;padding:12px 14px;border-radius:10px;overflow-x:auto;margin:8px 0;border:1px solid var(--border)}.message-text pre code{background:transparent;padding:0;border-radius:0;font-size:.85em;display:block}.message-bubble.incoming .message-text strong{color:#93c5fd;font-weight:600}.message-bubble.outgoing .message-text strong{color:#fff;font-weight:700}.message-text h1,.message-text h2,.message-text h3,.message-text h4{margin-top:12px;margin-bottom:6px;font-weight:600}.message-text h1:first-child,.message-text h2:first-child,.message-text h3:first-child,.message-text h4:first-child{margin-top:0}.message-bubble.incoming .message-text h1,.message-bubble.incoming .message-text h2,.message-bubble.incoming .message-text h3,.message-bubble.incoming .message-text h4{color:#bfdbfe}.message-text h1{font-size:1.2em}.message-text h2{font-size:1.1em}.message-text h3{font-size:1.05em}.message-text h4{font-size:1em}.message-time{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:4px;display:flex;align-items:center;justify-content:flex-end;gap:4px}.message-bubble.outgoing .message-time{color:#fff9}.message-check{color:#ffffffb3;font-size:12px}.typing-indicator{display:flex;align-items:center;gap:4px;padding:4px 2px}.typing-indicator .dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);animation:typing-bounce 1.4s ease-in-out infinite}.typing-indicator .dot:nth-child(1){animation-delay:0ms}.typing-indicator .dot:nth-child(2){animation-delay:.2s}.typing-indicator .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:12px 24px 16px;background:var(--surface-chat);border-top:1px solid var(--border);position:relative;z-index:2;flex-shrink:0}.input-wrapper{display:flex;align-items:flex-end;gap:10px;background:var(--surface-input);border:1px solid var(--border-light);border-radius:var(--input-radius);padding:4px 4px 4px 18px;transition:all var(--transition-fast)}.input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.input-wrapper textarea{flex:1;padding:8px 0;border:none;background:transparent;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-md);line-height:1.45;resize:none;outline:none;min-height:40px;max-height:120px}.input-wrapper textarea::placeholder{color:var(--text-muted)}.send-button{width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.send-button:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.05)}.send-button:active:not(:disabled){transform:scale(.95)}.send-button:disabled{opacity:.3;cursor:not-allowed}.send-button svg{width:18px;height:18px;fill:currentColor}.mobile-only-header{display:none!important}.menu-button{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;align-items:center;justify-content:center;font-size:18px;transition:all var(--transition-fast);flex-shrink:0}.menu-button:hover{background:var(--bg-tertiary);color:var(--text-primary)}@media(max-width:768px){.app{flex-direction:column}.sidebar{width:min(300px,82vw);min-width:0;position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translate(-100%);box-shadow:var(--shadow-xl)}.sidebar.open{transform:translate(0)}.sidebar-close-button{display:flex}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:99;opacity:0;pointer-events:none;transition:opacity var(--transition-base)}.sidebar-overlay.visible{opacity:1;pointer-events:auto}.mobile-only-header{display:flex!important}.chat-area{flex:1;min-height:0;height:100%}.messages-container{padding:16px;flex:1;min-height:0}.input-area{padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.input-wrapper{padding:3px 3px 3px 14px}.input-wrapper textarea,.user-input-group input{font-size:16px!important}.message-bubble{max-width:85%}.menu-button{display:flex}.chat-header{padding:0 14px}.welcome-message{padding:40px 20px}.welcome-icon{width:60px;height:60px;border-radius:16px;font-size:26px}.welcome-message h2{font-size:var(--font-size-xl)}.welcome-features{gap:8px}.bot-avatar{width:26px;height:26px;font-size:10px}}@media(max-width:400px){.messages-container{padding:12px 10px}.input-area{padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.message-bubble{max-width:90%;padding:9px 12px;font-size:var(--font-size-base)}.chat-header{padding:0 10px;gap:10px}.chat-header-avatar{width:34px;height:34px;font-size:13px}.send-button{width:34px;height:34px}.welcome-features{flex-direction:column;align-items:center}}@media(min-width:769px)and (max-width:1024px){:root{--sidebar-width: 260px}.messages-container{padding:20px}.input-area{padding:10px 20px 14px}}@media(min-width:1400px){.messages-container{padding:24px 10%}.input-area{padding:12px 10% 16px}}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}::selection{background:#3b82f64d;color:#fff}.message-text a{color:#60a5fa;text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3);transition:all var(--transition-fast)}.message-text a:hover{color:#93c5fd;border-bottom-color:#93c5fd80}.message-bubble.outgoing .message-text a{color:#e0f2fe;border-bottom-color:#e0f2fe66}