/* Connecting a model provider: one form for every provider, at first run (in
   the auth card) and in Settings. Each provider-specific field or line names
   its providers in data-for-provider, and only the chosen provider's show:
   the checked radio when connecting, data-provider when editing one. */

.model-provider-form [data-for-provider] {
  display: none;
}

.model-provider-form:is(:has(input[value="anthropic"]:checked), [data-provider="anthropic"]) [data-for-provider~="anthropic"],
.model-provider-form:is(:has(input[value="openai"]:checked), [data-provider="openai"]) [data-for-provider~="openai"],
.model-provider-form:is(:has(input[value="google"]:checked), [data-provider="google"]) [data-for-provider~="google"],
.model-provider-form:is(:has(input[value="openrouter"]:checked), [data-provider="openrouter"]) [data-for-provider~="openrouter"],
.model-provider-form:is(:has(input[value="openai-compatible"]:checked), [data-provider="openai-compatible"]) [data-for-provider~="openai-compatible"] {
  display: revert;
}

/* The chooser sits flush with the first field in Settings' card */
.settings-field.kind-choice {
  margin-block-start: 0;
}

.model-provider-form__error {
  margin: 0 0 14px;
}

.model-provider-form__key-link {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.model-provider-form__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-block-start: 18px;
}

.model-provider-row__actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.model-provider-index__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-block-start: 16px;

  .settings-field__hint {
    margin: 0;
  }
}

/* The agent's model picker: models grouped under their connection */
.agent-model-picker__group + .agent-model-picker__group {
  margin-block-start: 18px;
}

.agent-model-picker__group .kind-choice__option {
  align-items: center;
}

.agent-model-picker__default {
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  margin-inline-start: auto;
}

.agent-model-picker__typed {
  flex: 1;
}

.agent-model-picker__group > legend {
  inline-size: 100%;
  padding: 0;
  text-align: start;
}

/* A catalogue lists dozens of models; the list scrolls, the buttons stay put */
.agent-model-picker {
  margin-block-start: 12px;
  max-block-size: min(60dvh, 520px);
  overflow-y: auto;
}