/* Workspace browsing region (fills the sidebar shell's hole): section
   header, search capsule, and the scrolling session list. Wide/rail
   variants ride the shell's fold state through the `wide` owner prop —
   rail state renders only the two 36x36 icon controls. */

.root {
  --dsh-session-list-edge-inset: var(--dsh-sidebar-inline-padding);
  --dsh-session-list-scrollbar-width: 8px;
  --dsh-session-list-scrollbar-offset: 2px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-right: var(--dsh-session-list-edge-inset);
}

.root.rail {
  padding-right: 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);
}

/* Section header: title, an inline search control, and the two trailing
   actions. Expanding search collapses the action cluster and takes its room. */
.sectionHeader {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 36px;
  padding-left: 4px;
  margin-bottom: 4px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  color: var(--dsw-alias-label-tertiary);
}

.root:not(.rail) .sectionHeader {
  margin-top: 2px;
  margin-right: -4px;
}

.sectionLabel {
  flex: none;
  max-width: 45%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 20px;
  opacity: 1;
  visibility: visible;
  transition:
    max-width 180ms var(--ds-ease-in-out),
    margin-right 180ms var(--ds-ease-in-out),
    opacity 120ms var(--ds-ease-in-out),
    transform 180ms var(--ds-ease-in-out),
    visibility 0s linear;
}

.sectionLabelHidden {
  max-width: 0;
  margin-right: -4px;
  opacity: 0;
  transform: translateX(-4px);
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, 0s, 180ms;
}

.searchSlot {
  flex: 1;
  max-width: 28px;
  min-width: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 0;
  box-sizing: border-box;
  transition:
    max-width 180ms var(--ds-ease-in-out),
    padding-left 180ms var(--ds-ease-in-out);
}

.searchSlotExpanded {
  max-width: 100%;
  padding-left: 0;
}

.headerActions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 60px;
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  transition:
    max-width 180ms var(--ds-ease-in-out),
    opacity 120ms var(--ds-ease-in-out),
    transform 180ms var(--ds-ease-in-out),
    visibility 0s linear;
}

.headerActionsHidden {
  max-width: 0;
  opacity: 0;
  transform: translateX(4px);
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s, 0s, 180ms;
}

/* Inline search always fills the room between the title and trailing actions;
   it grows farther right when the action cluster collapses. */
.search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: text;
  color: var(--dsw-alias-label-secondary);
  overflow: hidden;
  transition:
    width 180ms var(--ds-ease-in-out),
    padding 180ms var(--ds-ease-in-out),
    border-color 180ms var(--ds-ease-in-out),
    background-color 180ms var(--ds-ease-in-out);
}

.searchExpanded {
  width: calc(100% + 4px);
  height: 30px;
  margin-inline: -2px;
  padding: 0 4px 0 0;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 10px;
  background: transparent;
  color: var(--dsw-alias-label-caption);
}

.searchButton {
  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: inherit;
}

.searchExpanded .searchButton {
  width: 28px;
  height: 30px;
}

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

.searchExpanded .searchButton:hover {
  background: transparent;
}

.searchInput {
  flex: 1;
  width: 0;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--dsw-alias-label-primary);
  transition: opacity 120ms var(--ds-ease-in-out);
}

.searchExpanded .searchInput {
  margin-left: -2px;
  opacity: 1;
  pointer-events: auto;
}

.searchInput::placeholder {
  color: var(--dsw-alias-label-tertiary);
}

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

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

/* Rail variant (own .rail class from the wide owner prop — the region never
   reads the shell's class names): the two icon controls stack as 36x36
   circles matching the shell's rail rhythm. Both use the rail's shared base
   left anchor so the outer shell can translate the whole region uniformly. */
.rail .sectionHeader {
  gap: 0;
  padding-left: 0;
  margin-bottom: 12px;
  justify-content: flex-start;
}

.rail .headerActions {
  max-width: none;
}

.rail .iconButton {
  width: 36px;
  height: 36px;
  color: var(--dsw-alias-label-primary);
}

.rail .search {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 0 12px;
  gap: 0;
  border-color: transparent;
  background: transparent;
}

.rail .searchButton {
  width: 36px;
  height: 36px;
  color: var(--dsw-alias-label-primary);
}

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

