/* AI 설정 화면(models)이 renderWorkspaceProviderPreferences 패널을 그린다:
 * .provider-preferences-*, .provider-family-*, .provider-switch*. */

.provider-preferences-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  padding: 20px 22px;
  box-shadow: var(--panel-shadow);
}

.provider-preferences-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.provider-preferences-head h2 {
  margin: 0 0 4px;
  font-size: var(--fs-5);
}

.provider-preferences-head p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-3);
  line-height: var(--lh-base);
  overflow-wrap: break-word;
  word-break: keep-all;
}

.provider-preferences-head span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: var(--fs-1);
  font-weight: 800;
}

/* 잔량 배지. 토글 격자 바로 위에 두어, 켜고 끄는 손이 그 결과를 같은 시선 안에서
 * 본다 -- 아래로 밀면 끄는 이유가 화면 밖에 남는다. 자리는 고정이고 숫자만 움직인다. */
.run-quota-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 600;
  word-break: keep-all;
}

.run-quota-badge b {
  margin-left: 2px;
  color: var(--text);
  font-size: var(--fs-4);
  font-weight: 800;
}

/* 마지막 한 번은 잔량을 넘겨도 전체 폭으로 돈다. 배지가 그 사실을 달고 있지 않으면
 * 남은 양보다 큰 소모량이 실패 예고로 읽힌다. */
.run-quota-badge.is-last-run {
  border-color: var(--brand-soft);
  background: var(--brand-soft);
}

.run-quota-badge em {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-dark);
  font-size: var(--fs-1);
  font-style: normal;
  font-weight: 800;
}

/* One card per engine family; variants are compact toggle switches inside it,
 * instead of one full-width row per web-on/web-off variant. */
.provider-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}

.provider-family-card {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface-soft);
}
.provider-family-card[data-any-active="false"] { background: var(--surface-muted); }

.provider-family-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.provider-family-head b { font-size: var(--fs-3); }
.provider-family-head span { color: var(--muted); font-size: var(--fs-1); font-weight: 800; }

/* One variant per line, not side by side: the ON/OFF badges have to land in one
 * vertical column so the card is read down the right edge. Side-by-side pills put
 * the badge wherever the variant name happened to end. */
.provider-switch-row {
  display: grid;
  gap: 4px;
}

.provider-switch {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.provider-switch:hover:not(:disabled) { background: var(--surface); border-color: var(--line); }
.provider-switch:disabled { cursor: default; opacity: .6; }

.provider-switch-copy { display: grid; gap: 1px; text-align: left; min-width: 0; }
.provider-switch-copy b { font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.provider-switch[aria-checked="true"] .provider-switch-copy b { color: var(--text); }
.provider-switch-copy small { color: var(--warning); font-size: var(--fs-1); font-weight: 700; }

/* The state is the control. A fixed width keeps ON and OFF the same size, so the
 * column stays a column when a card mixes the two. */
.provider-switch-state {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 3px 0;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  transition: background .14s ease, color .14s ease;
}
.provider-switch[aria-checked="true"] .provider-switch-state {
  background: var(--brand);
  color: #fff;
}
.provider-switch.is-blocked .provider-switch-state {
  background: var(--warning);
  color: #fff;
}

/* 플랜이 막아 둔 조합은 "꺼짐"이 아니라 "아직 못 켜는 것"이다. OFF와 같은 회색 알약으로
   두면 워크스페이스가 끈 것으로 읽히고, 끄면 아낄 수 있는 항목처럼 보인다 -- 눌리지 않는
   다는 사실을 점선 테두리로 남긴다. :disabled의 흐림은 되돌린다: 사유("Pro Max 필요")가
   읽혀야 업그레이드 유인이 서고, 사유는 경고색이 아니라 보조색으로 적는다. 문제가 아니라
   플랜 경계이기 때문이다. */
.provider-switch.is-locked:disabled { opacity: 1; }
.provider-switch.is-locked .provider-switch-copy small {
  color: var(--muted);
  font-weight: 600;
}
.provider-switch.is-locked .provider-switch-state {
  background: transparent;
  border: 1px dashed var(--line-strong);
  padding: 2px 0;
  color: var(--muted);
}