:root{--bg-primary: #313338;--bg-secondary: #2b2d31;--bg-tertiary: #1e1f22;--bg-secondary-alt: #232428;--bg-floating: #111214;--interactive-normal: #b5bac1;--interactive-hover: #dbdee1;--interactive-active: #ffffff;--interactive-muted: #4e5058;--background-modifier-hover: rgba(78, 80, 88, .3);--background-modifier-active: rgba(78, 80, 88, .48);--background-modifier-selected: rgba(78, 80, 88, .6);--text-normal: #dbdee1;--text-muted: #b5bac1;--text-link: #00a8fc;--brand-color: #5865F2;--brand-color-hover: #4752C4;--danger: #da373c;--scrollbar-thin-thumb: #1a1b1e;--scrollbar-thin-track: transparent;--scrollbar-auto-thumb: #1a1b1e;--scrollbar-auto-track: #2b2d31;--scrollbar-auto-scrollbar-color-thumb: #1a1b1e;--scrollbar-auto-scrollbar-color-track: #2b2d31;--elevation-low: 0 1px 0 rgba(4,4,5,.2), 0 1.5px 0 rgba(6,6,7,.05), 0 2px 0 rgba(4,4,5,.05);--elevation-high: 0 8px 16px rgba(0, 0, 0, .24);--channel-icon: #80848e}*{box-sizing:border-box;margin:0;padding:0}body{font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-normal);height:100vh;overflow:hidden}#root,.view{height:100%;width:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-auto-track);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--scrollbar-auto-thumb);border-radius:4px}#login-view{display:flex;justify-content:center;align-items:center;background-color:var(--brand-color);background-image:radial-gradient(circle at top left,#6b77f6,#4752c4)}.login-box{background-color:var(--bg-primary);padding:32px;border-radius:5px;width:480px;box-shadow:var(--elevation-high);text-align:center;animation:floatIn .4s ease-out forwards}@keyframes floatIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-box h2{color:#fff;margin-bottom:8px;font-size:24px;font-weight:600}.login-subtitle{color:var(--text-muted);margin-bottom:20px;font-size:16px}.input-group{margin-bottom:20px;text-align:left}.input-group label{display:block;margin-bottom:8px;color:var(--text-muted);font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.2px}.input-group input{width:100%;padding:10px;border-radius:3px;border:none;background-color:var(--bg-tertiary);color:var(--text-normal);font-size:16px;transition:border-color .2s ease-in-out}.input-group input:focus{outline:none;border:1px solid var(--brand-color)}#login-btn{width:100%;padding:12px;background-color:var(--brand-color);color:#fff;border:none;border-radius:3px;font-size:16px;cursor:pointer;font-weight:600;transition:background-color .17s ease,color .17s ease}#login-btn:hover{background-color:var(--brand-color-hover)}#login-btn:disabled{opacity:.5;cursor:not-allowed}.error{color:var(--danger);margin-top:10px;font-size:14px}#chat-view{display:flex;height:100vh}.server-sidebar{width:72px;background-color:var(--bg-tertiary);display:flex;flex-direction:column;align-items:center;padding-top:12px;flex-shrink:0;z-index:10}.server-icon{width:48px;height:48px;background-color:var(--bg-primary);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--text-normal);cursor:pointer;margin-bottom:8px;transition:border-radius .2s ease,background-color .2s ease,color .2s ease;position:relative}.server-icon:hover,.server-icon.active{border-radius:16px;background-color:var(--brand-color);color:#fff}.server-separator{width:32px;height:2px;background-color:var(--bg-secondary-alt);border-radius:1px;margin-bottom:8px}.server-pill{position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:8px;height:8px;background-color:#fff;border-radius:4px;transition:height .2s ease,border-radius .2s ease;opacity:0}.server-icon:hover .server-pill{height:20px;opacity:1}.server-icon.active .server-pill{height:40px;opacity:1}.channel-sidebar{width:240px;background-color:var(--bg-secondary);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{height:48px;padding:0 16px;display:flex;align-items:center;box-shadow:var(--elevation-low);font-weight:600;color:#fff;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}.sidebar-header:hover{background-color:var(--background-modifier-hover)}.sidebar-content{flex:1;overflow-y:auto;padding-top:8px}.sidebar-content::-webkit-scrollbar{width:4px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thin-thumb)}.sidebar-section{padding:16px 8px 8px}.sidebar-section h4{font-size:12px;text-transform:uppercase;color:var(--interactive-normal);margin-bottom:4px;padding-left:8px;font-weight:600;letter-spacing:.02em}.channel-list,.user-list{list-style:none}.channel-item{display:flex;align-items:center;padding:6px 8px;margin:2px 0;border-radius:4px;cursor:pointer;color:var(--interactive-normal);font-weight:500}.channel-item i{margin-right:6px;color:var(--channel-icon);display:inline-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-item.active i{color:var(--interactive-active)}.user-controls{height:52px;background-color:var(--bg-secondary-alt);display:flex;align-items:center;padding:0 8px;flex-shrink:0}.user-profile{display:flex;align-items:center;padding:4px;border-radius:4px;cursor:pointer;flex:1;min-width:0;transition:background-color .2s ease}.user-profile:hover{background-color:var(--background-modifier-hover)}.avatar{border-radius:50%;background-color:var(--brand-color);display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;flex-shrink:0;position:relative;overflow:hidden}.avatar.small{width:32px;height:32px;font-size:14px;margin-right:8px}.avatar.medium{width:40px;height:40px;font-size:16px;position:absolute;left:16px;top:0}.user-info{flex:1;overflow:hidden;min-width:0}.user-info .username{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.2}.user-info .status{font-size:12px;color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.action-buttons{display:flex}.icon-btn{width:32px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:4px;cursor:pointer;color:var(--interactive-normal);background:transparent;border:none;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:var(--background-modifier-hover);color:var(--interactive-hover)}.icon-btn.danger:hover{color:var(--danger)}.main-chat{flex:1;display:flex;flex-direction:column;background-color:var(--bg-primary);min-width:0}.chat-header{height:48px;padding:0 16px;display:flex;align-items:center;box-shadow:var(--elevation-low);color:#fff;z-index:2;flex-shrink:0;border-bottom:1px solid var(--bg-tertiary)}.chat-header h3{display:flex;align-items:center;font-size:16px;font-weight:600;gap:8px}.chat-header i{color:var(--channel-icon);display:inline-flex}.chat-content-wrapper{display:flex;flex:1;overflow:hidden}.chat-messages-area{flex:1;display:flex;flex-direction:column;min-width:0}.message-list{flex:1;padding:16px 0 24px;overflow-y:auto;display:flex;flex-direction:column}.message{display:flex;padding:2px 16px 2px 72px;position:relative;border-radius:4px}.message:hover{background-color:#04040512}.message-content{flex:1;min-width:0}.message-header{display:flex;align-items:baseline;margin-bottom:2px;line-height:1.375rem}.message-sender{font-weight:500;font-size:1rem;color:#fff;margin-right:.25rem;cursor:pointer}.message-sender:hover{text-decoration:underline}.message-timestamp{font-size:.75rem;color:var(--text-muted);margin-left:.25rem}.message-text{color:var(--text-normal);line-height:1.375rem;font-size:1rem;white-space:pre-wrap;word-wrap:break-word}.chat-input-area{padding:0 16px 24px;flex-shrink:0;position:relative}#chat-form{display:flex;align-items:center;background-color:#383a40;border-radius:8px;padding:0 16px;min-height:44px}.input-add-btn{background:transparent;border:none;cursor:pointer;margin-right:16px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:var(--text-muted);color:var(--bg-primary);transition:color .2s,background-color .2s}.input-add-btn:hover{color:#fff;background-color:var(--interactive-hover)}#message-input{flex:1;background:transparent;border:none;color:var(--text-normal);font-size:1rem;line-height:1.375rem;padding:11px 0}#message-input:focus{outline:none}#message-input::placeholder{color:var(--text-muted)}.input-action-btn{background:transparent;border:none;color:var(--interactive-normal);cursor:pointer;margin-left:12px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-action-btn:hover{color:var(--interactive-hover)}.input-action-btn:disabled{opacity:.5;cursor:not-allowed}.member-sidebar{width:240px;background-color:var(--bg-secondary);flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--bg-tertiary)}.member-list-header{padding:24px 16px 0;text-transform:uppercase;font-size:12px;font-weight:600;color:var(--interactive-normal);letter-spacing:.02em}.member-list-content{flex:1;overflow-y:auto;padding:8px}.member-item{display:flex;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer;margin-bottom:2px;transition:background-color .2s ease}.member-item:hover{background-color:var(--background-modifier-hover)}.member-item .avatar{width:32px;height:32px;margin-right:12px;position:static}.member-item .member-name{color:var(--interactive-normal);font-weight:500;font-size:16px;transition:color .2s ease}.member-item:hover .member-name{color:var(--interactive-hover)}.status-indicator{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background-color:#23a559;border:2px solid var(--bg-secondary)}.avatar.medium .status-indicator{width:12px;height:12px;border-width:3px;border-color:var(--bg-primary)}.status-indicator.offline{background-color:#80848e}.mention{background-color:#5865f24d;color:#c9cdfb;border-radius:3px;padding:0 2px;font-weight:500;cursor:pointer;transition:background-color .1s,color .1s}.mention:hover{background-color:var(--brand-color);color:#fff}.mention-me{background-color:#faa61a33;color:#faa61a}.mention-me:hover{background-color:#faa61a;color:#fff}.message.mentioned{background-color:#faa61a1a}.message.mentioned:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background-color:#faa61a}.message.mentioned:hover{background-color:#faa61a26}.message-emoji{width:28px;height:28px;border-radius:4px;display:inline-block;vertical-align:middle;margin:0 2px;object-fit:cover;object-position:center}.sticker-picker{position:absolute;bottom:80px;right:16px;width:320px;background-color:var(--bg-tertiary);border-radius:8px;box-shadow:var(--elevation-high);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--bg-secondary-alt);z-index:1000;animation:floatIn .2s ease-out}.sticker-header{padding:12px 16px;font-weight:600;color:#fff;border-bottom:1px solid var(--bg-secondary)}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;padding:12px;max-height:240px;overflow-y:auto}.sticker-grid::-webkit-scrollbar{width:6px}.sticker-grid::-webkit-scrollbar-track{background:transparent}.sticker-grid::-webkit-scrollbar-thumb{background:var(--bg-secondary);border-radius:3px}.sticker-item{width:40px;height:40px;background-color:transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,box-shadow .1s ease,background-color .1s ease}.sticker-item:hover{transform:scale(1.05);box-shadow:var(--elevation-low);background-color:var(--bg-secondary-alt)}.sticker-item img{width:28px;height:28px;object-fit:cover;object-position:center}.chat-empty{text-align:center;color:var(--text-muted);margin-top:40px}.emoji-picker{position:absolute;bottom:80px;right:16px;width:440px;background-color:var(--bg-tertiary);border-radius:8px;box-shadow:var(--elevation-high);border:1px solid var(--bg-secondary-alt);display:flex;flex-direction:column;overflow:hidden;z-index:1001;animation:floatIn .18s ease-out;color:var(--text-normal);font-size:14px}.emoji-search-row{padding:10px 12px;border-bottom:1px solid var(--bg-secondary);background-color:var(--bg-floating)}.emoji-search{display:flex;align-items:center;gap:8px;background-color:var(--bg-tertiary);border:1px solid var(--bg-secondary-alt);border-radius:4px;padding:6px 10px;color:var(--interactive-normal);transition:border-color .15s ease}.emoji-search:focus-within{border-color:var(--brand-color)}.emoji-search input{flex:1;background:transparent;border:none;color:var(--text-normal);font-size:14px;outline:none;min-width:0}.emoji-search input::placeholder{color:var(--text-muted)}.emoji-search-clear{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;border-radius:3px;transition:color .15s ease,background-color .15s ease}.emoji-search-clear:hover{color:var(--interactive-hover);background-color:var(--background-modifier-hover)}.emoji-body{display:flex;height:320px;min-height:0}.emoji-categories{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:2px;background-color:var(--bg-secondary);border-right:1px solid var(--bg-secondary-alt);overflow-y:auto}.emoji-categories::-webkit-scrollbar{width:4px}.emoji-categories::-webkit-scrollbar-track{background:transparent}.emoji-categories::-webkit-scrollbar-thumb{background:var(--scrollbar-thin-thumb)}.emoji-cat-btn{width:36px;height:36px;border-radius:6px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;transition:background-color .15s ease,border-radius .15s ease;filter:grayscale(.4);opacity:.7}.emoji-cat-btn:hover{background-color:var(--background-modifier-hover);filter:grayscale(0);opacity:1}.emoji-cat-btn.active{background-color:var(--background-modifier-selected);border-radius:8px;filter:grayscale(0);opacity:1}.emoji-main{flex:1;min-width:0;overflow-y:auto;padding:8px 10px 10px}.emoji-main::-webkit-scrollbar{width:8px}.emoji-main::-webkit-scrollbar-track{background:transparent}.emoji-main::-webkit-scrollbar-thumb{background:var(--scrollbar-thin-thumb);border-radius:4px}.emoji-section-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--interactive-normal);padding:4px 4px 6px}.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.emoji-btn{background:transparent;border:none;cursor:pointer;width:100%;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;border-radius:4px;transition:background-color .1s ease,transform .1s ease;padding:0}.emoji-btn:hover{background-color:var(--background-modifier-hover);transform:scale(1.12)}.emoji-btn:active{background-color:var(--background-modifier-active)}.emoji-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:14px}.emoji-footer{display:flex;align-items:center;gap:4px;padding:8px 10px;border-top:1px solid var(--bg-secondary);background-color:var(--bg-floating)}.emoji-footer-label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--interactive-normal);margin-right:6px;letter-spacing:.04em}.emoji-skin-btn{background:transparent;border:none;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;border-radius:50%;transition:background-color .15s ease,transform .15s ease;padding:0}.emoji-skin-btn:hover{background-color:var(--background-modifier-hover);transform:scale(1.1)}.emoji-skin-btn.active{background-color:var(--brand-color);color:#fff;box-shadow:0 0 0 1px var(--brand-color-hover)}