frontend/src/components/Sidebar.css

/* Sidebar — page-specific layout + accents, base comes from ui/ primitives. */

.sidebar               { display: flex; flex-direction: column; }

.sidebar__tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--chrome-border);
  background: var(--chrome-bg);
  flex-shrink: 0;
  justify-content: center;
}
.sidebar.is-collapsed .sidebar__tabs {
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
  align-items: center;
}
.sidebar.is-collapsed .sidebar__tab {
  max-width: 100%;
  padding: 0;
  width: 36px;
  height: 36px;
  flex: none;
}
.sidebar.is-collapsed .sidebar__tab svg {
  width: 18px;
  height: 18px;
}

.sidebar__tab {
  position: relative;
  flex: 1;
  height: var(--chrome-pill-h);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--chrome-fg-muted);
  border-radius: var(--chrome-radius-pill);
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  --sidebar-tab-accent: var(--color-brand);
  white-space: nowrap;
  padding: 0 10px;
}
.sidebar__tab:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}
.sidebar__tab.is-active {
  border-color: color-mix(in srgb, var(--sidebar-tab-accent) 35%, transparent);
  background:   color-mix(in srgb, var(--sidebar-tab-accent) 12%, transparent);
  color: var(--sidebar-tab-accent);
}
.sidebar__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.sidebar__tab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  font-family: var(--chrome-font-mono);
  font-size: 8px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  padding: 0 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--sidebar-tab-accent) 25%, transparent);
  color: var(--sidebar-tab-accent);
}

/* ── Search ─────────────────────────────────────────────────── */
.sidebar__search {
  padding: 3px 4px 2px 4px;
  flex-shrink: 0;
  position: relative;
}
.sidebar__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-fg-subtle);
  pointer-events: none;
}
.sidebar__search-input {
  width: 100%;
  font-size: var(--text-sm);
  padding: 4px 26px 4px 22px;
  /* Chrome-radius instead of 999 px pill so the input rhymes with the
     footer / header pills. Colors come from the base Input primitive. */
  border-radius: var(--chrome-radius-pill);
}
.sidebar__search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── Save-project button tint ───────────────────────────────── */
.sidebar__save-btn {
  margin-bottom: var(--space-2);
  color: var(--chrome-fg);
  border: 1px solid var(--chrome-border-strong);
  background: transparent;
  border-radius: var(--chrome-radius-pill);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}
.sidebar__save-btn:hover { background: var(--chrome-hover-bg); }
.sidebar__save-btn.is-active-project {
  color: #b8bb26;
  border-color: color-mix(in srgb, #b8bb26 45%, transparent);
  background: color-mix(in srgb, #b8bb26 10%, transparent);
}
.sidebar__save-btn--full     { justify-content: center; }

/* ── Clear-history row ──────────────────────────────────────── */
.sidebar__clear { margin-top: var(--space-5); color: var(--color-fg-subtle); opacity: 0.7; }
.sidebar__clear:hover { opacity: 1; }

/* ── Empty-state placeholders ───────────────────────────────── */
.sidebar__empty {
  color: var(--chrome-fg-muted);
  text-align: center;
  padding: 24px 12px;
  font-family: var(--font-sans);
}
.sidebar__empty-icon   { opacity: 0.3; margin-bottom: var(--space-4); color: var(--chrome-fg-dim); }
.sidebar__empty-title  { font-size: 0.82rem; margin: 0 0 var(--space-2); color: var(--chrome-fg); font-weight: 500; letter-spacing: 0.02em; }
.sidebar__empty-sub    { font-size: 0.7rem; margin: 0; color: var(--chrome-fg-dim); line-height: 1.5; }

/* Hide text-heavy blocks when sidebar is collapsed to icon-only width */
.sidebar.is-collapsed .sidebar__empty     { display: none; }
.sidebar.is-collapsed .sidebar__subtitle  { display: none; }
.sidebar.is-collapsed .sidebar__search    { display: none; }

/* Section label — matches the status-bar's "LOGS" uppercase treatment.
   Labels are displays (not buttons) but this one IS clickable (collapses
   the section), so the chevron on the right signals interactivity while
   the text keeps the chrome label typography. */
.sidebar__section-title {
  font-family: var(--chrome-font-mono);
  font-size: var(--chrome-label-size);
  font-weight: 600;
  letter-spacing: var(--chrome-label-track);
  text-transform: uppercase;
  color: var(--chrome-fg-muted);
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
}
.sidebar__section-title:hover { color: var(--chrome-fg); }

/* ── Collapsed-mode icon tiles — chrome square buttons ────────── */
.sidebar__icon-tile {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Squircle corners dropped in favour of chrome-radius to match the
     NavRail and footer icon buttons. Same transparent-until-hover
     treatment since these are interactive. */
  border-radius: var(--chrome-radius-pill);
  cursor: pointer;
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  color: var(--chrome-fg-muted);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.sidebar__icon-tile:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}
.sidebar__icon-tile.is-active {
  background: var(--chrome-accent-bg);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}
.sidebar__icon-tile__lock {
  position: absolute;
  bottom: 2px;
  right: 2px;
  color: #b8bb26;
}

/* Generic small dot at top of history list */
.sidebar__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* ── Scrollable body + collapsed-mode tweaks ─────────────────── */
.sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.sidebar__scroll.is-collapsed {
  padding: 8px 4px;
  align-items: center;
  gap: 8px;
}

/* Preset rows that don't need a computed accent */
.history-item--dub       { --row-accent: #83a598; }

/* ── History-item kind badge variants ────────────────────────── */
.history-kind--audio     { color: #83a598; border-color: rgba(131, 165, 152, 0.25); }

/* Locked project label + italic subtitle */
.history-meta--locked    { color: #b8bb26; font-style: italic; }
.history-subtitle--italic { font-style: italic; }

/* Generated-history title clamp */
.history-title--clamp {
  white-space: normal;
  font-weight: 500;
  font-size: 0.74rem;
  line-height: 1.3;
  max-height: 3em;
  overflow: hidden;
}
.history-subtitle--seed {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--chrome-fg-dim);
}

/* Inline mini-player in generate history */
.history-audio {
  height: 24px;
  margin-top: 4px;
  width: 100%;
  border-radius: 999px;
}

/* Restore / re-open icon tiles on history + export rows */
.sidebar-tile {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
}
.sidebar-tile--audio   { color: #83a598; }
.sidebar-tile--clone   { color: #d3869b; }
.sidebar-tile--design  { color: #b8bb26; }
.sidebar-tile--success { color: #8ec07c; }