packages/session-ui/src/components/markdown.css

[data-component="markdown"] {
  --markdown-inline-code-path-color: var(--v2-text-text-code-accent);
  --markdown-inline-code-color: var(--v2-text-text-code-accent);
  --markdown-inline-code-bg-mix: 8%;
  --markdown-shell-code-background: var(--v2-background-bg-layer-02);
  --markdown-shell-code-border: var(--v2-border-border-muted);
  --markdown-shell-code-color: var(--v2-text-text-base);
  --markdown-shell-code-token-color: currentColor;

  /* Reset & Base Typography */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  color: var(--v2-text-text-base);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base); /* 14px */
  line-height: 160%;

  /* Spacing for flow */
  > *:first-child {
    margin-top: 0;
  }
  > *:last-child {
    margin-bottom: 0;
  }
  > [data-markdown-block]:first-child > *:first-child {
    margin-top: 0;
  }
  > [data-markdown-block]:last-child > *:last-child {
    margin-bottom: 0;
  }

  /* Headings: Sized by level, distinguished by color and spacing */
  h1 {
    font-size: 17px;
    color: var(--v2-text-text-base);
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: var(--line-height-large);
  }

  h2 {
    font-size: 15px;
    color: var(--v2-text-text-base);
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 10px;
    line-height: var(--line-height-large);
  }

  h3 {
    font-size: 13px;
    color: var(--v2-text-text-base);
    font-weight: var(--font-weight-medium);
    margin-top: 20px;
    margin-bottom: 8px;
    line-height: var(--line-height-large);
  }

  h4,
  h5,
  h6 {
    font-size: 13px;
    color: var(--v2-text-text-muted);
    font-weight: var(--font-weight-medium);
    margin-top: 20px;
    margin-bottom: 8px;
    line-height: var(--line-height-large);
  }

  /* Emphasis & Strong: Neutral strong color */
  strong,
  b {
    color: var(--v2-text-text-base);
    font-weight: var(--font-weight-medium);
  }

  /* Paragraphs */
  p {
    margin-bottom: 12px;
  }

  /* Links */
  a {
    color: var(--text-interactive-base);
    text-decoration: none;
    font-weight: inherit;
  }

  a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Lists */
  ul,
  ol {
    margin-top: 8px;
    margin-bottom: 12px;
    margin-inline-start: 0;
    padding-inline-start: 32px;
    list-style-position: outside;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
    padding-inline-start: 2.25rem;
  }

  li {
    margin-bottom: 8px;
  }

  li > p:first-child {
    display: inline;
    margin: 0;
  }

  li:has(> input[type="checkbox"]),
  li:has(> p > input[type="checkbox"]) {
    position: relative;
    list-style-type: none;
  }

  li > input[type="checkbox"],
  li > p > input[type="checkbox"] {
    position: absolute;
    top: 4px;
    inset-inline-start: -20px;
    margin: 0;
  }

  li > p + p {
    display: block;
    margin-top: 0.5rem;
  }

  li::marker {
    color: var(--v2-text-text-muted);
  }

  /* Nested lists spacing */
  li > ul,
  li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-inline-start: 1rem; /* Minimal indent for nesting only */
  }

  li > ol {
    padding-inline-start: 1.75rem;
  }

  /* Blockquotes */
  blockquote {
    border-inline-start: 0.5px solid var(--v2-border-border-base);
    margin: 1rem 0;
    padding-inline-start: 0.5rem;
    color: var(--v2-text-text-muted);
    font-style: normal;
  }

  /* Horizontal Rule - Invisible spacing only */
  hr {
    border: none;
    height: 0;
    margin: 32px 0;
  }

  .shiki {
    background: var(--color-background-stronger);
    color: var(--text-base);
    font-size: 13px;
    padding: 12px;
    border-radius: 6px;
    border: 0.5px solid var(--v2-border-border-base);
  }

  [data-component="markdown-code"] {
    position: relative;
    direction: ltr;
    unicode-bidi: isolate;
  }

  [data-component="markdown-code"][data-code-kind="shell"] .shiki {
    background: var(--markdown-shell-code-background);
    border-color: var(--markdown-shell-code-border);
    color: var(--markdown-shell-code-color);
  }

  [data-component="markdown-code"][data-code-kind="shell"] code {
    color: var(--markdown-shell-code-color);
  }

  [data-component="markdown-code"][data-code-kind="shell"] code span {
    color: var(--markdown-shell-code-token-color) !important;
  }

  [data-slot="markdown-copy-button"] {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;
  }

  [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"],
  [data-slot="markdown-copy-button"]:focus-within {
    opacity: 1;
  }

  [data-slot="markdown-copy-button"] [data-check-icon] {
    display: none;
  }

  [data-slot="markdown-copy-button"][data-copied="true"] [data-copy-icon] {
    display: none;
  }

  [data-slot="markdown-copy-button"][data-copied="true"] [data-check-icon] {
    display: inline-flex;
  }

  pre {
    margin-top: 12px;
    margin-bottom: 24px;
    overflow: auto;

    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  :not(pre) > code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--font-family-mono);
    font-feature-settings: var(--font-family-mono--font-feature-settings);
    color: var(--v2-text-text-base);
    font-weight: var(--font-weight-medium);
    padding: 2px 4px;
    border-radius: 4px;
    background: color-mix(in oklch, var(--v2-text-text-base) var(--markdown-inline-code-bg-mix), transparent);
  }

  :not(pre) > code[data-inline-code-kind="path"] {
    color: var(--markdown-inline-code-path-color);
    background: color-mix(
      in oklch,
      var(--markdown-inline-code-path-color) var(--markdown-inline-code-bg-mix),
      transparent
    );
  }

  a.external-link > code[data-inline-code-kind="url"] {
    color: var(--markdown-inline-code-color);
    background: none;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--markdown-inline-code-color) 25%, transparent);
    text-underline-offset: 2px;
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: var(--font-size-base);
    display: block;
    overflow-x: auto;
  }

  th,
  td {
    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
    border-bottom: 0.5px solid var(--v2-border-border-muted);
    padding: 12px;
    text-align: start;
    vertical-align: top;
  }

  th {
    color: var(--v2-text-text-base);
    font-weight: var(--font-weight-medium);
    border-bottom: 0.5px solid var(--v2-border-border-base);
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
    display: block;
  }
}

[data-component="markdown"] > * {
  unicode-bidi: plaintext;
}

body[data-new-layout] [data-component="markdown"] {
  [data-slot="markdown-copy-button"]::after {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border: 0;
    border-radius: 4px;
    background: var(--v2-background-bg-layer-01);
    box-shadow: var(--v2-elevation-floating);
    color: var(--v2-text-text-base);
    user-select: none;
    font-size: 11px;
    font-weight: 530;
    line-height: 12px;
    letter-spacing: 0.05px;
    font-variant-numeric: tabular-nums;
    font-variation-settings: "slnt" 0;
  }
}

body:not([data-new-layout]) [data-component="markdown"] {
  color: var(--text-strong);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 14px;
    color: var(--text-strong);
    font-weight: var(--font-weight-medium);
  }

  strong,
  b {
    color: var(--text-strong);
  }

  li::marker {
    color: var(--text-weak);
  }

  blockquote {
    border-inline-start: 2px solid var(--border-weak-base);
    color: var(--text-weak);
  }

  .shiki {
    border-color: var(--border-weak-base);
  }

  :not(pre) > code {
    color: var(--syntax-string);
    padding: 0;
    border-radius: 0;
    background: none;
  }

  th,
  td {
    border-bottom: 1px solid var(--border-weaker-base);
  }

  th {
    color: var(--text-strong);
    border-bottom-color: var(--border-weak-base);
  }
}

[data-component="markdown"] a.external-link:hover > code {
  text-decoration: underline;
  text-underline-offset: 2px;
}