.inference-page {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.inference-heading {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: flex-start;
 flex-wrap: wrap;
}

.inference-lead {
 max-width: 62ch;
}

.inference-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

.inference-steps {
 margin: 0;
 padding-left: 1.2rem;
}

.inference-endpoint {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
}

.inference-code {
 font-family:
  ui-monospace, SFMono-Regular,
  monospace;
 font-size: var(--text-xs);
 white-space: pre-wrap;
 word-break: break-all;
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px;
}

.inference-grid,
.inference-user {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.inference-key-head {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: flex-start;
 flex-wrap: wrap;
}

.inference-meters {
 display: grid;
 grid-template-columns: repeat(
  auto-fit,
  minmax(180px, 1fr)
 );
 gap: 12px 16px;
}

.inference-meter-label,
.inference-meter-value {
 font-size: var(--text-xs);
}

.inference-meter-track {
 height: 8px;
 margin: 6px 0;
 border-radius: 999px;
 background: var(--border);
 overflow: hidden;
}

.inference-meter-fill {
 height: 100%;
 background: var(--primary);
}

.inference-meter-fill.is-over {
 background: var(--destructive);
}

.inference-key-list {
 display: flex;
 flex-direction: column;
}

.inference-key-row {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 flex-wrap: wrap;
 padding: 10px 0;
 border-top: 1px solid var(--border);
}

.inference-models {
 display: flex;
 flex-direction: column;
 gap: 6px;
 max-height: 220px;
 overflow: auto;
}

.inference-check {
 display: flex;
 gap: 8px;
 align-items: center;
}

.inference-budget-grid {
 display: grid;
 grid-template-columns: repeat(
  auto-fit,
  minmax(180px, 1fr)
 );
 gap: 12px;
}

.dialog.inference-key-dialog {
 max-width: min(
  72rem,
  calc(100vw - 32px)
 );
}

.inference-model-table {
 max-height: 320px;
 overflow: auto;
}

.inference-model-title,
.inference-allowed-model,
.inference-search-hit {
 display: inline-flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
}

.inference-model-id,
.inference-price,
.inference-call-estimate,
.inference-props {
 font-size: var(--text-xs);
}

.inference-size {
 font-size: var(--text-xs);
 letter-spacing: 0.04em;
 color: var(--muted-foreground);
 white-space: nowrap;
}

.inference-size-heading {
 font-size: var(--text-xs);
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.inference-search-results {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-height: 220px;
 overflow: auto;
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 8px;
}

.inference-search-results[hidden] {
 display: none;
}

.inference-search-group {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.inference-search-hit {
 width: 100%;
 text-align: left;
 background: transparent;
 border: 0;
 padding: 4px 2px;
 cursor: pointer;
 color: inherit;
}

.inference-search-hit:hover {
 background: var(--accent, transparent);
}

.inference-provider-bar,
.inference-custom-row,
.inference-preset,
.inference-allowed-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.inference-provider-bar .input,
.inference-custom-row .input {
 flex: 1 1 16rem;
}

.inference-size-toggle {
 display: inline-flex;
 border: 1px solid var(--border);
 border-radius: 8px;
 overflow: hidden;
}

.inference-size-toggle button {
 border: 0;
 background: transparent;
 padding: 6px 10px;
 cursor: pointer;
 color: inherit;
}

.inference-size-toggle
 button[aria-pressed='true'] {
 background: var(--primary);
 color: var(--primary-foreground);
}

.inference-preset .input {
 width: auto;
}

.inference-preset input[type='number'] {
 width: 6rem;
}

.inference-allowed {
 display: flex;
 flex-direction: column;
 gap: 6px;
}