:root{--rail: #0e0f14;--sidebar: #16171d;--chat: #1c1d24;--elevated: #23252e;--hover: rgba(255, 255, 255, .04);--active: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .07);--text: #e6e8ef;--text-dim: #9aa0b0;--text-faint: #6c7183;--accent: #6d7cff;--accent-soft: rgba(109, 124, 255, .16);--brand: #02b4fc;--brand-soft: rgba(2, 180, 252, .13);--online: #3ba55d;--danger: #ed6a5e;--up: #3ecf8e;--down: #f2647c;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--chat);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}input,textarea{font:inherit;color:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#ffffff17;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#ffffff29}::-webkit-scrollbar-track{background:transparent}.mono{font-family:var(--mono)}.app{display:flex;height:100%}.rail{width:72px;flex:0 0 72px;background:var(--rail);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;overflow-y:auto;overflow-x:hidden}.rail::-webkit-scrollbar{display:none}.rail-item{position:relative;display:flex;align-items:center;justify-content:center}.rail-pill{position:absolute;left:-12px;width:4px;border-radius:0 4px 4px 0;background:#fff;transition:height .18s ease;height:0}.rail-item:hover .rail-pill{height:20px}.rail-item.active .rail-pill{height:36px}.rail-button{width:48px;height:48px;border-radius:16px;overflow:hidden;background:var(--elevated);display:flex;align-items:center;justify-content:center;transition:border-radius .18s ease,background .18s ease;position:relative}.rail-button:hover,.rail-item.active .rail-button{border-radius:14px}.rail-button img{width:100%;height:100%;object-fit:cover}.rail-add{width:48px;height:48px;border-radius:16px;background:var(--elevated);color:var(--up);font-size:26px;font-weight:300;display:flex;align-items:center;justify-content:center;transition:border-radius .18s ease,background .18s ease,color .18s ease}.rail-add:hover{border-radius:14px;background:var(--up);color:#0e0f14}.rail-divider{width:32px;height:2px;background:var(--border);border-radius:2px;margin:4px 0}.tooltip{position:absolute;left:60px;top:50%;transform:translateY(-50%);background:#05060a;color:#fff;padding:7px 10px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:40;box-shadow:0 4px 14px #0006}.rail-item:hover .tooltip{opacity:1}.sidebar{width:248px;flex:0 0 248px;background:var(--sidebar);display:flex;flex-direction:column;min-width:0}.sidebar-header{padding:12px 14px;border-bottom:1px solid var(--border);box-shadow:0 1px #0003}.sidebar-title{display:flex;align-items:center;gap:10px;min-width:0}.sidebar-title h2{margin:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--text-dim)}.badge{background:var(--active);border-radius:5px;padding:2px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.badge.up{color:var(--up);background:#3ecf8e1f}.badge.down{color:var(--down);background:#f2647c1f}.ca-row{display:flex;align-items:center;gap:6px;margin-top:10px;padding:6px 8px;background:#00000040;border-radius:6px;font-family:var(--mono);font-size:11px;color:var(--text-dim)}.ca-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ca-row button{color:var(--text-faint);font-size:11px;flex:0 0 auto}.ca-row button:hover{color:var(--text)}.channels{flex:1;overflow-y:auto;padding:12px 8px}.channel-group{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding:6px 8px}.channel{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border-radius:6px;color:var(--text-dim);font-size:15px;font-weight:500;text-align:left}.channel:hover{background:var(--hover);color:var(--text)}.channel.active{background:var(--active);color:#fff}.channel .hash{color:var(--text-faint);font-size:18px;font-weight:400}.channel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel .dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#fff}.user-panel{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#00000047;border-top:1px solid var(--border)}.user-panel .meta{min-width:0;flex:1}.user-panel .name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-panel .addr{font-family:var(--mono);font-size:11px;color:var(--text-faint)}.icon-button{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:14px}.icon-button:hover{background:var(--hover);color:var(--text)}.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--chat)}.chat-header{display:flex;align-items:center;gap:10px;height:50px;flex:0 0 50px;padding:0 16px;border-bottom:1px solid var(--border);box-shadow:0 1px #0003}.chat-header .hash{color:var(--text-faint);font-size:22px}.chat-header h3{margin:0;font-size:15px;font-weight:700}.chat-header .topic{color:var(--text-dim);font-size:13px;padding-left:10px;margin-left:4px;border-left:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header .spacer{flex:1}.messages{flex:1;overflow-y:auto;padding:16px 0 20px}.message{display:flex;gap:14px;padding:3px 18px;position:relative}.message:hover{background:#00000024}.message.first{margin-top:14px}.message .gutter{width:40px;flex:0 0 40px;display:flex;justify-content:center}.message .gutter .stamp{font-size:10px;color:var(--text-faint);opacity:0;align-self:flex-start;line-height:22px}.message:hover .gutter .stamp{opacity:1}.message .body{min-width:0;flex:1}.message .head{display:flex;align-items:baseline;gap:8px}.message .author{font-size:15px;font-weight:600;color:#fff}.message .time{font-size:11px;color:var(--text-faint)}.message .content{white-space:pre-wrap;overflow-wrap:anywhere;color:#dcdfe8}.message .content a{color:#7aa7ff;text-decoration:none}.message .content a:hover{text-decoration:underline}.message.pending{opacity:.55}.divider-day{display:flex;align-items:center;gap:10px;margin:20px 18px 6px;color:var(--text-faint);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.divider-day:before,.divider-day:after{content:"";flex:1;height:1px;background:var(--border)}.welcome{padding:28px 18px 10px}.welcome h2{margin:14px 0 6px;font-size:26px}.welcome p{margin:0;color:var(--text-dim);max-width:60ch}.load-more{display:flex;justify-content:center;padding:8px}.load-more button{font-size:13px;color:var(--text-dim);padding:6px 12px;border-radius:6px}.load-more button:hover{background:var(--hover);color:var(--text)}.composer{padding:0 16px 20px}.composer-inner{display:flex;align-items:flex-end;gap:10px;background:var(--elevated);border-radius:8px;padding:10px 14px}.composer textarea{flex:1;background:none;border:none;outline:none;resize:none;max-height:180px;line-height:1.45;padding:2px 0}.composer textarea::placeholder{color:var(--text-faint)}.composer .send{color:var(--accent);font-weight:600;font-size:13px;padding:4px 8px;border-radius:6px}.composer .send:disabled{color:var(--text-faint);cursor:default}.typing{height:18px;padding:3px 4px 0;font-size:12px;color:var(--text-dim)}.members{width:232px;flex:0 0 232px;background:var(--sidebar);overflow-y:auto;padding:16px 8px}.members h4{margin:0 0 8px;padding:0 8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.members h4+.member{margin-bottom:2px}.member{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px}.member .meta{min-width:0}.member .name{font-size:14px;font-weight:500;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member.online .name{color:var(--text)}.member.offline{opacity:.45}.member .addr{font-family:var(--mono);font-size:10px;color:var(--text-faint)}.members .group-gap{margin-top:18px}.avatar{border-radius:50%;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;-webkit-user-select:none;user-select:none;background:var(--elevated)}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-wrap{position:relative;flex:0 0 auto;display:flex}.avatar-wrap .status{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:var(--online);border:3px solid var(--sidebar)}.landing{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1000px 600px at 15% -10%,rgba(109,124,255,.18),transparent 60%),radial-gradient(900px 500px at 100% 110%,rgba(62,207,142,.12),transparent 60%),var(--rail);overflow-y:auto}.landing-card{width:100%;max-width:460px;background:#1c1d24d1;border:1px solid var(--border);border-radius:16px;padding:36px 32px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 60px #00000080}.landing-card .logo{font-size:40px}.landing-card h1{margin:14px 0 8px;font-size:26px;letter-spacing:-.01em}.landing-card .lede{margin:0 0 26px;color:var(--text-dim)}.landing-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}.landing-steps li{display:flex;gap:12px;align-items:flex-start;color:var(--text-dim);font-size:14px}.landing-steps .n{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 16px;border-radius:9px;font-size:15px;font-weight:600;background:var(--accent);color:#fff;transition:filter .15s ease,transform .05s ease}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:default}.btn.secondary{background:var(--elevated);color:var(--text)}.btn+.btn{margin-top:10px}.btn-emoji{font-size:17px}.hint{margin-top:18px;font-size:12px;color:var(--text-faint);text-align:center}.error{margin-top:14px;padding:10px 12px;border-radius:8px;background:#ed6a5e1f;color:#ffb4ad;font-size:13px;border:1px solid rgba(237,106,94,.25)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#05060ab8;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-width:460px;background:var(--chat);border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:0 24px 60px #0000008c;max-height:88vh;overflow-y:auto}.modal h3{margin:0 0 6px;font-size:20px}.modal p{margin:0 0 18px;color:var(--text-dim);font-size:14px}.field{width:100%;padding:12px 14px;border-radius:8px;background:#00000059;border:1px solid var(--border);outline:none;font-family:var(--mono);font-size:13px}.field:focus{border-color:var(--accent)}.modal-actions{display:flex;gap:10px;margin-top:18px}.modal-actions .btn{margin-top:0}.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-faint);text-align:center;padding:24px}.empty .big{font-size:44px}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1100px){.members{display:none}}@media (max-width: 720px){.sidebar{width:210px;flex-basis:210px}.rail{width:62px;flex-basis:62px}.chat-header .topic{display:none}}.directory{margin-top:18px;max-height:260px;overflow-y:auto;border-top:1px solid var(--border);padding-top:12px}.directory-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding:0 2px 8px}.directory-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:8px;text-align:left}.directory-row:hover{background:var(--hover)}.directory-row .meta{flex:1;min-width:0}.directory-row .name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.directory-row .sub{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.directory-row .count{font-size:12px;color:var(--text-faint)}.composer-locked{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--elevated);border-radius:8px;padding:14px 16px;color:var(--text-dim);font-size:14px}.composer-locked span{flex:1;min-width:200px}.composer-locked .btn{width:auto;padding:9px 16px;font-size:14px}.user-panel.guest .name{color:var(--text-dim)}.connect-mini{background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:6px}.connect-mini:hover{filter:brightness(1.08)}.lobby-avatar{background:var(--brand-soft)}.lobby-avatar img{width:76%;height:76%;object-fit:contain}.user-panel.as-button{width:100%;text-align:left}.user-panel.as-button:hover{background:#0006}.modal.profile{max-width:440px}.profile-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}.profile-identity{min-width:0}.profile-name{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-tag{font-family:var(--mono);font-size:13px;color:var(--text-dim)}.field-label{display:block;margin-bottom:7px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.field.text{font-family:var(--font);font-size:15px}.field-hint{margin:9px 0 0;font-size:12px;color:var(--text-faint);line-height:1.5}.field-hint strong{color:var(--text-dim);font-family:var(--mono);font-weight:600}.private-block{margin-top:20px;padding:12px 14px;background:#00000040;border:1px solid var(--border);border-radius:9px}.private-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.private-pill{background:#3ecf8e1f;color:var(--up);padding:3px 7px;border-radius:5px;letter-spacing:.02em}.private-block .ca-row{margin-top:9px;background:#0000004d}.profile-actions{align-items:center}.profile-actions .spacer{flex:1}.btn.danger{background:#ed6a5e24;color:#ff9b91}.btn.danger:hover{background:#ed6a5e38;filter:none}.modal-actions .btn{width:auto;padding:10px 18px;font-size:14px}.member{width:100%;text-align:left;font:inherit;color:inherit}.member:hover{background:var(--hover)}.message .author{padding:0;background:none;border:none;font:inherit;font-size:15px;font-weight:600;color:#fff;cursor:pointer}.message .author:hover{text-decoration:underline}.message .author.self{color:var(--accent)}.explorer-link{display:inline-block;margin-top:10px;font-size:13px;color:var(--brand);text-decoration:none}.explorer-link:hover{text-decoration:underline}.rail-spacer{flex:1;min-height:8px}.rail-social{width:40px;height:40px;border-radius:14px;background:var(--elevated);color:var(--text-dim);display:flex;align-items:center;justify-content:center;transition:border-radius .18s ease,background .18s ease,color .18s ease}.rail-social:hover{border-radius:12px;background:#fff;color:#0e0f14}.invite-hint{margin-top:8px;padding:6px 8px;background:#3ecf8e1f;color:var(--up);border-radius:6px;font-size:11px;font-weight:600;text-align:center}.route-error{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:200;max-width:min(560px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:var(--elevated);border:1px solid var(--border);box-shadow:0 12px 32px #00000080;font-size:13px;color:var(--text-dim)}.route-error code{font-family:var(--mono);font-size:12px;color:var(--text)}.route-error button{flex:0 0 auto;color:var(--text-faint);font-size:13px;padding:2px 6px;border-radius:5px}.route-error button:hover{background:var(--hover);color:var(--text)}