*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-tertiary: #141414;--bg-elevated: #1a1a1a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #666666;--accent: #0066ff;--accent-hover: #0052cc;--accent-subtle: rgba(0, 102, 255, .12);--success: #34c759;--warning: #ff9f0a;--danger: #ff3b30;--border: #222222;--border-subtle: #1a1a1a;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-xs: 11px;--font-sm: 13px;--font-base: 15px;--font-lg: 17px;--font-xl: 20px;--font-2xl: 24px;--line-height: 1.5;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--radius-pill: 9999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--sidebar-width: 304px;--icon-rail-width: 60px;--detail-panel-width: 244px}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #ebebeb;--bg-elevated: #e0e0e0;--text-primary: #000000;--text-secondary: #666666;--text-muted: #999999;--border: #d0d0d0;--border-subtle: #e0e0e0;--accent-subtle: rgba(0, 102, 255, .08)}body{font-family:var(--font-family);font-size:var(--font-base);line-height:var(--line-height);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{cursor:pointer;border:none;background:var(--accent);color:#fff;padding:10px 20px;border-radius:var(--radius-md);font-size:var(--font-sm);font-family:var(--font-family);font-weight:500;transition:background-color var(--transition-fast),opacity var(--transition-fast)}button:hover{background:var(--accent-hover)}button:disabled{opacity:.4;cursor:not-allowed}input{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);padding:12px 16px;border-radius:var(--radius-md);font-size:var(--font-base);font-family:var(--font-family);width:100%;transition:border-color var(--transition-fast)}input:focus{outline:none;border-color:var(--accent)}.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:var(--bg-primary);gap:var(--space-md)}.auth-loading-spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:auth-spin .8s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:var(--space-lg);background:var(--bg-primary)}.auth-form{background:var(--bg-secondary);padding:var(--space-xl) var(--space-lg);border-radius:var(--radius-lg);width:100%;max-width:420px;border:1px solid var(--border-subtle)}.auth-form h2{margin-bottom:var(--space-lg);text-align:center;font-size:var(--font-xl);font-weight:600}.form-group{margin-bottom:var(--space-md)}.form-group label{display:block;margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:var(--font-sm);font-weight:500}.auth-form button[type=submit]{width:100%;margin-top:var(--space-sm);padding:14px 20px;font-size:var(--font-base);font-weight:600;border-radius:var(--radius-md)}.auth-form p{margin-top:var(--space-md);text-align:center;color:var(--text-secondary);font-size:var(--font-sm)}.auth-form a{color:var(--accent);text-decoration:none}.auth-form a:hover{text-decoration:underline}.error{background:#ff3b301a;border:1px solid var(--danger);color:var(--danger);padding:var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-md);font-size:var(--font-sm)}.app-layout{display:grid;grid-template-columns:var(--sidebar-width) 1fr;height:100vh}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-subtle);overflow:hidden;display:flex;flex-direction:column}.main-content{background:var(--bg-primary);display:flex;flex-direction:column;overflow:hidden;position:relative}.nav-sidebar{display:flex;flex-direction:column;height:100%}.sidebar-layout{display:flex;flex-direction:row;height:100%;overflow:hidden}.icon-rail{width:var(--icon-rail-width);flex-shrink:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;padding:var(--space-sm) 0;gap:var(--space-xs);overflow:hidden}.icon-rail-item{position:relative;width:44px;height:44px;padding:0;background:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:border-radius var(--transition-normal),background-color var(--transition-fast),color var(--transition-fast);flex-shrink:0}.icon-rail-item:hover,.icon-rail-item.active{border-radius:var(--radius-sm);background:var(--accent);color:#fff}.icon-rail-icon{font-weight:700;font-size:var(--font-sm);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;border-radius:inherit}.icon-rail-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.icon-rail-home .icon-rail-icon{font-size:var(--font-xs);font-weight:800;letter-spacing:-.5px}.icon-rail-indicator{position:absolute;left:0;width:4px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--accent);transition:height var(--transition-normal),opacity var(--transition-normal);height:0;opacity:0}.icon-rail-item:hover .icon-rail-indicator{height:20px;opacity:1}.icon-rail-item.active .icon-rail-indicator{height:36px;opacity:1}.icon-rail-separator{width:32px;height:2px;background:var(--border);border-radius:1px;flex-shrink:0;margin:var(--space-xs) 0}.icon-rail-servers{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);width:100%;padding:0 var(--space-sm);scrollbar-width:none}.icon-rail-servers::-webkit-scrollbar{display:none}.icon-rail-add{background:transparent;border:2px dashed var(--border);color:var(--text-muted)}.icon-rail-add:hover{border-color:var(--accent);background:transparent;color:var(--accent)}.icon-rail-add.active{background:transparent}.add-server-options{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-md)}.add-server-option{display:flex;align-items:center;gap:var(--space-md);width:100%;padding:14px 16px;background:var(--bg-tertiary);color:var(--text-primary);text-align:left;border-radius:var(--radius-md)}.add-server-option:hover{background:var(--accent-subtle)}.add-server-option-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border-radius:var(--radius-md);font-size:20px;font-weight:700;flex-shrink:0;color:var(--accent)}.add-server-option strong{display:block;font-size:var(--font-sm);margin-bottom:2px}.add-server-option small{font-size:var(--font-xs);color:var(--text-muted)}.icon-rail-item[data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--bg-elevated);color:var(--text-primary);padding:6px 10px;border-radius:var(--radius-sm);font-size:var(--font-xs);font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);z-index:200;box-shadow:0 4px 12px #0000004d}.icon-rail-item[data-tooltip]:hover:after{opacity:1}.detail-panel{width:var(--detail-panel-width);flex-shrink:0;background:var(--bg-secondary);display:flex;flex-direction:column;height:100%;border-left:1px solid var(--border-subtle)}.detail-panel-header{padding:var(--space-sm) var(--space-md);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);flex-shrink:0;min-height:48px}.detail-panel-title{font-size:var(--font-base);font-weight:700;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.detail-panel-content{flex:1;overflow-y:auto;animation:detail-fade-in .15s ease}@keyframes detail-fade-in{0%{opacity:0}to{opacity:1}}.detail-panel-sections{padding:var(--space-sm) 0}.nav-search-trigger{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-tertiary);color:var(--text-muted);padding:6px 10px;border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;border:1px solid var(--border);transition:border-color var(--transition-fast);flex-shrink:0}.nav-search-trigger:hover{border-color:var(--text-muted);background:var(--bg-tertiary)}.nav-search-trigger kbd{font-family:var(--font-family);font-size:var(--font-xs);opacity:.6}.nav-zone{padding-bottom:var(--space-xs)}.nav-zone+.nav-zone{border-top:1px solid var(--border-subtle);padding-top:var(--space-xs)}.nav-zone-label{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md) var(--space-xs);font-size:var(--font-xs);font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary)}.nav-zone-action{width:20px;height:20px;padding:0;background:transparent;color:var(--text-muted);font-size:var(--font-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.nav-zone-action:hover{background:var(--bg-tertiary);color:var(--text-primary)}.nav-section{margin-bottom:var(--space-xs)}.nav-item{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:8px var(--space-md);background:transparent;color:var(--text-secondary);text-align:left;font-size:var(--font-sm);border-radius:0;transition:background-color var(--transition-fast),color var(--transition-fast)}.nav-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.nav-item.active{background:var(--accent-subtle);color:var(--accent)}.nav-item-icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:600;background:var(--bg-tertiary);color:var(--text-secondary);overflow:hidden}.nav-item-icon img{width:100%;height:100%;object-fit:cover}.nav-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-item-meta{font-size:var(--font-xs);color:var(--text-muted);flex-shrink:0}.nav-badge{background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}.nav-invite-code{padding:var(--space-xs) var(--space-md) var(--space-sm);font-size:var(--font-xs);color:var(--text-muted)}.nav-invite-code code{display:inline;padding:2px 6px;background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:SF Mono,SFMono-Regular,Consolas,monospace;font-size:var(--font-xs)}.nav-user-panel{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-top:1px solid var(--border-subtle);flex-shrink:0}.nav-user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--font-sm);color:#fff;flex-shrink:0;overflow:hidden}.nav-user-avatar img{width:100%;height:100%;object-fit:cover}.nav-user-name{flex:1;font-weight:600;font-size:var(--font-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-user-actions{display:flex;gap:var(--space-xs);flex-shrink:0}.nav-theme-toggle,.nav-logout-btn{width:28px;height:28px;padding:0;background:transparent;color:var(--text-muted);border-radius:var(--radius-sm);font-size:var(--font-sm);display:flex;align-items:center;justify-content:center}.nav-theme-toggle:hover,.nav-logout-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.command-palette-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;padding-top:20vh;z-index:2000;animation:fade-in .15s ease}.command-palette{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;max-width:520px;overflow:hidden;box-shadow:0 16px 48px #0006;animation:palette-enter .2s ease}.command-palette-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border-subtle);padding:var(--space-md);font-size:var(--font-lg);color:var(--text-primary);border-radius:0}.command-palette-input:focus{outline:none;border-color:var(--border-subtle)}.command-palette-results{max-height:320px;overflow-y:auto;padding:var(--space-sm)}.command-palette-empty{padding:var(--space-xl);text-align:center;color:var(--text-muted);font-size:var(--font-sm)}.command-palette-item{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:10px var(--space-md);background:transparent;color:var(--text-primary);text-align:left;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer}.command-palette-item:hover,.command-palette-item.selected{background:var(--accent-subtle);color:var(--accent)}.command-palette-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command-palette-item-type{font-size:var(--font-xs);color:var(--text-muted);flex-shrink:0;padding:2px 8px;background:var(--bg-tertiary);border-radius:var(--radius-sm)}.conversation-header{padding:var(--space-md);display:flex;align-items:center;gap:var(--space-sm);border-bottom:1px solid var(--border-subtle);flex-shrink:0;min-height:52px}.conversation-header .channel-icon{color:var(--text-muted);font-weight:600}.conversation-header .channel-name{font-weight:600;font-size:var(--font-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-header .channel-topic{color:var(--text-muted);font-size:var(--font-sm);margin-left:var(--space-sm);padding-left:var(--space-sm);border-left:1px solid var(--border)}.conversation-header-actions{margin-left:auto;display:flex;gap:var(--space-xs)}.header-action-btn{width:32px;height:32px;padding:0;background:transparent;color:var(--text-muted);border-radius:var(--radius-sm);font-size:var(--font-base);display:flex;align-items:center;justify-content:center}.header-action-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.header-action-btn.active{background:var(--accent-subtle);color:var(--accent)}.message-view{flex:1;display:flex;flex-direction:column;overflow:hidden}.message-view-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:var(--font-base)}.messages{flex:1;overflow-y:auto;padding:var(--space-sm) 0;display:flex;flex-direction:column}.loading{text-align:center;color:var(--text-muted);padding:var(--space-md);font-size:var(--font-sm)}.date-separator{text-align:center;color:var(--text-muted);font-size:var(--font-xs);margin:var(--space-lg) 0 var(--space-sm);position:relative}.date-separator:before,.date-separator:after{content:"";position:absolute;top:50%;width:calc(50% - 50px);height:1px;background:var(--border-subtle)}.date-separator:before{left:0}.date-separator:after{right:0}.msg-row{display:grid;grid-template-columns:40px 1fr auto;gap:0 var(--space-sm);padding:2px var(--space-md);position:relative;border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.msg-row:hover{background:var(--bg-secondary)}.msg-row-start{margin-top:var(--space-md);padding-top:var(--space-xs)}.msg-row-start:first-child{margin-top:0}.msg-gutter{display:flex;align-items:flex-start;justify-content:center;padding-top:2px;min-height:0}.msg-row-cont .msg-gutter{align-items:center}.msg-avatar{width:36px;height:36px;flex-shrink:0}.msg-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.msg-avatar .avatar-placeholder{width:100%;height:100%;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--font-sm);color:var(--text-secondary)}.msg-timestamp-hover{font-size:10px;color:var(--text-muted);opacity:0;transition:opacity var(--transition-fast);-webkit-user-select:none;user-select:none;white-space:nowrap}.msg-row:hover .msg-timestamp-hover{opacity:1}.msg-body{min-width:0;line-height:var(--line-height)}.msg-header{display:flex;align-items:baseline;gap:var(--space-sm);line-height:1.3}.msg-author{font-weight:600;font-size:var(--font-base);color:var(--text-primary);cursor:default}.msg-timestamp{font-size:var(--font-xs);color:var(--text-muted);flex-shrink:0}.msg-edited{font-size:var(--font-xs);color:var(--text-muted);font-style:italic}.msg-content{word-wrap:break-word;overflow-wrap:break-word;font-size:var(--font-base);color:var(--text-primary);line-height:var(--line-height)}.msg-actions{position:absolute;top:-12px;right:var(--space-md);display:flex;gap:2px;padding:2px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--transition-fast);z-index:5}.msg-row:hover .msg-actions{opacity:1;pointer-events:auto}.msg-action-btn{width:28px;height:28px;padding:0;background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.msg-action-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.msg-reply-context{display:flex;align-items:center;gap:var(--space-sm);padding:2px 0;margin-bottom:2px;cursor:pointer;font-size:var(--font-xs);color:var(--text-secondary)}.msg-reply-context:hover{color:var(--text-primary)}.msg-reply-pipe{width:2px;height:12px;background:var(--accent);border-radius:1px;flex-shrink:0}.msg-reply-author{font-weight:600;color:var(--text-secondary);flex-shrink:0}.msg-reply-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}.msg-reply-deleted{cursor:default}.msg-reply-deleted .msg-reply-text{font-style:italic;color:var(--text-muted)}.message-highlight{animation:highlight-fade 1.5s ease-out}@keyframes highlight-fade{0%{background:var(--accent-subtle);border-radius:var(--radius-md)}to{background:transparent}}.msg-attachments{margin-top:var(--space-xs);display:flex;flex-direction:column;gap:var(--space-sm)}.msg-attachment-image{display:block;max-width:400px;border-radius:var(--radius-md);overflow:hidden}.msg-attachment-image img{width:100%;display:block;border-radius:var(--radius-md)}.msg-attachment-file{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-decoration:none;font-size:var(--font-sm);color:var(--text-secondary);transition:background-color var(--transition-fast)}.msg-attachment-file:hover{background:var(--bg-elevated)}.msg-attachment-icon{flex-shrink:0}.msg-attachment-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.msg-attachment-size{flex-shrink:0;opacity:.7;font-size:var(--font-xs)}.reply-banner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-xs);background:var(--bg-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0;border-left:2px solid var(--accent);font-size:var(--font-sm);color:var(--text-secondary)}.reply-banner strong{color:var(--text-primary)}.reply-banner-close{background:transparent;color:var(--text-muted);padding:0 var(--space-xs);font-size:var(--font-lg);line-height:1}.reply-banner-close:hover{color:var(--text-primary);background:transparent}.message-input-container{padding:0 var(--space-md) var(--space-lg)}.typing-indicator{font-size:var(--font-xs);color:var(--text-muted);padding:var(--space-xs) 0;min-height:20px}.message-input{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-secondary);padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);border-radius:var(--radius-pill);border:1px solid var(--border);transition:border-color var(--transition-fast)}.message-input:focus-within{border-color:var(--accent)}.message-input input{flex:1;background:transparent;border:none;padding:var(--space-sm) 0;font-size:var(--font-base)}.message-input input:focus{outline:none;border:none}.message-input .attach-button{width:36px;height:36px;padding:0;border-radius:50%;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}.message-input .attach-button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.upload-previews{display:flex;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);overflow-x:auto}.upload-preview{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-xs);color:var(--text-secondary)}.upload-preview-remove{background:transparent;color:var(--text-muted);padding:0;width:20px;height:20px;font-size:var(--font-sm);display:flex;align-items:center;justify-content:center}.upload-preview-remove:hover{color:var(--danger);background:transparent}.user-list-panel{position:absolute;top:0;right:0;bottom:0;width:260px;background:var(--bg-secondary);border-left:1px solid var(--border-subtle);transform:translate(100%);transition:transform var(--transition-slow);z-index:10;overflow-y:auto}.user-list-panel.open{transform:translate(0)}.user-list-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-subtle);font-size:var(--font-sm);font-weight:600;color:var(--text-primary)}.user-list-close-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:none;color:var(--text-muted);font-size:var(--font-md);line-height:1;border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.user-list-close-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.user-list{padding:var(--space-md)}.user-list h4{font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:var(--space-md)}.users{display:flex;flex-direction:column;gap:var(--space-xs)}.user-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.user-item:hover{background:var(--bg-tertiary)}.user-avatar{width:32px;height:32px;position:relative;flex-shrink:0}.user-avatar img,.user-avatar .avatar-placeholder{width:100%;height:100%;font-size:var(--font-xs)}.status-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-secondary)}.user-name{font-size:var(--font-sm);color:var(--text-secondary)}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fade-in .15s ease}.modal{background:var(--bg-secondary);padding:var(--space-lg);border-radius:var(--radius-lg);width:100%;max-width:420px;border:1px solid var(--border);box-shadow:0 16px 48px #0006}.modal h3{margin-bottom:var(--space-md);font-size:var(--font-lg);font-weight:600}.modal input{margin-bottom:var(--space-md)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-sm)}.modal-actions button:first-child{background:transparent;color:var(--text-secondary)}.modal-actions button:first-child:hover{background:var(--bg-tertiary)}.home-page,.server-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary);padding:var(--space-xl)}.home-page h2,.server-welcome h2{color:var(--text-primary);margin-bottom:var(--space-sm);font-size:var(--font-xl)}.channel-page{display:flex;flex-direction:column;height:100%}.friends-view{display:grid;grid-template-columns:320px 1fr;height:100%;overflow:hidden}.friends-panel-left{display:flex;flex-direction:column;height:100%;border-right:1px solid var(--border-subtle);background:var(--bg-secondary);overflow:hidden}.friends-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-md) 0;flex-shrink:0}.friends-panel-header h2{font-size:var(--font-lg);font-weight:700;color:var(--text-primary)}.friends-add-btn{width:28px;height:28px;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.friends-add-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.friends-add-btn.active{background:var(--accent-subtle);color:var(--accent)}.friends-search-bar{padding:var(--space-sm) var(--space-md);flex-shrink:0;position:relative}.friends-search-icon{position:absolute;left:calc(var(--space-md) + 8px);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.friends-search-bar input{width:100%;padding:7px 10px 7px 30px;border-radius:var(--radius-sm);background:var(--bg-tertiary);border:1px solid transparent;color:var(--text-primary);font-size:var(--font-xs);transition:border-color var(--transition-fast)}.friends-search-bar input:focus{border-color:var(--accent);outline:none}.friends-search-bar input::placeholder{color:var(--text-muted)}.friends-scroll{flex:1;overflow-y:auto;padding:var(--space-xs) 0}.friends-section{margin-bottom:var(--space-xs)}.friends-section-label{font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:var(--space-sm) var(--space-md)}.friends-section-pending{margin-bottom:var(--space-sm)}.friends-section-toggle{display:flex;align-items:center;gap:var(--space-xs);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;color:var(--text-muted);font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;text-align:left;cursor:pointer;transition:color var(--transition-fast)}.friends-section-toggle:hover{color:var(--text-secondary)}.friends-chevron{transition:transform var(--transition-fast);flex-shrink:0}.friends-pending-badge{background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:auto;text-transform:none;letter-spacing:0}.friend-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px var(--space-md);width:100%;text-align:left;background:transparent;color:var(--text-primary);border:none;cursor:pointer;transition:background-color var(--transition-fast)}.friend-item:hover{background:var(--bg-tertiary)}.friend-item.selected{background:var(--accent-subtle)}.friend-item-avatar{width:32px;height:32px;position:relative;flex-shrink:0}.friend-item-avatar img,.friend-item-avatar .avatar-placeholder{width:100%;height:100%;border-radius:50%;font-size:var(--font-xs);display:flex;align-items:center;justify-content:center}.friend-item-avatar .avatar-placeholder{background:var(--bg-tertiary);color:var(--text-secondary);font-weight:600}.friend-item-status-dot{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-secondary)}.friend-item-name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.friend-item-pending{cursor:default}.friend-item-info{flex:1;min-width:0;display:flex;flex-direction:column}.friend-item-meta{font-size:var(--font-xs);color:var(--text-muted)}.friend-item-quick-actions{display:flex;gap:4px;flex-shrink:0}.friend-quick-btn{width:28px;height:28px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);color:var(--text-muted);transition:all var(--transition-fast)}.friend-quick-btn:hover{background:var(--bg-elevated, #1a1a1a);color:var(--text-primary)}.friends-panel-right{display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg-primary);overflow-y:auto}.friends-detail-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);color:var(--text-muted);font-size:var(--font-sm);opacity:.6}.friend-detail{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-2xl);max-width:320px;width:100%}.friend-detail-avatar{width:80px;height:80px;position:relative}.friend-detail-avatar img,.friend-detail-avatar .avatar-placeholder{width:100%;height:100%;border-radius:50%;font-size:var(--font-2xl);display:flex;align-items:center;justify-content:center}.friend-detail-avatar .avatar-placeholder{background:var(--bg-tertiary);color:var(--text-secondary);font-weight:600}.friend-detail-status-dot{position:absolute;bottom:2px;right:2px;width:16px;height:16px;border-radius:50%;border:3px solid var(--bg-primary)}.friend-detail-name{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0}.friend-detail-status{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-sm);color:var(--text-secondary)}.friend-detail-status-indicator{width:8px;height:8px;border-radius:50%}.friend-detail-divider{width:100%;height:1px;background:var(--border-subtle);margin:var(--space-sm) 0}.friend-detail-meta{font-size:var(--font-xs);color:var(--text-muted)}.friend-detail-actions{display:flex;gap:var(--space-sm);width:100%;margin-top:var(--space-sm)}.friend-detail-btn{flex:1;padding:10px 16px;border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:600;transition:all var(--transition-fast)}.friend-detail-btn.primary{background:var(--accent);color:#fff}.friend-detail-btn.primary:hover{background:var(--accent-hover)}.friend-detail-btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.friend-detail-btn.danger:hover{background:var(--danger);color:#fff}.add-friend-panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-2xl);max-width:400px;width:100%;text-align:center}.add-friend-icon{color:var(--text-muted);opacity:.4;margin-bottom:var(--space-sm)}.add-friend-panel h3{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0}.add-friend-description{color:var(--text-secondary);font-size:var(--font-sm);margin:0}.add-friend-form{display:flex;gap:var(--space-sm);width:100%}.add-friend-form input{flex:1}.add-friend-form button{white-space:nowrap;border-radius:var(--radius-md)}.add-friend-success{color:var(--success);font-size:var(--font-sm)}.add-friend-error{color:var(--danger);font-size:var(--font-sm)}.friends-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-2xl) var(--space-md);color:var(--text-muted);font-size:var(--font-sm)}.friends-empty-state p{margin:0}.friends-empty-icon{opacity:.3}.friends-empty-add-btn{padding:8px 16px;border-radius:var(--radius-md);background:var(--accent);color:#fff;font-size:var(--font-sm);font-weight:500;transition:background var(--transition-fast)}.friends-empty-add-btn:hover{background:var(--accent-hover)}.friends-no-results{color:var(--text-muted);text-align:center;padding:var(--space-xl) var(--space-md);font-size:var(--font-sm)}@keyframes message-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes palette-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}