codex-overleaf-link 2.0.0 → 2.1.1

package/extension/styles/panel.css

@@ -2,6 +2,455 @@
   --codex-overleaf-panel-width: 380px;
 }
 
+/* v2.1 provider profiles: detailed configuration lives in a viewport modal. */
+.codex-provider-settings-entry {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.codex-provider-settings-entry-copy {
+  min-width: 0;
+}
+
+.codex-provider-settings-summary {
+  margin: 5px 0 0;
+  color: #92d99a;
+  font-size: 12px;
+}
+
+.codex-provider-settings-summary[data-tone="warning"] { color: #d9bd78; }
+.codex-provider-settings-summary[data-tone="failed"] { color: #ef8f84; }
+
+.codex-provider-experimental-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 19px;
+  padding: 0 7px;
+  border: 1px solid rgba(217, 189, 120, 0.42);
+  border-radius: 999px;
+  background: rgba(217, 189, 120, 0.08);
+  color: #d9bd78;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.035em;
+  white-space: nowrap;
+}
+
+.codex-provider-dialog-root {
+  --provider-bg: var(--provider-panel-bg, #151716);
+  --provider-surface: #1c1f1d;
+  --provider-surface-raised: #222622;
+  --provider-line: rgba(255, 255, 255, 0.12);
+  --provider-muted: #a0a59f;
+  --provider-accent: #79d58a;
+  --provider-danger: #ef8176;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483600;
+  color: var(--provider-panel-color, #eef0ec);
+  font-family: "Aptos", "SF Pro Text", sans-serif;
+}
+
+.codex-provider-dialog-root[hidden] { display: none !important; }
+
+.codex-provider-dialog-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(4, 7, 5, 0.68);
+  backdrop-filter: blur(3px);
+}
+
+.codex-provider-dialog {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  width: min(800px, calc(100vw - 32px));
+  height: min(680px, calc(100vh - 32px));
+  max-height: 82vh;
+  overflow: hidden;
+  border: 1px solid var(--provider-line);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at 92% -8%, rgba(83, 177, 105, 0.13), transparent 34%),
+    var(--provider-bg);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
+}
+
+.codex-provider-dialog-head,
+.codex-provider-dialog-foot {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--provider-line);
+}
+
+.codex-provider-dialog-head h2,
+.codex-provider-detail h3 {
+  margin: 0;
+  color: inherit;
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.codex-provider-dialog-heading { min-width: 0; }
+
+.codex-provider-dialog-titleline {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+}
+
+.codex-provider-dialog-head p,
+.codex-provider-detail-titleline p,
+.codex-provider-builtin p {
+  margin: 6px 0 0;
+  color: var(--provider-muted);
+  font-size: 12px;
+}
+
+.codex-provider-dialog-close {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--provider-muted);
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.codex-provider-dialog-close:hover { background: rgba(255, 255, 255, 0.07); color: inherit; }
+
+.codex-provider-dialog-body {
+  min-height: 0;
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: 205px minmax(0, 1fr);
+}
+
+.codex-provider-list {
+  min-width: 0;
+  padding: 14px 10px;
+  overflow: auto;
+  border-right: 1px solid var(--provider-line);
+  background: rgba(0, 0, 0, 0.09);
+}
+
+.codex-provider-row,
+.codex-provider-add {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 3px;
+  padding: 10px 11px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.codex-provider-row:hover,
+.codex-provider-row[aria-current="true"] { background: rgba(255, 255, 255, 0.07); }
+.codex-provider-row[aria-current="true"] { box-shadow: inset 2px 0 var(--provider-accent); }
+.codex-provider-row-main { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 650; white-space: nowrap; }
+.codex-provider-row-status { color: var(--provider-muted); font-size: 11px; }
+.codex-provider-row-status[data-tone="active"] { color: var(--provider-accent); }
+.codex-provider-add { margin-top: 8px; color: var(--provider-accent); }
+
+.codex-provider-detail {
+  min-width: 0;
+  padding: 22px 24px 28px;
+  overflow: auto;
+}
+
+.codex-provider-detail-titleline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.codex-provider-active-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 9px;
+  border: 1px solid rgba(121, 213, 138, 0.42);
+  border-radius: 999px;
+  color: var(--provider-accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.codex-provider-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.codex-provider-field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  color: #dfe3dd;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.codex-provider-field--wide { grid-column: 1 / -1; }
+
+.codex-provider-field input,
+.codex-provider-field textarea,
+.codex-provider-field select {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 38px;
+  padding: 8px 10px;
+  border: 1px solid var(--provider-line);
+  border-radius: 8px;
+  outline: 0;
+  background: rgba(255, 255, 255, 0.035);
+  color: inherit;
+  font: inherit;
+  font-weight: 450;
+}
+
+.codex-provider-field textarea { resize: vertical; }
+.codex-provider-field input:focus,
+.codex-provider-field textarea:focus,
+.codex-provider-field select:focus { border-color: rgba(121, 213, 138, 0.7); box-shadow: 0 0 0 3px rgba(121, 213, 138, 0.1); }
+.codex-provider-field small { color: var(--provider-muted); font-size: 11px; font-weight: 450; }
+.codex-provider-secret-row { display: flex; gap: 8px; }
+
+.codex-provider-advanced {
+  margin-top: 18px;
+  padding: 14px 0;
+  border-top: 1px solid var(--provider-line);
+  border-bottom: 1px solid var(--provider-line);
+}
+
+.codex-provider-advanced summary { color: var(--provider-muted); cursor: pointer; font-size: 12px; font-weight: 650; }
+.codex-provider-advanced[open] summary { margin-bottom: 14px; color: inherit; }
+
+.codex-provider-disclosure {
+  display: flex;
+  gap: 9px;
+  margin-top: 18px;
+  padding: 12px;
+  border-radius: 9px;
+  background: rgba(217, 189, 120, 0.09);
+  color: #d8c892;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.codex-provider-test-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  margin-top: 18px;
+  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.085);
+  border-radius: 12px;
+  background:
+    radial-gradient(circle at 0 0, rgba(121, 213, 138, 0.08), transparent 44%),
+    rgba(255, 255, 255, 0.025);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+}
+
+.codex-provider-test-copy { display: grid; gap: 3px; min-width: 0; }
+.codex-provider-test-copy strong { color: var(--provider-text); font-size: 12px; font-weight: 750; letter-spacing: 0.01em; }
+.codex-provider-test-copy > span { color: var(--provider-muted); font-size: 11px; line-height: 1.4; }
+
+.codex-provider-test-controls {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto;
+  align-items: end;
+  gap: 10px;
+  min-width: 0;
+}
+
+.codex-provider-test-model { display: grid; gap: 6px; min-width: 0; }
+.codex-provider-test-model-label {
+  color: var(--provider-muted);
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.codex-provider-test-select-shell { position: relative; display: block; min-width: 0; border-radius: 9px; }
+.codex-provider-test-select-shell select {
+  width: 100%;
+  min-width: 0;
+  min-height: 40px;
+  padding: 0 38px 0 12px;
+  border: 1px solid var(--provider-line);
+  border-radius: 9px;
+  appearance: none;
+  -webkit-appearance: none;
+  background: rgba(7, 12, 10, 0.58);
+  color: var(--provider-text);
+  color-scheme: dark;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1;
+  outline: none;
+  cursor: pointer;
+}
+.codex-provider-test-select-shell select:hover { border-color: rgba(121, 213, 138, 0.34); background: rgba(12, 19, 15, 0.72); }
+.codex-provider-test-select-shell:focus-within { box-shadow: 0 0 0 3px rgba(121, 213, 138, 0.12); }
+.codex-provider-test-select-shell:focus-within select { border-color: rgba(121, 213, 138, 0.66); }
+.codex-provider-test-chevron {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 16px;
+  height: 16px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--provider-muted);
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.codex-provider-test-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid rgba(121, 213, 138, 0.36);
+  border-radius: 9px;
+  background: linear-gradient(180deg, rgba(66, 132, 78, 0.38), rgba(42, 91, 52, 0.34));
+  color: #b8edc2;
+  box-shadow: 0 5px 15px rgba(6, 19, 10, 0.16);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
+}
+.codex-provider-test-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
+.codex-provider-test-button:not(:disabled):hover {
+  border-color: rgba(121, 213, 138, 0.7);
+  background: linear-gradient(180deg, rgba(72, 151, 88, 0.5), rgba(44, 102, 57, 0.46));
+  color: #d4f7da;
+  transform: translateY(-1px);
+}
+.codex-provider-test-button:not(:disabled):active { transform: translateY(0); }
+.codex-provider-test-button[data-provider-action="cancel-test"] { border-color: rgba(242, 129, 113, 0.42); background: rgba(122, 55, 47, 0.24); color: #f3aaa0; }
+
+.codex-provider-test-state { min-height: 16px; color: var(--provider-muted); font-size: 11px; line-height: 1.4; }
+.codex-provider-test-state:empty { display: none; }
+.codex-provider-test-state[data-tone="success"] { color: var(--provider-accent); }
+.codex-provider-test-state[data-tone="failed"] { color: var(--provider-danger); }
+
+.codex-provider-dialog-foot {
+  min-height: 70px;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  border-top: 1px solid var(--provider-line);
+  border-bottom: 0;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.codex-provider-operation-status { min-width: 0; color: var(--provider-muted); font-size: 11px; }
+.codex-provider-operation-status[data-tone="success"] { color: var(--provider-accent); }
+.codex-provider-operation-status[data-tone="failed"] { color: var(--provider-danger); }
+.codex-provider-operation-status[data-tone="progress"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border: 2px solid rgba(121, 213, 138, 0.3); border-top-color: var(--provider-accent); border-radius: 50%; animation: codex-provider-spin 0.8s linear infinite; }
+
+.codex-provider-footer-actions { display: flex; align-items: center; gap: 8px; }
+.codex-provider-footer-spacer { width: 8px; }
+.codex-provider-primary-button,
+.codex-provider-secondary-button,
+.codex-provider-danger-button,
+.codex-provider-inline-button {
+  min-height: 34px;
+  padding: 0 13px;
+  border: 1px solid var(--provider-line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.codex-provider-primary-button { border-color: #56ac68; background: #397b48; color: #fff; }
+.codex-provider-secondary-button[data-provider-action="save"]:not(:disabled) {
+  border-color: #5dbb72;
+  background: linear-gradient(180deg, #3f8d51 0%, #337342 100%);
+  color: #fff;
+  box-shadow: 0 0 0 1px rgba(121, 213, 138, 0.08), 0 4px 12px rgba(22, 83, 39, 0.22);
+}
+.codex-provider-secondary-button[data-provider-action="save"]:not(:disabled):hover {
+  border-color: #79d58a;
+  background: linear-gradient(180deg, #499d5c 0%, #397f49 100%);
+}
+.codex-provider-secondary-button[data-provider-action="save"]:disabled {
+  border-color: var(--provider-line);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--provider-muted);
+  box-shadow: none;
+}
+.codex-provider-danger-button { color: var(--provider-danger); }
+.codex-provider-inline-button { flex: 0 0 auto; }
+.codex-provider-dialog-root button:disabled,
+.codex-provider-dialog-root input:disabled,
+.codex-provider-dialog-root select:disabled,
+.codex-provider-dialog-root textarea:disabled { cursor: not-allowed; opacity: 0.5; }
+
+.codex-provider-builtin { max-width: 430px; padding-top: 34px; }
+.codex-provider-builtin-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: linear-gradient(145deg, #3f8d51, #255932); color: #fff; font-size: 21px; font-weight: 800; }
+.codex-provider-builtin-mark svg { display: block; width: 27px; height: 27px; fill: currentColor; }
+.codex-provider-builtin .codex-provider-active-badge,
+.codex-provider-builtin button { margin-top: 18px; }
+
+@media (max-width: 620px) {
+  .codex-provider-test-controls { grid-template-columns: 1fr; align-items: stretch; }
+  .codex-provider-test-button { width: 100%; }
+}
+
+@keyframes codex-provider-spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 720px) {
+  .codex-provider-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: none; border-radius: 12px; }
+  .codex-provider-dialog-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
+  .codex-provider-list { display: flex; gap: 6px; padding: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--provider-line); }
+  .codex-provider-row,
+  .codex-provider-add { flex: 0 0 150px; margin-top: 0; }
+  .codex-provider-form-grid { grid-template-columns: 1fr; }
+  .codex-provider-field--wide { grid-column: auto; }
+  .codex-provider-dialog-head,
+  .codex-provider-dialog-foot,
+  .codex-provider-detail { padding-left: 16px; padding-right: 16px; }
+}
+
 :root.codex-overleaf-panel-mounted:not(.codex-overleaf-panel-compact) body {
   box-sizing: border-box;
   width: calc(100vw - var(--codex-overleaf-panel-width)) !important;
@@ -1845,6 +2294,9 @@
 
 #codex-overleaf-panel .run-activity-list {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-width: 0;
+  max-width: 100%;
   gap: 0;
   margin-top: 2px;
 }
@@ -1986,6 +2438,10 @@
 }
 
 #codex-overleaf-panel .run-stream {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   margin: 6px 0 2px;
   color: var(--tl-fg-1);
   border-left: 2px solid var(--tl-border);
@@ -2003,12 +2459,58 @@
 }
 
 #codex-overleaf-panel .run-stream-text {
+  min-width: 0;
+  max-width: 100%;
   white-space: pre-wrap;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: normal;
   font-size: 12px;
   line-height: 1.48;
 }
 
+#codex-overleaf-panel .run-stream-text > * {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+#codex-overleaf-panel .run-math {
+  max-width: 100%;
+  color: inherit;
+  font-size: 1.02em;
+}
+
+#codex-overleaf-panel .run-math--inline {
+  display: inline-block;
+  overflow-x: auto;
+  overflow-y: hidden;
+  vertical-align: -0.15em;
+}
+
+#codex-overleaf-panel .run-math--display {
+  display: block;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: 8px 0;
+  padding: 2px 0 4px;
+}
+
+#codex-overleaf-panel .run-math--display .katex-display {
+  min-width: max-content;
+  margin: 0;
+  text-align: left;
+}
+
+#codex-overleaf-panel .run-math--fallback {
+  border-radius: 4px;
+  background: var(--tl-surface-2);
+  color: var(--tl-review);
+  padding: 1px 4px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font: 0.96em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
 #codex-overleaf-panel .run-stream[data-stream-role="reasoning"] .run-stream-text {
   color: var(--tl-fg-3);
 }
