@layer components {
  /* An artifact in its isolated frame, under the caption that says who generated it. */
  .artifact-frame { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
  .artifact-frame-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .artifact-caption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .artifact-label { color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }
  /* What the artifact's script reads, it may send out: nothing sensitive is typed there. */
  .artifact-warning { color: var(--foreground); font-size: 13px; font-weight: 500; line-height: 1.45; }
  /* The artifact paints its own page: light, as an agent writes it, whatever the app's theme. */
  .artifact-iframe {
    display: block; width: 100%; height: 600px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: white; color-scheme: light;
  }
  .document-view--page .artifact-iframe, .document-history .artifact-iframe { height: max(600px, calc(100dvh - 260px)); }
  .artifact-support-note {
    display: grid; place-items: center; min-height: 160px; margin: 0; padding: 16px;
    border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: 13px;
  }

  /* The phone's reading: a tall frame, a full screen on request, a request that leaves for the thread. None of it
     exists from 1100 px. */
  .artifact-fullscreen, .artifact-fullscreen-close { display: none; }
  .artifact-request[data-artifact-request-thread-param] { display: none; }

  @media (max-width: 1099px) {
    .artifact-request[data-artifact-request-thread-param], .artifact-fullscreen { display: inline-flex; }
    .artifact-frame-head .button { height: var(--tap); }
    .document-view--page .artifact-iframe { height: max(360px, calc(100dvh - 330px - var(--safe-bottom))); }

    .artifact-frame.is-fullscreen {
      position: fixed; inset: 0; z-index: 30; gap: 0; background: var(--background);
      padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    }
    .artifact-frame.is-fullscreen :is(.artifact-caption, .artifact-request, .artifact-fullscreen) { display: none; }
    .artifact-frame.is-fullscreen .artifact-fullscreen-close { display: inline-flex; margin: 4px 8px 4px auto; }
    .artifact-frame.is-fullscreen .artifact-iframe { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
    :root:has(.artifact-frame.is-fullscreen) { overflow: hidden; }
    body:has(.artifact-frame.is-fullscreen) :is(.document-bar, .document-topbar) { display: none; }
  }
}