.switcher {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.switcher--open {
  pointer-events: auto;
}

/* Transparent outside-tap catcher — no dimming so the system nav area and
 * the page above the sheet stay clean (no grey band). */
.switcher__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
}

/* Sheet anchored bottom-up — single hairline border for separation.
 * No drop shadow: the border + radius already give the sheet a clean edge
 * against whatever sits above it. Grows with its content up to an 80vh cap:
 * short content shrinks the sheet; once content exceeds 80vh the list
 * (flex:1, min-height:0) stops growing and scrolls inside. */
.switcher__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background-color: var(--color-card);
  border-top: 1rpx solid var(--color-border);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 200ms ease;
  padding-bottom: env(safe-area-inset-bottom);
  /* See start-chat panel: 40rpx compensates for rounded-corner erosion. */
  --sheet-gutter: 40rpx;
}

.switcher--open .switcher__sheet {
  transform: translateY(0);
}

.switcher__list {
  flex: 1;
  min-height: 0;
}

/* List-mode footer. Sits pinned at the bottom (flex-shrink: 0) so workspace
 * add actions stay reachable even when the server list scrolls. */
.switcher__footer {
  flex-shrink: 0;
  padding: var(--space-2) var(--sheet-gutter) var(--space-3);
  border-top: 1rpx solid var(--color-border-subtle);
}

.switcher__footer-actions {
  display: flex;
}

.switcher__footer-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 76rpx;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.switcher__footer-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

.switcher__footer-btn--hover {
  opacity: 0.76;
}

.switcher__footer-btn--disabled {
  opacity: 0.5;
}

.switcher__footer-btn-icon {
  color: currentColor;
}

.switcher__footer-btn-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher__footer-hint {
  margin-top: var(--space-2);
  color: var(--color-subtle-fg);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
}

/* Section title — user name · URL, with an explicit sign-out button on the right.
 * Styled to match start-chat panel's section title rhythm: same padding
 * (24rpx top / 12rpx bottom / 32rpx sides) and no background fill. */
.switcher__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--sheet-gutter) 12rpx;
}

.switcher__section-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.switcher__section-user {
  font-size: 26rpx;
  color: var(--color-fg);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher__section-dot {
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background-color: var(--color-muted-fg);
  flex-shrink: 0;
}

.switcher__section-url {
  font-size: var(--text-xs);
  color: var(--color-muted-fg);
  font-family: var(--font-mono);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher__section-sign-out {
  flex: none;
  height: 48rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1rpx solid var(--color-destructive);
  background: transparent;
  color: var(--color-destructive);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  white-space: nowrap;
}

.switcher__section-sign-out--hover {
  opacity: 0.76;
}

/* Workspace rows — match start-chat panel row density (12rpx vertical,
 * 32rpx gutter, single-line) and inbox icon-wrap pattern (48rpx wrap +
 * 36rpx glyph). Selection shows a check on the right, no fill. */
.switcher__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12rpx var(--sheet-gutter);
  font-size: var(--text-base);
  color: var(--color-fg);
}

.switcher__row--hover {
  background-color: var(--color-muted);
}

.switcher__row--muted {
  color: var(--color-muted-fg);
  justify-content: center;
  font-size: var(--text-sm);
  padding: 12rpx var(--sheet-gutter);
}

.switcher__row--error {
  color: var(--color-destructive);
  justify-content: center;
  font-size: var(--text-sm);
  padding: 12rpx var(--sheet-gutter);
}

.switcher__row-body {
  flex: 1;
  min-width: 0;
}

/* 48rpx pill badge — matches start-chat panel's badge geometry so the two
 * sheets read as one design system. Workspace shares the agent blue
 * (--color-avatar-agent) so workspace and agent rows read as one family.
 * Initials precomputed in TS. Font is intentionally smaller than --text-xs
 * (22rpx) so 2-char initials read with breathing room inside the circle. */
.switcher__row-badge {
  width: 48rpx;
  height: 48rpx;
  border-radius: var(--radius-pill);
  background: var(--color-avatar-agent);
  color: var(--color-avatar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20rpx;
  font-weight: var(--font-semibold);
}

.switcher__row-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected-row check. Uses a literal "✓" text character instead of the
 * mask-icon pattern (icon icon--sm icon--check) because mask icons were
 * invisibly failing to render in this component — same root cause as the
 * header "+" glyph. Text reliably inherits currentColor and renders. */
.switcher__row-check {
  margin-left: var(--space-2);
  color: var(--color-success);
  flex-shrink: 0;
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: 1;
}

.switcher__appearance {
  margin: var(--space-3) var(--sheet-gutter) var(--space-2);
  padding-top: var(--space-3);
  border-top: 1rpx solid var(--color-border-subtle);
}

.switcher__appearance-title {
  margin-bottom: var(--space-2);
  color: var(--color-muted-fg);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.switcher__appearance-row {
  min-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.switcher__appearance-language {
  display: block;
}

.switcher__appearance-row--hover {
  opacity: 0.64;
}

.switcher__appearance-label,
.switcher__appearance-scheme-label {
  color: var(--color-fg);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.switcher__appearance-value {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  color: var(--color-muted-fg);
  font-size: var(--text-sm);
}

.switcher__appearance-chevron {
  color: var(--color-subtle-fg);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1;
}

.switcher__appearance-segmented {
  display: flex;
  padding: 6rpx;
  background: var(--color-muted);
  border-radius: var(--radius-md);
}

.switcher__appearance-option {
  min-width: 92rpx;
  padding: 8rpx 12rpx;
  color: var(--color-muted-fg);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  text-align: center;
}

.switcher__appearance-option radio { display: none; }

.switcher__appearance-option--active {
  color: var(--color-fg);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.switcher__appearance-scheme-label { margin-top: var(--space-2); }

.switcher__appearance-schemes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.switcher__appearance-scheme {
  min-width: 0;
  padding: 10rpx 4rpx;
  color: var(--color-muted-fg);
  border: 1rpx solid transparent;
  border-radius: var(--radius-md);
  font-size: 18rpx;
  text-align: center;
}

.switcher__appearance-scheme--active {
  color: var(--color-fg);
  background: var(--color-accent);
  border-color: var(--color-border);
}

.switcher__appearance-swatch {
  width: 40rpx;
  height: 28rpx;
  margin: 0 auto 8rpx;
  border: 1rpx solid var(--color-border);
  border-radius: var(--radius-sm);
}

.switcher__appearance-swatch--default { background: #171717; }
.switcher__appearance-swatch--dracula { background: #bd93f9; }
.switcher__appearance-swatch--tokyonight { background: #7aa2f7; }
.switcher__appearance-swatch--catppuccin { background: #cba6f7; }
.switcher__appearance-swatch--github { background: #0969da; }