.hn-model-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.hn-model-fetch, .hn-model-select {
  min-height: 2.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
}
.hn-model-fetch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff;
  background: #4f46e5;
  border-color: #4f46e5;
  cursor: pointer;
  white-space: nowrap;
}
.hn-model-fetch:hover { background: #4338ca; }
.hn-model-fetch:disabled { opacity: 0.65; cursor: wait; }
.hn-model-select { width: 100%; min-width: 0; color: #0f172a; background: #fff; }
.hn-model-fetch:focus-visible, .hn-model-select:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.hn-model-status { grid-column: 1 / -1; margin: 0; color: #64748b; font-size: 0.75rem; line-height: 1.6; }
.hn-model-status[data-error="true"] { color: #b91c1c; }
.hn-model-status:empty { display: none; }
.hn-model-select[hidden], [data-handnote-model-input][hidden] { display: none !important; }
/* Wrap the existing input and mount host with this class to align the button. */
.hn-model-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}
.hn-model-field > [data-handnote-model-input] { grid-column: 1; width: 100%; min-width: 0; }
.hn-model-field .hn-model-host, .hn-model-field .hn-model-picker { display: contents; }
.hn-model-field .hn-model-fetch { grid-column: 2; grid-row: 1; }
.hn-model-field .hn-model-select { grid-column: 1; grid-row: 1; }
.hn-model-field .hn-model-status { grid-column: 1 / -1; }
.hn-model-spinner {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hn-model-spin 0.8s linear infinite;
}
@keyframes hn-model-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hn-model-spinner { animation: none; } }
@media (max-width: 380px) { .hn-model-picker { grid-template-columns: minmax(0, 1fr); } }