@@ -2047,6 +2549,8 @@
 }
 
 #codex-overleaf-panel .run-process {
+  min-width: 0;
+  max-width: 100%;
   margin-top: 4px;
 }
 
@@ -3044,6 +3548,101 @@
   font-size: 12px;
 }
 
+#codex-overleaf-panel .codex-context-actions {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  gap: 5px;
+}
+
+#codex-overleaf-panel .codex-context-sync-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  color: var(--tl-fg-3);
+  transition: color 140ms ease, opacity 140ms ease;
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="idle"] {
+  visibility: hidden;
+}
+
+#codex-overleaf-panel .codex-context-sync-status svg {
+  width: 16px;
+  height: 16px;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+#codex-overleaf-panel .codex-context-sync-ring,
+#codex-overleaf-panel .codex-context-sync-check,
+#codex-overleaf-panel .codex-context-sync-alert {
+  display: none;
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="tree-loading"] .codex-context-sync-ring,
+#codex-overleaf-panel .codex-context-sync-status[data-state="exact-loading"] .codex-context-sync-ring {
+  display: block;
+  stroke-dasharray: 28 14;
+  transform-origin: 10px 10px;
+  animation: codex-context-sync-spin 850ms linear infinite;
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="exact-loading"] {
+  color: var(--tl-accent);
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="exact-ready"] {
+  color: var(--tl-ok);
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="exact-ready"] .codex-context-sync-check {
+  display: block;
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="partial"] {
+  color: var(--tl-warn, #d6b36a);
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="partial"] .codex-context-sync-ring,
+#codex-overleaf-panel .codex-context-sync-status[data-state="partial"] .codex-context-sync-alert {
+  display: block;
+}
+
+#codex-overleaf-panel .codex-context-sync-status[data-state="partial"] .codex-context-sync-ring {
+  stroke-dasharray: none;
+}
+
+#codex-overleaf-panel .codex-context-sync-copy {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes codex-context-sync-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #codex-overleaf-panel .codex-context-sync-status .codex-context-sync-ring {
+    animation: none;
+  }
+}
+
 #codex-overleaf-panel .codex-context-head button {
   display: inline-flex;
   align-items: center;
