.sidebar-demo-wrapper{border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);width:260px;height:480px;transition:width var(--transition-base);display:flex;overflow:hidden}.sidebar-demo-wrapper.collapsed{width:60px}.sidebar-demo-panel{border-right:1px solid var(--color-border-subtle);width:260px;padding:var(--space-3);flex-direction:column;display:flex}.sidebar-demo-nav-scroll{scrollbar-width:none;gap:var(--space-1);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.sidebar-demo-nav-scroll::-webkit-scrollbar{display:none}.sidebar-demo-panel.collapsed{width:auto}.sidebar-demo-header{padding:var(--space-2) 0 var(--space-2) var(--space-1);margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.sidebar-demo-org{align-items:center;gap:var(--space-3);display:flex}.sidebar-demo-org-icon{background:var(--color-fill-primary);width:32px;height:32px;color:var(--color-text-inverse);border-radius:var(--radius-md);justify-content:center;align-items:center;display:flex}.sidebar-demo-org-info{flex-direction:column;display:flex}.sidebar-demo-org-name{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:600;line-height:1.2}.sidebar-demo-org-plan{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.sidebar-demo-header-btn{width:28px;height:28px;color:var(--color-text-tertiary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.sidebar-demo-header-btn:hover{background:var(--color-fill-hover)}.sidebar-demo-section-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);padding:var(--space-2) var(--space-3);margin-top:var(--space-2);font-weight:500}.sidebar-demo-nav-item{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);text-align:left;background:0 0;border:none;font-weight:500;display:flex}.sidebar-demo-nav-item svg{color:var(--color-icon-primary)}.sidebar-demo-nav-item:hover{background:var(--color-fill-hover)}.sidebar-demo-nav-item:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}.sidebar-demo-chevron{color:var(--color-text-tertiary);transition:transform var(--transition-fast);margin-left:auto;display:flex}.sidebar-demo-chevron.open{transform:rotate(90deg)}.sidebar-demo-arrow{color:var(--color-text-tertiary);margin-left:auto;display:flex}.sidebar-demo-nav-item.active{color:var(--color-text-primary);background:var(--color-fill-hover)}.sidebar-demo-nav-item.expanded{color:var(--color-text-primary)}.sidebar-demo-thread-item{color:var(--color-text-secondary);font-weight:400}.sidebar-demo-thread-item+.sidebar-demo-thread-item{margin-top:2px}.sidebar-demo-thread-item svg{color:var(--color-icon-tertiary);flex-shrink:0}.sidebar-demo-thread-item.active svg{color:var(--color-icon-primary)}.sidebar-demo-thread-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.sidebar-demo-flyout-anchor{position:relative}.sidebar-demo-flyout{background:var(--color-surface-primary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--nav-shadow);padding:var(--space-2);z-index:1000;animation:select-enter var(--transition-fast) forwards;flex-direction:column;display:flex;position:fixed}.sidebar-demo-flyout-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);text-align:left;white-space:nowrap;background:0 0;border:none;font-weight:500;text-decoration:none;display:flex}.sidebar-demo-flyout-item svg{color:var(--color-icon-primary)}.sidebar-demo-flyout-item:hover{background:var(--color-fill-hover)}.sidebar-demo-flyout-badge{font-size:var(--font-size-xs);color:var(--color-text-secondary);background:var(--color-surface-subtle);padding:1px var(--space-2);border-radius:var(--radius-full);margin-left:auto;font-weight:500}.sidebar-demo-subnav{gap:var(--space-0-5);padding-left:calc(var(--space-3) + var(--space-4));animation:select-enter var(--transition-fast) forwards;flex-direction:column;display:flex;position:relative}.sidebar-demo-subnav:before{content:"";top:0;bottom:0;left:calc(var(--space-3) + var(--space-2));background:var(--color-border-subtle);width:1px;position:absolute}.sidebar-demo-subnav-item{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);text-align:left;background:0 0;border:none;font-weight:500}.sidebar-demo-subnav-item:hover{background:var(--color-fill-hover)}.sidebar-demo-subnav-item.active{color:var(--color-text-primary);background:var(--color-fill-selected)}.sidebar-demo-footer{padding:var(--space-3) var(--space-2) var(--space-2) var(--space-1);border-top:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;margin-top:auto;display:flex}.sidebar-demo-user{align-items:center;gap:var(--space-3);display:flex}.sidebar-demo-user-avatar{background:var(--color-surface-subtle);width:32px;height:32px;color:var(--color-text-secondary);border-radius:var(--radius-full);font-size:var(--font-size-xs);justify-content:center;align-items:center;font-weight:600;display:flex}.sidebar-demo-user-info{flex-direction:column;display:flex}.sidebar-demo-user-name{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:500;line-height:1.2}.sidebar-demo-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.sidebar-demo-icons{padding:var(--space-5) var(--space-3) var(--space-3);align-items:center;gap:var(--space-2);border-right:1px solid var(--color-border-subtle);flex-direction:column;display:flex}.sidebar-demo-icon-nav{gap:var(--space-1);margin-top:var(--space-4);flex-direction:column;flex:1;min-height:0;display:flex}.sidebar-demo-icon-btn{border-radius:var(--radius-md);width:32px;height:32px;color:var(--color-icon-primary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.sidebar-demo-icon-btn:hover{background:var(--color-fill-hover)}.sidebar-demo-icon-btn.active{background:var(--color-fill-hover);color:var(--color-text-primary)}.sidebar-demo-icon-dot{border-radius:var(--radius-full);background:var(--color-text-tertiary);width:3px;height:3px;position:absolute;top:50%;right:2px;transform:translateY(-50%)}.sidebar-demo-icon-footer{margin-top:auto}.sidebar-demo-collapsed{padding:var(--space-3);align-items:flex-start;display:flex}.sidebar-demo-divider{background:var(--color-border-subtle);height:1px;margin:var(--space-2) var(--space-3)}.sidebar-demo-brand-toggle{background:var(--color-fill-primary);width:32px;height:32px;color:var(--color-text-inverse);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);border:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.sidebar-demo-brand-toggle:hover{background:var(--color-surface-primary);color:var(--color-text-primary);box-shadow:inset 0 0 0 1px var(--color-border-subtle)}.sidebar-demo-brand-toggle-default,.sidebar-demo-brand-toggle-hover{justify-content:center;align-items:center;display:flex}.sidebar-demo-brand-toggle-hover,.sidebar-demo-brand-toggle:hover .sidebar-demo-brand-toggle-default{display:none}.sidebar-demo-brand-toggle:hover .sidebar-demo-brand-toggle-hover{display:flex}.sidebar-demo-footer-bell{align-items:center;display:flex}