@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";:root{--workspace-bg: #050a07;--workspace-hover-bg: #0c1510;--workspace-active-border: #15633a;--sidebar-bg: #080d0a;--sidebar-border: #161f1a;--sidebar-hover-bg: #101813;--sidebar-input-bg: #0f1612;--sidebar-input-border: #1f2a23;--sidebar-text: #93a89e;--sidebar-channel-title: #62786d;--main-bg: #08080a;--main-border: #18181c;--main-input-bg: #121214;--message-hover-bg: rgba(255, 255, 255, .025);--active-channel-bg: #0f4326;--purple-accent: #15633a;--purple-accent-hover: #1a7544;--purple-glow: rgba(21, 99, 58, .18);--green-accent: #4ade80;--highlight: #f5a623;--highlight-hover: #e0941a;--text-light: #d8d4de;--text-dark: #7a7383;--text-white: #f5f3f7;--danger-text: #f87171;--danger-bg: #ef4444;--danger-bg-hover: #dc2626;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--shadow-soft: 0 8px 24px -6px rgba(0, 0, 0, .5);--shadow-pop: 0 20px 50px -12px rgba(0, 0, 0, .65)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}html,body{font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--main-bg);color:var(--text-light);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}*{scrollbar-width:thin;scrollbar-color:var(--sidebar-input-border) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background-color:var(--sidebar-input-border);border-radius:9999px}*::-webkit-scrollbar-thumb:hover{background-color:var(--purple-accent)}.app-container{display:flex;height:100%;overflow:hidden}.icon{width:1.25rem;height:1.25rem;color:var(--text-dark);transition:color .15s ease}.icon-user{margin-right:.5rem}.icon-send{width:1.25rem;height:1.25rem;color:var(--text-white)}.workspace-sidebar{width:4.5rem;background-color:var(--workspace-bg);padding:.75rem 0;display:flex;flex-direction:column;align-items:center;flex-shrink:0;border-right:1px solid rgba(255,255,255,.03)}.workspace-list{list-style:none;flex-grow:1;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding:.5rem 0}.workspace-item{margin-bottom:.6rem}.workspace-button{width:3rem;height:3rem;border-radius:.9rem;background-color:var(--sidebar-hover-bg);color:var(--sidebar-text);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;cursor:pointer;border:none;position:relative;transition:transform .18s ease,border-radius .18s ease,background .18s ease,box-shadow .18s ease}.workspace-button:hover{border-radius:.75rem;background-color:var(--purple-accent);color:var(--text-white);transform:translateY(-1px)}.workspace-button.active{border-radius:.75rem;background-color:var(--purple-accent);color:var(--text-white);box-shadow:0 0 0 2px var(--workspace-bg),0 0 0 4px var(--purple-accent)}.add-workspace-btn{width:3rem;height:3rem;border-radius:.9rem;background-color:var(--sidebar-hover-bg);color:var(--highlight);font-size:1.5rem;border:none;cursor:pointer;transition:all .18s ease}.add-workspace-btn:hover{background-color:var(--highlight);color:#1a1205;border-radius:.75rem;transform:translateY(-1px)}.channel-sidebar{background-color:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;width:17rem;flex-shrink:0;position:relative;border-right:1px solid var(--sidebar-border)}.sidebar-header{padding:0 1rem;height:4rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--sidebar-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.sidebar-header-clickable{display:flex;align-items:center;gap:.5rem;cursor:pointer;flex-grow:1;padding:.4rem .5rem;margin:0 -.5rem;border-radius:var(--radius-sm);transition:background-color .15s ease}.sidebar-header-clickable:hover{background-color:var(--sidebar-hover-bg)}.sidebar-header-clickable .icon{color:var(--sidebar-text);transition:transform .2s ease,color .15s ease}.sidebar-header-clickable:hover .icon{color:var(--text-white)}.sidebar-header h1{font-size:1.15rem;font-weight:700;color:var(--text-white);letter-spacing:-.01em}.invite-button{background:none;border:none;cursor:pointer;padding:.4rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:.5rem;transition:background-color .15s ease}.invite-button .icon{color:var(--sidebar-text)}.invite-button:hover{background-color:var(--sidebar-hover-bg)}.invite-button:hover .icon{color:var(--text-white)}.sidebar-content{flex:1 1 0%;overflow-y:auto;padding-top:.25rem}.sidebar-section{padding:.85rem .75rem}.sidebar-section h2{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sidebar-channel-title);margin-bottom:.5rem;padding:0 .5rem}.channel-list{list-style:none}.channel-item{display:flex;align-items:center;padding:.5rem .6rem;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:.15rem;font-size:.92rem;font-weight:500;color:var(--sidebar-text);transition:background-color .13s ease,color .13s ease}.channel-item .icon{width:1.1rem;height:1.1rem}.channel-item.active{background-color:var(--active-channel-bg);color:var(--text-white)}.channel-item.active .icon{color:var(--text-white)}.channel-item:not(.active):hover{background-color:var(--sidebar-hover-bg);color:var(--text-white)}.channel-item span{margin-left:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-item .unread-badge{margin-left:auto}.channel-manage-btn{margin-left:auto;background:none;border:none;cursor:pointer;padding:.2rem;border-radius:.3rem;display:flex;align-items:center;transition:background-color .13s ease}.channel-manage-btn .icon{width:1rem;height:1rem;color:var(--text-white)}.channel-manage-btn:hover{background-color:#ffffff26}.unread-badge{background-color:#e11d48;color:var(--text-white);font-size:.68rem;font-weight:700;min-width:1.15rem;height:1.15rem;padding:0 .4rem;border-radius:9999px;display:flex;align-items:center;justify-content:center}.member-list{list-style:none}.member-item{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem;border-radius:var(--radius-sm);font-size:.9rem;transition:background-color .13s ease}.member-item.clickable{cursor:pointer}.member-item.clickable:hover{background-color:var(--sidebar-hover-bg);color:var(--text-white)}.member-item.active{background-color:var(--active-channel-bg);color:var(--text-white)}.member-item .unread-badge{margin-left:auto}.status-dot{width:.55rem;height:.55rem;border-radius:9999px;flex-shrink:0}.status-dot.online{background-color:var(--highlight);box-shadow:0 0 0 2px #f5a62340}.status-dot.offline{background-color:var(--text-dark)}.add-channel-btn{margin-top:.35rem;width:100%;text-align:left;background:none;border:none;color:var(--text-dark);cursor:pointer;padding:.45rem .6rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;transition:background-color .13s ease,color .13s ease}.add-channel-btn:hover{background-color:var(--sidebar-hover-bg);color:var(--text-white)}.checkbox-row{display:flex;align-items:center;color:var(--text-light);font-size:.9rem;margin-bottom:.5rem;cursor:pointer}.checkbox-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:1.15rem;height:1.15rem;margin:0 .65rem 0 0;padding:0;flex-shrink:0;border:1.5px solid var(--sidebar-input-border);border-radius:.35rem;background-color:var(--sidebar-input-bg);box-shadow:none;cursor:pointer;position:relative;top:1.5px;transition:background-color .15s ease,border-color .15s ease}.checkbox-row input[type=checkbox]:hover{border-color:var(--purple-accent)}.checkbox-row input[type=checkbox]:checked{background-color:var(--purple-accent);border-color:var(--purple-accent)}.checkbox-row input[type=checkbox]:checked:after{content:"";position:absolute;left:.37rem;top:.16rem;width:.28rem;height:.55rem;border:solid var(--text-white);border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-row span{flex:1;min-width:0;line-height:1.25}.member-select{max-height:12rem;overflow-y:auto;background-color:var(--sidebar-input-bg);border:1px solid var(--sidebar-input-border);border-radius:var(--radius-sm);padding:.7rem .8rem;margin-bottom:.5rem}.member-select-empty{color:var(--text-dark);font-size:.85rem}.create-channel-section{padding:1rem;border-top:1px solid var(--sidebar-border)}.create-channel-input{width:100%;background-color:var(--sidebar-input-bg);color:var(--text-white);padding:.6rem .8rem;border-radius:var(--radius-sm);border:1px solid var(--sidebar-input-border);transition:box-shadow .15s ease,border-color .15s ease}.create-channel-input::placeholder{color:var(--text-dark)}.create-channel-input:focus{outline:none;border-color:var(--purple-accent);box-shadow:0 0 0 3px var(--purple-glow)}.sidebar-footer{padding:.85rem 1rem;border-top:1px solid var(--sidebar-border);display:flex;align-items:center;cursor:pointer;transition:background-color .15s ease}.sidebar-footer:hover{background-color:var(--sidebar-hover-bg)}.user-id{font-size:.875rem;font-weight:500;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-container{flex:1 1 0%;display:flex;flex-direction:column;background-color:var(--main-bg);color:var(--text-white);min-width:0}.chat-header{height:4rem;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;border-bottom:1px solid var(--main-border);background-color:#131016cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.chat-header-title{display:flex;align-items:center;min-width:0}.manage-members-btn{background:none;border:none;cursor:pointer;padding:.35rem;margin-left:.6rem;border-radius:var(--radius-sm);display:flex;align-items:center;transition:background-color .15s ease}.manage-members-btn .icon{color:var(--text-dark)}.manage-members-btn:hover{background-color:var(--main-input-bg)}.manage-members-btn:hover .icon{color:var(--text-light)}.search-bar{position:relative;display:flex;align-items:center;gap:.5rem;background-color:var(--main-input-bg);padding:.45rem .75rem;border-radius:var(--radius-md);width:16rem;border:1px solid transparent;transition:border-color .15s ease,box-shadow .15s ease}.search-bar:focus-within{border-color:var(--purple-accent);box-shadow:0 0 0 3px var(--purple-glow)}.search-bar .icon{width:1rem;height:1rem;color:var(--text-dark)}.search-input{background:transparent;border:none;outline:none;color:var(--text-white);width:100%;font-size:.85rem;font-family:inherit}.search-input::placeholder{color:var(--text-dark)}.search-results{position:absolute;top:calc(100% + .5rem);right:0;width:22rem;max-height:20rem;overflow-y:auto;background-color:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-md);z-index:50;box-shadow:var(--shadow-pop);overflow:hidden}.search-result{display:block;width:100%;text-align:left;background:none;border:none;padding:.7rem .9rem;cursor:pointer;border-bottom:1px solid var(--sidebar-border);transition:background-color .13s ease}.search-result:last-child{border-bottom:none}.search-result:hover{background-color:var(--sidebar-hover-bg)}.search-result-meta{font-size:.75rem;font-weight:600;color:var(--sidebar-channel-title);margin-bottom:.2rem}.search-result-text{font-size:.85rem;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-empty{padding:.9rem;color:var(--text-dark);font-size:.85rem}.chat-header h2{font-size:1.2rem;font-weight:700;margin-left:.5rem;color:var(--text-white);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.messages-area{flex:1 1 0%;overflow-y:auto;padding:1rem .5rem}.messages-loading{text-align:center;color:var(--text-dark);font-size:.8rem;padding:.5rem 0}.placeholder-container{display:flex;justify-content:center;align-items:center;height:100%}.placeholder-text{color:var(--text-dark);font-size:.95rem}.message-item{display:flex;align-items:flex-start;padding:.6rem 1rem;border-radius:var(--radius-sm);margin:0 .5rem;transition:background-color .12s ease}.message-item:hover{background-color:var(--message-hover-bg)}.message-avatar{width:2.5rem;height:2.5rem;border-radius:.7rem;background-color:var(--purple-accent-hover);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-white);margin-right:.85rem;flex-shrink:0}.message-content{flex:1 1 0%;min-width:0}.message-meta{display:flex;align-items:baseline}.message-username{font-weight:700;color:var(--text-white);margin-right:.5rem;font-size:.9rem}.message-timestamp{font-size:.72rem;color:var(--text-dark)}.message-text{color:var(--text-light);margin-top:.2rem;line-height:1.5;word-wrap:break-word}.message-actions{margin-left:auto;display:flex;gap:.2rem;opacity:0;transition:opacity .15s ease;background-color:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-sm);padding:.15rem;box-shadow:var(--shadow-soft)}.message-item:hover .message-actions{opacity:1}.message-actions button{background:none;border:none;cursor:pointer;padding:.3rem;border-radius:.35rem;display:flex;align-items:center;transition:background-color .13s ease}.message-actions button:hover{background-color:var(--sidebar-hover-bg)}.message-actions .icon{width:1rem;height:1rem;color:var(--text-dark)}.message-actions button:hover .icon{color:var(--text-light)}.message-reactions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}.reaction-badge{display:flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:9999px;background-color:var(--main-input-bg);border:1px solid var(--sidebar-border);color:var(--text-light);cursor:pointer;font-size:.85rem;transition:all .13s ease}.reaction-badge:hover{border-color:var(--purple-accent);transform:translateY(-1px)}.reaction-badge.reacted{background-color:#176a3c38;border-color:var(--purple-accent)}.reaction-count{font-size:.75rem;font-weight:600}.reaction-add{position:relative}.reaction-picker{position:absolute;bottom:100%;right:0;margin-bottom:.4rem;display:flex;gap:.15rem;padding:.35rem;background-color:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-md);z-index:30;box-shadow:var(--shadow-pop)}.reaction-picker button{background:none;border:none;cursor:pointer;font-size:1.15rem;padding:.2rem .3rem;border-radius:.4rem;transition:background-color .13s ease,transform .13s ease}.reaction-picker button:hover{background-color:var(--sidebar-hover-bg);transform:scale(1.15)}.message-deleted{font-style:italic;color:var(--text-dark)}.message-edited{font-size:.68rem;color:var(--text-dark);margin-left:.3rem}.message-edit{margin-top:.3rem}.message-edit-input{width:100%;background-color:var(--main-input-bg);color:var(--text-white);padding:.55rem .7rem;border-radius:var(--radius-sm);border:1px solid var(--sidebar-input-border);font-family:inherit}.message-edit-input:focus{outline:none;border-color:var(--purple-accent);box-shadow:0 0 0 3px var(--purple-glow)}.message-edit-actions{display:flex;gap:.5rem;margin-top:.5rem}.message-edit-save,.message-edit-cancel{padding:.35rem .85rem;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:.8rem;font-weight:600;transition:background-color .15s ease}.message-edit-save{background-color:var(--purple-accent);color:var(--text-white)}.message-edit-save:hover{background-color:var(--purple-accent-hover)}.message-edit-cancel{background-color:var(--main-input-bg);color:var(--text-light)}.message-edit-cancel:hover{background-color:var(--sidebar-hover-bg)}.chat-input-area{padding:.5rem 1rem 1.25rem}.typing-indicator{height:1.1rem;margin-bottom:.3rem;padding-left:.5rem;font-size:.78rem;font-style:italic;color:var(--text-dark)}.chat-form{display:flex;align-items:center;background-color:var(--main-input-bg);border-radius:var(--radius-md);padding:.5rem;border:1px solid var(--main-border);transition:border-color .15s ease,box-shadow .15s ease}.chat-form:focus-within{border-color:var(--purple-accent);box-shadow:0 0 0 3px var(--purple-glow)}.chat-input{flex:1 1 0%;background-color:transparent;outline:none;color:var(--text-white);padding:.35rem .6rem;border:none;font-family:inherit;font-size:.95rem}.chat-input::placeholder{color:var(--text-dark)}.send-button{background-color:var(--purple-accent);border-radius:var(--radius-sm);padding:.55rem;margin-left:.5rem;transition:transform .15s ease,background-color .15s ease;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.send-button:hover{background-color:var(--purple-accent-hover);transform:translateY(-1px)}.send-button:active{transform:translateY(0)}.popup-overlay{position:fixed;inset:0;background-color:#08050ba6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:overlayIn .18s ease-out}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.popup-box{background-color:var(--sidebar-bg);padding:2rem;border-radius:var(--radius-lg);border:1px solid var(--sidebar-border);width:100%;max-width:28rem;box-shadow:var(--shadow-pop);animation:popIn .2s cubic-bezier(.16,1,.3,1)}@keyframes popIn{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.popup-title{font-size:1.5rem;font-weight:700;color:var(--text-white);text-align:center;margin-bottom:1.5rem;letter-spacing:-.02em}.popup-form .input-group{margin-bottom:1rem}.popup-form label{display:block;margin-bottom:.5rem;font-size:.85rem;font-weight:500;color:var(--sidebar-text)}.popup-form input{width:100%;background-color:var(--sidebar-input-bg);color:var(--text-white);padding:.65rem .8rem;border-radius:var(--radius-sm);border:1px solid var(--sidebar-input-border);font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}.popup-form input::placeholder{color:var(--text-dark)}.popup-form input:focus{outline:none;border-color:var(--purple-accent);box-shadow:0 0 0 3px var(--purple-glow)}.popup-button{width:100%;padding:.8rem;background-color:var(--purple-accent);color:var(--text-white);font-weight:600;font-size:.95rem;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s ease,transform .15s ease;margin-top:1rem}.popup-button:hover{background-color:var(--purple-accent-hover);transform:translateY(-1px)}.popup-button:active{transform:translateY(0)}.auth-container{height:100vh;background-color:var(--main-bg)}.auth-switch-text{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--sidebar-text)}.auth-switch-link{color:var(--purple-accent);cursor:pointer;font-weight:600}.auth-switch-link:hover{text-decoration:underline}.user-popup{position:absolute;bottom:4.5rem;left:.75rem;width:240px;z-index:10;background-color:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);color:var(--text-light);overflow:hidden;animation:popIn .16s ease-out}.user-popup-header{padding:.85rem 1rem;border-bottom:1px solid var(--sidebar-border)}.user-popup-username{font-weight:700;color:var(--text-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-popup-status{font-size:.875rem;color:var(--highlight)}.user-popup-logout-btn{display:block;width:100%;text-align:left;padding:.75rem 1rem;background:none;border:none;color:var(--danger-text);cursor:pointer;font-family:inherit;font-size:.9rem;transition:background-color .13s ease,color .13s ease}.user-popup-logout-btn:hover{background-color:var(--danger-bg);color:var(--text-white)}.invite-description{color:var(--sidebar-text);text-align:center;margin-bottom:1.5rem;line-height:1.5}.invite-id-container{display:flex;gap:.5rem;align-items:center;background-color:var(--sidebar-input-bg);border:1px solid var(--sidebar-input-border);border-radius:var(--radius-sm);padding:.25rem .25rem .25rem 1rem}.invite-id-display{flex-grow:1;color:var(--text-light);font-family:SFMono-Regular,Consolas,monospace;font-size:1rem}.copy-button{padding:.55rem 1rem;background-color:var(--purple-accent);color:var(--text-white);border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:background-color .15s ease}.copy-button:hover{background-color:var(--purple-accent-hover)}.choice-buttons-container{display:flex;flex-direction:column;gap:1rem}.choice-button{margin-top:0}.join-button{background:var(--main-input-bg);box-shadow:none}.join-button:hover{background:var(--sidebar-hover-bg);filter:none}.workspace-settings-menu{position:absolute;top:3.75rem;left:.5rem;right:.5rem;z-index:20;background-color:var(--sidebar-bg);border-radius:var(--radius-md);padding:.4rem;border:1px solid var(--sidebar-border);box-shadow:var(--shadow-pop);animation:popIn .16s ease-out}.settings-menu-button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem;border-radius:var(--radius-sm);background:none;border:none;color:var(--text-light);cursor:pointer;text-align:left;font-family:inherit;font-size:.9rem;transition:background-color .13s ease,color .13s ease}.settings-menu-button .icon{color:var(--text-dark)}.settings-menu-button:hover{background-color:var(--sidebar-hover-bg);color:var(--text-white)}.settings-menu-button:hover .icon{color:var(--text-light)}.settings-menu-button.danger:hover{background-color:var(--danger-bg);color:var(--text-white)}.settings-menu-button.danger:hover .icon{color:var(--text-white)}.danger-button{background-color:var(--danger-bg)}.danger-button:hover{background-color:var(--danger-bg-hover)}.auth-error{color:var(--danger-text);background-color:#ef44441f;padding:.75rem;border-radius:var(--radius-sm);text-align:center;margin-bottom:1.5rem;border:1px solid rgba(239,68,68,.4);font-size:.9rem}.non-owner-title{flex-grow:1}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toast-container{position:fixed;top:1.5rem;left:50%;z-index:2000;padding:.85rem 1.5rem;border-radius:var(--radius-md);color:var(--text-white);display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-pop);animation:fadeIn .3s ease-out forwards}.toast-error{background-color:var(--danger-bg);border:1px solid var(--danger-bg-hover)}.toast-close-btn{background:none;border:none;color:var(--text-white);font-size:1.5rem;line-height:1;cursor:pointer;opacity:.7;transition:opacity .13s ease}.toast-close-btn:hover{opacity:1}.user-popup-email{font-size:.875rem;color:var(--text-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}