/* /agent — the reasoning-level <select> beside the model picker's
 * trigger (app/views/agent/_controls.html.erb). A native select at the
 * trigger's type size; it sits on the trigger's line and shrinks before the
 * trigger does, so at phone width the two stay on one line. Hidden for a
 * model that offers no reasoning levels. */

.agent-reasoning-select {
  flex: 0 3 auto;
  min-width: 0;
  max-width: 9rem; /* Note: wide enough for "Extra high" and the native arrow */
  padding: var(--spacing-4) var(--spacing-8);
  border: var(--stroke-weight-1) solid transparent;
  border-radius: var(--corner-radius-xs);
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  text-overflow: ellipsis;
  cursor: pointer;

  &:hover { background-color: var(--background-hover); color: var(--text-primary); }
  &[hidden] { display: none; }
}

.agent-model-controls .agent-model-trigger { flex: 0 1 auto; min-width: 0; }