.sidebar { min-width: 0; width: auto; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(10,13,18,.93), rgba(8,11,16,.88)); backdrop-filter: blur(24px); display: flex; flex-direction: column; padding: 14px 12px 12px; gap: 12px; z-index: var(--z-sidebar); }
.brand { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 7px; text-decoration: none; color: inherit; }
.brand-copy { min-width: 0; flex: 1; }.brand-copy > span { display: block; color: var(--subtle); font-size: 11px; margin-top: 1px; }
.wordmark { display: inline-flex; font-weight: 790; font-size: 22px; letter-spacing: -.055em; }.wordmark .a { color: #aebdff; }.wordmark .rest { color: var(--text); }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); transition: .18s ease; }.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.new-chat { min-height: 46px; border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); display: flex; align-items: center; gap: 9px; padding: 0 12px; font-weight: 680; font-size: 13px; }.new-chat:hover { background: var(--surface-2); }
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #303744 transparent; }
.section-label { padding: 8px 10px 4px; margin-top: 5px; color: var(--subtle); font-size: 10.5px; font-weight: 780; text-transform: uppercase; letter-spacing: .11em; }
.nav { display: grid; gap: 3px; }.nav-btn { width: 100%; min-height: 44px; border-radius: 11px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: var(--muted); text-align: left; position: relative; }.nav-btn:hover, .nav-btn.active { background: var(--surface-2); color: var(--text); }.nav-btn.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-2)); }
.nav-copy { min-width: 0; flex: 1; }.nav-copy strong, .nav-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.nav-copy strong { font-size: 12.5px; }.nav-copy span { margin-top: 2px; color: var(--subtle); font-size: 11px; }
.badge { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-size: 10px; }
.chat-list { display: grid; gap: 3px; }.chat-item { min-height: 49px; border-radius: 11px; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; padding: 7px 9px; color: var(--muted); cursor: pointer; }.chat-item::before { content: "•"; grid-row: 1/3; color: var(--subtle); }.chat-item:hover, .chat-item.active { background: var(--surface-2); color: var(--text); }.chat-item-title { font-size: 11.5px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.chat-item-date { grid-column: 2; font-size: 9.5px; color: var(--subtle); }.chat-item-delete { grid-column: 3; grid-row: 1/3; opacity: 0; color: var(--subtle); }.chat-item:hover .chat-item-delete { opacity: 1; }
.profile { margin-top: auto; min-height: 48px; width: 100%; border-top: 1px solid var(--line); padding-top: 11px; display: flex; align-items: center; gap: 9px; border-radius: 12px; text-align: left; }.profile:hover { background: rgba(255,255,255,.025); }.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,#2a3342,#161b24); border: 1px solid var(--line-2); font-weight: 720; font-size: 11px; }.profile-copy { min-width: 0; flex: 1; }.profile-copy strong, .profile-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.profile-copy strong { font-size: 12px; }.profile-copy span { color: var(--subtle); font-size: 11px; }.profile-more { color: var(--subtle); padding: 0 7px; }
.sidebar-close-btn { display: none; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: var(--z-sidebar-backdrop); background: rgba(2,4,8,.58); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
body.sidebar-collapsed { --sidebar: 76px; } body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .new-chat span:last-child, body.sidebar-collapsed .section-label, body.sidebar-collapsed .nav-copy, body.sidebar-collapsed .badge, body.sidebar-collapsed .chat-list, body.sidebar-collapsed .profile-copy, body.sidebar-collapsed .profile-more { display: none; } body.sidebar-collapsed .brand, body.sidebar-collapsed .new-chat, body.sidebar-collapsed .nav-btn, body.sidebar-collapsed .profile { justify-content: center; }