fix(ai): clarify config save feedback and model selection

frontend/src/style.css

@@ -976,6 +976,91 @@ dialog header h2 {
 .dialog-body {
   padding: 23px;
 }
+.ai-config-fields {
+  border: 0;
+  padding: 0;
+  margin: 0 0 18px;
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+}
+.ai-config-success {
+  padding: 12px 16px;
+  border: 1px solid #b8d8c9;
+  border-radius: 5px;
+  color: var(--green);
+  background: #edf7f1;
+}
+.ai-config-footer {
+  flex-wrap: wrap;
+}
+.ai-config-feedback {
+  flex: 1 1 220px;
+  min-width: 0;
+}
+.ai-config-feedback p {
+  margin: 0;
+}
+.ai-config-feedback:empty {
+  display: none;
+}
+.ai-config-summary {
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: #f7f9f8;
+  overflow-wrap: anywhere;
+}
+.ai-config-summary p:last-child {
+  margin-bottom: 0;
+}
+.ai-config-summary .tag {
+  margin-left: 10px;
+}
+.ai-models {
+  margin: 20px 0;
+}
+.ai-models-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.ai-models-heading h3 {
+  margin: 0;
+}
+.ai-model-options {
+  display: grid;
+  gap: 8px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.ai-model-option {
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  padding: 12px;
+  cursor: pointer;
+}
+.ai-model-option:has(input:checked) {
+  border-color: var(--green);
+  background: #edf7f1;
+}
+.ai-model-option input {
+  flex: none;
+  width: 16px;
+  min-height: 16px;
+  margin: 0;
+  accent-color: var(--green);
+}
+.ai-model-option > span:first-of-type {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .dialog-body table input {
   width: 145px;
 }
@@ -1518,6 +1603,9 @@ details {
   dialog footer > span {
     width: 100%;
   }
+  .ai-config-feedback {
+    flex-basis: 100%;
+  }
   .form-row {
     gap: 12px;
   }