.trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 220px;
  height: 28px;
  padding: 0 4px 0 8px;
  border: none;
  /* Rounded chip chrome, matching the sibling model trigger. */
  border-radius: 24px;
  outline: none;
  background: transparent;
  color: var(--dsw-alias-label-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

.trigger:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover);
}

.trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
}

.trigger:disabled {
  color: var(--dsw-alias-label-dimmed);
  cursor: default;
}

.triggerIcon {
  display: inline-flex;
  flex: 0 0 auto;
}

/* The shared 16px glyphs render one step smaller on the exposed trigger;
   the dropdown rows keep the full 16px. */
.triggerIcon svg {
  width: 14px;
  height: 14px;
}

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

.chevron {
  flex: 0 0 auto;
  color: var(--dsw-alias-label-caption);
  transition: transform 120ms ease;
}

/* Narrow composer: the trigger collapses to icon + chevron so the row keeps
   fitting. Only triggers that actually carry a mode glyph drop their label —
   a host-configured mode without one keeps its text as the sole identifier.
   The 460px cut is the point where the row (attach + modes + model + send)
   starts squeezing labels; the container is the composer row (InputBar .row —
   anonymous query because CSS modules hash container-names per module). */
@container (max-width: 460px) {
  .trigger:has(.triggerIcon) .triggerLabel {
    display: none;
  }
}

.chevronOpen {
  transform: rotate(180deg);
}
