/**
 * Side Panel — push layout styles.
 *
 * When the side panel is open, an `sb-sidepanel-open` class is added to <html>.
 * When docked to bottom, `sb-sidepanel-bottom` is also added.
 * These rules push the main content and floating UI elements to make space
 * for the panel.
 */

:root {
  --sb--sidepanel-width: 420px;
  --sb--sidepanel-height: 300px;
}

/* -----------------------------------------------------------------------
   Side panel (default) — push content right
   ----------------------------------------------------------------------- */

html.sb-sidepanel-open:not(.sb-sidepanel-bottom) > body > #root {
  margin-right: var(--sb--sidepanel-width);
  transition: margin-right 0.25s ease;
}

/* When a mode collar is active, account for the 12px gap around the panel */
html.sb-sidepanel-open:not(.sb-sidepanel-bottom).storyboard-mode-present > body > #root,
html.sb-sidepanel-open:not(.sb-sidepanel-bottom).storyboard-mode-plan > body > #root,
html.sb-sidepanel-open:not(.sb-sidepanel-bottom).storyboard-mode-inspect > body > #root {
  margin-right: calc(var(--sb--sidepanel-width) + 12px);
}

html:not(.sb-sidepanel-open) > body > #root {
  transition: margin-right 0.25s ease, margin-bottom 0.25s ease;
}

/* Push the CoreUIBar (fixed bottom-right) — side mode */
html.sb-sidepanel-open:not(.sb-sidepanel-bottom) [data-core-ui-bar] {
  right: calc(var(--sb--sidepanel-width) + 24px) !important;
  transition: right 0.25s ease;
}

html:not(.sb-sidepanel-open) [data-core-ui-bar] {
  transition: right 0.25s ease, bottom 0.25s ease;
}

/* Push the ModeSwitch (fixed bottom-center) — side mode */
html.sb-sidepanel-open:not(.sb-sidepanel-bottom) .sb-mode-switch {
  transform: translateX(calc(-50% - var(--sb--sidepanel-width) / 2));
  transition: transform 0.25s ease;
}

html:not(.sb-sidepanel-open) .sb-mode-switch {
  transition: transform 0.25s ease, bottom 0.25s ease;
}

/* When both modes collar padding AND sidepanel are active,
   the collar bottom bar should not extend under the panel + its right gap */
html.sb-sidepanel-open:not(.sb-sidepanel-bottom)::before {
  width: calc(100vw - var(--sb--sidepanel-width) - 12px);
}

/* -----------------------------------------------------------------------
   Bottom panel — push content down
   ----------------------------------------------------------------------- */

html.sb-sidepanel-open.sb-sidepanel-bottom > body > #root {
  margin-bottom: var(--sb--sidepanel-height);
  transition: margin-bottom 0.25s ease;
}

/* Mode collar + bottom panel */
html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-present > body > #root,
html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-plan > body > #root,
html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-inspect > body > #root {
  margin-bottom: calc(var(--sb--sidepanel-height) + 12px);
}

/* Push the CoreUIBar up — bottom mode */
html.sb-sidepanel-open.sb-sidepanel-bottom [data-core-ui-bar] {
  bottom: calc(var(--sb--sidepanel-height) + 24px) !important;
  transition: bottom 0.25s ease;
}

/* Push the ModeSwitch up — bottom mode */
html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
  bottom: calc(var(--sb--sidepanel-height) + 24px);
  transition: bottom 0.25s ease;
}

/* -----------------------------------------------------------------------
   Panel element styles (migrated from scoped styles)
   ----------------------------------------------------------------------- */

.sb-sidepanel {
  position: fixed;
  top: var(--sb-branch-bar-height, 0px);
  right: 0;
  bottom: 0;
  width: var(--sb--sidepanel-width, 420px);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background, #ffffff);
  border-left: 1px solid var(--color-border, #d0d7de);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--color-foreground, #1f2328);
  animation: sb-sidepanel-slide-in 0.25s ease;
}

.sb-sidepanel--bottom {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: var(--sb--sidepanel-height, 300px);
  border-left: none;
  border-top: 1px solid var(--color-border, #d0d7de);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  animation: sb-sidepanel-slide-up 0.25s ease;
}

.sb-sidepanel-dragging {
  user-select: none;
}

@keyframes sb-sidepanel-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes sb-sidepanel-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Mode-aware top accent bar */
.sb-sidepanel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

/* Drag handle — side mode (left edge, vertical) */
.sb-sidepanel-drag-handle {
  position: absolute;
  top: 0;
  left: -4px;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drag handle — bottom mode (top edge, horizontal) */
.sb-sidepanel--bottom .sb-sidepanel-drag-handle {
  top: -4px;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 8px;
  cursor: row-resize;
}

.sb-sidepanel-grabber {
  opacity: 0;
  color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.sb-sidepanel--bottom .sb-sidepanel-grabber {
  transform: rotate(90deg);
}

.sb-sidepanel-drag-handle:hover .sb-sidepanel-grabber,
.sb-sidepanel-dragging .sb-sidepanel-grabber {
  opacity: 1;
}

/* Header */
.sb-sidepanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 0;
  flex-shrink: 0;
}

.sb-sidepanel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-muted, #656d76);
  padding-left: 4px;
}

.sb-sidepanel-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sb-sidepanel-action-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-foreground-muted, #656d76);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.sb-sidepanel-action-btn:hover {
  background: var(--color-background-neutral-muted, rgba(110, 118, 129, 0.1));
  color: var(--color-foreground, #1f2328);
}

/* Body */
.sb-sidepanel-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sb-sidepanel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.sb-sidepanel-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border, #d0d7de);
  border-top-color: var(--color-foreground-muted, #656d76);
  border-radius: 50%;
  animation: sb-spin 0.6s linear infinite;
}

@keyframes sb-spin {
  to { transform: rotate(360deg); }
}

/* Float the side panel inside the mode collar (present/plan/inspect) */
html.storyboard-mode-present .sb-sidepanel:not(.sb-sidepanel--bottom),
html.storyboard-mode-plan .sb-sidepanel:not(.sb-sidepanel--bottom),
html.storyboard-mode-inspect .sb-sidepanel:not(.sb-sidepanel--bottom) {
  top: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: var(--radius);
  border-left: none;
}

/* Float the bottom panel inside the mode collar */
html.storyboard-mode-present .sb-sidepanel--bottom,
html.storyboard-mode-plan .sb-sidepanel--bottom,
html.storyboard-mode-inspect .sb-sidepanel--bottom {
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: auto !important;
  border-radius: var(--radius);
  border-top: none;
}

/* Remove accent bar when collar provides mode context */
html.storyboard-mode-present .sb-sidepanel::before,
html.storyboard-mode-plan .sb-sidepanel::before,
html.storyboard-mode-inspect .sb-sidepanel::before {
  display: none;
}

/* Mode-specific box-shadow matching #root treatment */
html.storyboard-mode-present .sb-sidepanel {
  box-shadow: 0 0 7px 2px rgb(42 157 143 / 60%);
}

html.storyboard-mode-plan .sb-sidepanel {
  box-shadow: 0 0 7px 2px rgb(74 127 173 / 60%);
}

html.storyboard-mode-inspect .sb-sidepanel {
  box-shadow: 0 0 7px 2px rgb(118 85 164 / 60%);
}

