.rich-content {
  min-width: 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}

.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
  margin: 1.5em 0 0.55em;
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.rich-content h1 { font-size: var(--font-size-2xl); }
.rich-content h2 { font-size: var(--font-size-xl); }
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 { font-size: var(--font-size-lg); }

.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote,
.rich-content pre,
.rich-content__table-wrap,
.rich-content .katex-display {
  margin: 0.85em 0;
}

.rich-content ul,
.rich-content ol {
  padding-inline-start: 1.45rem;
}

.rich-content li + li { margin-top: 0.35em; }
.rich-content li::marker { color: var(--color-primary-700); font-weight: var(--font-weight-semibold); }

.rich-content blockquote {
  margin-inline: 0;
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--color-primary-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-secondary);
  background: rgb(255 255 255 / 62%);
}

.rich-content a {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.rich-content a:hover { color: var(--color-primary-800); }

.rich-content code {
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  padding: 0.12em 0.34em;
  color: var(--color-text);
  background: rgb(238 240 245 / 92%);
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}

.rich-content pre,
.rich-content__table-wrap,
.rich-content .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.rich-content pre {
  padding: 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: rgb(244 246 249 / 96%);
}

.rich-content pre code {
  border: 0;
  padding: 0;
  background: transparent;
  white-space: pre;
}

.rich-content__table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 84%);
}

.rich-content__table-wrap:focus-visible {
  outline: 3px solid var(--color-primary-300);
  outline-offset: 3px;
}

.rich-content table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: var(--line-height-normal);
}

.rich-content th,
.rich-content td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  border-inline-end: 1px solid var(--color-border-subtle);
  text-align: start;
  vertical-align: top;
}

.rich-content th {
  color: var(--color-text);
  background: rgb(236 239 245 / 90%);
  font-weight: var(--font-weight-semibold);
}

.rich-content tbody tr:nth-child(even) { background: rgb(245 247 250 / 58%); }
.rich-content tr:last-child td { border-bottom: 0; }
.rich-content th:last-child,
.rich-content td:last-child { border-inline-end: 0; }

.rich-content .katex-display {
  padding: 0.4rem 0.2rem 0.65rem;
  text-align: start;
}