@@ -4192,3 +4791,92 @@
     animation: none;
   }
 }
+.codex-provider-dialog-root .codex-provider-capability-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+  gap: 4px 18px;
+  margin-top: 3px;
+}
+
+.codex-provider-dialog-root .codex-provider-capability-option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  padding: 5px 6px;
+  border-radius: 6px;
+  color: var(--tl-fg-2);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.35;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+}
+
+.codex-provider-dialog-root .codex-provider-capability-option:hover {
+  color: var(--tl-fg-1);
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.codex-provider-dialog-root .codex-provider-capability-option--wide {
+  grid-column: 1 / -1;
+}
+
+.codex-provider-dialog-root .codex-provider-field .codex-provider-capability-input {
+  position: absolute;
+  width: 1px !important;
+  height: 1px !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  background: transparent !important;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.codex-provider-dialog-root .codex-provider-capability-control {
+  position: relative;
+  display: grid;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  box-sizing: border-box;
+  border: 1px solid var(--tl-border-strong);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.025);
+  transition:
+    border-color 120ms ease,
+    background 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.codex-provider-dialog-root .codex-provider-capability-input:focus-visible + .codex-provider-capability-control {
+  outline: 2px solid color-mix(in srgb, var(--tl-ok) 62%, transparent);
+  outline-offset: 2px;
+}
+
+.codex-provider-dialog-root .codex-provider-capability-input:checked + .codex-provider-capability-control {
+  border-color: var(--tl-ok);
+  background: var(--tl-ok);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tl-ok) 18%, transparent);
+}
+
+.codex-provider-dialog-root .codex-provider-capability-input:checked + .codex-provider-capability-control::after {
+  content: "";
+  width: 4px;
+  height: 8px;
+  margin-top: -2px;
+  border-right: 2px solid #102016;
+  border-bottom: 2px solid #102016;
+  transform: rotate(45deg);
+}