/* claudehub — overlay "Modelo & Provedor" (v1.1.0)
 * Usa os tokens e componentes nativos do projeto (Fibonacci + .surface/.form-card/.btn/.field).
 * Só estiliza o layout específico; cores, raios e espaçamentos vêm das variáveis do tema. */

/* ---- card injetado na aba Configurações (mesmo visual dos outros cards) ---- */
.prov-card { display: flex; flex-direction: column; gap: var(--fib-13); }
.prov-card__head { display: flex; flex-direction: column; gap: var(--fib-3); }
.prov-card__head h2 { margin: 0; font-size: var(--text-md); }
.prov-current {
  font-size: var(--text-sm); color: var(--ink-dim);
  padding: var(--fib-8) var(--fib-13);
  background: var(--surface-raised); border-radius: var(--r-8);
}
.prov-current b { color: var(--ink); font-weight: 600; }
.prov-card .prov-actions { display: flex; }

/* ---- modal (mesma base do .modal nativo) ---- */
.prov-modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: var(--fib-34);
  background: #0506089e; backdrop-filter: blur(var(--fib-5)); -webkit-backdrop-filter: blur(var(--fib-5));
  opacity: 0; pointer-events: none; transition: opacity var(--dur, .2s) var(--ease, ease);
}
.prov-modal[data-show="1"] { opacity: 1; pointer-events: auto; }

.prov-panel {
  inline-size: min(30rem, 96vw); max-block-size: min(88vh, 42rem);
  display: flex; flex-direction: column; gap: var(--fib-21); overflow-y: auto;
}
.prov-head { display: flex; align-items: center; gap: var(--fib-8); }
.prov-head h2 { margin: 0; font-size: var(--text-md); flex: 1; }
.prov-close { margin-inline-start: auto; font-size: var(--text-lg); line-height: 1; }

.prov-body { display: flex; flex-direction: column; gap: var(--fib-21); }
.prov-body > .field-hint { margin: 0; }

/* ---- escolha de provedor ---- */
.prov-choices { display: grid; gap: var(--fib-8); }
.prov-choice {
  display: flex; align-items: flex-start; gap: var(--fib-13);
  padding: var(--fib-13); border: var(--fib-1) solid var(--line-strong); border-radius: var(--r-13);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur-fast, .12s) var(--ease), background var(--dur-fast, .12s) var(--ease);
}
.prov-choice:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line-strong)); }
.prov-choice input { margin-block-start: var(--fib-3); accent-color: var(--brand); }
.prov-choice__txt { display: flex; flex-direction: column; gap: var(--fib-2); }
.prov-choice__txt b { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.prov-choice__txt small { color: var(--ink-dim); font-size: var(--text-xs); }
.prov-choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-wash);
}

/* ---- campos (usa .field/.field-label nativos; só o layout do wrapper) ---- */
.prov-field { display: flex; flex-direction: column; gap: var(--fib-5); }
.prov-field[data-show="0"] { display: none; }

.prov-actions { display: flex; justify-content: flex-end; gap: var(--fib-8); }