.rich-content .katex-display > .katex { display: inline-block; min-width: max-content; }
.rich-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.rich-content__formula { display: block; min-width: 0; max-width: 100%; margin-block: 1em; }
.rich-content__formula-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.rich-content__formula-hint { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.rich-content__formula-actions button,
.rich-image__error button,
.rich-image-preview__toolbar button {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-primary-700);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.rich-content__formula-actions button:hover,
.rich-image__error button:hover,
.rich-image-preview__toolbar button:hover { background: var(--color-primary-50); }
.rich-content .rich-content__formula-scroll {
  display: block;
  margin: 0;
  padding: 0.85rem 0.65rem;
  overflow: auto;
  text-align: start;
  scrollbar-gutter: auto;
}
.rich-content .rich-content__formula-scroll > .katex { max-width: none; }
.rich-content :not(.katex-display) > .katex,
.rich-content.ai-rich-content p > .katex,
.rich-content.ai-rich-content li > .katex {
  display: inline-block;
  max-width: 100%;
  padding-block: 0.2em;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
  overscroll-behavior-inline: contain;
}
.rich-content__formula-source,
.rich-content__math-error { display: block; overflow-wrap: anywhere; color: var(--color-text-secondary); }
.rich-content__formula-source code,
.rich-content__math-error code { display: block; white-space: pre-wrap; }
.rich-content__pending { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.rich-image { display: block; min-width: 0; max-width: 100%; margin-block: 0.75rem; }
.rich-image__open {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: #fff;
  font: inherit;
  cursor: zoom-in;
}
.rich-image--loading .rich-image__open { min-height: 8rem; min-width: min(16rem, 100%); cursor: wait; }
.rich-image__open img { display: block; max-width: 100%; height: auto; max-height: 32rem; object-fit: contain; }
.rich-image__hint { display: block; padding: 0.45rem 0.75rem; font-size: var(--font-size-sm); color: var(--color-primary-700); }
.rich-image__loading { display: block; padding: 1rem; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.rich-image__error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rich-image__error > span { flex: 1 1 12rem; overflow-wrap: anywhere; }
.rich-content__linked-image { display: block; }
.ui-modal:has(.rich-image-preview) { width: min(100%, 72rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.rich-image-preview { min-width: 0; }
.rich-image-preview__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.rich-image-preview__toolbar output { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.rich-image-preview__toolbar button:disabled { color: var(--color-text-muted); cursor: default; }
.rich-image-preview__viewport { max-height: 65dvh; overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rich-image-preview__viewport img { display: block; max-width: none; height: auto; }
.rich-image-preview__caption { margin: 0.75rem 0 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.rich-image button:focus-visible,
.rich-image-preview :focus-visible,
.rich-content__formula :focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 3px; }
.ai-image-problem { display: grid; gap: 0.5rem; min-width: 0; }
.ai-image-options .rich-content { flex: 1; min-width: 0; }
.ai-verified-artifact-canvas .rich-image { margin: 0; }
.ai-verified-artifact-canvas .rich-image__open img { max-width: 100%; min-width: 0; min-height: 0; }

@media (max-width: 640px) {
  .rich-content__formula-actions { gap: 0.5rem; }
  .rich-content__formula-hint { font-size: 0.8125rem; }
  .rich-image-preview__viewport { max-height: 58dvh; }
}

@media (forced-colors: active) {
  .rich-image__open,
  .rich-image-preview__viewport { background: Canvas; border-color: CanvasText; }
}

.rich-content__new-window-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-transparency: reduce) {
  .rich-content blockquote,
  .rich-content pre,
  .rich-content__table-wrap {
    background: var(--color-surface-raised);
  }
}

@media (forced-colors: active) {
  .rich-content blockquote,
  .rich-content pre,
  .rich-content__table-wrap,
  .rich-content th,
  .rich-content td {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
  }
}

.ai-rich-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  color: #202534;
  font-size: clamp(1rem, 1.5vw, 1.075rem);
  line-height: 1.82;
  overflow-wrap: anywhere;
}

.ai-rich-content > *,
.ai-rich-content p,
.ai-rich-content li,
.ai-rich-content blockquote,
.ai-rich-content h1,
.ai-rich-content h2,
.ai-rich-content h3,
.ai-rich-content h4,
.ai-rich-content h5,
.ai-rich-content h6 {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-rich-content > :first-child,
.ai-rich-content > :first-child > :first-child {
  margin-top: 0;
}

.ai-rich-content > :last-child,
.ai-rich-content > :last-child > :last-child {
  margin-bottom: 0;
}

.ai-rich-content h1,
.ai-rich-content h2,
.ai-rich-content h3,
.ai-rich-content h4,
.ai-rich-content h5,
.ai-rich-content h6 {
  margin: 1.6em 0 0.65em;
  color: #17203a;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.ai-rich-content h1 {
  padding-bottom: 0.45em;
  border-bottom: 2px solid #cfd7f3;
  font-size: 1.55em;
}

.ai-rich-content h2 {
  padding-left: 0.65em;
  border-left: 4px solid #5262c9;
  font-size: 1.35em;
}

.ai-rich-content h3 { font-size: 1.18em; }
.ai-rich-content h4,
.ai-rich-content h5,
.ai-rich-content h6 { font-size: 1.05em; }

.ai-answer-direct .ai-rich-content p {
  margin: 0.75em 0;
  color: #202534;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
}

.ai-rich-content strong {
  color: #263889;
  font-weight: 750;
}

.ai-rich-content em { color: #4a5369; }

.ai-rich-content ul,
.ai-rich-content ol {
  display: grid;
  gap: 0.45em;
  margin: 0.85em 0;
  padding-left: 1.55em;
}

.ai-rich-content li {
  padding-left: 0.2em;
  white-space: normal;
}
.ai-rich-content li::marker { color: #5262c9; font-weight: 700; }
.ai-rich-content li > p { margin: 0.15em 0; }

.ai-rich-content input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin: 0 0.45em 0 0;
  accent-color: #5262c9;
}

.ai-rich-content blockquote {
  margin: 1em 0;
  padding: 0.75em 1em;
  color: #3f485d;
  border-left: 4px solid #7a89dd;
  border-radius: 0 0.65rem 0.65rem 0;
  background: #eef1fb;
}

.ai-rich-content hr {
  height: 1px;
  margin: 1.5em 0;
  border: 0;
  background: linear-gradient(90deg, transparent, #c7cee1 15%, #c7cee1 85%, transparent);
}

.ai-rich-content a {
  color: #334eae;
  font-weight: 650;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.ai-rich-content a:hover { color: #22347f; }

.ai-rich-content code {
  max-width: 100%;
  padding: 0.12em 0.38em;
  color: #9f3151;
  border: 1px solid #e0dce5;
  border-radius: 0.35rem;
  background: #f4f1f5;
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
  white-space: break-spaces;
  word-break: break-word;
}

.ai-rich-content pre {
  max-width: 100%;
  margin: 1em 0;
  padding: 1em 1.1em;
  overflow-x: auto;
  color: #e8ecf7;
  border: 1px solid #343b4e;
  border-radius: 0.8rem;
  background: #202534;
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
}

.ai-rich-content pre code {
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  font-size: 0.88em;
  overflow-wrap: normal;
  white-space: pre;
  word-break: normal;
}

.ai-rich-content__table-wrap {
  max-width: 100%;
  margin: 1em 0;
  overflow-x: auto;
  border: 1px solid #d8deeb;
  border-radius: 0.8rem;
  background: #fff;
  outline: none;
}

.ai-rich-content__table-wrap:focus-visible {
  box-shadow: 0 0 0 3px rgb(82 98 201 / 22%);
}

.ai-rich-content .rich-content__table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  border: 1px solid #d8deeb;
  border-radius: 0.8rem;
  background: #fff;
}

.ai-rich-content .rich-content__table-wrap table { min-width: 32rem; }

.ai-rich-content table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  color: #252b3a;
  font-size: 0.94em;
}

.ai-rich-content th,
.ai-rich-content td {
  padding: 0.7em 0.85em;
  border-right: 1px solid #e2e6ef;
  border-bottom: 1px solid #e2e6ef;
  text-align: left;
  vertical-align: top;
}

.ai-rich-content th {
  color: #273470;
  font-weight: 750;
  background: #eef1fa;
}

.ai-rich-content tr:nth-child(even) td { background: #f8f9fc; }
.ai-rich-content tr:last-child td { border-bottom: 0; }
.ai-rich-content th:last-child,
.ai-rich-content td:last-child { border-right: 0; }

.ai-rich-content .katex { color: #17203a; font-size: 1.05em; }

.ai-rich-content .katex-display {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 1em 0;
  padding: 0.9em 1em;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  border: 1px solid #dbe1ef;
  border-radius: 0.75rem;
  background: #f8faff;
  text-align: center;
}

.ai-rich-content .katex-display > .katex { white-space: nowrap; }

.ai-rich-content p > .katex,
.ai-rich-content li > .katex {
  display: inline;
  max-width: none;
  overflow: visible;
  vertical-align: baseline;
}

@media (max-width: 640px) {
  .ai-rich-content { font-size: 1rem; line-height: 1.75; }
  .ai-rich-content h1 { font-size: 1.35em; }
  .ai-rich-content h2 { font-size: 1.22em; }
  .ai-rich-content ul,
  .ai-rich-content ol { padding-inline-start: 1.15em; }
  .ai-rich-content li { padding-inline-start: 0.05em; }
  .ai-rich-content blockquote { padding: 0.65em 0.75em; }
  .ai-rich-content pre { padding: 0.75em; }
  .ai-rich-content .katex-display { padding-inline: 0.5em; }
  .ai-rich-content .rich-content__table-wrap table,
  .ai-rich-content table { min-width: 27rem; }
}

@media (max-width: 400px) {
  .ai-rich-content ul,
  .ai-rich-content ol { padding-inline-start: 1em; }
  .ai-rich-content h2 {
    padding-inline-start: 0.45em;
    border-inline-start-width: 3px;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .ai-rich-content .rich-content__table-wrap { border-color: currentcolor; background: Canvas; }
}