.panel {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
}

.panel--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). */
.panel__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
}

/* Sheet anchored bottom-up — half-screen, single hairline border for separation.
 * No drop shadow: matches workspace-switcher's treatment for consistency. */
.panel__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  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);
  /* Sheet gutter: wider than page gutter (32rpx) because rounded top corners
   * visually erode the edge — content at 32rpx reads as cramped against
   * the curve. 40rpx is the iOS bottom-sheet standard (20px). */
  --sheet-gutter: 40rpx;
}

.panel--open .panel__sheet {
  transform: translateY(0);
}

.panel__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) var(--sheet-gutter);
  padding: 0 var(--space-3);
  height: 64rpx;
  background: var(--color-muted);
  border-radius: var(--radius-pill);
}

.panel__search-icon {
  flex-shrink: 0;
  color: var(--color-muted-fg);
}

.panel__search-input {
  flex: 1;
  font-size: var(--text-base);
  color: var(--color-fg);
  height: 100%;
  min-width: 0;
}

.panel__search-placeholder {
  color: var(--color-muted-fg);
  font-size: var(--text-base);
}

.panel__search-clear {
  width: 36rpx;
  height: 36rpx;
  flex-shrink: 0;
  color: var(--color-muted-fg);
}

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

.panel__section {
  padding: 0 0 var(--space-1);
  border-bottom: 1rpx solid var(--color-border-subtle);
}

.panel__section:last-child {
  border-bottom: none;
}

.panel__section-title {
  padding: var(--space-3) var(--sheet-gutter) 12rpx;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-muted-fg);
  line-height: 1;
}

.panel__hint {
  padding: var(--space-3) var(--sheet-gutter);
  font-size: var(--text-sm);
  color: var(--color-muted-fg);
  text-align: center;
}

.panel__hint--error {
  color: var(--color-destructive);
}

.panel__hint--muted {
  color: var(--color-muted-fg);
}

.panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 88rpx;
  padding: var(--space-2) var(--sheet-gutter);
  box-sizing: border-box;
}

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

.panel__row--disabled {
  opacity: 0.58;
}

/* Unified 48rpx pill badge for row-leading identifiers. Three semantic
 * variants share the same geometry; only background differs.
 *   --channel: muted gray, holds `#`
 *   --agent:   avatar-agent blue, holds 2-char initials (or avatar image)
 *   --human:   avatar-human violet, holds 2-char initials (or avatar image)
 * Colors come from the canonical avatar token set in app.wxss so the
 * miniapp stays in sync with the MessageList bubble treatment. Base font
 * (20rpx) is for 2-char initials; channel bumps to --text-base for the
 * single `#` glyph so it reads at parity with 2-char initials visually. */
.panel__row-badge {
  width: 48rpx;
  height: 48rpx;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20rpx;
  font-weight: var(--font-semibold);
  color: var(--color-avatar-fg);
  overflow: hidden;
}

.panel__row-badge--channel {
  background: var(--color-avatar-channel);
  font-size: var(--text-base);
}

/* Teams: amber/orange to distinguish from channels (violet), agents (blue),
 * and humans (violet). Pairs with --color-avatar-service so light/dark are
 * both tuned. */
.panel__row-badge--team {
  background: var(--color-avatar-service);
  color: var(--color-avatar-fg);
}

.panel__row-badge--agent {
  background: var(--color-avatar-agent);
  color: var(--color-avatar-fg);
}

.panel__row-badge--human {
  background: var(--color-avatar-human);
  color: var(--color-avatar-fg);
}

.panel__row-badge-img {
  width: 100%;
  height: 100%;
}

/* Row body — flex column so title and optional subtitle stack vertically.
 * Channel rows only have a title (single line); team/agent rows add a
 * subtitle (member count or team name) under the title. */
.panel__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

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

.panel__agent-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.panel__agent-title .panel__row-title {
  flex: 0 1 auto;
}

.panel__agent-presence {
  width: 14rpx;
  height: 14rpx;
  margin-left: 10rpx;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: #9ca3af;
}

.panel__agent-presence--idle {
  background: #22c55e;
}

.panel__agent-presence--busy {
  background: #f59e0b;
}

.panel__agent-presence--offline {
  background: #9ca3af;
}

/* Secondary line under the title for team member count or agent team.
 * Sits below the title — both lines share min-width: 0 so the row's
 * flex parent can ellipsize them properly. */
.panel__row-subtitle {
  font-size: var(--text-sm);
  color: #888888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin-top: 4rpx;
}

.panel__row-meta {
  font-size: var(--text-sm);
  color: #b2b2b2;
  flex-shrink: 0;
}