/* Styling for AI-generated markdown content */

/* Base container - apply this class to any container with markdown content */
.markdown-content {
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

/* Standard paragraph styling */
.markdown-content p {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  margin-bottom: var(--spacing-md, 16px);
}

/* Strong/Bold text */
.markdown-content strong,
.markdown-content b {
  font-weight: var(--font-weight-semibold);
}

/* Headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  margin-bottom: var(--spacing-md, 16px);
}

.markdown-content h1:first-of-type {
  display: none;
}

/* Lists */
.markdown-content ul,
.markdown-content ol {
  padding-inline-start: var(--spacing-12, 10px);
  margin-bottom: var(--spacing-md, 16px);
  list-style-position: inside;
}

.markdown-content li {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  letter-spacing: 0;
}

/* Code blocks. The max-width + overflow-x + overflow-wrap chain keeps long
 * URLs / unbroken tokens contained inside the response bubble: <pre> / <code>
 * default to white-space: pre / pre-wrap which preserves long strings on a
 * single line, and would otherwise paint outside any parent with
 * overflow:hidden + overflow-wrap:break-word. */
.markdown-content pre {
  background-color: var(--ai-bg-code, #282c34);
  border-radius: var(--radius-sm, 4px);
  padding: var(--spacing-md, 16px);
  margin-bottom: var(--spacing-md, 16px);
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.markdown-content code {
  font-family: Menlo, Monaco, 'Courier New', monospace;
  font-size: var(--font-size-sm, 16px);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Inline code */
.markdown-content :not(pre) > code {
  background-color: var(--ai-bg-inline-code, rgb(0 0 0 / 5%));
  border-radius: var(--radius-xs, 2px);
  padding: 0.2em 0.4em;
}

/* Tables — the .markdown-table-scroll wrapper (added by the marked postprocess hook)
   is the horizontal-scroll container, so only the table scrolls, not the whole
   message. The table itself stays a NORMAL table (width:max-content) so thead and
   tbody share one column model and their columns stay aligned; nowrap cells keep
   text on one line and let a wide table grow and scroll inside the wrapper.

   Rules are keyed off .markdown-table-scroll (the wrapper the hook injects around
   EVERY marked() table) rather than .markdown-content, because several render paths
   (UserMessage, AssistantMessage, conversation/v2, TypewriterText) emit marked()
   output without a .markdown-content ancestor — keying off the wrapper makes the
   scroll + alignment apply on every surface, not just ChatView. */
.markdown-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--spacing-md, 16px);
}

.markdown-table-scroll table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

.markdown-table-scroll th,
.markdown-table-scroll td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  vertical-align: top;
  border: var(--table-border, 1px solid var(--ai-border-light));
  white-space: nowrap;
}

.markdown-table-scroll th {
  background-color: var(--ai-bg-table-header, rgb(0 0 0 / 2%));
  font-weight: var(--font-weight-semibold, 600);
  border-bottom: var(--table-border, 1px solid var(--ai-border-light));
}

/* Links */
.markdown-content a {
  color: var(--ai-link-color, #07c);
  text-decoration: none;
}

.markdown-content a:hover {
  text-decoration: underline;
}

/* Blockquotes */
.markdown-content blockquote {
  border-left: 4px solid var(--ai-border-light);
  padding-left: var(--spacing-md, 16px);
  color: var(--ai-text-secondary);
  margin: var(--spacing-md, 16px) 0;
}

/* Horizontal Rule */
.markdown-content hr {
  border: 0;
  border-top: 1px solid var(--ai-border-light);
  margin: var(--spacing-sm, 16px) 0;
}