/* =========================================================================
   نمایش مارک‌داون
   این استایل‌ها سراسری‌اند چون HTML آن‌ها را Markdig در زمان اجرا می‌سازد و
   ویژگی محدوده‌ی CSS ایزوله روی عناصر ساخته‌شده در زمان اجرا قرار نمی‌گیرد.
   ========================================================================= */

.markdown > *:first-child {
  margin-block-start: 0;
}

.markdown > *:last-child {
  margin-block-end: 0;
}

.markdown p {
  margin-block: 0 var(--space-2);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.markdown strong {
  font-weight: 700;
}

.markdown em {
  font-style: normal;
  /* حروف فارسی حالت ایتالیک واقعی ندارند و کج کردنشان بدنما می‌شود؛
     تأکید با رنگ منتقل می‌شود، نه با شیب. */
  color: var(--label-secondary);
}

.markdown del {
  opacity: 0.6;
}

/* در RTL، تورفتگی فهرست باید از سمت راست باشد؛ خاصیت منطقی این کار را
   خودکار انجام می‌دهد. */
.markdown ul,
.markdown ol {
  margin-block: 0 var(--space-2);
  padding-inline-start: var(--space-5);
}

.markdown li {
  margin-block-end: var(--space-1);
  line-height: var(--leading-normal);
}

.markdown li::marker {
  color: var(--label-tertiary);
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  font-size: var(--text-callout);
  font-weight: 600;
  margin-block: var(--space-3) var(--space-2);
}

.markdown h1 {
  font-size: var(--text-title3);
}

.markdown blockquote {
  margin-block: 0 var(--space-2);
  margin-inline: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--separator);
  color: var(--label-secondary);
}

/* کد همیشه چپ‌به‌راست است، حتی داخل متن فارسی. */
.markdown code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--fill);
  border-radius: 0.375rem;
  padding: 0.05rem 0.3rem;
}

.markdown pre {
  direction: ltr;
  text-align: left;
  background: var(--fill);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-block: 0 var(--space-2);
  /* محتوای پهن داخل ظرف خودش اسکرول می‌شود تا بدنه‌ی صفحه افقی نلغزد. */
  overflow-x: auto;
}

.markdown pre code {
  background: none;
  padding: 0;
  display: block;
}

.markdown a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.markdown hr {
  border: none;
  border-block-start: 1px solid var(--separator);
  margin-block: var(--space-3);
}

.markdown table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 0 var(--space-2);
  font-size: var(--text-subhead);
}

.markdown th,
.markdown td {
  border: 1px solid var(--separator);
  padding: var(--space-2);
  text-align: start;
}

.markdown th {
  background: var(--fill);
  font-weight: 600;
}

/* داخل حباب پیام کاربر، رنگ‌ها باید با پس‌زمینه‌ی آبی بخوانند. */
.bubble.mine .markdown code,
.bubble.mine .markdown pre {
  background: rgba(255, 255, 255, 0.22);
}

.bubble.mine .markdown em,
.bubble.mine .markdown blockquote {
  color: rgba(255, 255, 255, 0.75);
}