/* SIDE PANEL — the shared collapse/expand toggle + resize divider
   (static/app-shell/side-panel.js). One look for every sidebar that mounts
   it: the Files tree and the Apps sidebar. Both sit inside the VIEWER column
   (position: relative; overflow: hidden), anchored on its left edge — which
   is the boundary between the panel and the viewer in both states. */

/* The divider: a 26px hit strip straddling the boundary, a 2px rule that
   lights on hover/drag. It drags the panel's width var, meaningless while the
   panel is collapsed (its track is 0) — so it is inert then, rather than
   queueing a width that only appears once re-expanded. */
.side-panel-divider {
  position: absolute; left: -13px; top: 0; bottom: 0; width: 26px;
  cursor: col-resize; z-index: 5;
}
.side-panel-divider::after {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background var(--speed, 140ms) ease;
}
.side-panel-divider:hover::after,
.side-panel-divider.dragging::after { background: var(--ui-accent); }
.side-panel-collapsed .side-panel-divider { pointer-events: none; }

/* The chevron, on the column edge. left:2px, not the divider's -13px: the
   viewer column clips its children (overflow: hidden, for its rounded
   corners), which also clips a negative offset — measured, only the sliver
   still inside the box was hit-testable. Only offered at >=980px: below that
   the layouts stack or push, and give the viewer the full width themselves. */
.side-panel-toggle {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 40px; border-radius: 8px; z-index: 6;
  display: none; align-items: center; justify-content: center;
  background: var(--ui-panel); border: 1px solid var(--ui-line); color: var(--ui-muted);
  cursor: pointer; padding: 0;
  transition: background var(--speed, 140ms) ease, color var(--speed, 140ms) ease;
}
@media (min-width: 980px) {
  .side-panel-toggle { display: inline-flex; }
}
.side-panel-toggle:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-accent); }
.side-panel-toggle-chev { transition: transform var(--speed, 140ms) ease; }
.side-panel-toggle[aria-pressed="true"] .side-panel-toggle-chev { transform: rotate(180deg); }