/* ============================================
   Artifact — Claude-style side-panel viewer.

   Canvas-surface panel that lives in the artifact
   column of chat.html, or standalone in
   preview/artifact.html. Header (provider chip +
   segmented eye/code toggle + title/sub +
   action cluster) over a scrollable body.

   The panel rides `surface-container-high` in both
   themes — same family as the chat shell's sidebar/
   topbar. Surface-rooted means text tokens come
   from `on-surface*` (POLICIES rule 7a). The
   primitives flip in light theme via
   _primitives.css, so a single set of rules covers
   both modes. Mirrors the .bubble.bot pattern.
   ============================================ */

.artifact {
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-left: 1px solid var(--md-sys-color-outline);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: var(--md-sys-color-on-surface);
}

/* ---------- Head ----------
   Padding + min-height match preview/chat.html `.top` so the chat
   topbar and artifact head render at identical heights when both
   are visible. */
.artifact__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  min-height: 56px;
  box-sizing: border-box;
  flex-shrink: 0;
  /* Hairline seam so the header reads as a band over the body instead of
     floating; outline-variant is the soft internal divider weight. */
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.artifact__head-left {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.artifact__head-mid {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  flex: 1;
}

.artifact__head-right {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  flex-shrink: 0;
}

.artifact__title {
  font: 600 15px/1.2 var(--md-sys-typescale-body-large-font);
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artifact__sub {
  font: 400 11px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-on-surface-soft);
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  flex-wrap: nowrap;
  white-space: nowrap;
}
.artifact__sub > span { white-space: nowrap; }
/* Inline middot dividers come from the .ds-sep primitive (primitives/index.css);
   no per-component override needed. */

/* ---------- View toggle (eye / code) ---------- */
.artifact__view-toggle {
  display: inline-flex;
  align-items: center;
  padding: var(--s-0-5);
  background: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
  border-radius: 8px;
  gap: var(--s-0-5);
}

/* ---------- Body ---------- */
.artifact__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Horizontal inset matches .artifact__head (--s-5) so the title and the
     first line of body copy share one left edge. */
  padding: var(--s-5) var(--s-5) var(--s-6);
  font:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);
  color: var(--md-sys-color-on-surface);
}

.artifact__body :where(h1, h2, h3, h4) {
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.01em;
  margin: var(--s-4-5) 0 var(--s-2);
}
.artifact__body h1 { font: 600 20px/1.25 var(--md-sys-typescale-body-large-font); }
.artifact__body h2 { font: 600 16px/1.3  var(--md-sys-typescale-body-large-font); }
.artifact__body h3 { font: 600 14px/1.3  var(--md-sys-typescale-body-large-font); }
.artifact__body :where(h1, h2, h3, h4):first-child { margin-top: 0; }

.artifact__body p { margin: 0 0 var(--s-3); }
.artifact__body ul,
.artifact__body ol { margin: 0 0 var(--s-3); padding-left: var(--s-5-5); }
.artifact__body li { margin: var(--s-1) 0; }
.artifact__body strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
.artifact__body em { font-style: italic; color: var(--md-sys-color-on-surface); }
.artifact__body code {
  font: 500 12.5px/1.4 var(--xm-typescale-mono-font);
  padding: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface);
}

.artifact__body pre {
  font: 500 12.5px/1.55 var(--xm-typescale-mono-font);
  color: var(--md-sys-color-on-surface);
  background: color-mix(in oklab, var(--md-sys-color-on-surface) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0;
  white-space: pre-wrap;
  overflow-x: auto;
  font-feature-settings: "tnum";
}
.artifact__body pre code {
  font: inherit;
  color: inherit;
}

.artifact__body blockquote {
  margin: var(--s-3) 0;
  padding-left: var(--s-3);
  border-left: 2px solid color-mix(in oklab, var(--md-sys-color-on-surface) 30%, transparent);
  color: var(--xm-color-on-surface-soft);
  font-style: italic;
}