/* List seat: always mounted so the shell foot never moves. */
.listArea {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-left: -4px;
  margin-right: calc(-1 * var(--dsh-session-list-edge-inset));
  padding-left: 4px;
  /* The list remains the scroll clip. This seat stays visible so the
     absolutely positioned first-boundary marker can occupy the header gap. */
  overflow: visible;
}

.rail .listArea {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}

/* Relative for the bottom fade overlay. */
.treeBody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Bottom fade: compact overlay pinned to the visible bottom,
   transparent -> sidebar fill so it tracks the theme. */
.fade {
  position: absolute;
  left: 0;
  right: var(--dsh-session-list-edge-inset);
  bottom: 0;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--dsw-specific-sidebar-fill));
  pointer-events: none;
}

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

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

/* List: the only scrolling region. Block children keep their design heights
   under content overflow. The 2px edge offset, stable 8px themed scrollbar,
   and remaining padding equal the shell's right inset, with or without
   overflow, so moving the bar does not move the rows. */
.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-left: -4px;
  margin-right: var(--dsh-session-list-scrollbar-offset);
  padding-left: 4px;
  padding-right: calc(
    var(--dsh-session-list-edge-inset)
    - var(--dsh-session-list-scrollbar-width)
    - var(--dsh-session-list-scrollbar-offset)
  );
  /* Clears the compact bottom fade overlay: at scroll end the last row sits
     above the gradient instead of under it. */
  padding-bottom: 16px;
  scrollbar-gutter: stable;
}

.flatList > * + *,
.searchTree > [role='treeitem'] + [role='treeitem'],
.groupSection > * + * {
  margin-top: 2px;
}

.searchStatus,
.searchWarning {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-label-tertiary);
}

.searchWarning {
  color: var(--dsw-alias-label-secondary);
}

/* One workspace section: header row + a compact expanded session run. */
.groupSection {
  position: relative;
}

.groupSection + .groupSection {
  margin-top: 4px;
}

.listTopDropIndicator,
.workspaceDropBefore::before,
.workspaceDropAfter::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 12px;
  background:
    linear-gradient(
      55deg,
      transparent calc(50% - 1px),
      var(--dsw-alias-state-business-primary) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ) 0 0 / 5px 7px no-repeat,
    linear-gradient(
      125deg,
      transparent calc(50% - 1px),
      var(--dsw-alias-state-business-primary) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ) 0 5px / 5px 7px no-repeat,
    linear-gradient(
      var(--dsw-alias-state-business-primary) 0 0
    ) 4px 5px / calc(100% - 4px) 2px no-repeat;
  pointer-events: none;
}

/* The first insertion boundary keeps the same -8px coordinate as every
   Workspace boundary, but lives outside the scrolling clip. */
.listTopDropIndicator {
  top: -8px;
  left: 0;
  right: var(--dsh-session-list-edge-inset);
}

.listTopDropActive > .workspaceDropBefore:first-child::before {
  display: none;
}

.workspaceDropBefore::before {
  top: -8px;
}

.workspaceDropAfter::after {
  bottom: -8px;
}

.sessionOverflowButton {
  width: 100%;
  height: 28px;
  border: none;
  border-radius: 8px;
  padding: 0 12px 0 28px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--dsw-alias-label-tertiary);
}

.groupSection > .sessionOverflowButton {
  margin-top: 0;
}

.sessionOverflowButton:hover {
  background: transparent;
  color: var(--dsw-alias-label-secondary);
}

.empty {
  padding: 16px 12px;
  color: var(--dsw-alias-label-tertiary);
  font-size: 13px;
}

/* Rename dialog form (same figma dialog family as the create modals). */
.renameInput {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 22px;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--dsw-alias-label-primary);
}

.renameInput:disabled {
  color: var(--dsw-alias-label-dimmed);
}

.renameError {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-state-error-primary);
}

.deleteAction:not(:disabled) {
  color: var(--dsw-alias-state-error-primary);
}

.deleteStatus {
  font-size: 12px;
  line-height: 18px;
  color: var(--dsw-alias-label-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .wide {
    animation: none;
  }

  .search,
  .sectionLabel,
  .searchSlot,
  .searchInput,
  .headerActions {
    transition: none;
  }
}
