.app-container{display:flex;height:100vh;width:100vw;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);max-width:var(--sidebar-width);background:var(--sidebar-bg);display:flex;flex-direction:column;height:100vh;z-index:var(--z-sidebar);border-right:1px solid rgba(0,0,0,.2)}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-primary);position:relative}.channel-header{height:var(--header-height);min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-lg);border-bottom:1px solid var(--border-color);background:var(--bg-primary);z-index:var(--z-header)}.channel-header-left{display:flex;align-items:center;gap:var(--spacing-sm);min-width:0}.channel-header-right{display:flex;align-items:center;gap:var(--spacing-xs)}.channel-tabs{display:flex;align-items:center;border-bottom:1px solid var(--border-color);padding:0 var(--spacing-lg);background:var(--bg-primary)}.channel-tab{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition-base);white-space:nowrap}.channel-tab:hover{color:var(--text-bright)}.channel-tab.active{color:var(--text-bright);border-bottom-color:var(--accent-primary);font-weight:var(--font-weight-medium)}.messages-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-sm) 0;scroll-behavior:smooth}.scroll-to-bottom-btn{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:10;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000026;transition:opacity .2s,transform .2s;opacity:1;transform:translate(-50%) translateY(0)}.scroll-to-bottom-btn:hover{background:var(--bg-tertiary, var(--bg-secondary));color:var(--text-primary)}[data-theme=dark] .scroll-to-bottom-btn{background:#ffffff1a;border-color:#fff3;color:#ffffffb3;box-shadow:0 2px 10px #0006}[data-theme=dark] .scroll-to-bottom-btn:hover{background:#ffffff2e;color:#fff}.scroll-to-bottom-btn.hidden{opacity:0;transform:translate(-50%) translateY(8px);pointer-events:none}.composer-wrapper{padding:0 var(--spacing-xl) var(--spacing-lg);flex-shrink:0;position:relative}.composer{border:1px solid var(--border-input);border-radius:var(--border-radius-lg);background:var(--bg-input);overflow:hidden;transition:border-color var(--transition-base)}.composer:focus-within{border-color:var(--border-focus)}.thread-panel{width:0;min-width:0;overflow:hidden;border-left:1px solid var(--border-color);background:var(--bg-primary);display:flex;flex-direction:column;transition:width var(--transition-slow),min-width var(--transition-slow)}.thread-panel.open{width:var(--thread-panel-width);min-width:var(--thread-panel-width)}.thread-panel-header{height:var(--header-height);min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-lg);border-bottom:1px solid var(--border-color)}.thread-panel-messages{flex:1;overflow-y:auto;padding:var(--spacing-md)}.top-bar{height:38px;min-height:38px;display:flex;align-items:center;justify-content:center;background:var(--sidebar-header-bg);padding:0 var(--spacing-lg)}.search-bar{display:flex;align-items:center;background:#ffffff1f;border-radius:var(--border-radius-md);padding:0 var(--spacing-md);height:26px;width:min(100%,720px);cursor:text;transition:background var(--transition-base),width var(--transition-slow)}.search-bar:focus-within{background:#fff3}.search-bar input{flex:1;font-size:var(--font-size-base);color:#fffc;padding:0 var(--spacing-sm)}.search-bar input::placeholder{color:#ffffff80}.search-bar .search-icon{color:#ffffff80;display:flex;align-items:center}.icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);color:var(--text-secondary);transition:all var(--transition-fast);flex-shrink:0}.icon-btn:hover{background:var(--bg-hover);color:var(--text-bright)}.icon-btn svg{width:16px;height:16px}.badge{background:var(--sidebar-badge-bg);color:#fff;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);padding:1px 6px;border-radius:10px;min-width:18px;text-align:center;line-height:16px}.divider{height:1px;background:var(--border-color);margin:var(--spacing-sm) var(--spacing-lg)}.date-divider{display:flex;align-items:center;padding:var(--spacing-lg) var(--spacing-xl);gap:var(--spacing-md)}.date-divider:before,.date-divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.date-divider span{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--text-primary);padding:4px 12px;border:1px solid var(--border-color);border-radius:24px;white-space:nowrap;cursor:pointer;background:var(--bg-primary)}.date-divider span:hover{background:var(--bg-hover)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInUp{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}