deepseek-harness/packages/client/ui-layout/src/client/AppFrame.module.css

.frame {
  position: relative; /* anchors the drag handles, which straddle column borders */
  display: grid;
  grid-template-rows: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dsw-alias-bg-base);
  /* Collapse/expand animates the tracks on the deepsuite sider curve
     (--ds-ease-in-out / --ds-transition-duration-slow, ui-theme base.css). */
  transition: grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out);
}

/* Dragging writes widths at pointer cadence; easing them would detach the
   column from the handle. */
.frame[data-dragging] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .frame {
    transition: none;
  }
}

.sidebarCol {
  min-width: 0;
  overflow: hidden;
  background: var(--dsw-specific-sidebar-fill);
  border-right: 0.5px solid var(--dsw-alias-border-l3);
}

.centerCol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* macOS desktop: the frame goes transparent so window vibrancy reaches the
   sidebar column, which keeps only a translucent tint; the centre paints the
   base background itself to stay opaque. The sidebar/centre separator moves
   to the opaque centre: on the translucent sidebar the alpha border mixes
   with the wallpaper and reads as a dark seam. */
:global([data-platform='darwin']) .frame {
  background: transparent;
}

:global([data-platform='darwin']) .sidebarCol {
  background: color-mix(in srgb, var(--dsw-specific-sidebar-fill) 60%, transparent);
  border-right: none;
}

:global([data-platform='darwin']) .centerCol {
  background: var(--dsw-alias-bg-base);
  border-left: 0.5px solid var(--dsw-alias-border-l3);
}

/* The darwin closed sidebar has no rail: the centre reaches the window edge,
   where a separator would draw a seam against nothing. */
:global([data-platform='darwin']) [data-sidebar-collapsed] .centerCol {
  border-left: none;
}

/* Drag handles are frame children (columns clip overflow): an 8px hit strip
   centered on the column border via inline left, above column content. No
   handle draws a visible pill: the details column was the only one that did,
   and the right column never had one. The right handle sits above the right
   panel (which states z-index 10) so it stays grabbable when the panel hangs
   over the centre. */
.handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  margin-left: -4px;
  cursor: col-resize;
  z-index: 11;
  touch-action: none;
  /* Rides the same curve as the tracks so the pill stays on the moving
     border during collapse/expand; paused while dragging (frame rule). */
  transition: left var(--ds-transition-duration-slow) var(--ds-ease-in-out);
}

.frame[data-dragging] .handle {
  transition: none;
}

/* Fullscreen covers the frame while its underlying columns enter or exit. */
.frame[data-rightbar-fullscreen],
.frame[data-rightbar-fullscreen] .handle,
.frame[data-rightbar-instant],
.frame[data-rightbar-instant] .handle {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .handle {
    transition: none;
  }
}

/*
 * The right column never clips: its occupant anchors a fixed-width panel to the
 * column's right edge (the frame's edge, which never moves) and lets the track
 * decide whether the centre makes room. With no track the panel hangs over the
 * centre from a zero-width column, and while the track animates the panel stays
 * where it is. The occupant draws its own left border.
 */
.rightbarCol {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.overlayLayer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.overlayLayer > * {
  pointer-events: auto;
}