.message .message-body {
  background: #f3f3f2;
  border-radius: 4px 14px 14px 14px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.message .message-body.loading {
  color: #666;
  font-weight: 600;
}
.message .message-body.loading::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  margin-left: 2px;
  animation: aria-dots 1.2s steps(4, end) infinite;
}
@keyframes aria-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
/* content animation needs a real element in some browsers — use opacity pulse as fallback */
.message .message-body.loading {
  background: linear-gradient(90deg, #f3f3f2 0%, #fff0f1 45%, #f3f3f2 90%);
  background-size: 200% 100%;
  animation: aria-load-shimmer 1.35s ease-in-out infinite;
}
@keyframes aria-load-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.message .message-body > p { margin: 0; background: none; border-radius: 0; padding: 0; white-space: normal; }
.message .message-body > p + p { margin-top: 9px; }
.message.user .message-body { background: #242424; color: #fff; border-radius: 14px 4px 14px 14px; }
.message.user .message-body > p { color: inherit; }
.markdown h3, .markdown h4, .markdown h5, .markdown h6 { font: 700 1em/1.35 Manrope; margin: 13px 0 6px; }
.markdown h3:first-child, .markdown h4:first-child { margin-top: 0; }
.markdown ul, .markdown ol { margin: 7px 0; padding-left: 21px; }
.markdown li + li { margin-top: 3px; }
.markdown a { color: var(--red2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.markdown code { font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; background: rgba(0,0,0,.07); padding: 2px 5px; border-radius: 4px; }
.markdown pre { margin: 9px 0; padding: 11px 12px; background: #202124; color: #f5f5f5; border-radius: 9px; overflow: auto; white-space: pre; }
.markdown pre code { padding: 0; background: none; color: inherit; }
.markdown blockquote { margin: 9px 0; padding: 2px 0 2px 11px; border-left: 3px solid var(--red); color: #555; }
.markdown blockquote p { margin: 4px 0; }
.markdown del { color: #888; }
.markdown .md-table-wrap { margin: 10px 0; overflow-x: auto; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; }
.markdown .md-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 280px; }
.markdown .md-table th, .markdown .md-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.markdown .md-table th { background: #f6f6f5; font: 700 11px Manrope; color: #444; white-space: nowrap; }
.markdown .md-table tr:last-child td { border-bottom: 0; }
.markdown .md-table td { color: #222; }
.markdown .md-table tbody tr:nth-child(even) td { background: #fafafa; }
.markdown .md-img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
.markdown .md-chart-ref { display: inline-block; margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #fff0f1; color: #8d0008; font: 600 12px Manrope; border: 1px solid #ffd6d9; }
.markdown .md-chart-ref::before { content: "▸ "; }
.markdown .md-math { color: #171717; }
.markdown .md-math-display {
  display: block;
  margin: 12px 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  text-align: center;
  line-height: 1.4;
}
.markdown .md-math-inline {
  display: inline-block;
  padding: 0 2px;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
}
.markdown .md-math .katex { font-size: 1.08em; }
.markdown .md-math-display .katex { font-size: 1.18em; }

.role-chip { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #8d0008; background: #fff0f1; border: 1px solid #ffd6d9; border-radius: 20px; padding: 6px 9px; }
.persona-control { display: flex; align-items: center; gap: 7px; }
.persona-control label { font-size: 7px; letter-spacing: .12em; color: #999; font-weight: 800; }
.persona-control select { appearance: none; border: 1px solid #ddd; border-radius: 9px; background: #fff0f1; color: #8d0008; font: 800 9px 'DM Sans'; padding: 8px 25px 8px 10px; background-image: linear-gradient(45deg,transparent 50%,#a6000a 50%),linear-gradient(135deg,#a6000a 50%,transparent 50%); background-position: calc(100% - 12px) 12px,calc(100% - 8px) 12px; background-size: 4px 4px; background-repeat: no-repeat; }
@media(max-width:700px) { .persona-control label { display:none; } .persona-control select { max-width:92px; } }