:root {
  --lc-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", sans-serif;
  --lc-font-mono: "JetBrains Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --lc-inline-code-bg: rgba(15, 23, 42, 0.06);
  --lc-inline-code-text: #0f172a;
  --lc-quote-bg: rgba(15, 23, 42, 0.03);
  --lc-quote-border: rgba(14, 116, 144, 0.35);
  --lc-table-head-bg: rgba(15, 23, 42, 0.05);
  --lc-table-border: rgba(15, 23, 42, 0.14);
}

.dark {
  --lc-inline-code-bg: rgba(148, 163, 184, 0.14);
  --lc-inline-code-text: #e2e8f0;
  --lc-quote-bg: rgba(148, 163, 184, 0.08);
  --lc-quote-border: rgba(56, 189, 248, 0.5);
  --lc-table-head-bg: rgba(148, 163, 184, 0.1);
  --lc-table-border: rgba(148, 163, 184, 0.22);
}

.markdown.prose.message-content {
  font-family: var(--lc-font-sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.002em;
  max-width: 100%;
  margin-inline: 0;
}

.markdown.prose.message-content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, table, thead, tbody, tr, th, td, pre, code, a, strong, em, span) {
  font-size: 1em !important;
}

.markdown.prose.message-content :is(p, ul, ol, pre, table, blockquote, hr) {
  margin-top: 0.3em !important;
  margin-bottom: 0.56em !important;
}

.markdown.prose.message-content :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.92em !important;
  margin-bottom: 0.38em !important;
  line-height: 1.3;
  letter-spacing: 0.004em;
}

.markdown.prose.message-content :is(ul, ol) {
  list-style: revert;
  padding-left: 1.18em;
}

.markdown.prose.message-content li + li {
  margin-top: 0.16em;
}

.markdown.prose.message-content code:not(pre code) {
  font-family: var(--lc-font-mono);
  padding: 0.08em 0.34em;
  border-radius: 0.42em;
  background: var(--lc-inline-code-bg);
  color: var(--lc-inline-code-text);
}

.markdown.prose.message-content pre {
  font-family: var(--lc-font-mono);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 0.68rem 0.78rem;
  background: #0b1220;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.markdown.prose.message-content pre code {
  line-height: 1.46;
}

.markdown.prose.message-content blockquote {
  margin-inline: 0;
  padding: 0.42em 0.68em;
  border-left: 3px solid var(--lc-quote-border);
  background: var(--lc-quote-bg);
  border-radius: 0 8px 8px 0;
}

.markdown.prose.message-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.markdown.prose.message-content th,
.markdown.prose.message-content td {
  border: 1px solid var(--lc-table-border);
  padding: 0.32em 0.46em;
  vertical-align: top;
}

.markdown.prose.message-content th {
  background: var(--lc-table-head-bg);
  font-weight: 600;
}

.markdown.prose.message-content a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

@media (max-width: 767px) {
  .markdown.prose.message-content {
    font-size: 14px;
    line-height: 1.54;
    max-width: 100%;
  }

  .markdown.prose.message-content pre {
    border-radius: 8px;
    padding: 0.58rem 0.6rem;
  }
}

/* Unified message + composer column width */
.scrollbar-gutter-stable {
  /* Prevent reserved gutter from making output narrower than input in narrow windows */
  scrollbar-gutter: auto !important;
}

.message-render {
  max-width: min(100%, 50.5rem) !important;
}

form[class*="transition-[max-width]"][class*="w-full"][class*="gap-3"] {
  width: 100% !important;
  max-width: min(100%, 50.5rem) !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important;
  box-sizing: border-box !important;
}

/* Link tone harmonization */
.markdown.prose.message-content a {
  color: inherit !important;
  font-weight: 500;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(100, 116, 139, 0.65) !important;
}

.dark .markdown.prose.message-content a {
  text-decoration-color: rgba(148, 163, 184, 0.62) !important;
}

.markdown.prose.message-content a:hover {
  color: #0ea5e9 !important;
  text-decoration-color: currentColor !important;
}

/* Citation chip tone (GPT-like subtle) */
.markdown.prose.message-content a[class*="max-w-36"][class*="rounded-xl"][class*="h-5"],
.markdown.prose.message-content button[class*="max-w-36"][class*="rounded-xl"][class*="h-5"] {
  height: auto !important;
  max-width: none !important;
  padding: 0.08em 0.42em !important;
  border: 0 !important;
  background: rgba(148, 163, 184, 0.16) !important;
  color: rgba(71, 85, 105, 0.9) !important;
  font-size: 0.72em !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  border-radius: 9999px !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
}

.dark .markdown.prose.message-content a[class*="max-w-36"][class*="rounded-xl"][class*="h-5"],
.dark .markdown.prose.message-content button[class*="max-w-36"][class*="rounded-xl"][class*="h-5"] {
  background: rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

.markdown.prose.message-content a[class*="max-w-36"][class*="rounded-xl"][class*="h-5"]:hover,
.markdown.prose.message-content button[class*="max-w-36"][class*="rounded-xl"][class*="h-5"]:hover {
  background: rgba(148, 163, 184, 0.28) !important;
  color: inherit !important;
}