/* ============================================================
   <SidebarItem /> — chat-list row in the sidebar.

   Two layouts share the same hover/active backgrounds:
     row     — single-line: [dot] [title]   (sidebar-item.html)
     stacked — single-line title in chat.html

   Plus a collapsed variant that renders as a 4px stripe rail when the
   sidebar is in icon-only mode.

   Pairs with components/sidebar-item/index.jsx. The CSS lives on the
   chat-shell `surface` (the warm dark "desk" / cream in light) and uses
   `on-surface*` tokens accordingly.
   ============================================================ */

.sidebar-item {
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* ---------- Layout: row ---------- */
.sidebar-item--row {
  display: flex;
  align-items: center;
  gap: var(--s-2-5);
  padding: 9px var(--s-2-5);
}
.sidebar-item--row .sidebar-item__title {
  font: 500 13px/1.2 var(--md-sys-typescale-body-large-font);
  color: var(--md-sys-color-on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The dot in the row layout is a leading 8px circle; consumers
   pass showDot to render it filled. The slot is always present so
   titles align across rows. */
.sidebar-item--row .sidebar-item__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
}
.sidebar-item--row.has-dot .sidebar-item__dot {
  background: var(--md-sys-color-primary);
}

.sidebar-item--row .sidebar-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--s-1-5);
  border-radius: 999px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- Layout: stacked ---------- */
.sidebar-item--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
  padding: var(--s-2) var(--s-2-5);
}
.sidebar-item--stacked .sidebar-item__title {
  font: 500 13px/1.25 var(--md-sys-typescale-body-large-font);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Hover & active (shared across layouts) ----------
   Hover and active were the same near-black surface-container-lowest, so
   the two states read identically and reused the vanishing-bubble color.
   The sidebar rides `surface` (the desk), so both states must be a step ABOVE
   it to read — surface-container-low equals `surface` in dark and would vanish.
   Ramp upward: desk → hover (surface-container) → active (surface-container-high,
   the same raised family the user bubble / composer ride). */
.sidebar-item:hover,
.sidebar-item.is-hover {
  background: var(--md-sys-color-surface-container);
}
.sidebar-item.is-active {
  background: var(--md-sys-color-surface-container-high);
}
.sidebar-item:hover .sidebar-item__title,
.sidebar-item.is-hover .sidebar-item__title,
.sidebar-item.is-active .sidebar-item__title {
  color: var(--md-sys-color-on-surface);
}

/* Dark theme — push the resting title color further into gray so the
   active item's strong-ink title pops as the brighter, more-white state.
   Light theme keeps the standard on-surface ramp (already reads as a clear
   default → strong contrast there). */
[data-theme="dark"] .sidebar-item:not(.is-active):not(.is-hover):not(:hover) .sidebar-item__title {
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Collapsed: 4px stripe rail ---------- */
.sidebar-item--collapsed {
  width: 24px;
  height: 4px;
  padding: 0;
  border-radius: 2px;
  background: var(--xm-color-on-surface-soft);
  opacity: 0.35;
  transition:
    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.sidebar-item--collapsed:hover {
  background: var(--md-sys-color-on-surface);
  opacity: 0.6;
}
.sidebar-item--collapsed.is-active {
  background: var(--md-sys-color-on-surface);
  opacity: 0.85;
  box-shadow: none;
}
.sidebar-item--collapsed.has-badge:not(.is-active) {
  background: var(--md-sys-color-primary);
  opacity: 1;
}
.sidebar-item--collapsed > * { display: none; }

/* ---------- Eyebrow: section header above a group of items ----------
   Renders as an uppercase mono caption on the surface. No hover, no
   active — it's a label, not a target. */
.sidebar-item--eyebrow {
  cursor: default;
  padding: var(--s-3-5) var(--s-2-5) var(--s-1-5);
  font:
    var(--md-sys-typescale-label-small-weight)
    var(--md-sys-typescale-label-small-size) /
    var(--md-sys-typescale-label-small-line-height)
    var(--md-sys-typescale-label-small-font);
  color: var(--xm-color-on-surface-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--xm-typescale-mono-font);
}
.sidebar-item--eyebrow:hover { background: transparent; }