@import "https://fonts.googleapis.com/css2?family=Whitney:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--background-primary:#313338;--background-secondary:#2b2d31;--background-tertiary:#1e1f22;--background-accent:#404249;--background-floating:#111214;--text-normal:#dbdee1;--text-muted:#949ba4;--text-link:#00a8fc;--header-primary:#f2f3f5;--header-secondary:#b5bac1;--brand-color:#5865f2;--brand-hover:#4752c4;--green-color:#23a559;--red-color:#f23f43;--yellow-color:#f0b232;--channel-icon:#80848e;--interactive-normal:#b5bac1;--interactive-hover:#dbdee1;--interactive-active:#fff;--interactive-muted:#4e5058;--background-modifier-hover:#4e50584d;--background-modifier-active:#4e50587a;--background-modifier-selected:#4e505899;--scrollbar-thin-thumb:#1a1b1e;--scrollbar-thin-track:#2b2d31;--scrollbar-auto-thumb:#1a1b1e;--scrollbar-auto-track:#2b2d31;--input-background:#383a40;--background-message-hover:#0202020f}html,body,#root{background-color:var(--background-primary);width:100%;height:100%;color:var(--text-normal);font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-thin-track);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thin-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#232428}.server-sidebar{background-color:var(--background-tertiary);scrollbar-width:none;flex-direction:column;align-items:center;gap:8px;width:72px;min-width:72px;padding:12px 0;display:flex;overflow-y:auto}.server-sidebar::-webkit-scrollbar{display:none}.server-icon{background-color:var(--background-primary);cursor:pointer;width:48px;height:48px;color:var(--text-normal);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:600;transition:border-radius .2s,background-color .2s;display:flex;position:relative}.server-icon:hover,.server-icon.active{background-color:var(--server-color,var(--brand-color));color:#fff;border-radius:16px}.server-icon.active:before{content:"";background-color:var(--header-primary);border-radius:0 4px 4px 0;width:8px;height:40px;position:absolute;left:-16px}.server-icon:not(.active):hover:before{content:"";background-color:var(--header-primary);border-radius:0 4px 4px 0;width:8px;height:20px;position:absolute;left:-16px}.home-icon{background-color:var(--background-primary);color:var(--text-normal)}.home-icon:hover,.home-icon.active{background-color:var(--brand-color);color:#fff}.server-separator{background-color:var(--background-accent);border-radius:1px;width:32px;height:2px}.add-server{color:var(--green-color);font-size:24px;font-weight:300}.add-server:hover{background-color:var(--green-color);color:#fff}.server-icon-text{letter-spacing:-.5px;font-size:16px}.channel-sidebar{background-color:var(--background-secondary);flex-direction:column;width:240px;min-width:240px;display:flex}.server-header{cursor:pointer;justify-content:space-between;align-items:center;height:48px;padding:0 16px;transition:background-color .1s;display:flex;box-shadow:0 1px #0003,0 1.5px #0000000d,0 2px #00000006}.server-header:hover{background-color:var(--background-modifier-hover)}.server-name{color:var(--header-primary);font-size:16px;font-weight:600}.channel-list{flex:1;padding:0 8px;overflow-y:auto}.channel-category{margin-top:16px}.category-header{cursor:pointer;align-items:center;gap:4px;margin-bottom:4px;padding:0 8px;display:flex}.category-header span{text-transform:uppercase;color:var(--channel-icon);letter-spacing:.02em;font-size:12px;font-weight:600}.category-arrow{color:var(--channel-icon)}.channel-item{cursor:pointer;color:var(--channel-icon);border-radius:4px;align-items:center;gap:8px;padding:6px 8px;transition:background-color .1s,color .1s;display:flex}.channel-item:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.channel-item.active{background-color:var(--background-modifier-selected);color:var(--interactive-active)}.channel-icon{min-width:20px;font-size:20px}.channel-name{font-size:16px;font-weight:500}.user-panel{background-color:#232428;justify-content:space-between;align-items:center;padding:8px 10px;display:flex}.user-info{align-items:center;gap:8px;display:flex}.user-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;display:flex}.user-details{flex-direction:column;display:flex}.username{color:var(--header-primary);font-size:14px;font-weight:600}.user-tag{color:var(--text-muted);font-size:12px}.user-controls{gap:4px;display:flex}.control-btn{color:var(--interactive-normal);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.control-btn:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.dm-sidebar{background-color:var(--background-secondary);flex-direction:column;width:240px;min-width:240px;display:flex}.dm-search{background-color:var(--background-tertiary);cursor:pointer;border-radius:4px;margin:12px 8px 0;padding:12px 10px}.dm-search span{color:var(--text-muted);font-size:14px}.dm-nav{padding:8px}.dm-nav-item{cursor:pointer;color:var(--interactive-normal);border-radius:4px;align-items:center;gap:12px;padding:8px 12px;font-size:16px;font-weight:500;transition:background-color .1s,color .1s;display:flex}.dm-nav-item:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.dm-nav-item.active{background-color:var(--background-modifier-selected);color:var(--interactive-active)}.dm-section-header{justify-content:space-between;align-items:center;padding:18px 8px 4px 18px;display:flex}.dm-section-header span{text-transform:uppercase;color:var(--channel-icon);letter-spacing:.02em;font-size:12px;font-weight:600}.dm-add{color:var(--interactive-normal);cursor:pointer;font-size:16px}.dm-add:hover{color:var(--interactive-hover)}.dm-list{flex:1;padding:4px 8px;overflow-y:auto}.dm-item{cursor:pointer;border-radius:4px;align-items:center;gap:12px;padding:6px 8px;transition:background-color .1s;display:flex}.dm-item:hover{background-color:var(--background-modifier-hover)}.dm-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;min-width:32px;height:32px;font-size:14px;font-weight:600;display:flex;position:relative}.dm-status{border:2px solid var(--background-secondary);border-radius:50%;width:10px;height:10px;position:absolute;bottom:-2px;right:-2px}.dm-info{flex-direction:column;display:flex}.dm-name{color:var(--interactive-normal);font-size:16px;font-weight:500}.dm-status-text{color:var(--text-muted);font-size:12px}.message{align-items:flex-start;min-height:44px;padding:2px 48px 2px 72px;transition:background-color .1s;display:flex;position:relative}.message:hover{background-color:var(--background-message-hover)}.message:hover .message-actions{display:flex}.message:hover .message-timestamp-hover{display:block}.message-avatar{position:absolute;top:2px;left:16px}.avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:600;display:flex}.avatar:hover{opacity:.8}.message-content{flex:1;min-width:0}.message-header{align-items:baseline;gap:8px;display:flex}.message-author{cursor:pointer;font-size:16px;font-weight:600}.message-author:hover{text-decoration:underline}.message-date,.message-time{color:var(--text-muted);font-size:12px}.message-text{color:var(--text-normal);word-wrap:break-word;font-size:16px;line-height:1.375}.message-grouped{padding-left:72px}.message-timestamp-hover{color:var(--text-muted);text-align:center;width:40px;font-size:11px;display:none;position:absolute;top:4px;left:16px}.message-actions{background-color:var(--background-secondary);border-radius:4px;display:none;position:absolute;top:-16px;right:16px;overflow:hidden;box-shadow:0 0 0 1px #0000001a}.action-btn{color:var(--interactive-normal);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px 8px;font-size:18px;display:flex}.action-btn:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.chat-area{background-color:var(--background-primary);flex-direction:column;flex:1;min-width:0;display:flex}.chat-area.empty-state{justify-content:center;align-items:center}.empty-content{text-align:center;color:var(--text-muted)}.empty-content h2{color:var(--header-primary);margin-bottom:8px;font-size:24px}.chat-header{justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex;box-shadow:0 1px #0003,0 1.5px #0000000d,0 2px #00000006}.header-left{align-items:center;gap:8px;display:flex}.header-icon{color:var(--channel-icon);font-size:24px}.header-channel-name{color:var(--header-primary);font-size:16px;font-weight:600}.header-right{align-items:center;gap:8px;display:flex}.header-btn{color:var(--interactive-normal);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;font-size:18px;display:flex}.header-btn:hover{color:var(--interactive-hover)}.header-btn.active{color:var(--interactive-active)}.header-search{align-items:center;display:flex;position:relative}.header-search input{background-color:var(--background-tertiary);color:var(--text-normal);border:none;border-radius:4px;outline:none;width:140px;padding:4px 8px;font-size:14px}.header-search input:focus{width:240px}.header-search input::placeholder{color:var(--text-muted)}.search-icon{color:var(--text-muted);pointer-events:none;font-size:14px;position:absolute;right:8px}.messages-container{flex-direction:column;flex:1;display:flex;overflow-y:auto}.messages-wrapper{margin-top:auto;padding:16px 0}.channel-welcome{margin-bottom:16px;padding:16px 16px 8px}.welcome-icon{background-color:var(--background-accent);width:68px;height:68px;color:var(--text-normal);border-radius:50%;justify-content:center;align-items:center;margin-bottom:8px;display:flex}.channel-welcome h2{color:var(--header-primary);margin-bottom:8px;font-size:32px;font-weight:700}.channel-welcome p{color:var(--text-muted);font-size:14px}.message-input-container{align-items:center;gap:8px;padding:0 16px 24px;display:flex}.message-input{background-color:var(--input-background);color:var(--text-normal);border:none;border-radius:8px;outline:none;flex:1;padding:11px 16px;font-family:inherit;font-size:16px}.message-input::placeholder{color:var(--text-muted)}.input-btn{color:var(--interactive-normal);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.input-btn:hover{color:var(--interactive-hover)}.input-right{gap:4px;display:flex}.member-list{background-color:var(--background-secondary);width:240px;min-width:240px;padding:16px 8px;overflow-y:auto}.member-section{margin-bottom:16px}.member-section-title{text-transform:uppercase;color:var(--channel-icon);letter-spacing:.02em;margin-bottom:8px;padding:0 8px;font-size:12px;font-weight:600}.member-item{cursor:pointer;border-radius:4px;align-items:center;gap:12px;padding:6px 8px;transition:background-color .1s;display:flex}.member-item:hover{background-color:var(--background-modifier-hover)}.member-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;min-width:32px;height:32px;font-size:14px;font-weight:600;display:flex;position:relative}.status-indicator{border:3px solid var(--background-secondary);border-radius:50%;width:12px;height:12px;position:absolute;bottom:-2px;right:-2px}.member-info{flex-direction:column;min-width:0;display:flex}.member-name{white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:500;overflow:hidden}.member-role{color:var(--text-muted);font-size:12px}.friends-panel{background-color:var(--background-primary);flex-direction:column;flex:1;display:flex}.friends-header{justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex;box-shadow:0 1px #0003,0 1.5px #0000000d,0 2px #00000006}.header-title{color:var(--header-primary);font-size:16px;font-weight:600}.friends-tabs{gap:8px;padding:12px 16px;display:flex}.tab-btn{color:var(--interactive-normal);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 12px;font-size:14px;font-weight:500}.tab-btn:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.tab-btn.active{background-color:var(--background-modifier-selected);color:var(--interactive-active)}.add-friend-btn{color:var(--green-color);background-color:#0000;border:none}.add-friend-btn:hover{color:var(--green-color);background-color:#23a5591a}.friends-search{padding:0 16px 12px}.friends-search input{background-color:var(--background-tertiary);width:100%;color:var(--text-normal);border:none;border-radius:4px;outline:none;padding:8px 12px;font-size:14px}.friends-search input::placeholder{color:var(--text-muted)}.friends-list{flex:1;padding:0 16px;overflow-y:auto}.friend-item{cursor:pointer;border-top:1px solid #0003;align-items:center;gap:12px;padding:12px 8px;transition:background-color .1s;display:flex}.friend-item:hover{background-color:var(--background-modifier-hover);border-radius:8px}.friend-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;font-size:18px;font-weight:600;display:flex;position:relative}.status-dot{border:3px solid var(--background-primary);border-radius:50%;width:14px;height:14px;position:absolute;bottom:-1px;right:-1px}.friend-info{flex-direction:column;flex:1;display:flex}.friend-name{color:var(--header-primary);font-size:16px;font-weight:600}.friend-status{color:var(--text-muted);font-size:13px}.friend-actions{gap:8px;display:flex}.friend-actions .action-btn{background:var(--background-secondary);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex}.friend-actions .action-btn:hover{background-color:var(--background-accent)}.app{width:100vw;height:100vh;display:flex;overflow:hidden}