/* Official popupSelect shell card: menu-surface tokens (same family as
 * ui-primitives Menu.module.css — figma MenuDropdown r12 / hairline /
 * shadow-lv3), anchored by the conversation.input.overlay slot. */

.card {
  /* The overlay anchor is a zero-height strip on the composer card's top
     edge; entries float themselves above it (same rule as MenuView). */
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 100;
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: min(220px, 100%);
  /* Never wider than the composer card (the overlay anchor's width): long
     rows truncate instead of pushing the card past the composer's edge. */
  max-width: 100%;
  /* Height cap: the 320px design maximum, clamped at runtime to the space
   * above the composer (inline max-height set in PopupSelectView.tsx). */
  max-height: 320px;
  overflow: hidden;
  /* Elevated surface: the scrollbar thumb takes the l2 elevation tokens
     (see ui-theme styles/scrollbar.css for the rebinding contract). */
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
  border: 1px solid var(--dsw-alias-border-inverted);
  border-radius: 12px;
  background: var(--dsw-specific-menu);
  box-shadow: var(--dsw-shadow-lv3);
  outline: none;
}

.viewport {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--dsw-alias-label-primary);
}

.rowActive {
  background: var(--dsw-alias-interactive-bg-hover);
}

.label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail {
  font-size: 12px;
  color: var(--dsw-alias-label-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.check {
  display: inline-flex;
  flex: none;
  color: var(--dsw-alias-label-primary);
}

.status {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--dsw-alias-label-tertiary);
}

.search {
  margin: 2px 2px 4px;
  padding: 6px 8px;
  border: 1px solid var(--dsw-alias-border-inverted);
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--dsw-alias-label-primary);
  outline: none;
}

.error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--dsw-alias-state-error-primary);
}

.errorText {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.retry {
  padding: 2px 8px;
  border: 1px solid var(--dsw-alias-border-inverted);
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  color: var(--dsw-alias-label-primary);
  cursor: pointer;
}
