/* Stable left rail: collapsing changes width and labels, never icon geometry. */
:root { --sidebar-width: 208px; --motion-fast: 150ms; --motion-panel: 240ms; --motion-ease: cubic-bezier(.2,.75,.25,1); }
.logo { display: block; object-fit: contain; background: transparent; border: 0; border-radius: 0; width: 40px; height: 40px; flex: 0 0 40px; }
.brand-name, .login-brand h1 { font-family: "Segoe UI", Arial, sans-serif; font-weight: 750; letter-spacing: 0; }
.brand-name { white-space: nowrap; font-size: 22px; }
.mobile-brand-mark { display: none; }
.sidebar-toggle { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; flex: 0 0 40px; border: 0; border-radius: 6px; padding: 0 10px; margin: 0 0 16px; color: var(--muted); background: transparent; cursor: pointer; overflow: hidden; text-align: left; }
.sidebar-toggle img { width: 20px; height: 20px; flex: 0 0 20px; opacity: .65; transition: transform var(--motion-panel) var(--motion-ease); }
.sidebar-toggle:hover { background: var(--accent-soft); color: var(--accent-strong); }
.sidebar-toggle span { white-space: nowrap; }
@media (min-width: 761px) {
  .sidebar { padding: 20px 12px; flex-basis: var(--sidebar-width); transition: flex-basis var(--motion-panel) var(--motion-ease); z-index: 26; }
  .sidebar .brand { width: 100%; min-height: 56px; padding: 0 4px 16px; gap: 10px; overflow: hidden; justify-content: flex-start; flex: 0 0 56px; }
  .sidebar .brand-name { font-size: 22px; flex: 0 0 auto; }
  .nav-button { padding: 0 10px; gap: 12px; justify-content: flex-start; overflow: hidden; }
  .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; }
  .nav-button > span:last-child { display: block; white-space: nowrap; flex: 0 0 auto; }
  .sidebar-foot { margin-inline: -12px; padding-inline: 12px; }
  .user-card { padding: 10px 8px; overflow: hidden; }
  .user-copy { flex: 0 0 112px; }
  .brand-name, .sidebar-toggle span, .nav-button > span:last-child, .user-copy, .user-chevron { transition: opacity var(--motion-fast) ease, visibility var(--motion-fast); }
  .sidebar-collapsed { --sidebar-width: 72px; }
  .sidebar-collapsed .brand-name, .sidebar-collapsed .sidebar-toggle span, .sidebar-collapsed .nav-button > span:last-child, .sidebar-collapsed .user-copy, .sidebar-collapsed .user-chevron { opacity: 0; visibility: hidden; }
  .sidebar-collapsed .sidebar-toggle img { transform: scaleX(-1); }
  .sidebar-collapsed .user-menu { width: 190px; right: auto; }
}
@media (max-width: 760px) {
  .sidebar-toggle { display: none; }
  .mobile-brand-mark { display: block; flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; margin-right: 10px; }
  .sheet-switcher { flex: 1; width: auto; }
  .topbar-spacer { display: none; }
}

/* No global smooth scrolling: chat reading positions remain immediate. */
.btn, .nav-button, .sidebar-toggle, .user-card, .user-menu button, .assistant-tab { transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.btn:active:not(:disabled) { filter: brightness(.97); }
.modal, .drawer { opacity: 0; pointer-events: none; transition: opacity 180ms ease, display 180ms allow-discrete; }
.modal.open, .drawer.open { opacity: 1; pointer-events: auto; }
.modal-card { transform: translateY(8px) scale(.99); transition: transform 180ms var(--motion-ease); }
.modal.open .modal-card { transform: translateY(0) scale(1); }
.drawer-panel { transform: translateX(18px); transition: transform 220ms var(--motion-ease); }
.drawer.open .drawer-panel { transform: translateX(0); }
.user-menu { opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, display var(--motion-fast) allow-discrete; }
.user-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
@starting-style {
  .modal.open, .drawer.open, .user-menu.open { opacity: 0; }
  .modal.open .modal-card { transform: translateY(8px) scale(.99); }
  .drawer.open .drawer-panel { transform: translateX(18px); }
  .user-menu.open { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}