@layer components {
  /* A document read in place: a dense envelope above its body, full screen or in the panel. */
  .document-page { max-width: 880px; }
  .document-view { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .document-view--panel { gap: 12px; }

  .document-header {
    display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border); font-size: 13px;
  }
  /* An agent's document: a thin rule in the agent's color, from a closed list. */
  .document-header--agent { border-left: 3px solid var(--agent-color); padding-left: 12px; }
  .document-header-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .document-header-top--panel { justify-content: flex-end; }
  .document-back { font-size: 13px; color: var(--muted-foreground); text-decoration: none; }
  .document-back:hover { color: var(--foreground); text-decoration: underline; }
  .document-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  .document-title {
    margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 600; line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .document-view--panel .document-title { font-size: 17px; }

  .document-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
  .document-meta dt { color: var(--muted-foreground); }
  .document-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .document-agent-badge {
    display: inline-flex; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 13px;
    background: color-mix(in oklch, var(--agent-color) 14%, transparent); color: var(--foreground);
  }
  .document-gestures form { margin: 0; }

  /* A document being written reads first; from the desktop the editor takes the text's place, « Modifier » serves
     a phone. */
  @media (min-width: 1100px) {
    .document-gestures .document-edit-phone { display: none; }
  }
  @media (max-width: 1099px) {
    .document-view .document-view-edit { display: none; }
  }

  /* Reading first: the editor takes the text's place at the first click, or from the keyboard's button. */
  .document-view-text { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .document-view-text:not([data-visual-editor-mode="visual"], [data-visual-editor-mode="raw"]) .document-view-edit {
    display: none;
  }
  .document-view-text:is([data-visual-editor-mode="visual"], [data-visual-editor-mode="raw"]) .document-view-read {
    display: none;
  }
  .document-view-text[data-visual-editor-mode="loading"] .document-view-read { cursor: progress; }
  /* A draft left here waits above the text being read: it comes first in the page, too. */
  .document-view-text[data-visual-editor-mode="reading"]:has(.document-editor-offer:not([hidden])) .document-view-edit {
    display: block;
  }
  .document-view-text[data-visual-editor-mode="reading"] .document-editor > :not(.document-editor-offer) { display: none; }
  /* In place, the foot comes with the first change. */
  .document-view-text[data-visual-editor-mode="visual"]:not([data-visual-editor-modified])
    :is(.document-editor-summary, .document-editor-actions) { display: none; }
  /* The keyboard's way in: out of sight until the keyboard focuses it, then over the text's top, never pushing
     it. A mouse leaves it focused but unseen. */
  .document-view-start { position: absolute; top: 0; left: 0; z-index: 3; }
  .document-view-start:not(:focus-visible) {
    width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .document-view-text[data-visual-editor-mode] .document-editor-top { display: none; }
  .document-version-editing { display: none; }
  .document-view:has(.document-view-text:is([data-visual-editor-mode="visual"], [data-visual-editor-mode="raw"]))
    .document-version-editing { display: inline; }
  .document-view-text:not([data-visual-editor-mode="reading"]) .document-view-start { display: none; }

  @media (min-width: 1100px) {
    .document-view-text[data-visual-editor-mode="reading"] .document-view-read { cursor: text; }
  }

  .document-refusal {
    margin: 0; padding: 8px 12px; border: 1px solid var(--jx-wait); border-radius: var(--radius-md);
    background: var(--jx-wait-soft); font-size: 13px;
  }

  /* Phones: a long read, in its own screen. The panel keeps its own sizes. */
  @media (max-width: 767px) {
    .document-view--page { gap: 14px; }
    .document-view--page .document-title { font-size: 1.5rem; line-height: 1.2; }
    .document-view--page .document-meta { gap: 3px 12px; }
  }
}