:root{--color-bg-primary: #0f0f13;--color-bg-secondary: #16161d;--color-bg-tertiary: #1e1e28;--color-bg-elevated: #252533;--color-surface-1: #1e1e28;--color-surface-2: #252533;--color-surface-3: #2e2e40;--color-brand: #7c6af7;--color-brand-hover: #8f7ff8;--color-brand-dim: #2d274a;--color-text-primary: #e8e8f0;--color-text-secondary: #8a8aa0;--color-text-tertiary: #55556a;--color-text-inverse: #0f0f13;--color-text-link: #7c6af7;--color-success: #4caf6e;--color-success-dim: #1a3d28;--color-warning: #e6a817;--color-warning-dim: #3d2d08;--color-error: #e05252;--color-error-dim: #3d1515;--color-info: #4a9de0;--color-info-dim: #12304a;--color-online: #4caf6e;--color-idle: #e6a817;--color-dnd: #e05252;--color-offline: #55556a;--color-border: #2e2e40;--color-border-subtle: #252533;--color-border-strong: #3e3e54;--color-scrollbar-track: transparent;--color-scrollbar-thumb: #2e2e40;--color-scrollbar-thumb-hover: #3e3e54;--color-code-bg: #1a1a24;--color-code-text: #c8c8e0}[data-theme=light]{--color-bg-primary: #f5f5f7;--color-bg-secondary: #ffffff;--color-bg-tertiary: #ebebed;--color-bg-elevated: #ffffff;--color-surface-1: #f0f0f2;--color-surface-2: #e8e8ea;--color-surface-3: #dedee2;--color-text-primary: #1a1a2e;--color-text-secondary:#6b6b80;--color-text-tertiary: #aaaab5;--color-text-link: #534ab7;--color-border: #e0e0e6;--color-border-subtle: #ebebed;--color-border-strong: #c8c8d2;--color-brand: #534ab7;--color-brand-hover: #6357cc;--color-brand-dim: #e8e6fb;--color-code-bg: #f0f0f5;--color-code-text: #2a2a40}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-xs: var(--space-1);--space-sm: var(--space-2);--space-md: var(--space-4);--space-lg: var(--space-6);--space-xl: var(--space-8);--space-2xl: var(--space-12);--sidebar-width: 240px;--sidebar-collapsed-width: 60px;--right-panel-width: 280px;--channel-header-height: 52px;--input-area-min-height: 56px;--message-indent: 36px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 9999px;--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", "Jetbrains Mono", "Consolas", monospace;--text-2xs: 10px;--text-xs: 11px;--text-sm: 13px;--text-md: 15px;--text-lg: 17px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--leading-tight: 1.2;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.65;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .04em;--tracking-caps: .06em}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;font-size:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{height:100%;font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);overflow:hidden}#app{height:100%;display:flex;flex-direction:column}ul,ol{list-style:none}a{color:var(--color-text-link);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}img,svg{display:block;max-width:100%}code,pre{font-family:var(--font-mono);font-size:var(--text-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-thumb-hover)}:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:var(--radius-sm)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-brand{color:var(--color-brand)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-md{font-size:var(--text-md)}.text-lg{font-size:var(--text-lg)}.font-medium{font-weight:var(--weight-medium)}.font-semibold{font-weight:var(--weight-semibold)}.font-bold{font-weight:var(--weight-bold)}.uppercase{text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-xs);font-weight:var(--weight-semibold)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.min-w-0{min-width:0}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.avatar{flex-shrink:0;border-radius:var(--radius-pill);background-color:var(--color-brand-dim);color:var(--color-brand);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-semibold);overflow:hidden;user-select:none}.avatar--sm{width:24px;height:24px;font-size:var(--text-xs)}.avatar--md{width:32px;height:32px;font-size:var(--text-sm)}.avatar--lg{width:40px;height:40px;font-size:var(--text-md)}.avatar img{width:100%;height:100%;object-fit:cover}.presence-dot{width:8px;height:8px;border-radius:var(--radius-pill);border:2px solid var(--color-bg-secondary)}.presence-dot--online{background-color:var(--color-online)}.presence-dot--idle{background-color:var(--color-idle)}.presence-dot--dnd{background-color:var(--color-dnd)}.presence-dot--offline{background-color:var(--color-offline)}.badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1.6;white-space:nowrap}.badge--brand{background-color:var(--color-brand);color:var(--color-text-inverse)}.badge--success{background-color:var(--color-success-dim);color:var(--color-success)}.badge--warning{background-color:var(--color-warning-dim);color:var(--color-warning)}.badge--error{background-color:var(--color-error-dim);color:var(--color-error)}.badge--neutral{background-color:var(--color-surface-2);color:var(--color-text-secondary)}.app-shell{display:flex;height:100%;overflow:hidden}.app-shell__sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background-color:var(--color-bg-secondary);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease,min-width .2s ease}.app-shell__sidebar--collapsed{width:var(--sidebar-collapsed-width);min-width:var(--sidebar-collapsed-width)}.app-shell__main{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--color-bg-primary);min-width:0}.app-shell__right-panel{width:var(--right-panel-width);min-width:var(--right-panel-width);background-color:var(--color-bg-secondary);border-left:1px solid var(--color-border);overflow-y:auto;transition:width .2s ease}.app-shell__right-panel--hidden{width:0;min-width:0;overflow:hidden}.sidebar{display:flex;flex-direction:column;height:100%;overflow:hidden}.sidebar__workspace-header{height:var(--channel-header-height);padding:0 var(--space-4);display:flex;align-items:center;gap:var(--space-2);border-bottom:1px solid var(--color-border);font-weight:var(--weight-semibold);font-size:var(--text-md);cursor:pointer;flex-shrink:0;user-select:none}.sidebar__workspace-header:hover{background-color:var(--color-bg-tertiary)}.sidebar__workspace-header .workspace-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sidebar__scroll{flex:1;overflow-y:auto;padding:var(--space-2) 0}.sidebar__section{padding:var(--space-3) var(--space-2) var(--space-1)}.sidebar__section-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-tertiary);padding:0 var(--space-2) var(--space-1);display:flex;align-items:center;justify-content:space-between}.sidebar__section-label .add-btn{opacity:0;transition:opacity .15s;padding:2px;border-radius:var(--radius-sm)}.sidebar__section-label .add-btn:hover{background-color:var(--color-surface-2)}.sidebar__section-label:hover .add-btn{opacity:1}.sidebar__item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);margin:0 var(--space-1);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;user-select:none;min-height:28px}.sidebar__item:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.sidebar__item--active{background-color:var(--color-brand-dim);color:var(--color-text-primary)}.sidebar__item--active .sidebar__item-icon{color:var(--color-brand)}.sidebar__item--unread{color:var(--color-text-primary);font-weight:var(--weight-medium)}.sidebar__item-icon{flex-shrink:0;width:18px;text-align:center;color:var(--color-text-tertiary);font-size:var(--text-sm)}.sidebar__item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sidebar__item-badge{flex-shrink:0;background-color:var(--color-brand);color:#fff;font-size:var(--text-2xs);font-weight:var(--weight-bold);border-radius:var(--radius-pill);padding:1px 5px;min-width:18px;text-align:center;line-height:1.6}.sidebar__user-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;background-color:var(--color-brand-dim, #2d1f5e);color:var(--color-brand);font-size:var(--text-xs);font-weight:var(--weight-semibold);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;cursor:pointer}.sidebar__user-avatar img{width:32px;height:32px;object-fit:cover;border-radius:50%;display:block}.sidebar__user-bar{flex-shrink:0;padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}.sidebar__user-bar .user-name{flex:1;font-size:var(--text-sm);font-weight:var(--weight-medium);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sidebar__user-bar .user-nip05{font-size:var(--text-xs);color:var(--color-text-tertiary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.channel-header{height:var(--channel-header-height);padding:0 var(--space-4);display:flex;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--color-border);flex-shrink:0;background-color:var(--color-bg-primary)}.channel-header__name{font-size:var(--text-md);font-weight:var(--weight-semibold);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.channel-header__topic{font-size:var(--text-sm);color:var(--color-text-secondary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:2}.channel-header__divider{width:1px;height:20px;background-color:var(--color-border)}.channel-header__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--text-md);transition:background-color .1s,color .1s}.channel-header__btn:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.channel-header__btn--active{background-color:var(--color-brand-dim);color:var(--color-brand)}.channel-view{flex:1;display:flex;flex-direction:column;overflow:hidden}.channel-view__messages{flex:1;overflow-y:auto;padding:var(--space-4) 0}.channel-view__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);color:var(--color-text-secondary)}.channel-view__empty .empty-icon{font-size:48px;opacity:.3}.channel-view__empty .empty-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary)}.channel-view__empty .empty-desc{font-size:var(--text-sm);text-align:center;max-width:320px}.channel-info-panel__row--members{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.channel-members-list{display:flex;flex-direction:column;gap:var(--space-1);width:100%;max-height:240px;overflow-y:auto}.channel-member-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;font-size:var(--text-sm);color:var(--color-text-primary)}.channel-member-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--color-brand-dim, #2d1f5e);color:var(--color-brand);font-size:var(--text-xs);font-weight:var(--weight-semibold);display:flex;align-items:center;justify-content:center;flex-shrink:0}.channel-member-name{color:var(--color-text-secondary);font-size:var(--text-xs);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-4);position:relative}.message:hover{background-color:var(--color-bg-tertiary)}.message:hover .message__actions{opacity:1;pointer-events:auto}.message--grouped{padding-top:2px}.message--grouped .message__avatar-col{visibility:hidden}.message--grouped .message__author-line{display:none}.message--pending{opacity:.7}.message--failed .message__body-text{color:var(--color-error)}.message--deleted .message__body-text{color:var(--color-text-tertiary);font-style:italic}.message--highlighted{background-color:var(--color-brand-dim);border-left:2px solid var(--color-brand)}.message__avatar-col{flex-shrink:0;width:32px;padding-top:2px}.message__avatar{width:32px;height:32px;border-radius:50%;background-color:var(--color-brand-dim, #2d1f5e);color:var(--color-brand);font-size:var(--text-xs);font-weight:var(--weight-semibold);display:flex;align-items:center;justify-content:center;user-select:none;overflow:hidden;flex-shrink:0}.message__avatar--img{object-fit:cover;background:none;border:none;display:block}.message__nip05{font-size:var(--text-xs);color:var(--color-status-online, #3ba55c);cursor:default;flex-shrink:0}.message__body{flex:1;min-width:0}.message__author-line{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-1)}.message__author{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary);cursor:pointer}.message__author:hover{text-decoration:underline}.message__timestamp{font-size:var(--text-xs);color:var(--color-text-tertiary)}.message__body-text{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--color-text-primary);word-break:break-word}.message__body-text code{background-color:var(--color-code-bg);color:var(--color-code-text);padding:1px 5px;border-radius:var(--radius-sm);font-size:.9em}.message__body-text strong{font-weight:var(--weight-semibold)}.message__body-text em{font-style:italic}.message__body-text a{color:var(--color-text-link)}.message__body-text a:hover{text-decoration:underline}.message__actions{position:absolute;top:-16px;right:var(--space-4);display:flex;gap:var(--space-1);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-1);opacity:0;pointer-events:none;transition:opacity .1s;z-index:var(--z-raised);box-shadow:0 2px 8px #0000004d}.message__actions .action-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--text-md);transition:background-color .1s,color .1s}.message__actions .action-btn:hover{background-color:var(--color-surface-3);color:var(--color-text-primary)}.message__actions .action-btn--danger:hover{background-color:var(--color-error-dim);color:var(--color-error)}.message__status{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:2px}.message__status--failed{color:var(--color-error)}.message__reply-quote{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-left:3px solid var(--color-brand);background-color:var(--color-bg-elevated);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:var(--space-1);cursor:pointer;max-width:100%;overflow:hidden;opacity:.85}.message__reply-quote:hover{opacity:1}.message__reply-quote__author{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-brand);flex-shrink:0;white-space:nowrap}.message__reply-quote__text{font-size:var(--text-xs);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-input{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);background-color:var(--color-bg-primary)}.message-input__box{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;align-items:flex-end;gap:var(--space-2);padding:var(--space-2) var(--space-3);transition:border-color .15s}.message-input__box:focus-within{border-color:var(--color-brand)}.message-input__textarea{flex:1;resize:none;min-height:20px;max-height:200px;font-size:var(--text-md);line-height:var(--leading-normal);color:var(--color-text-primary);overflow-y:auto}.message-input__textarea::placeholder{color:var(--color-text-tertiary)}.message-input__send-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background-color:var(--color-brand);color:#fff;font-size:var(--text-md);flex-shrink:0;transition:background-color .15s}.message-input__send-btn__reply-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;font-size:var(--text-xs)}.message-input__send-btn__reply-bar[hidden]{display:none}.message-input__send-btn__reply-label{display:flex;align-items:center;gap:var(--space-1);color:var(--color-text-secondary);white-space:nowrap}.message-input__send-btn__reply-preview{flex:1;color:var(--color-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-input__send-btn__reply-cancel{background:none;border:none;cursor:pointer;color:var(--color-text-tertiary);padding:var(--space-1);display:flex;align-items:center}.message-input__send-btn__reply-cancel:hover{color:var(--color-text-primary)}.message-input__send-btn:hover:not(:disabled){background-color:var(--color-brand-hover)}.message-input__send-btn:disabled{opacity:.4}.message-input__reply-quote{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-left:2px solid var(--color-brand);background-color:var(--color-bg-tertiary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:var(--space-1);cursor:pointer;max-width:100%;overflow:hidden}.message-input__reply-quote__author{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-brand);flex-shrink:0}.message-input__reply-quote__text{font-size:var(--text-xs);color:var(--color-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--color-scrollbar-thumb) var(--color-scrollbar-track)}.message__reactions{display:flex;flex-wrap:wrap;gap:var(--space-1);min-height:0;margin-top:var(--space-1)}.reaction-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;font-size:var(--text-xs);line-height:1.4;transition:border-color .1s,background .1s}.reaction-pill:hover{border-color:var(--color-brand);background:var(--color-bg-tertiary)}.reaction-pill--own{border-color:var(--color-brand);background:color-mix(in srgb,var(--color-brand) 12%,transparent)}.reaction-pill__emoji{font-size:1rem;line-height:1}.reaction-pill__count{color:var(--color-text-secondary);font-weight:var(--weight-semibold)}.emoji-picker{position:fixed;z-index:1000;display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 16px #0000004d;width:224px}.emoji-picker[hidden]{display:none}.emoji-picker__btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:1.25rem;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background .1s}.emoji-picker__btn:hover{background:var(--color-bg-tertiary)}