:root{--sidebar-width: 260px;--header-height: 60px}body{overflow:hidden}.chat-layout{display:flex;height:100vh}.chat-sidebar{width:var(--sidebar-width);background:var(--tblr-bg-surface);border-right:1px solid var(--tblr-border-color);display:flex;flex-direction:column;height:100vh}.chat-sidebar-header{padding:1rem;border-bottom:1px solid var(--tblr-border-color)}.chat-sidebar-content{flex:1;overflow-y:auto}.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}.chat-header{height:var(--header-height);border-bottom:1px solid var(--tblr-border-color);display:flex;align-items:center;padding:0 1rem;background:var(--tblr-bg-surface)}.chat-messages{flex:1;overflow-y:auto;padding:1rem}.chat-input-area{padding:1rem;border-top:1px solid var(--tblr-border-color);background:var(--tblr-bg-surface)}.channel-item,.user-item{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer;border-radius:.25rem;margin:.125rem .5rem}.channel-item:hover,.user-item:hover{background:var(--tblr-bg-surface-secondary)}.channel-item.active,.user-item.active{background:var(--tblr-primary);color:#fff}.channel-icon{margin-right:.5rem;opacity:.7}.message{display:flex;margin-bottom:1rem;padding:.5rem;border-radius:.25rem}.message:hover{background:var(--tblr-bg-surface-secondary)}.message-avatar{width:36px;height:36px;border-radius:50%;margin-right:.75rem;flex-shrink:0;background:var(--tblr-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}.message-content{flex:1;min-width:0}.message-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.25rem}.message-author{font-weight:600}.message-time{font-size:.75rem;color:var(--tblr-secondary);opacity:.8}.message:hover .message-time{opacity:1}.message-text{word-wrap:break-word}.status-indicator{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:.5rem}.status-online{background:var(--tblr-success)}.status-away{background:var(--tblr-warning)}.status-offline{background:var(--tblr-secondary)}.attachment{display:flex;align-items:center;padding:.5rem;background:var(--tblr-bg-surface-secondary);border-radius:.25rem;margin-top:.5rem;max-width:300px}.attachment-icon{font-size:1.5rem;margin-right:.5rem}.attachment-info{flex:1;min-width:0}.attachment-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-size{font-size:.75rem;color:var(--tblr-secondary)}.dropzone{border:2px dashed var(--tblr-border-color);border-radius:.25rem;padding:1rem;text-align:center;cursor:pointer;transition:all .2s}.dropzone:hover,.dropzone.active{border-color:var(--tblr-primary);background:var(--tblr-bg-surface-secondary)}.emoji-picker-container{position:absolute;bottom:100%;right:0;z-index:1000}.chat-input-wrapper{position:relative}.chat-input-actions{display:flex;gap:.5rem;margin-bottom:.5rem}.typing-indicator{font-size:.875rem;color:var(--tblr-secondary);padding:.25rem 0;font-style:italic}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--tblr-bg-surface-secondary)}.login-card{width:100%;max-width:400px}.user-list-section{padding:.5rem 0}.user-list-header{padding:.5rem 1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--tblr-secondary)}[data-bs-theme=dark]{--tblr-body-bg: #1a1d21;--tblr-bg-surface: #222529;--tblr-bg-surface-secondary: #2c2f33}[data-bs-theme=dark] .chat-sidebar,[data-bs-theme=dark] .chat-header,[data-bs-theme=dark] .chat-input-area{background:#1a1d21}[data-bs-theme=dark] .message:hover{background:#ffffff0d}[data-bs-theme=dark] .channel-item:hover,[data-bs-theme=dark] .user-item:hover{background:#ffffff14}[data-bs-theme=dark] .login-container{background:#1a1d21}[data-bs-theme=dark] .login-card,[data-bs-theme=dark] .modal-content{background:#222529}[data-bs-theme=dark] .list-group-item{background:#2c2f33;border-color:#3a3d41}.settings-page{height:100vh;background:var(--tblr-bg-surface-secondary);overflow-y:auto;overflow-x:hidden}.settings-page .badge.bg-green{color:#fff!important}.avatar{width:80px;height:80px;border-radius:50%;background:var(--tblr-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:600;position:relative;overflow:hidden}.avatar.avatar-xl{width:80px;height:80px}.avatar-placeholder{font-size:1.5rem}.avatar-upload-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.avatar:hover .avatar-upload-overlay{opacity:1}.chat-sidebar-footer{padding:.5rem;border-top:1px solid var(--tblr-border-color)}[data-bs-theme=dark] .settings-page{background:#1a1d21}@media (max-width: 768px){.chat-sidebar{position:fixed;left:-100%;z-index:1000;transition:left .3s}.chat-sidebar.open{left:0}}