/* =========================================================
   SIDEBAR — STORY LIST & CONTROLS (VARIABLE-BASED THEME)
   ========================================================= */

/* ---------------------------------------------------------
   Sidebar Container
   Converted to neutral variables:
   - background → var(--sidebar-bg)
   - border     → var(--sidebar-border)

   Width is now min(85vw, 320px) instead of a fixed 240px, so
   there's room for a full title plus the edit/delete buttons,
   while still leaving a sliver of the main screen visible on
   narrow phones. Hiding the sidebar now uses transform instead
   of a hand-matched negative `left` value, so a width change
   like this one can never leave a gap or a mismatch again.
--------------------------------------------------------- */
#story-list {
  position: fixed;
  top: 0;
  left: 0;
  width: min(85vw, 320px);
  height: 100%;
  padding: 5rem var(--space-md) var(--space-md);
  background: var(--sidebar-bg);
  border-right: 2px solid var(--sidebar-border);
  box-shadow: var(--shadow-md);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

/* Sidebar open state */
#story-list.open {
  transform: translateX(0);
}

/* ---------------------------------------------------------
   Story List Items
--------------------------------------------------------- */
#story-list-items {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--space-sm);
}

#story-list-items > div {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding-right: var(--space-xs);
  min-height: 40px;
}

/* ---------------------------------------------------------
   Story Title Button
--------------------------------------------------------- */
#story-list-items button:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  height: 2rem;
  padding: 0 var(--space-sm);
}

/* ---------------------------------------------------------
   Edit / Delete Buttons
   Uses neutral button-muted variables
--------------------------------------------------------- */
.edit-btn,
.delete-btn {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  font-size: 1rem;
  color: var(--btn-muted-text);
}