.pill {
  white-space: nowrap;
  flex: 0 0 auto; /* Don’t shrink or grow — size based on content */
  padding: var(--padding-sm) var(--padding-xl);
  font-size: var(--font-size-button);
  background-color: var(--button-neutral-background);
  color: var(--button-neutral-text);
  border-radius: var(--border-radius-rounded-rectangle);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  box-shadow: 0 0 0 1px var(--button-neutral-border), var(--soft-shadow-pill);
  border: none;
  outline: none;
  outline-offset: 0;
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.pill.active {
  background: var(--button-hover-background);
  color: var(--button-hover-text);
  box-shadow: 0 0 0 2px var(--button-hover-border), var(--soft-shadow-pill);
  outline: none;
}

.pill:hover {
  background: var(--button-hover-background);
  color: var(--button-hover-text);
  box-shadow: 0 0 0 1px var(--button-hover-border), var(--soft-shadow-pill);
  outline: none;
}

.pill:hover.active {
  box-shadow: 0 0 0 2px var(--button-hover-border), var(--soft-shadow-pill);
  outline: none;
}

.pill:focus {
  outline: none;
}

/* ------------------------------------- */
/* ---- Session Specific Pill Styles --- */
/* ------------------------------------- */

.session-pills-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;
  cursor: grab;
  padding: var(--padding-xl) 0px;
  margin-bottom: calc(-1 * var(--padding-xl));
  min-height: var(--space-3-5);
  padding-left: 0.125rem !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.session-pills-container {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-md);
  width: 100%;
}

.session-pills-scroll-wrapper.dragging {
  cursor: grabbing;
}

.session-pills-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}