:root{--bg: #1a1d21;--bg-sidebar: #19171d;--bg-hover: #27242c;--bg-active: #1164a3;--bg-input: #222529;--border: #35373b;--text: #d1d2d3;--text-bright: #ffffff;--text-muted: #9a9b9e;--accent: #1164a3;--accent-text: #4aa3e0;--mention-me: #f2a94b;--error: #e0245e;--online: #2bac76;--sp-2: 2px;--sp-4: 4px;--sp-6: 6px;--sp-8: 8px;--sp-12: 12px;--sp-16: 16px;--sp-20: 20px;--sp-24: 24px;--sp-32: 32px;--r-4: 4px;--r-6: 6px;--r-8: 8px;--r-10: 10px;--r-12: 12px;--r-full: 999px;--shadow-1: 0 1px 3px rgba(0, 0, 0, .4);--shadow-2: 0 8px 24px rgba(0, 0, 0, .45);--shadow-3: 0 12px 32px rgba(0, 0, 0, .5);--fs-12: 12px;--fs-13: 13px;--fs-15: 15px;--fs-18: 18px;--fs-22: 22px;--fw-normal: 400;--fw-semibold: 600;--fw-bold: 700;--measure: 72ch}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:var(--fs-15);line-height:1.46}button{font:inherit;cursor:pointer}input{font:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input:focus-visible{outline-offset:0;border-color:transparent}.muted{color:var(--text-muted)}.error-text{color:var(--error);margin:var(--sp-8) 0}.center-screen{height:100%;display:flex;align-items:center;justify-content:center}.claim-card{background:var(--bg-sidebar);border:1px solid var(--border);border-radius:var(--r-12);padding:var(--sp-32);width:min(420px,90vw);display:flex;flex-direction:column;gap:var(--sp-12)}.claim-card h1{margin:0;color:var(--text-bright);font-size:var(--fs-22)}.claim-card p{margin:0}.claim-card input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-6);color:var(--text-bright);padding:var(--sp-8) var(--sp-12)}.claim-card button{background:var(--accent);border:none;border-radius:var(--r-6);color:#fff;font-weight:var(--fw-semibold);padding:var(--sp-8)}.claim-card button:disabled{opacity:.6;cursor:default}.chat-layout{display:grid;grid-template-columns:240px 1fr;height:100%}.chat-main{display:flex;flex-direction:column;min-width:0}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.sidebar-brand{color:var(--text-bright);font-size:var(--fs-18);font-weight:var(--fw-bold);padding:var(--sp-16);border-bottom:1px solid var(--border)}.sidebar-section{padding:var(--sp-12) var(--sp-8) 0;display:flex;flex-direction:column;gap:1px}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;color:var(--text-muted);font-size:var(--fs-12);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;padding:0 var(--sp-8) var(--sp-6)}.sidebar-add{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:var(--r-4);color:var(--text-muted);width:var(--sp-20);height:var(--sp-20);padding:0}.sidebar-add:hover{background:var(--bg-hover);color:var(--text-bright)}.channel-item{display:flex;align-items:center;width:100%;background:none;border:none;border-radius:var(--r-6);color:var(--text-muted);text-align:left;padding:var(--sp-6) var(--sp-8)}.channel-item:hover{background:var(--bg-hover)}.channel-item.active{background:var(--bg-active);color:#fff}.channel-item .channel-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-item.unread{color:var(--text-bright);font-weight:var(--fw-bold)}.channel-hash{opacity:.7;margin-right:var(--sp-2)}.unread-badge{flex:none;margin-left:var(--sp-6);background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--r-full);color:var(--text);font-size:var(--fs-12);font-weight:var(--fw-bold);line-height:1;padding:var(--sp-2) var(--sp-6)}.unread-badge.mention{background:var(--error);border-color:var(--error);color:#fff}.presence-item{display:flex;align-items:center;gap:var(--sp-8);width:100%;background:none;border:none;border-radius:var(--r-6);color:inherit;font:inherit;text-align:left;padding:var(--sp-4) var(--sp-8)}.presence-item.clickable:hover,.presence-item.clickable:focus-visible{background:var(--bg-hover);cursor:pointer}.presence-item.active,.presence-item.active:hover{background:var(--bg-active);color:#fff}.presence-item.unread{color:var(--text-bright);font-weight:var(--fw-bold)}.presence-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presence-dot{width:9px;height:9px;border-radius:50%;flex:none}.presence-dot.online{background:var(--online)}.presence-dot.offline{background:transparent;border:1.5px solid var(--text-muted);opacity:.6}.presence-dm{display:inline-flex;align-items:center;color:var(--text-muted);padding:var(--sp-2);margin-left:auto;opacity:0}.presence-item:hover .presence-dm,.presence-item:focus-visible .presence-dm{opacity:.9;color:var(--text-bright)}.sidebar-me{margin-top:auto;display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-16);border-top:1px solid var(--border)}.sidebar-me-name{font-weight:var(--fw-semibold);color:var(--text-bright);line-height:1.25}.conn-text{font-size:var(--fs-12);font-weight:var(--fw-normal)}.conn-online{color:var(--online)}.conn-connecting{color:var(--text-muted)}.conn-offline{color:var(--error)}.chat-header{display:flex;align-items:center;gap:var(--sp-8);border-bottom:1px solid var(--border);padding:var(--sp-12) var(--sp-20)}.menu-btn{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--text-muted);padding:var(--sp-4);margin:calc(-1 * var(--sp-4)) var(--sp-2) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-6));border-radius:var(--r-6)}.menu-btn:hover{color:var(--text-bright);background:var(--bg-hover)}.sidebar-backdrop{display:none}.chat-header h1{font-size:var(--fs-18);margin:0;color:var(--text-bright)}.conn-badge{margin-left:auto;font-size:var(--fs-13)}.message-stack{flex:1;min-height:0;position:relative}.message-pane{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;display:flex;flex-direction:column}.message-pane.active{visibility:visible}.message-list{flex:1;overflow-y:auto;padding:var(--sp-16) var(--sp-20);display:flex;flex-direction:column}.load-older{align-self:center;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-full);color:var(--text);font-size:var(--fs-13);padding:var(--sp-4) var(--sp-16);margin-bottom:var(--sp-12)}.empty-channel{margin:auto}.message{position:relative;display:flex;gap:var(--sp-12);padding:var(--sp-2) 0;margin-top:var(--sp-12)}.message.grouped{margin-top:0}.message.pending{opacity:.55}.message:hover{background:color-mix(in srgb,var(--bg-hover) 50%,transparent)}.message-gutter{width:36px;flex:none;color:var(--text-muted);font-size:11px;text-align:right;visibility:hidden;padding-top:var(--sp-4)}.message:hover .message-gutter{visibility:visible}.avatar{width:36px;height:36px;border-radius:var(--r-8);flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--fw-semibold)}.message-body{min-width:0;max-width:var(--measure)}.message-meta{display:flex;align-items:baseline;gap:var(--sp-8);line-height:1.25}.message-author{color:var(--text-bright);font-weight:var(--fw-semibold)}button.message-author{background:none;border:none;border-radius:var(--r-4);color:var(--text-bright);font:inherit;font-weight:var(--fw-semibold);padding:0;cursor:pointer}button.message-author:hover,button.message-author:focus-visible{text-decoration:underline}.message-time{color:var(--text-muted);font-size:var(--fs-12)}.message-content{white-space:pre-wrap;overflow-wrap:break-word}.message-list.virtual{display:block;overflow:hidden;padding:0}.message-list.virtual .message{padding:var(--sp-2) var(--sp-20)}.list-header{text-align:center;font-size:var(--fs-13);padding:var(--sp-12) 0 var(--sp-4);min-height:var(--sp-32)}.edited-marker{color:var(--text-muted);font-size:var(--fs-12)}.message.tombstone .message-content{font-style:italic}.edit-form{display:flex;gap:var(--sp-6);margin:var(--sp-2) 0}.edit-form input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-6);color:var(--text-bright);padding:var(--sp-6) var(--sp-8)}.edit-form button{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-6);color:var(--text);font-size:var(--fs-13);padding:0 var(--sp-12)}.edit-form button[type=submit]{background:var(--accent);border-color:transparent;color:#fff}.search-input{margin-left:auto;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-6);color:var(--text-bright);font-size:var(--fs-13);padding:var(--sp-6) var(--sp-8);width:min(220px,30vw)}.chat-header .conn-badge{margin-left:0}.search-results{flex:1;overflow-y:auto;padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)}.search-result{background:none;border:none;border-radius:var(--r-8);color:var(--text);text-align:left;padding:var(--sp-8) var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-6)}.search-result:hover{background:var(--bg-hover)}.search-result-meta{display:flex;align-items:baseline;gap:var(--sp-8);font-size:var(--fs-12);color:var(--text-muted)}.search-result-channel{font-weight:var(--fw-semibold);color:var(--text)}.search-result-time{margin-left:auto}.search-result-body{display:flex;gap:var(--sp-8);align-items:flex-start}.search-result-body .avatar{width:28px;height:28px;font-size:var(--fs-13)}.search-snippet{overflow-wrap:anywhere}.search-snippet mark{background:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--text-bright);border-radius:var(--r-4);padding:0 var(--sp-2)}.message-actions{position:absolute;top:calc(-1 * var(--sp-12));right:var(--sp-8);display:none;gap:var(--sp-2);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-8);padding:var(--sp-2);box-shadow:var(--shadow-1)}.message:hover .message-actions,.message:focus-within .message-actions{display:flex}.action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--r-6);color:var(--text-muted);padding:0}.action-btn:hover{background:var(--bg-hover);color:var(--text-bright)}.reaction-picker{position:absolute;top:calc(100% + var(--sp-4));right:0;z-index:10;display:flex;gap:var(--sp-2);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-10);padding:var(--sp-4);box-shadow:var(--shadow-2)}.picker-emoji{background:none;border:none;border-radius:var(--r-6);font-size:var(--fs-18);line-height:1;padding:var(--sp-4)}.picker-emoji:hover{background:var(--bg-hover)}.reaction-pills{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-4)}.reaction-pill{display:inline-flex;align-items:center;gap:var(--sp-4);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-full);color:var(--text);font-size:var(--fs-13);line-height:1;padding:var(--sp-4) var(--sp-8)}.reaction-pill:hover{border-color:var(--text-muted)}.reaction-pill.mine{background:color-mix(in srgb,var(--accent) 25%,var(--bg-input));border-color:var(--accent)}.reaction-count{color:var(--text-muted);font-size:var(--fs-12)}.reaction-pill.mine .reaction-count{color:var(--text-bright)}.thread-link{display:inline-block;background:none;border:none;color:var(--accent-text);font-size:var(--fs-13);font-weight:var(--fw-semibold);padding:var(--sp-2) 0;margin-top:var(--sp-2)}.thread-link:hover{text-decoration:underline}.chat-layout.thread-open{grid-template-columns:240px minmax(0,1fr) minmax(300px,24rem)}.thread-panel{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--border);background:var(--bg)}.thread-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:var(--sp-12) var(--sp-16)}.thread-header h2{font-size:var(--fs-15);margin:0;color:var(--text-bright)}.thread-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--r-6);color:var(--text-muted);padding:0}.thread-close:hover{background:var(--bg-hover);color:var(--text-bright)}.thread-messages{padding:var(--sp-12) var(--sp-16)}.thread-panel .composer{padding:0 var(--sp-16) var(--sp-16)}.thread-divider{color:var(--text-muted);font-size:var(--fs-12);display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-16) 0 var(--sp-2)}.thread-divider:after{content:"";flex:1;height:1px;background:var(--border)}.composer{position:relative;display:flex;gap:var(--sp-8);padding:0 var(--sp-20) var(--sp-20)}.composer input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-8);color:var(--text-bright);padding:var(--sp-12) var(--sp-16)}.composer>button{background:var(--accent);border:none;border-radius:var(--r-8);color:#fff;font-weight:var(--fw-semibold);padding:0 var(--sp-20)}.composer>button:disabled{opacity:.5;cursor:default}.mention{background:color-mix(in srgb,var(--accent) 25%,transparent);border-radius:var(--r-4);color:var(--accent-text);padding:0 var(--sp-2)}.mention.mention-me{background:color-mix(in srgb,var(--mention-me) 28%,transparent);color:var(--mention-me)}.message.mentions-me{background:color-mix(in srgb,var(--mention-me) 8%,transparent);box-shadow:inset 3px 0 0 var(--mention-me)}.typing-bar{flex:none;min-height:var(--sp-20);padding:0 var(--sp-16) var(--sp-2);font-size:var(--fs-12);color:var(--text-muted)}.mention-menu{position:absolute;bottom:calc(100% + var(--sp-6));left:var(--sp-20);right:var(--sp-20);max-width:22rem;max-height:14rem;overflow-y:auto;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:var(--r-8);box-shadow:var(--shadow-2);padding:var(--sp-4);display:flex;flex-direction:column;z-index:30}.mention-option{display:flex;align-items:center;gap:var(--sp-8);background:none;border:none;border-radius:var(--r-6);color:var(--text);text-align:left;padding:var(--sp-6) var(--sp-8)}.mention-option.selected{background:var(--bg-hover);color:var(--text-bright)}.mention-option-dot{width:10px;height:10px;border-radius:var(--r-4);flex:none}.dm-picker-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:40}.dm-picker{width:min(26rem,calc(100vw - 2rem));max-height:60vh;display:flex;flex-direction:column;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:var(--r-10);box-shadow:var(--shadow-3)}.dm-picker input{margin:var(--sp-12) var(--sp-16);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-8);color:var(--text-bright);padding:var(--sp-8) var(--sp-12)}.dm-picker-results{overflow-y:auto;padding:0 var(--sp-8) var(--sp-12);display:flex;flex-direction:column;gap:1px}.dm-picker-option{display:flex;align-items:center;gap:var(--sp-8);background:none;border:none;border-radius:var(--r-6);color:var(--text);text-align:left;padding:var(--sp-6) var(--sp-8)}.dm-picker-option:hover{background:var(--bg-hover)}.dm-picker .modal-hint{margin:calc(-1 * var(--sp-4)) var(--sp-16) 0;font-size:var(--fs-12);color:var(--text-muted)}.dm-picker .modal-actions{display:flex;justify-content:flex-end;gap:var(--sp-8);padding:var(--sp-12) var(--sp-16) var(--sp-16)}.dm-picker .modal-actions .primary{background:var(--accent);border:none;border-radius:var(--r-6);color:#fff;font-weight:var(--fw-semibold);padding:var(--sp-8) var(--sp-16)}.dm-picker .modal-actions .primary:disabled{opacity:.5;cursor:default}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-4)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.chat-layout{grid-template-columns:1fr}.sidebar{position:fixed;top:0;bottom:0;left:0;width:min(82vw,300px);z-index:30;transform:translate(-100%);transition:transform .22s ease;box-shadow:2px 0 16px #00000073;padding-top:env(safe-area-inset-top)}.chat-layout.sidebar-open .sidebar{transform:translate(0)}.sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#00000080}.menu-btn{display:inline-flex}.chat-header{padding:var(--sp-12) var(--sp-16);padding-top:max(var(--sp-12),env(safe-area-inset-top))}.message-list{padding:var(--sp-12) var(--sp-16)}.composer{padding:0 var(--sp-16) var(--sp-16);padding-bottom:max(var(--sp-16),env(safe-area-inset-bottom))}.chat-layout.thread-open{grid-template-columns:1fr}.thread-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;border-left:none;padding-top:env(safe-area-inset-top)}.thread-panel .composer{padding-bottom:max(var(--sp-16),env(safe-area-inset-bottom))}}