:root{--bg:#151210;--bg-card:#1a1612;--bg-elevated:#1f1812;--bg-hover:#252019;--bg-main:#151210;--text:#f0e0c8;--text-secondary:#d4b890;--text-tertiary:#a08868;--border:#3a2a1c;--border-light:#4a3525;--accent:#d4a017;--accent-bright:#f0c040;--accent-dim:#b8901a;--on-accent:#000;--danger:#c0392b;--green:#27ae60;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 16px 48px #0009;--glow-accent:0 0 12px #d4a01740;--accent-tint:#d4a0171f;--accent-glow:#f0c04066;--accent-radial:#d4a0170a;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--sidebar-w:240px}[data-theme=light]{--bg:#b8a784;--bg-card:#c4b294;--bg-elevated:#d0c0a0;--bg-hover:#b09e7a;--bg-main:#b8a784;--text:#1a0e00;--text-secondary:#4a3218;--text-tertiary:#6a5238;--border:#988868;--border-light:#a89878;--accent:#4a2c10;--accent-bright:#6a3c18;--accent-dim:#3a2008;--on-accent:#f0d060;--accent-tint:#4a2c102e;--accent-glow:#6a3c1866;--accent-radial:#4a2c1014;--glow-accent:0 0 12px #4a2c1026;--danger:#a93226;--green:#1e8449;--shadow-sm:0 1px 3px #28140040;--shadow-md:0 4px 16px #28140033;--shadow-lg:0 12px 40px #2814004d}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}::placeholder{color:var(--text-secondary);opacity:.8}input,textarea,button{font-family:inherit}button{color:inherit;background:0 0;border:none}@media (width<=768px){input,textarea{font-size:16px!important}.search-box input{padding:6px 10px 6px 32px;font-size:16px!important}.msg-input input,.msg-input textarea,.onboard input,.modal-form .field input,.modal-form .field textarea,.settings-page input,.settings-page textarea,.channel-search-bar input{font-size:16px!important}}html{scroll-behavior:smooth;height:100%}body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 0%,var(--accent-radial),transparent 50%),radial-gradient(ellipse at 80% 100%,var(--accent-radial),transparent 50%);color:var(--text);-webkit-font-smoothing:antialiased;touch-action:manipulation;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);background-attachment:fixed;font-family:Inter,system-ui,sans-serif;line-height:1.6;transition:background .3s,color .3s;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{gap:0;height:100dvh;display:flex}.sidebar{width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex}.channel-sidebar{background:var(--bg-card);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:220px;display:none;overflow:hidden}.channel-sidebar.visible{display:flex}.channel-sidebar-header{border-bottom:1px solid var(--border);cursor:pointer;flex-shrink:0;align-items:center;gap:8px;padding:10px 12px;transition:background .15s;display:flex}.channel-sidebar-header:hover{background:var(--bg-hover)}.channel-sidebar-header .cs-title{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.95em;font-weight:600;overflow:hidden}.channel-sidebar-header .cs-settings-icon{color:var(--text-tertiary);flex-shrink:0;align-items:center;transition:color .15s;display:flex}.channel-sidebar-header:hover .cs-settings-icon{color:var(--text-secondary)}.cs-back-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:4px;display:none}.cs-back-btn:hover{background:var(--bg-hover);color:var(--accent)}@media (width<=768px){.cs-back-btn{justify-content:center;align-items:center;display:flex}}.channel-sidebar-list{-webkit-overflow-scrolling:touch;flex:1;padding:4px 0;overflow-y:auto}.channel-sidebar-footer{border-top:1px solid var(--border);flex-shrink:0;padding:12px 16px}.main{background:var(--bg);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.sidebar-header{padding:max(12px,env(safe-area-inset-top)) 16px 12px;background:var(--bg-card);border-bottom:1px solid var(--border);align-items:center;gap:12px;margin-bottom:4px;transition:background .2s;display:flex}.sidebar-header h1{color:var(--accent-bright);flex:1;font-family:Rye,serif;font-size:1em}.relay-dot{vertical-align:middle;border-radius:50%;width:8px;height:8px;margin-left:4px;display:inline-block}.relay-dot.disconnected{background:var(--danger)}.relay-dot.connecting{background:var(--accent-bright);animation:1s ease-in-out infinite pulse}.relay-dot.connected{background:var(--green)}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.presence-dot{background:var(--green);border:2px solid var(--bg);border-radius:50%;width:10px;height:10px;position:absolute;bottom:0;right:0}.theme-toggle{background:var(--bg-elevated);border:1px solid var(--border);color:var(--accent);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;transition:all .15s;display:flex}.theme-toggle:hover{background:var(--bg-hover);color:var(--accent-bright)}.theme-toggle:active{transform:scale(.92)}.theme-toggle svg{width:18px;height:18px}[title]{position:relative}[title]:hover:after{content:attr(title);background:var(--bg-elevated);color:var(--text);border-radius:var(--radius-sm);white-space:nowrap;z-index:100;border:1px solid var(--border);pointer-events:none;padding:3px 8px;font-size:.75em;position:absolute;bottom:-28px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-elevated);color:var(--text);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:9999;opacity:0;pointer-events:none;padding:10px 20px;font-size:.9em;transition:opacity .25s;position:fixed;bottom:80px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}.profile-section{background:var(--bg-elevated);border-radius:var(--radius-md);margin:4px 8px;padding:8px 12px}.sidebar-section-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;padding:8px 16px 4px;font-size:.72em;font-weight:600;display:flex}.icon-add-btn{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;padding:2px;transition:color .15s,background .15s;display:flex}.icon-add-btn:hover{color:var(--accent-bright);background:var(--bg-hover)}.field-input{background:var(--bg-hover);width:100%;color:var(--text);border:1px solid #0000;border-radius:20px;padding:12px 16px;font-family:inherit;font-size:16px;transition:border-color .2s}.field-input:focus{border-color:var(--accent);outline:none}.solid-btn-lg{background:var(--accent);width:100%;color:var(--on-accent);cursor:pointer;border:none;border-radius:20px;padding:14px;font-family:inherit;font-size:1em;font-weight:600}.solid-btn-lg:hover{background:var(--accent-bright)}.profile-section .pname{text-overflow:ellipsis;white-space:nowrap;font-size:.88em;font-weight:600;overflow:hidden}.profile-section .avatar{background:var(--bg-elevated);width:28px;height:28px;box-shadow:none;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85em;transition:box-shadow .2s;display:inline-flex;overflow:hidden}.profile-section .avatar img{object-fit:cover;width:100%;height:100%}.profile-section .logout-icon{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:4px;transition:color .15s}.profile-section .logout-icon:hover{color:var(--danger)}.profile-section .profile-row{cursor:pointer;border-radius:var(--radius-sm);align-items:center;gap:8px;padding:4px;transition:background .15s;display:flex}.profile-section .profile-row:hover{background:var(--bg-hover)}.sidebar-tabs{margin-bottom:4px;display:flex}.sidebar-tab{text-align:center;cursor:pointer;color:var(--text-tertiary);-webkit-user-select:none;user-select:none;border-bottom:2px solid #0000;flex:1;padding:10px 4px;font-size:.82em;transition:color .2s,border-bottom-color .2s,background .15s}.sidebar-tab:hover{color:var(--text-secondary)}.sidebar-tab.active{color:var(--accent-bright);border-bottom:2px solid var(--accent);font-weight:600}.sidebar-tab:active{background:#0000000d}.tab-badge{background:var(--danger);color:#fff;border-radius:var(--radius-sm);vertical-align:middle;margin-left:4px;padding:1px 6px;font-size:.65em;font-weight:700}[data-theme=light] .profile-section,[data-theme=light] .sidebar-tabs{box-shadow:none}.groups-list{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;padding:4px 0;overflow-y:auto}.group-item{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:7px 12px;transition:background .2s,transform .15s,padding-left .2s;display:flex}.group-item:hover{background:#ffffff0a}[data-theme=light] .group-item:hover{background:#0000000a}.group-item:active{transform:scale(.98)}.group-item.active{border-left:3px solid var(--accent);background:#ffffff0f;padding-left:9px;box-shadow:inset 0 1px #ffffff08}.group-item .gicon{color:#fff;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.65em;font-weight:700;display:flex}.group-item .gname{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.9em;font-weight:500;overflow:hidden}.group-item .expand{color:var(--text-tertiary);font-size:.7em;transition:transform .2s}.group-item.active .expand{transform:rotate(0)}.channels-list{padding:2px 0}.channel-item{cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-sm);margin:1px 4px 1px 0;padding:6px 12px;font-size:.8em;transition:color .2s,background .15s,padding-left .15s}.channel-item:hover{color:var(--text);background:#ffffff0a}[data-theme=light] .channel-item:hover{background:#0000000a}.channel-item.active{color:var(--accent-bright);border-left:3px solid var(--accent);background:#ffffff0f;padding-left:9px;font-weight:600}[data-theme=light] .channel-item.active{background:#0000000f}.channel-item:before{content:"# "}.mute-btn{transition:opacity .15s}.channel-item:hover .mute-btn{opacity:1!important}.mute-btn.muted{opacity:.6}.dm-item{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:10px 16px;transition:background .2s,transform .15s;display:flex}.dm-item:hover{background:#ffffff0a}[data-theme=light] .dm-item:hover{background:#0000000a}.dm-item:active{transform:scale(.98)}.dm-item.active{border-left:3px solid var(--accent);background:#ffffff0f;box-shadow:inset 0 1px #ffffff08}[data-theme=light] .dm-item.active{background:#0000000f}.sidebar-footer{border-top:1px solid var(--border);padding:12px 16px}.create-btn{background:var(--accent);width:100%;color:var(--on-accent);border-radius:var(--radius-md);cursor:pointer;border:none;padding:10px 12px;font-family:inherit;font-size:.85em;font-weight:600;transition:all .15s}.create-btn:hover{background:var(--accent-bright);filter:brightness(1.05)}.create-btn:active{transform:scale(.97)}.chat-header{z-index:20;background:var(--bg);-webkit-backdrop-filter:none;box-shadow:none;justify-content:space-between;align-items:center;padding:12px 20px;display:flex;position:sticky;top:0}[data-theme=light] .chat-header{background:var(--bg);box-shadow:none}.chat-header .channel-name{font-size:1.05em;font-weight:600}.chat-header .channel-desc{color:var(--text-tertiary);font-size:.8em}.messages{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:16px 20px;overflow-y:auto}.msg{border-radius:var(--radius-sm);align-items:flex-start;gap:10px;margin-bottom:14px;transition:background .12s;animation:.3s both msgIn;display:flex}.msg:hover{background:#ffffff08}[data-theme=light] .msg:hover{background:#00000008}@keyframes msgIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.msg .avatar{background:var(--bg-elevated);border:1px solid var(--border);width:36px;height:36px;box-shadow:var(--shadow-sm);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:.85em;font-weight:600;display:flex;overflow:hidden}.msg .avatar img{object-fit:cover;width:100%;height:100%}.msg .body{flex:1;min-width:0}.msg .author{color:var(--accent-bright);align-items:center;gap:6px;margin-bottom:2px;font-size:.85em;font-weight:600;display:flex}.msg .author .name{cursor:pointer}.msg .author .bot-tag{background:var(--bg-elevated);color:var(--text-tertiary);border-radius:var(--radius-sm);padding:1px 6px;font-size:.7em;font-weight:500}.msg .author .agent-tag{color:var(--green);border-radius:var(--radius-sm);background:#27ae6026;padding:1px 6px;font-size:.7em;font-weight:500}.msg .time{color:var(--text-tertiary);margin-left:auto;font-size:.72em;font-weight:400}.msg.pending .content{opacity:.6}.msg.pending .time:after{content:" ⏳";font-size:.9em}.msg .content{color:var(--text);word-wrap:break-word;font-size:.92em;line-height:1.5}.msg-input{padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--bg);-webkit-backdrop-filter:none;box-shadow:none;gap:8px;display:flex;position:sticky;bottom:0}[data-theme=light] .msg-input{background:var(--bg);box-shadow:none}.msg-input input,.msg-input textarea{background:var(--bg-elevated);color:var(--text);resize:none;max-height:calc(1.5em*524px);border:1px solid #0000;border-radius:20px;flex:1;min-height:46px;padding:12px 16px;font-family:inherit;font-size:.95em;line-height:1.5;transition:border-color .2s,box-shadow .2s;overflow-y:auto}.msg-input input:focus,.msg-input textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.msg-input button{background:var(--accent);color:var(--on-accent);border-radius:var(--radius-md);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:14px;font-size:.95em;font-weight:600;transition:all .15s;display:flex}.msg-input button:hover{background:var(--accent-bright)}.msg-input button:active{transform:scale(.95)}.onboard{text-align:center;max-width:440px;margin:80px auto;padding:32px}.onboard h1{color:var(--accent-bright);letter-spacing:.5px;margin-bottom:8px;font-family:Rye,serif;font-size:2.8em}.onboard p{color:var(--text-secondary);margin-bottom:16px}.onboard .field{text-align:left;margin-bottom:16px}.onboard label{color:var(--text-secondary);margin-bottom:4px;font-size:.85em;display:block}.onboard input{background:var(--bg-elevated);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--radius-md);padding:12px 16px;font-family:inherit;font-size:.95em;transition:border-color .2s,box-shadow .2s}.onboard input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}[data-theme=light] .onboard input{box-shadow:0 1px 3px #00000014}.onboard button{background:var(--accent);color:var(--on-accent);border-radius:var(--radius-md);cursor:pointer;border:none;margin-top:0;padding:12px 32px;font-size:1em;font-weight:600;transition:all .15s}.onboard button:hover{background:var(--accent-bright);filter:brightness(1.08)}.onboard button:active{transform:scale(.98)}.onboard .or{color:var(--text-tertiary);margin:16px 0;font-size:.85em}.onboard .secondary{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.onboard .secondary:hover{border-color:var(--accent);color:var(--accent);background:0 0}.onboard .toggle-link{color:var(--accent);cursor:pointer;margin-top:10px;font-size:.85em;text-decoration:underline;transition:filter .15s,color .15s;display:block}.onboard .toggle-link:hover{color:var(--accent-bright);filter:brightness(1.15)}.onboard .existing-account{margin-top:16px;display:none}.onboard .existing-account.open{display:block}.onboard .key-display{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);word-break:break-all;text-align:left;margin:12px 0;padding:12px;font-family:monospace;font-size:.8em;box-shadow:inset 0 1px 3px #0000001a}.onboard .key-display .label{color:var(--text-tertiary);margin-bottom:4px;font-family:Inter,sans-serif;font-size:.85em}.onboard .key-display.secret{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--bg-elevated));border-width:2px}.onboard .key-display.secret .label{color:var(--danger);font-weight:600}.onboard .warning{color:var(--danger);margin-top:8px;font-size:.82em}.onboard .key-warning{color:var(--danger);align-items:center;gap:6px;margin-top:8px;font-size:.82em;font-weight:500;display:flex}.onboard .copy-btn{background:var(--accent);color:var(--on-accent);border-radius:var(--radius-md);cursor:pointer;border:none;align-items:center;gap:6px;margin-top:8px;padding:12px 24px;font-size:1em;font-weight:600;transition:all .15s;display:inline-flex}.onboard .copy-btn:hover{background:var(--accent-bright)}.onboard .copy-btn:active{transform:scale(.97)}.onboard .solid-btn{background:var(--accent);color:var(--on-accent);border-radius:var(--radius-md);cursor:pointer;border:none;width:100%;margin-top:0;padding:14px 32px;font-size:1.05em;font-weight:700;transition:all .15s}.onboard .solid-btn:hover{background:var(--accent-bright)}.onboard .solid-btn:active{transform:scale(.97)}.profile-modal{-webkit-backdrop-filter:blur(6px);z-index:300;background:#00000080;justify-content:center;align-items:center;animation:.2s modalOverlay;display:flex;position:fixed;inset:0}@keyframes modalOverlay{0%{opacity:0}to{opacity:1}}.profile-modal .panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:90%;max-width:400px;box-shadow:var(--shadow-lg);padding:24px;animation:.25s cubic-bezier(.4,0,.2,1) modalIn}@keyframes modalIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.profile-modal h2{color:var(--accent-bright);margin-bottom:16px;font-family:Rye,serif}.profile-modal .field{text-align:left;margin-bottom:12px}.profile-modal label{color:var(--text-secondary);margin-bottom:4px;font-size:.85em;display:block}.profile-modal input,.profile-modal textarea{background:var(--bg-elevated);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--radius-sm);padding:10px 14px;font-family:inherit;font-size:.9em;transition:border-color .2s,box-shadow .2s}.profile-modal input:focus,.profile-modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.profile-modal textarea{resize:vertical;min-height:60px}.profile-modal .btns{gap:8px;margin-top:16px;display:flex}.profile-modal .btns button{border-radius:var(--radius-sm);cursor:pointer;flex:1;padding:10px;font-family:inherit;font-size:.9em;transition:all .2s}.profile-modal .save{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm);border:none;font-weight:600}.profile-modal .save:hover{background:var(--accent-bright)}.profile-modal .save:active{transform:scale(.97)}.profile-modal .cancel{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.profile-modal .cancel:hover{border-color:var(--text-secondary)}.search-box{margin-bottom:4px;padding:6px 8px;position:relative}.search-box .search-icon{width:14px;height:14px;color:var(--text-tertiary);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-box input{background:var(--bg-elevated);border:1px solid var(--border);width:100%;color:var(--text);border-radius:20px;padding:5px 10px 5px 32px;font-family:inherit;font-size:.8em;transition:border-color .2s}.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.msg.grouped{margin-top:-4px;margin-bottom:4px}.msg.grouped .avatar{visibility:hidden}.msg.grouped .author{display:none}.scroll-bottom-btn{background:var(--bg-elevated);border:1px solid var(--accent);width:40px;height:40px;color:var(--accent-bright);cursor:pointer;box-shadow:var(--shadow-lg);z-index:10;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;bottom:72px;right:24px}.scroll-bottom-btn:hover{background:var(--bg-hover);box-shadow:var(--shadow-lg);transform:scale(1.05)}.scroll-bottom-btn:active{transform:scale(.92)}.scroll-bottom-btn svg{width:20px;height:20px}.typing-indicator{color:var(--text-tertiary);align-items:center;gap:6px;padding:4px 20px;font-size:.8em;font-style:italic;display:flex}.typing-indicator .dot{background:var(--text-tertiary);border-radius:50%;width:6px;height:6px;animation:1.4s infinite typingDot;display:inline-block}.typing-indicator .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes typingDot{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.date-separator{align-items:center;gap:12px;margin:16px 0 8px;padding:0 8px;display:flex}.date-separator:before,.date-separator:after{content:"";background:var(--border);flex:1;height:1px}.date-separator span{color:var(--text-tertiary);white-space:nowrap;padding:0 8px;font-size:.72em;font-weight:600}.scroll-unread-badge{background:var(--accent);color:var(--on-accent);text-align:center;border-radius:10px;min-width:18px;padding:1px 6px;font-size:.6em;font-weight:700;position:absolute;top:-6px;right:-6px}.unread-badge{background:var(--danger);color:#fff;border-radius:var(--radius-sm);margin-left:auto;padding:1px 6px;font-size:.65em;font-weight:700;box-shadow:0 1px 4px #c0392b4d}.unread-dot{background:var(--accent-bright);width:8px;height:8px;box-shadow:0 0 6px var(--accent-glow);border-radius:50%;flex-shrink:0;margin-left:auto}.msg .msg-actions{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:2px;display:none;position:absolute;top:-8px;right:0}@media (width<=768px){.msg.long-press-active .msg-actions,.msg.long-press-active .reaction-bar{display:flex!important}.msg.long-press-active{background:var(--accent-tint);border-radius:var(--radius-md)}}.msg:hover .msg-actions{display:flex}.msg .msg-actions button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:.8em;transition:color .2s}.msg .msg-actions button:hover{color:var(--accent)}.msg .body{position:relative}.reaction-bar{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);gap:2px;padding:4px 6px;display:none;position:absolute;top:-12px;right:0}.msg:hover .reaction-bar{display:flex}.reaction-bar button{cursor:pointer;border-radius:var(--radius-md);background:0 0;border:none;padding:4px 6px;font-size:.95em;transition:background .15s,transform .15s}.reaction-bar button:hover{background:var(--bg-hover);transform:scale(1.15)}.reactions{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.reaction-pill{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:3px;padding:2px 8px;font-size:.75em;transition:all .15s;display:flex}.reaction-pill:hover{border-color:var(--border-light);transform:scale(1.05)}.reaction-pill:active{transform:scale(.95)}.reaction-pill.mine{border-color:var(--accent);background:var(--accent-tint)}.reaction-pill .count{color:var(--text-secondary);font-size:.85em}.mention-popup{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);max-width:300px;box-shadow:var(--shadow-lg);z-index:50;max-height:200px;animation:.2s msgIn;position:absolute;bottom:56px;left:20px;right:20px;overflow-y:auto}.mention-popup .item{cursor:pointer;border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:10px 12px;transition:background .15s;display:flex}.mention-popup .item:last-child{border-bottom:none}.mention-popup .item:hover{background:var(--bg-hover)}.mention-popup .item .avatar-sm{background:var(--bg-elevated);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.7em;font-weight:600;display:flex}.modal-form .field input,.modal-form .field textarea{background:var(--bg-elevated);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--radius-sm);padding:10px 14px;font-family:inherit;font-size:.9em;transition:border-color .2s,box-shadow .2s}.modal-form .field input:focus,.modal-form .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.modal-form .field textarea{resize:vertical;min-height:60px}.modal-form .field label{color:var(--text-secondary);margin-bottom:4px;font-size:.85em;display:block}.modal-form .field{text-align:left;margin-bottom:14px}.modal-form .options{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:16px;display:flex;overflow:hidden}.modal-form .options button{cursor:pointer;color:var(--text);opacity:.5;background:0 0;border:none;flex:1;padding:10px;font-family:inherit;font-size:.88em;transition:all .15s}.modal-form .options button:hover{background:var(--bg-hover)}.modal-form .options button.active{background:var(--accent);color:var(--on-accent);opacity:1;font-weight:600}.modal-form .btns{gap:8px;margin-top:20px;display:flex}.modal-form .btns button{border-radius:var(--radius-sm);cursor:pointer;flex:1;padding:10px;font-family:inherit;font-size:.9em;transition:all .2s}.modal-form .save{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm);border:none;font-weight:600}.modal-form .save:hover{background:var(--accent-bright)}.modal-form .save:active{transform:scale(.97)}.modal-form .cancel{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.modal-form .cancel:hover{border-color:var(--text-secondary)}.modal-form .channel-list-item{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.modal-form .channel-list-item button{color:var(--danger);cursor:pointer;background:0 0;border:none;font-size:.85em;transition:color .2s}.modal-form .channel-list-item button:hover{color:var(--danger);text-decoration:underline}.logout-btn{border:1px solid var(--danger);color:var(--danger);border-radius:var(--radius-sm);cursor:pointer;background:0 0;margin-top:6px;padding:6px 12px;font-family:inherit;font-size:.75em;transition:all .2s}.logout-btn:hover{background:var(--danger);color:#fff;box-shadow:0 2px 8px #c0392b4d}.logout-btn:active{transform:scale(.97)}.saloon-name-link{cursor:pointer;transition:color .2s}.saloon-name-link:hover{color:var(--accent-bright);text-decoration:underline}.msg .content code{background:var(--bg-elevated);border-radius:var(--radius-sm);padding:2px 5px;font-family:monospace;font-size:.9em}.msg .content pre{background:var(--bg-elevated);border-radius:var(--radius-sm);margin:4px 0;padding:12px;overflow-x:auto;box-shadow:inset 0 1px 3px #0000001a}.msg .content pre code{background:0 0;padding:0}.msg .content blockquote{border-left:3px solid var(--border-light);color:var(--text-secondary);margin:4px 0;padding-left:10px}.msg .content a{color:var(--accent-bright);text-decoration:none;transition:color .15s}.msg .content a:hover{text-decoration:underline}.msg .content ul{margin:4px 0;padding-left:20px;list-style:outside}.msg .content ol{margin:4px 0;padding-left:20px;list-style:decimal}.msg .content strong{font-weight:700}.msg .content em{font-style:italic}.mobile-menu-btn{color:var(--text);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;margin-right:6px;padding:6px 10px;font-size:1.1em;transition:background .15s,transform .1s;display:none}.mobile-menu-btn:hover{background:var(--bg-hover);color:var(--text)}.mobile-menu-btn:active{transform:scale(.92)}.sidebar-backdrop{display:none}.drawer-backdrop{-webkit-backdrop-filter:blur(4px);z-index:250;background:#0009;position:fixed;inset:0}.drawer{background:var(--bg);z-index:251;width:280px;box-shadow:var(--shadow-lg);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0}.drawer-header{border-bottom:1px solid var(--border);padding:20px 20px 16px}.drawer-list{flex:1;padding:8px 0;overflow-y:auto}.drawer-item{cursor:pointer;color:var(--text-secondary);align-items:center;gap:12px;padding:12px 20px;font-size:.92em;transition:background .15s,color .15s;display:flex}.drawer-item:hover{background:var(--bg-hover);color:var(--text)}.drawer-item:active{background:var(--bg-elevated)}@media (width<=768px){.sidebar{display:none}.sidebar.mobile-open{z-index:200;width:280px;height:100%;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(20px);display:flex;position:fixed;top:0;bottom:0;left:0}.channel-sidebar{display:none}.channel-sidebar.mobile-open{z-index:200;width:260px;height:100%;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(20px);animation:.3s cubic-bezier(.4,0,.2,1) sidebarSlide;display:flex;position:fixed;top:0;bottom:0;left:0}@keyframes sidebarSlide{0%{transform:translate(-100%)}to{transform:translate(0)}}.sidebar-backdrop.mobile-open{-webkit-backdrop-filter:blur(4px);z-index:150;background:#00000080;display:block;position:fixed;inset:0}.mobile-menu-btn{display:inline-block}.app{position:relative}.chat-header,.msg-input,.messages{padding-left:12px;padding-right:12px}}.reply-preview-bar{background:color-mix(in srgb,var(--bg-elevated) 80%,transparent);border-left:3px solid var(--accent);border-radius:var(--radius-sm);color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:8px;margin:0 16px 4px;padding:6px 16px;font-size:.82em;display:flex;overflow:hidden}.reply-preview-bar .cancel-reply{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;flex-shrink:0;margin-left:auto;padding:2px 6px;font-size:1.1em;transition:color .15s}.reply-preview-bar .cancel-reply:hover{color:var(--danger)}.reply-quote{border-left:2px solid var(--border-light);color:var(--text-tertiary);cursor:pointer;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:4px;padding:2px 8px;font-size:.82em;transition:border-color .15s,background .15s}.reply-quote:hover{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}.reply-quote .reply-author{color:var(--accent);font-weight:600}.reply-quote .reply-text{text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;max-width:300px;display:inline-block;overflow:hidden}.chat-header-actions{align-items:center;gap:4px;display:flex}.chat-header-actions .header-btn{border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;transition:all .15s;display:flex}.chat-header-actions .header-btn:hover{border-color:var(--accent);color:var(--accent-bright);background:var(--bg-elevated)}.chat-header-actions .header-btn:active{transform:scale(.92)}.chat-header-actions .header-btn svg{width:18px;height:18px}.channel-search-bar{border-bottom:1px solid var(--border);background:var(--bg);align-items:center;gap:8px;padding:6px 16px;display:flex}.channel-search-bar input{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);flex:1;padding:6px 12px;font-family:inherit;font-size:.88em;transition:border-color .2s}.channel-search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.channel-search-bar .clear-search{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1em;transition:color .15s}.channel-search-bar .clear-search:hover{color:var(--danger)}.search-highlight{background:color-mix(in srgb,var(--accent-bright) 30%,transparent);border-radius:var(--radius-sm);padding:1px 2px}.search-no-results{color:var(--text-tertiary);text-align:center;padding:40px}.channel-category{text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);-webkit-user-select:none;user-select:none;padding:8px 16px 2px;font-size:.65em;font-weight:700}.members-panel{background:var(--bg);border-left:1px solid var(--border);width:300px;box-shadow:var(--shadow-lg);z-index:250;transform-origin:100%;flex-direction:column;animation:.25s cubic-bezier(.4,0,.2,1) membersSlideIn;display:flex;position:fixed;top:0;bottom:0;right:0}@keyframes membersSlideIn{0%{opacity:.7;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.members-panel .members-header{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:16px 20px;display:flex}.members-panel .members-header h3{color:var(--accent-bright);flex:1;font-size:1em;font-weight:600}.members-panel .close-btn{border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:28px;height:28px;transition:all .15s;display:flex}.members-panel .close-btn:hover{border-color:var(--danger);color:var(--danger)}.members-panel .members-list{flex:1;padding:8px 0;overflow-y:auto}.members-panel .member-item{align-items:center;gap:10px;padding:10px 20px;transition:background .15s;display:flex}.members-panel .member-item:hover{background:var(--bg-hover)}.members-panel .member-item .avatar{background:var(--bg-elevated);color:#fff;border:1px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9em;font-weight:600;display:flex;overflow:hidden}.members-panel .member-item .avatar img{object-fit:cover;width:100%;height:100%}.members-panel .member-info{flex:1;min-width:0}.members-panel .member-info .mname{font-size:.88em;font-weight:600}.members-panel .member-info .mnpub{color:var(--text-tertiary);word-break:break-all;font-family:monospace;font-size:.7em}.members-panel .member-count{color:var(--text-tertiary);padding:4px 20px;font-size:.78em}.settings-page{text-align:left;max-width:500px;max-height:calc(100vh - 80px);margin:40px auto;padding:32px;overflow-y:auto}.settings-page h1{color:var(--accent-bright);text-align:center;letter-spacing:.5px;margin-bottom:8px;font-family:Rye,serif;font-size:2em}.settings-page .settings-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:16px;padding:20px}.settings-page .settings-section h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:.8em;font-weight:600}.settings-page .field{margin-bottom:14px}.settings-page label{color:var(--text-secondary);margin-bottom:4px;font-size:.85em;display:block}.settings-page input,.settings-page textarea,.settings-page select{background:var(--bg-elevated);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--radius-sm);padding:10px 14px;font-family:inherit;font-size:.92em;transition:border-color .2s,box-shadow .2s}.settings-page input:focus,.settings-page textarea:focus,.settings-page select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.settings-page textarea{resize:vertical;min-height:60px}.settings-page .toggle-row{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.settings-page .toggle-row label{margin-bottom:0}.toggle-switch{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;flex-shrink:0;width:44px;height:24px;transition:background .2s;position:relative}.toggle-switch.on{background:var(--accent);border-color:var(--accent)}.toggle-switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle-switch.on:after{transform:translate(20px)}[data-theme=light] .toggle-switch{background:var(--bg-hover);border-color:var(--border)}[data-theme=light] .toggle-switch:after{background:#5a4535}[data-theme=light] .toggle-switch.on{background:var(--accent);border-color:var(--accent)}[data-theme=light] .toggle-switch.on:after{background:#fff}.settings-page .toggle-switch{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;flex-shrink:0;width:44px;height:24px;transition:background .2s;position:relative}.settings-page .toggle-switch.on{background:var(--accent);border-color:var(--accent)}.settings-page .toggle-switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px}.settings-page .toggle-switch.on:after{transform:translate(20px)}[data-theme=light] .settings-page .toggle-switch{background:var(--bg-hover);border-color:var(--border)}[data-theme=light] .settings-page .toggle-switch:after{background:#5a4535}[data-theme=light] .settings-page .toggle-switch.on{background:var(--accent);border-color:var(--accent)}[data-theme=light] .settings-page .toggle-switch.on:after{background:#fff}.settings-page .relay-status{color:var(--text-secondary);align-items:center;gap:8px;font-size:.88em;display:flex}.settings-page .key-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:8px;padding:12px}.settings-page .key-section .key-label{color:var(--text-tertiary);margin-bottom:4px;font-size:.78em}.settings-page .key-section .key-val{word-break:break-all;color:var(--text-secondary);font-family:monospace;font-size:.8em}.settings-page .btn-row{gap:8px;margin-top:16px;display:flex}.settings-page .btn-row button{border-radius:var(--radius-sm);cursor:pointer;flex:1;padding:12px;font-family:inherit;font-size:.92em;transition:all .15s}.settings-page .btn-save{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm);border:none;font-weight:600}.settings-page .btn-save:hover{background:var(--accent-bright)}.settings-page .btn-save:active{transform:scale(.97)}.settings-page .btn-logout{color:var(--danger);border:1px solid var(--danger);background:0 0}.settings-page .btn-logout:hover{background:var(--danger);color:#fff}.settings-page .btn-close{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.settings-page .btn-close:hover{border-color:var(--text-secondary)}.settings-nav-row{cursor:pointer;border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:12px;padding:12px 0;transition:color .15s,background .15s;display:flex}.settings-nav-row:hover{color:var(--accent);background:var(--bg-hover)}.settings-nav-row span:first-child{font-size:.92em}.relays-page{flex-direction:column;max-width:560px;height:100dvh;margin:0 auto;padding:0;display:flex;overflow:hidden}.relays-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:16px 20px;display:flex}.relays-header h1{color:var(--accent-bright);letter-spacing:.5px;font-family:Rye,serif;font-size:1.4em}.relays-back-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:background .15s,color .15s;display:flex}.relays-back-btn:hover{background:var(--bg-hover);color:var(--accent)}.relays-content{flex:1;padding:16px 20px;overflow-y:auto}.relays-section-title{color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:.85em;font-weight:600}.relay-list{flex-direction:column;gap:8px;display:flex}.relay-row{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:10px;padding:12px;transition:border-color .15s;display:flex}.relay-row:hover{border-color:var(--border-light);background:var(--bg-hover)}.relay-favicon{object-fit:contain;border-radius:6px;flex-shrink:0;width:28px;height:28px}.relay-favicon-fallback{width:28px;height:28px;color:var(--text-secondary);border:1px solid var(--border);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:.75em;font-weight:600;display:flex}.relay-pill{border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0;padding:3px 8px;font-size:.72em;font-weight:600}.relay-pill-online{color:var(--green);background:#27ae6026;border:1px solid #27ae604d}.relay-pill-error{color:var(--danger);background:#c0392b26;border:1px solid #c0392b4d}.relay-pill-checking{background:var(--bg-elevated);color:var(--text-tertiary);border:1px solid var(--border)}.relay-trash-btn{color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:6px;transition:background .15s,color .15s;display:flex}.relay-trash-btn:hover{color:var(--danger);background:#c0392b1f}.relay-add-btn{color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;background:0 0;border:none;flex-shrink:0;align-items:center;gap:4px;padding:8px 12px;font-family:inherit;font-size:.8em;transition:all .15s;display:flex}.relay-add-btn:hover{color:var(--accent);background:var(--bg-hover)}.relay-add-input-row{gap:8px;margin-top:12px;display:flex}.relay-add-input{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);flex:1;padding:10px 14px;font-family:monospace;font-size:.88em}.relay-add-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}@media (width<=768px){.members-panel{width:100%}.settings-page{margin:16px;padding:16px}}.create-btn.solid{background:var(--accent);color:var(--on-accent);font-weight:600}.create-btn.solid:hover{background:var(--accent-bright);color:#000}.skeleton-bar{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-hover) 50%,var(--bg-elevated) 75%);background-size:200% 100%;height:40px;margin:8px 0;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-state-content{text-align:center;max-width:360px;color:var(--text-tertiary);margin:0 auto;padding-top:80px;padding-bottom:40px}.empty-state-content .empty-hero{margin-bottom:12px;font-size:3em;line-height:1}.empty-state-content .empty-welcome{color:var(--text-secondary);margin-bottom:6px;font-size:1.2em;font-weight:600}.empty-state-content .empty-sub{color:var(--text-tertiary);font-size:.9em}.msg-input.disabled{opacity:.6;pointer-events:none}.msg-input.disabled input,.msg-input.disabled textarea{cursor:not-allowed}.fs-back-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px;transition:background .15s,color .15s}.fs-back-btn:hover{background:var(--bg-hover);border-radius:var(--radius-sm)}.fs-header{padding:max(12px,env(safe-area-inset-top)) 16px 12px;border-bottom:1px solid var(--border);align-items:center;gap:12px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.onboard,[class*=page],.app{animation:.15s fadeIn}@media (height<=500px){.sidebar-header{padding:8px 16px}.channel-sidebar-header{padding:8px 12px}.empty-state-content{padding-top:20px;padding-bottom:10px}.onboard{margin-top:20px}.msg{margin-bottom:8px}.search-box{display:none}}@media (width>=1024px){.members-panel{width:260px;box-shadow:none;flex-shrink:0;animation:none;position:relative;top:auto;bottom:auto;right:auto;transform:none}}.mobile-app{background:var(--bg);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.mobile-screen{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.mobile-screen.mobile-chat{flex-direction:column;display:flex}.mobile-fullscreen{background:var(--bg);flex-direction:column;width:100%!important;height:100%!important;display:flex!important;position:relative!important;transform:none!important}.bottom-bar{background:var(--bg-card);border-top:1px solid var(--border);height:56px;padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;display:flex}.bottom-bar-item{color:var(--text-tertiary);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:6px 0;transition:color .15s;display:flex;position:relative}.bottom-bar-item.active{color:var(--accent-bright)}.bottom-bar-item span{letter-spacing:.02em;font-size:.65em;font-weight:500}.bottom-bar-item:active{color:var(--accent)}.bottom-bar-item.active:before{content:"";background:var(--accent);border-radius:0 0 2px 2px;height:2px;position:absolute;top:0;left:25%;right:25%}.bottom-bar-badge{background:var(--danger);color:#fff;text-align:center;border-radius:10px;min-width:16px;padding:1px 6px;font-size:.6em;font-weight:700;position:absolute;top:4px;right:25%}.bottom-bar-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.7em;font-weight:700;display:flex;overflow:hidden;background-size:cover!important}@media (width>=768px){.bottom-bar{display:none}.mobile-app,.mobile-fullscreen{height:auto}}