/* Sidebar column (figma 133:7629): vertical stack, padding 12/6, sidebar
   fill + 1px right border painted by the layout column. Collapse is a
   slide + crossfade, not a morph: the content holds its frozen expanded
   layout (inline width set by the component) and fades in place (.fading)
   while the sliding column (AppFrame grid tracks) clips it; the rail layout
   (.collapsed) only applies after the fade settles, so nothing reflows
   mid-slide. */

.root {
  --dsh-sidebar-inline-padding: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px var(--dsh-sidebar-inline-padding);
  box-sizing: border-box;
  background: var(--dsw-specific-sidebar-fill);
  color: var(--dsw-alias-label-primary);
  font-size: 14px;
  /* The sidebar is elevated above the conversation surface, so a revealed
     scrollbar uses the l2 pair. .quietBars hides it without changing layout. */
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
}

/* Rail geometry (figma rail spec): 36x36 control boxes centered in the 56px
   rail (10px side padding), 12px vertical rhythm, 18px from the rail top to
   the whale's box (24px to the 24-wide whale glyph itself). */
.root.collapsed {
  padding: 18px 10px 6px;
}

/* Scrollbars in the column are a pointer affordance: the shell adds this
   class whenever the pointer is not inside (SidebarRoot.tsx owns the linger),
   and rebinding ui-theme's indirection pair to `transparent` takes the thumb
   out of every scroll region nested under it — the workspace browser's
   session list. `transparent` rather than `display: none` on the bar:
   the reservation (`scrollbar-gutter: stable` on the list) stays in force, so
   revealing the thumb never reflows a row. Rebinding contract and the two
   rendering paths it reaches: ui-theme's README. */
.root.quietBars {
  --dsh-scrollbar-thumb: transparent;
  --dsh-scrollbar-thumb-hover: transparent;
}

/* Collapse phase 1: the whole frozen-width content fades out in place over
   150ms; at settle the children unmount/snap to the rail layout. */
.fading > * {
  opacity: 0;
  transition: opacity 150ms var(--ds-ease-in-out);
}

/* Wide-only content fades back in on expand remount. */
.wide {
  animation: wide-in 200ms var(--ds-ease-in-out);
}

@keyframes wide-in {
  from { opacity: 0; }
}

/* At the 150ms rail settle, the four upper controls enter from the former
   rail right edge over the remaining 150ms of the AppFrame track transition.
   The bottom-pinned settings seat shares their opacity timeline but stays
   horizontally fixed. Only a live collapse gets .railIn; a cold collapsed
   render stays static. */
.railIn .iconButton,
.railIn .newSession,
.railIn .regionArea {
  animation: rail-in 150ms var(--ds-ease-in-out) backwards;
}

.railIn .footArea {
  animation: rail-fade-in 150ms var(--ds-ease-in-out) backwards;
}

@keyframes rail-in {
  from {
    opacity: 0;
    transform: translateX(49px);
  }
}

@keyframes rail-fade-in {
  from { opacity: 0; }
}

/* Logo row (figma pad (4,8,4,8)): expanded keeps the panel toggle at the
   right edge; the rail gives every control the same base left anchor before
   the shared entry translation is applied. */
.logoRow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 60px;
  padding: 8px 0 8px 4px;
  margin-bottom: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.collapsed .logoRow {
  height: 36px;
  padding: 0;
  margin-bottom: 12px;
  justify-content: flex-start;
}

/* Brand group (figma I133:7632): the full wordmark rides the text ink
   (figma flows: the main-screen instance is black; blue is brand
   emphasis only). A button only in behavior (New Session shortcut): the
   pointer cursor is the sole affordance — no hover chrome on the mark. */
.brand {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Mark and name are independent slots; the shell owns their shared baseline,
   spacing, and height so either occupant can vary in width. */
.brandIdentity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  min-width: 0;
}

.brandMark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brandName {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.04em;
}

.fallbackBrandName {
  font-size: 17px;
  letter-spacing: 0px;
  white-space: nowrap;
}

.localBuildBrand {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  height: 24px;
  white-space: nowrap;
}

.localBuildTitle {
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0;
}

.iconButton {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--dsw-alias-label-secondary);
}

.iconButton:hover {
  background: var(--dsw-alias-interactive-bg-hover);
}

.collapsed .iconButton {
  width: 36px;
  height: 36px;
}

/* Rail logo swap: collapsed, the toggle rests as the whale mark (brand ink,
   no hover circle) and hovering reveals the panel icon — the expand
   affordance (figma sidebar-hover flow). Expanded it is a plain panel icon. */
.collapsed .toggle .panelIcon {
  display: none;
}

.collapsed .toggle:hover .panelIcon {
  display: inline;
}

.collapsed .toggle:hover .railMark {
  display: none;
}

.railMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Rail icons ride the primary ink (figma rail spec); expanded keeps the
   secondary icon-button ink. */
.collapsed .iconButton {
  color: var(--dsw-alias-label-primary);
}

.buildVersion {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 10px;
  padding: 0 3px;
  border-radius: 2px;
  color: var(--dsw-alias-label-primary-inverted);
  background: var(--dsw-alias-label-primary);
  font-family: var(--ds-font-family-code);
  font-size: 6px;
  font-weight: 500;
  line-height: 10px;
  white-space: nowrap;
}

/* New Session: 38px bar, 12px radius (figma 133:7634 geometry, squared-off
   corners); collapsed it renders as the rail's plain icon control. */
.newSession {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 8px 16px;
  margin: 0 2px 8px;
  box-sizing: border-box;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 12px;
  background: var(--dsw-alias-button-elevated-fill);
  color: var(--dsw-alias-label-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  overflow: hidden;
}

.newSession:hover {
  background: var(--dsw-alias-button-floating-hover);
}

.collapsed .newSession {
  align-self: flex-start;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 0 12px;
  gap: 0;
  border-color: transparent;
  background: transparent;
}

.collapsed .newSession:hover {
  background: var(--dsw-alias-interactive-bg-hover);
}

.newSessionLabel {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
}

.collapsed .newSessionLabel {
  max-width: 0;
}

/* Region seat: always mounted so the foot never moves. Its trailing margin
   cancels the wide shell inset so the nested scrollbar can sit at the sidebar
   edge; the browser restores that inset inside its own rows. */
.regionArea {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-left: -4px;
  margin-right: calc(-1 * var(--dsh-sidebar-inline-padding));
  padding-left: 4px;
  overflow: hidden;
}

.collapsed .regionArea {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}

/* Footer seats: additive actions stack above Settings. Each occupant owns its
   button geometry and hover chrome. */
.footArea {
  flex: none;
  display: flex;
  flex-direction: column;
}

.settingsArea,
.footerActions {
  flex: none;
  min-width: 0;
  width: 100%;
}

.footerActions {
  display: flex;
}

.collapsed .footArea {
  align-items: center;
}

.collapsed .settingsArea,
.collapsed .footerActions {
  display: flex;
  justify-content: center;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .wide,
  .fading > *,
  .railIn .iconButton,
  .railIn .newSession,
  .railIn .footArea,
  .railIn .regionArea {
    transition: none;
    animation: none;
  }
}
