@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap";body{margin:0}#dialbot-root{--bg: #030306;--surface: #070721;--bubble-bot: #2b2b39;--bubble-user: #555592;--accent: #6366f1;--accent-hi: #818cf8;--text: #e8e8f0;--text-muted: #888;--border: rgba(255, 255, 255, .263);--input-bg: #282643;--input-placeholder: #eeeef4;--radius: 18px;--font: "DM Sans", system-ui, sans-serif}#dialbot-root .screen{width:100%;max-width:100%;height:100vh;display:flex;flex-direction:row;overflow:hidden;box-shadow:0 0 0 1px #ffffff12,0 32px 80px #0009}#dialbot-root .sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease}#dialbot-root .sidebar-header{width:90%;padding:19px 15px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}#dialbot-root .sidebar-header h2{font-size:1.1rem;font-weight:600;color:var(--text);margin:0}#dialbot-root .menu-btn{background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:4px;transition:color .2s;border-radius:6px}#dialbot-root .menu-btn:hover{color:var(--text);background:#ffffff0d}#dialbot-root .search-box{padding:12px 15px;border-bottom:1px solid var(--border);position:relative}#dialbot-root .search-input{width:80%;background:var(--bg);border:1px solid rgba(99,102,241,.3);border-radius:12px;padding:15px 15px 15px 30px;color:var(--text);font-family:var(--font);font-size:.85rem;outline:none;transition:border-color .2s}#dialbot-root .search-input::placeholder{color:var(--text-muted)}#dialbot-root .search-input:focus{border-color:var(--accent)}#dialbot-root .search-clear{position:absolute;right:24px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--text-muted);font-size:.9rem}#dialbot-root .new-chat-btn{margin:12px 15px;padding:10px 14px;background:linear-gradient(135deg,var(--accent),#8b5cf6);border:none;border-radius:10px;color:#fff;font-weight:500;font-size:.9rem;cursor:pointer;transition:transform .15s,box-shadow .15s}#dialbot-root .new-chat-btn:hover{transform:scale(1.02);box-shadow:0 4px 12px #6366f166}#dialbot-root .conversation-list,#dialbot-root .search-results{flex:1;overflow-y:auto;padding:8px 0}#dialbot-root .conversation-list::-webkit-scrollbar,#dialbot-root .search-results::-webkit-scrollbar{width:6px}#dialbot-root .conversation-list::-webkit-scrollbar-track,#dialbot-root .search-results::-webkit-scrollbar-track{background:transparent}#dialbot-root .conversation-list::-webkit-scrollbar-thumb,#dialbot-root .search-results::-webkit-scrollbar-thumb{background:#6366f14d;border-radius:3px}#dialbot-root .conv-item{padding:12px;margin:10px 15px;background:#ffffff05;border-radius:10px;cursor:pointer;transition:background .15s,transform .15s;display:flex;justify-content:space-between;align-items:center;gap:8px}#dialbot-root .conv-item:hover{background:#6366f11a;transform:translate(4px)}#dialbot-root .conv-item.active{background:#6366f133;border-left:15px solid var(--accent)}#dialbot-root .conv-content{flex:1;min-width:0}#dialbot-root .conv-title{font-size:.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}#dialbot-root .conv-date{font-size:.7rem;color:var(--text-muted);margin-top:4px}#dialbot-root .delete-conv-btn{background:none;border:none;color:var(--text-muted);font-size:.9rem;cursor:pointer;padding:4px;opacity:0;transition:opacity .15s,color .15s}#dialbot-root .conv-item:hover .delete-conv-btn{opacity:1}#dialbot-root .delete-conv-btn:hover{color:#ff6b6b}#dialbot-root .sidebar:not(.open){width:60px;background:var(--surface);border-right:1px solid var(--border);padding:30px 0;display:flex;flex-direction:column;align-items:center;transition:width .3s ease}#dialbot-root .sidebar:not(.open) .sidebar-header{justify-content:center;padding:5px 0}#dialbot-root .sidebar:not(.open) .menu-btn{position:static;width:32px;height:32px;padding:0;margin:0;background:#ffffff0d;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center}#dialbot-root .sidebar:not(.open) .menu-btn:hover{background:#ffffff1a;color:var(--text)}#dialbot-root .sidebar:not(.open) .sidebar-header h2,#dialbot-root .sidebar:not(.open) .search-box,#dialbot-root .sidebar:not(.open) .new-chat-btn,#dialbot-root .sidebar:not(.open) .conversation-list,#dialbot-root .sidebar:not(.open) .search-results,#dialbot-root .sidebar:not(.open) .conv-item{display:none}#dialbot-root .results-title{padding:12px 16px 8px;font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}#dialbot-root .search-result-item{padding:12px 16px;margin:4px 8px 8px;background:#6366f114;border-left:3px solid var(--accent);border-radius:6px;cursor:pointer;transition:background .15s}#dialbot-root .search-result-item:hover{background:#6366f126}#dialbot-root .result-conv-title{font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:4px}#dialbot-root .result-preview{font-size:.8rem;color:var(--text-muted);line-height:1.4;margin-bottom:6px}#dialbot-root .result-role{font-size:.7rem;padding:3px 8px;background:#ffffff0d;border-radius:4px;width:fit-content;font-weight:600}#dialbot-root .result-role.user{background:#3b3b6b4d;color:#a5a5d6}#dialbot-root .result-role.bot{background:#2727404d;color:#a0a0c0}#dialbot-root .overlay{display:none}#dialbot-root .chat-window{flex:1;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;position:relative}#dialbot-root .screen:not(.light) .chat-window{background:linear-gradient(135deg,#030306,#0a0a2e,#0d0b1f)}#dialbot-root .chat-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}#dialbot-root .avatar video{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem}#dialbot-root .header-info{display:flex;flex-direction:column;gap:2px;flex:1}#dialbot-root .header-name{font-size:.95rem;font-weight:600;color:var(--text)}#dialbot-root .header-status{font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:5px}#dialbot-root .status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 5px #22c55e;display:inline-block}#dialbot-root .theme-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:4px;border-radius:50%;transition:transform .2s}#dialbot-root .theme-btn:hover{transform:scale(1.2)}#dialbot-root .messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}#dialbot-root .messages::-webkit-scrollbar{width:6px}#dialbot-root .messages::-webkit-scrollbar-track{background:transparent}#dialbot-root .messages::-webkit-scrollbar-thumb{background:#6366f14d;border-radius:3px}#dialbot-root .row{display:flex;align-items:flex-end;gap:8px;animation:popIn .2s ease-out}@keyframes popIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}#dialbot-root .row.user{flex-direction:row-reverse}#dialbot-root .bot-avatar video{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}#dialbot-root .bubble{max-width:60%;padding:10px 14px;border-radius:var(--radius);font-size:.88rem;line-height:1.55;word-wrap:break-word;position:relative;transition:background .2s}#dialbot-root .row.bot .bubble{background:var(--bubble-bot);color:var(--text);border-bottom-left-radius:5px}#dialbot-root .row.user .bubble{background:var(--bubble-user);color:var(--text);border-bottom-right-radius:5px}#dialbot-root .bubble.error{background:#ef444426;color:#fca5a5}#dialbot-root .bubble:hover .message-actions{opacity:1}#dialbot-root .bubble p{margin:0;white-space:pre-wrap}#dialbot-root .time{display:block;font-size:.62rem;color:var(--text-muted);margin-top:5px;opacity:.7}#dialbot-root .row.user .time{text-align:right}#dialbot-root .message-actions{opacity:0;transition:opacity .2s}#dialbot-root .action-btn{background:#ffffff1a;border:none;border-radius:4px;padding:3px 6px;cursor:pointer;font-size:.8rem;transition:background .15s}#dialbot-root .action-btn:hover{background:#fff3}#dialbot-root .bubble.typing{display:flex;gap:5px;align-items:center;padding:13px 16px}#dialbot-root .bubble.typing span{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:dot 1.2s ease-in-out infinite;display:block}#dialbot-root .bubble.typing span:nth-child(2){animation-delay:.2s}#dialbot-root .bubble.typing span:nth-child(3){animation-delay:.4s}@keyframes dot{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}#dialbot-root .input-bar{display:flex;align-items:center;gap:10px;padding:12px 16px 16px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;position:relative;transition:all .4s ease}#dialbot-root .input-bar.centered{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(620px,88%);flex-direction:column;align-items:stretch;background:transparent;border-top:none;gap:14px;padding:0;z-index:10}#dialbot-root .input-bar-greeting{text-align:center;font-size:2.15rem;font-weight:600;color:var(--text);margin:0;opacity:.9;letter-spacing:-.2px}#dialbot-root .input-bar-inner{display:flex;align-items:center;gap:10px}#dialbot-root .input-bar:not(.centered) .input-bar-inner{flex:1;gap:10px}#dialbot-root .input-bar.centered .input-bar-inner{background:var(--surface);border:2px solid rgba(253 253 255 / 80%);border-radius:22px;padding:6px 8px 6px 18px;box-shadow:0 8px 32px #00000059,0 0 0 1px #ffffff0a}#dialbot-root .input{flex:1;background:var(--input-bg);border:2px solid rgba(255,255,255,.08);border-radius:22px;padding:11px 16px;color:var(--text);font-family:var(--font);font-size:.88rem;outline:none;resize:none;max-height:100px;overflow-y:auto;line-height:1.4;transition:border-color .2s}#dialbot-root .input-bar.centered .input{background:transparent;border:none;padding:10px 0;border-radius:0}#dialbot-root .input-bar.centered .input:focus{border-color:transparent}#dialbot-root .input::placeholder{color:var(--input-placeholder)}#dialbot-root .input:focus{border-color:#0461f880}#dialbot-root .input:disabled{opacity:.5;cursor:not-allowed}#dialbot-root .send-btn{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8b5cf6);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #6366f159;transition:transform .15s,box-shadow .15s,opacity .15s}#dialbot-root .send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 6px 18px #6366f180}#dialbot-root .send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}#dialbot-root .screen.light{--bg: #f5f5f5;--surface: #ffffff;--bubble-bot: #e8e8e8;--bubble-user: #cececf;--text: #0d0c0c;--text-muted: #666;--input-bg: #f0f0f5;--input-placeholder: #2d2b2b;--border: rgba(0, 0, 0, .08)}#dialbot-root .screen.light .time{color:#999}#dialbot-root .screen.light .search-input{border-color:#6366f133}#dialbot-root .screen.light .input-bar.centered .input-bar-inner{box-shadow:0 8px 32px #0000001a,0 0 0 1px #0000000f}@media(min-width:901px){#dialbot-root .sidebar{width:280px;position:static;transform:none;display:flex;transition:width .5s ease-in-out}#dialbot-root .sidebar:not(.open) .sidebar-header h2,#dialbot-root .sidebar:not(.open) .search-box,#dialbot-root .sidebar:not(.open) .new-chat-btn,#dialbot-root .sidebar:not(.open) .conversation-list,#dialbot-root .sidebar:not(.open) .search-results,#dialbot-root .sidebar:not(.open) .conv-item{display:none}}@media(max-width:900px){#dialbot-root{max-width:100%}#dialbot-root .screen{height:100vh;position:relative}#dialbot-root .sidebar{position:relative;width:60px;height:calc(100vh - 40px);z-index:1000;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;transition:width .5s ease;padding:0;box-sizing:border-box}#dialbot-root .sidebar.open{width:220px;padding:0 10px;align-items:stretch}#dialbot-root .sidebar.open .sidebar-header{width:100%;padding:15px 5px;box-sizing:border-box}#dialbot-root .sidebar.open .search-box{padding:10px 0;width:100%;box-sizing:border-box}#dialbot-root .sidebar.open .search-input{width:100%;padding:10px 10px 10px 28px;box-sizing:border-box;font-size:.8rem}#dialbot-root .sidebar.open .new-chat-btn{margin:10px 0;width:100%;padding:12px 8px;box-sizing:border-box;font-size:.85rem}#dialbot-root .sidebar.open .conversation-list{width:100%;padding:8px 0;box-sizing:border-box}#dialbot-root .sidebar.open .conv-item{padding:10px 8px;margin:8px 0;width:100%;box-sizing:border-box;gap:6px}#dialbot-root .sidebar.open .conv-title{font-size:.8rem}#dialbot-root .sidebar.open .conv-date{font-size:.65rem}#dialbot-root .overlay{display:none}#dialbot-root .overlay.visible{display:block;position:fixed;inset:20px;z-index:999;border-radius:16px}#dialbot-root .bubble{max-width:85%}#dialbot-root .input-bar.centered{width:min(560px,85%)}}@media(max-width:500px){#dialbot-root .screen{height:100vh;border-radius:0}#dialbot-root .chat-header{padding:12px 16px}#dialbot-root .messages{padding:16px 10px}#dialbot-root .sidebar:not(.open){width:30px}#dialbot-root .sidebar:not(.open) .sidebar-header{padding:1px 0}#dialbot-root .sidebar-header{padding:12px 10px;width:100%;box-sizing:border-box}#dialbot-root .sidebar.open{padding:15px 12px;width:100%;box-sizing:border-box}#dialbot-root .sidebar.open .new-chat-btn{width:100%;padding:12px 10px;box-sizing:border-box;font-size:.85rem;margin:10px 0}#dialbot-root .sidebar.open .search-box{width:100%;padding:10px 0;box-sizing:border-box}#dialbot-root .sidebar.open .search-input{width:100%;padding:10px 10px 10px 30px;box-sizing:border-box;font-size:.8rem}#dialbot-root .sidebar.open .conversation-list{width:100%;padding:8px 0;box-sizing:border-box}#dialbot-root .sidebar.open .conv-item{padding:10px 8px;margin:6px 0;width:100%;box-sizing:border-box;gap:6px}#dialbot-root .sidebar.open .conv-title{font-size:.8rem}#dialbot-root .sidebar.open .conv-date{font-size:.65rem}#dialbot-root .bubble{max-width:90%;font-size:.85rem}#dialbot-root .input-bar.centered{width:92%}#dialbot-root .input-bar-greeting{font-size:1.45rem}}