/* ---------- Artifacts: the card in chat and the viewer ---------- */

/* Full width of the chat column, like the Browser card: grey card, format tile, title, one line under it. */
.artifact-msg {
  margin: 12px 0 16px;
  -webkit-tap-highlight-color: transparent;
}
.thread > .artifact-msg { width: 100%; max-width: var(--col); margin-left: auto; margin-right: auto; }
.stamp + .artifact-msg { margin-top: 2px; }
.bubble + .artifact-msg { margin-top: 10px; }
.artifact-msg + .bubble { margin-top: 0; }
.artifact-msg + .artifact-msg { margin-top: -6px; }

.acard {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px 14px 16px;
  border: 0;
  border-radius: 22px;
  background: var(--bubble);
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.acard:active { background: rgba(16, 17, 19, 0.1); }
.acard .doc-icon { width: 40px; height: 50px; margin: 0 2px; border-radius: 7px; padding-bottom: 7px; font-size: 0.6875rem; }
.acard-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acard-text strong {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acard-sub {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acard-chev { flex: none; width: 20px; height: 20px; color: var(--text-3, #86868b); }
.acard-chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Interactive apps: a dark tile with a four-square glyph instead of a format label. */
.doc-icon.app { clip-path: none; border-radius: 10px; padding-bottom: 0; align-items: center; }
.doc-icon.app::after { display: none; }
.doc-icon.app svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* ---------- Viewer ---------- */

.art-title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.2; }
.art-title > span:first-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-kind { font-size: 0.75rem; font-weight: 500; color: var(--text-2); letter-spacing: 0.01em; }
.art-viewer #viewer-more svg { fill: none; stroke: currentColor; }

/* Documents: the white page. Tables, numbered lists, rules and quotes on top of the basic styles. */
.doc-view ol { margin: 6px 0; padding-left: 1.4em; }
.doc-view hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.doc-view blockquote { margin: 10px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--border); color: var(--text-2); }
.doc-view .doc-table { margin: 10px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-view table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.doc-view th, .doc-view td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-view th { font-weight: 600; white-space: nowrap; }
.doc-view .slide { padding: 4px 0; }
.doc-view .slide-n { display: block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3, #86868b); }
.doc-view .slide-break { margin: 22px 0; }
.doc-view .doc-actions { margin-top: 26px; display: flex; justify-content: center; }
.doc-view .muted { color: var(--text-2); }

/* Pages and interactive apps: the sheet becomes the frame, edge to edge and full height. */
.art-viewer.framed .sheet-scroll { padding: 76px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.art-frame { flex: 1; min-height: 0; display: flex; background: #fff; border-radius: 24px 24px 0 0; overflow: hidden; }
.art-frame[hidden] { display: none; }
.art-iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }