/* Markdown Viewer — the iframe surface behind layouts/markdown_viewer
   (chat_artifacts/:id/viewer). The layout links ONLY markdown.css (the
   shared .markdown-body prose vocabulary) plus this file; the app
   bundle/Tabler stays out of the iframe.

   The token pins below exist because theme.css is NOT loaded in the
   iframe: every token markdown.css consumes is pinned here with its
   effective value as var() fallback — in the app context (this file is
   auto-linked via stylesheet_link_tag :app) the references resolve to
   the real tokens instead. Scoped to .markdown-viewer on purpose: a
   :root block would override theme.css app-wide. */

/* Self-hosted DM Sans (variable font, latin subset) — the viewer's CSP
   (default-src 'none', font-src 'self') forbids the Google Fonts import
   the app shell uses, so without these faces the iframe fell back to
   system fonts. Same family + unicode-range as the Google latin subset,
   so both definitions coexist app-wide without shadowing each other. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/dm-sans-97b33bb4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/dm-sans-italic-33d3be08.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.markdown-viewer {
  --tblr-font-sans-serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-color: var(--gxp-slate-800, #162033);
  --tblr-secondary: var(--gxp-slate-500, #566A8A);
  --tblr-border-color: var(--gxp-slate-200, #D9E3EE);
  --tblr-bg-surface-secondary: var(--gxp-slate-50, #F6F9FC);
  --tblr-border-radius: 4px;

  margin: 0;
  background: var(--traqx-doc-canvas, #ECEEF1);
  font: 400 15px/1.7 var(--tblr-font-sans-serif);
  color: var(--tblr-body-color);
  overflow-wrap: break-word;
}

/* The document sheet on the canvas — same chrome as the Word viewer's
   page cards. */
.markdown-viewer .viewer-doc {
  max-width: 860px;
  margin: 14px auto;
  padding: 40px 48px 48px;
  background: var(--tblr-bg-surface, #fff);
  box-shadow: var(--shadow-xs, 0 1px 4px rgba(29, 39, 52, 0.16));
  border-radius: var(--tblr-border-radius-sm, 2px);
}

/* Narrow panels (Stage split view): tighten the inner padding but keep
   the canvas gutter — the document must always read as a sheet with
   visible edges, exactly like the Word viewer's page cards (14px). */
@media (max-width: 700px) {
  .markdown-viewer .viewer-doc {
    margin: 14px;
    padding: 24px 20px 32px;
  }
}

/* Sticky viewer chrome above the sheet — same bar language as the Word
   viewer's toolbar (word_viewer layout): translucent canvas grey,
   hairline bottom border, pill affordances. */
.markdown-viewer .viewer-toolbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--traqx-doc-canvas, #ECEEF1) 94%, transparent);
  backdrop-filter: blur(2px);
  border-block-end: 1px solid var(--gxp-slate-200, #D9E3EE);
}

.markdown-viewer .viewer-toolbar-meta {
  display: flex;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--gxp-slate-500, #566A8A);
}

.markdown-viewer .viewer-toolbar-meta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markdown-viewer .viewer-download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--gxp-slate-500, #566A8A);
  text-decoration: none;
  white-space: nowrap;
}

.markdown-viewer .viewer-download:hover {
  background: var(--gxp-slate-50, #F6F9FC);
  color: var(--traqx-blue-600, #026CFF);
}

.markdown-viewer .viewer-download:focus-visible {
  outline: 2px solid var(--traqx-blue-600, #026CFF);
  outline-offset: 1px;
}

/* Iframe-only prose complements: markdown.css carries no link, code
   font or task-list/citation styling — in the app those come from
   Tabler/chat.css, which the iframe deliberately does not load. */
.markdown-viewer .markdown-body a {
  color: var(--traqx-blue-600, #026CFF);
}

.markdown-viewer .markdown-body a:focus-visible {
  outline: 2px solid var(--traqx-blue-600, #026CFF);
  outline-offset: 1px;
}

.markdown-viewer .markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Task lists (MarkdownRenderer checkbox output). */
.markdown-viewer .task-list-item {
  list-style: none;
  margin-inline-start: -1.5em;
}

.markdown-viewer .task-list-checkbox {
  margin-inline-end: 0.4em;
  vertical-align: -1px;
}

.markdown-viewer .task-list-inline {
  display: block;
}

/* Citation badges (MarkdownRenderer output). Purely visual here — the
   interactive peek needs the app's JS, which this surface deliberately
   does not load. Colors/shape mirror the app badge (chat.css). */
.markdown-viewer .citation {
  display: inline-block;
  padding: 0.1em 0.4em;
  border-radius: var(--tblr-border-radius);
  font-size: 0.8em;
  font-weight: 500;
  color: var(--traqx-blue-600, #026CFF);
  background: var(--traqx-blue-50, #F0F7FF);
  border: 1px solid var(--traqx-blue-200, #CCE0FF);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}