:root{--bg-deep: #1a1a2e;--bg-surface: #22223a;--bg-card: #2a2a45;--bg-input: #33334d;--accent: #f4a261;--accent-hover: #e68a3e;--text: #f0ead6;--text-muted: #a09db0;--text-dim: #6b6880;--border: #3a3a55;--msg-own: #3a3560;--msg-other: #2a2a45;--sidebar-w: 260px;--header-h: 52px;--radius: 14px;--radius-sm: 10px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,sans-serif;background:var(--bg-deep);color:var(--text);overflow:hidden;overflow-x:hidden}html{overflow:hidden;width:100%;max-width:100vw}#app{display:flex;height:100%;width:100%;max-width:100vw;overflow:hidden}#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-surface);display:flex;flex-direction:column;border-right:1px solid var(--border);z-index:20}#sidebar-header{padding:20px 18px 14px;border-bottom:1px solid var(--border)}#sidebar-header h1{font-size:22px;font-weight:700;letter-spacing:-.5px}.subtitle{font-size:12px;color:var(--text-muted);margin-top:2px}#channel-list{flex:1;overflow-y:auto;padding:10px 8px}.channel-item{display:flex;align-items:center;position:relative}.channel-item .channel-btn{flex:1}.channel-delete{display:none;position:absolute;right:8px;background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1}.channel-item:hover .channel-delete,.channel-item .channel-delete.visible{display:block}.channel-delete:hover{color:#ef4444;background:#ef44441a}.channel-add{opacity:.5;border:1px dashed var(--border)!important;margin-top:8px}.channel-add:hover{opacity:1}.channel-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:15px;cursor:pointer;transition:all .15s ease;text-align:left}.channel-btn:hover{background:var(--bg-card);color:var(--text)}.channel-btn.active{background:var(--accent);color:#1a1a2e;font-weight:600}.channel-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0}.channel-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#mobile-header{display:none;align-items:center;gap:12px;padding:0 14px;height:var(--header-h);background:var(--bg-surface);border-bottom:1px solid var(--border)}#mobile-header h1{font-size:18px}#sidebar-toggle{background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:8px}#sidebar-toggle:hover{background:var(--bg-card)}#sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:15}#chat-area{flex:1;display:flex;flex-direction:column;min-width:0}#chat-header{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border);min-height:var(--header-h)}#channel-icon{font-size:28px}#channel-name{font-size:17px;font-weight:600}#channel-topic{font-size:12px;color:var(--text-muted);margin-top:1px}#messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--text-dim)}.empty-emoji{font-size:48px}.empty-state p{font-size:15px}.loading{display:flex;align-items:center;justify-content:center;padding:20px;color:var(--text-dim);font-size:14px}.msg{max-width:75%;padding:10px 14px;border-radius:var(--radius);font-size:14px;line-height:1.45;word-wrap:break-word;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.msg-other{background:var(--msg-other);align-self:flex-start;border-bottom-left-radius:4px}.msg-self{background:var(--msg-own);align-self:flex-end;border-bottom-right-radius:4px}.msg-author{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:3px}.msg-self .msg-author{color:#c4b5fd}.msg-content{white-space:pre-wrap}.msg-time{font-size:10px;color:var(--text-dim);margin-top:4px;text-align:right}.date-sep{text-align:center;color:var(--text-dim);font-size:11px;padding:8px 0;position:relative}.date-sep:before,.date-sep:after{content:"";position:absolute;top:50%;width:30%;height:1px;background:var(--border)}.date-sep:before{left:5%}.date-sep:after{right:5%}#message-form{display:flex;align-items:center;gap:8px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg-surface);border-top:1px solid var(--border)}#message-form.hidden{display:none}#message-input{flex:1;padding:12px 16px;border:none;border-radius:24px;background:var(--bg-input);color:var(--text);font-size:15px;outline:none;transition:box-shadow .2s ease}#message-input::placeholder{color:var(--text-dim)}#message-input:focus{box-shadow:0 0 0 2px var(--accent)}#send-btn{width:44px;height:44px;border:none;border-radius:50%;background:var(--accent);color:#1a1a2e;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .1s ease;flex-shrink:0}#send-btn:hover{background:var(--accent-hover)}#send-btn:active{transform:scale(.93)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.conn-status{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:12px;color:var(--text-muted);background:var(--bg-card);border-bottom:1px solid var(--border)}.conn-dot{width:8px;height:8px;border-radius:50%;background:#666;transition:background .3s}.conn-dot.connected{background:#4ade80}.conn-dot.connecting{background:#facc15;animation:pulse 1s infinite}.conn-dot.disconnected{background:#ef4444}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@media(max-width:640px){#app{flex-direction:column;width:100vw;max-width:100vw;overflow-x:hidden}#mobile-header{display:flex}#sidebar{position:fixed;left:-100%;top:0;bottom:0;width:80%;max-width:300px;min-width:0;transition:left .25s ease;box-shadow:4px 0 20px #0006}#sidebar.open{left:0}#sidebar-overlay.open{display:block}#chat-header{display:none}#chat-area{width:100vw;max-width:100vw;min-width:0;overflow-x:hidden}#messages{padding:12px;width:100%;max-width:100%;overflow-x:hidden}.msg{max-width:80%;overflow-wrap:break-word;word-break:break-word}#message-form{padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));width:100%;max-width:100vw}#message-input{padding:10px 14px;font-size:16px;min-width:0}#send-btn{width:40px;height:40px;flex-shrink:0}}#bot-section{border-top:1px solid var(--border);padding:12px 0;margin-top:auto}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.section-add-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:20px;height:20px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:all .15s}.section-add-btn:hover{color:var(--text);border-color:var(--text-muted);background:#ffffff0d}#bot-list{padding:0 8px}.bot-empty{padding:8px 12px;color:var(--text-muted);font-size:.8rem;font-style:italic}.bot-item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;transition:background .15s;position:relative}.bot-item:hover{background:#ffffff0d}.bot-avatar{font-size:1.1rem;flex-shrink:0}.bot-name{flex:1;font-size:.85rem;color:var(--text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bot-name:hover{text-decoration:underline}.bot-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s,color .15s}.bot-item:hover .bot-delete{opacity:1}.bot-delete:hover{color:#e74c3c}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-overlay.hidden{display:none}.modal{background:var(--bg-secondary, #2a2a3e);border-radius:12px;padding:24px;width:90%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #0006}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-header h3{margin:0;font-size:1.1rem}.modal-close{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}.modal-close:hover{color:var(--text);background:#ffffff1a}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}.form-group .required{color:#e74c3c}.form-group .hint{font-weight:400;text-transform:none;letter-spacing:normal;opacity:.7;font-size:.75rem;margin-left:4px}.form-group input,.form-group select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-primary, #1a1a2e);color:var(--text);font-size:.9rem;outline:none;transition:border-color .15s;box-sizing:border-box}.form-group input:focus,.form-group select:focus{border-color:var(--accent, #7c5cbf)}.form-group input::placeholder{color:var(--text-muted);opacity:.5}.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.btn-primary{padding:8px 20px;border:none;border-radius:8px;background:var(--accent, #7c5cbf);color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s}.btn-primary:hover{opacity:.9}.btn-secondary{padding:8px 20px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);font-size:.9rem;cursor:pointer;transition:background .15s}.btn-secondary:hover{background:#ffffff0d}.btn-danger{padding:8px 20px;border:none;border-radius:8px;background:#e74c3c;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s}.btn-danger:hover{opacity:.9}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoji-btn{width:36px;height:36px;border:2px solid transparent;border-radius:8px;background:#ffffff0d;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.emoji-btn:hover{background:#ffffff1a}.emoji-btn.selected{border-color:var(--accent, #7c5cbf);background:#7c5cbf26}.detail-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.9rem}.detail-label{color:var(--text-muted);font-weight:600;font-size:.8rem;text-transform:uppercase}.detail-value{color:var(--text);word-break:break-all}.detail-value code{font-family:monospace;font-size:.8rem;background:#ffffff0d;padding:2px 6px;border-radius:4px}