/* The AI picker pair (static/js/ai-model-picker.js): a key/provider <select> drawn by us (appearance: none + a
   chevron) and, beside it while a key entry is picked, its model field — ONE control style for every surface.
   Defined once here; a surface only sets the --ai-picker-* colours and size (and its own layout). Surfaces: the
   Assistant (.asst-model), the document AI dock (.ai-panel__provider), the wireframe Generate dialog
   (.wf-gen__provider) and the Media library's Seedance picker (.ai-picker). The model field's class is the select's
   class + "-model". */
.ai-picker, .asst-model, .ai-panel__provider, .wf-gen__provider,
.ai-picker-model, .asst-model-model, .ai-panel__provider-model, .wf-gen__provider-model {
  box-sizing: border-box;
  height: var(--ai-picker-h, 2.25rem);
  min-width: 0;
  padding: 0 var(--ai-picker-pad, 0.6rem);
  padding-right: var(--ai-picker-chevron-room, 1.8rem);
  border: 1px solid var(--ai-picker-border, var(--md-sys-color-outline));
  border-radius: var(--r-xs);
  background-color: var(--ai-picker-bg, transparent);
  color: var(--ai-picker-fg, var(--md-sys-color-on-surface));
  font: inherit;
  font-size: var(--ai-picker-font-size, inherit);
  line-height: 1;
  /* the chevron: two gradient strokes in the control's own colour — the model field opens a list too */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--ai-picker-chevron, 0.95rem)) 50%, calc(100% - var(--ai-picker-chevron, 0.95rem) + 0.3rem) 50%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}
.ai-picker, .asst-model, .ai-panel__provider, .wf-gen__provider {
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.ai-picker-model::placeholder, .asst-model-model::placeholder,
.ai-panel__provider-model::placeholder, .wf-gen__provider-model::placeholder {
  color: var(--ai-picker-placeholder, var(--md-sys-color-on-surface-variant));
  opacity: 0.8;
}
.ai-picker:hover, .asst-model:hover, .ai-panel__provider:hover, .wf-gen__provider:hover,
.ai-picker-model:hover, .asst-model-model:hover, .ai-panel__provider-model:hover, .wf-gen__provider-model:hover {
  border-color: var(--ai-picker-border-hover, var(--ai-picker-border, var(--md-sys-color-outline)));
  background-color: var(--ai-picker-bg-hover, var(--ai-picker-bg, transparent));
}
.ai-picker:focus, .asst-model:focus, .ai-panel__provider:focus, .wf-gen__provider:focus,
.ai-picker-model:focus, .asst-model-model:focus, .ai-panel__provider-model:focus, .wf-gen__provider-model:focus {
  outline: none;
  border-color: var(--ai-picker-focus, var(--md-sys-color-primary));
}
.ai-picker-model.is-invalid, .asst-model-model.is-invalid,
.ai-panel__provider-model.is-invalid, .wf-gen__provider-model.is-invalid { border-color: var(--md-sys-color-error); }