.ai-mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .75rem; margin: .85rem 0 .25rem; }
.ai-mode-option { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; text-align: left; width: 100%; padding: 1rem; background: transparent; color: inherit; border: 1px solid var(--border, #9ca3af); border-radius: 14px; }
.ai-mode-option[aria-pressed="true"] { border-color: var(--accent, #485d81); box-shadow: inset 0 0 0 1px var(--accent, #485d81); }
.ai-mode-option strong { font-size: .96rem; line-height: 1.35; }
.ai-mode-option:disabled { opacity: 1; cursor: default; color: var(--muted, #606b70); background: transparent; }
.ai-mode-option .ai-availability { margin-top: auto; padding-top: .35rem; font-size: .76rem; font-weight: 650; opacity: 1; }
.ai-mode-option [hidden] { display: none; }
.ai-mode-option span, .ai-help { font-size: .88rem; font-weight: 400; opacity: .82; line-height: 1.5; }
.ai-api-fields, .ai-local-fields { display: grid; gap: .9rem; margin-top: 1.25rem; }
.ai-api-fields[hidden], .ai-local-fields[hidden], .ai-mode-option[hidden], .ai-chatgpt-actions[hidden], .ai-management button[hidden], .ai-current-row [hidden] { display: none; }
.ai-local-fields [hidden], #chat-plan-usage[hidden] { display: none; }
.ai-local-fields h3, .ai-local-fields p { margin: 0; }
.ai-local-fields label { display: block; margin-bottom: .4rem; }
.ai-local-fields select { width: 100%; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
.ai-local-fields a, #chat-plan-usage { color: inherit; text-underline-offset: .2em; }
.ai-local-status { overflow-wrap: anywhere; line-height: 1.5; }
.ai-local-status.is-error { color: var(--danger, #b53e37); }
.ai-chatgpt-signin { width: 100%; min-height: 44px; background: #111; color: #fff; border: 1px solid #aaa; border-radius: 8px; font-weight: 600; }
.ai-chatgpt-signin:disabled { opacity: .55; }
.ai-plan-welcome { width: min(440px, calc(100vw - 2rem)); box-sizing: border-box; max-height: 85vh; overflow-y: auto; padding: 1.5rem; border-radius: 18px; line-height: 1.6; }
.ai-plan-welcome h2 { margin-top: 0; }
.ai-plan-welcome a { color: inherit; }
.ai-plan-welcome button { width: 100%; margin-top: .75rem; min-height: 44px; }
.ai-api-fields label { display: grid; gap: .4rem; }
.ai-api-fields input, .ai-api-fields select { width: 100%; min-width: 0; box-sizing: border-box; }
.ai-api-fields select { text-overflow: ellipsis; }
.ai-model-controls, .ai-management { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ai-status { line-height: 1.5; }
.ai-status:empty { display: none; }
.ai-status.is-error { color: var(--danger, #b53e37); }
.ai-current { font-weight: 600; overflow-wrap: anywhere; }
.ai-chatgpt-actions { line-height: 1.5; }
.ai-settings-dialog { width: min(640px, calc(100vw - 2rem)); max-height: 85vh; overflow-y: auto; }
#legacy-model-field[hidden] { display: none; }

.ai-current-row { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.ai-current-row .ai-current { margin: 0; }
.ai-current-row button { flex: 0 0 auto; }
.ai-secondary-actions { display: flex; justify-content: flex-end; }
.ai-secondary-actions button { min-height: 44px; padding: .35rem .2rem; font-size: .85rem; }
.ai-details { margin-top: .25rem; font-size: .85rem; }
.ai-details summary { width: fit-content; padding: .4rem 0; cursor: pointer; color: var(--muted, inherit); }
.ai-details .ai-help { margin: .45rem 0; }
.ai-management-details { margin-top: .75rem; }
.ai-management-details .ai-management { padding-top: .4rem; }

[data-ai-settings="onboarding"] .ai-secondary-actions,
[data-ai-settings="onboarding"] .ai-management-details { display: none; }

@media (max-width: 600px) {
  .ai-mode-options { grid-template-columns: 1fr; }
}