.gpt-rule-composer {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  border-top: 1px solid #2b3442;
  padding-top: 12px;
}
.gpt-rule-composer.confirmed { border-top-color: rgba(54, 211, 153, .65); }
.gpt-rule-head,
.gpt-rule-actions,
.gpt-rule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gpt-rule-head strong,
.gpt-rule-summary strong { color: #f3f7fb; font-size: 12px; }
.gpt-rule-head span,
.gpt-rule-summary span { color: #8792a2; font-size: 11px; }
.gpt-rule-composer.confirmed .gpt-rule-head span { color: #36d399; }
.gpt-rule-composer textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  line-height: 1.55;
}
.gpt-rule-actions { justify-content: flex-start; }
.gpt-rule-error,
.gpt-rule-warning { margin: 0; color: #fca5a5; font-size: 11px; line-height: 1.5; }
.gpt-rule-error:empty { display: none; }
.gpt-rule-detail { display: grid; gap: 7px; }
.gpt-rule-detail:empty { display: none; }
.gpt-rule-detail ol { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: #c6ceda; font-size: 11px; line-height: 1.45; }
.gpt-rule-detail > button[data-rule-suggestion] { border: 0; padding: 0; color: #93c5fd; background: transparent; text-align: left; cursor: pointer; font-size: 11px; }
.gpt-rule-suggestion-title { color: #fbbf24; font-size: 11px; }
.gpt-rule-detail .primary-button { justify-self: start; }