.ai-feedback-activity { border: 1px solid #c9d8e2; border-left: 4px solid #297a85; border-radius: .4rem; padding: 1.2rem; margin: 1.5rem 0; }
.ai-feedback-activity > label { display: block; font-weight: 600; margin: .7rem 0 .3rem; }
.ai-feedback-activity textarea { display: block; width: 100%; padding: .75rem; border: 1px solid #8a9ba8; border-radius: .3rem; font: inherit; resize: vertical; }
.ai-feedback-activity input[type="file"] { display: block; width: 100%; max-width: 100%; min-width: 0; font: inherit; }
/* Common CTM button size, shared by all CTM components (math-exercise,
   py-exercise, pyodide-interaktiv, ai-feedback). Set the --ctm-button-*
   variables in your CSS or theme to change all of them together. */
.ai-feedback-button { color: #fff; background: #216875; border: 1px solid #216875; margin: .6rem .4rem .3rem 0; font-family: inherit; font-weight: inherit; cursor: pointer;
  font-size: var(--ctm-button-font-size, .875rem);
  padding: var(--ctm-button-padding-y, .375rem) var(--ctm-button-padding-x, .75rem);
  line-height: var(--ctm-button-line-height, 1.5);
  border-radius: var(--ctm-button-radius, var(--bs-border-radius, .375rem));
}
.ai-feedback-button:disabled { opacity: .6; cursor: wait; }
.ai-feedback-button:focus-visible, .ai-feedback-activity textarea:focus-visible { outline: 3px solid #db9e37; outline-offset: 2px; }
.ai-feedback-settings { padding: 1.2rem; background: #f8fbfc; color: #173440; border: 1px solid #a4bbc5; border-radius: .6rem; width: min(700px,90vw); max-height: 85vh; overflow-y: auto; }
.ai-feedback-settings::backdrop { background: rgb(15 34 45 / 45%); }
.ai-feedback-settings h2 { font-size: 1.25rem; display: inline-block; margin-right: 1rem; }
.ai-feedback-gear { color: #216875; background: transparent; }
.ai-feedback-settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: .8rem; margin-top: 1rem; }
.ai-feedback-settings-grid label { display: flex; flex-direction: column; gap: .3rem; }
.ai-feedback-settings-grid input, .ai-feedback-settings-grid select { padding: .4rem; width: 100%; }
.ai-feedback-notice { font-size: .85rem; color: #425b66; grid-column: 1 / -1; }
.ai-feedback-output:not(:empty) { border-top: 1px solid #c9d8e2; margin-top: .8rem; padding-top: .8rem; }
.ai-feedback-prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow-y: auto; padding: .8rem; background: #f3f6f7; }
.ai-feedback-images { display: flex; gap: .6rem; flex-wrap: wrap; }
.ai-feedback-images img { max-width: 180px; max-height: 180px; object-fit: contain; border: 1px solid #c9d8e2; }
.ai-feedback-images figure { margin: .5rem 0; }
.ai-feedback-images figure a { display: block; }
.ai-feedback-context, .ai-context, .math-exercise-context, .feedback-source { background: #f5f8f9; padding: .8rem 1rem; border-radius: .3rem; margin: .8rem 0; }
.ai-feedback-hint { font-size: .85rem; font-weight: 600; }
.ai-feedback-body table { width: 100%; border-collapse: collapse; }
.ai-feedback-body td, .ai-feedback-body th { border: 1px solid #c9d8e2; padding: .3rem; }

.ai-feedback-body .katex-display { overflow-x: auto; overflow-y: hidden; }