@layer components {
  /* A document card in a message, loaded for each reader; dashed when it points to a document living elsewhere. */
  .document-card-frame { display: block; }
  .document-card {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-size: 13px;
  }
  .document-card--elsewhere { border-style: dashed; }
  .document-card-icon {
    width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--muted);
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground);
  }
  .document-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .document-card-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; color: var(--foreground); }
  .document-card-meta, .document-card-origin, .document-card-source { color: var(--muted-foreground); overflow-wrap: anywhere; }
  .document-card-meta { font-variant-numeric: tabular-nums; }
  .document-card-source { display: inline-flex; align-items: flex-start; gap: 4px; }
  .document-card-source svg { flex: none; margin-top: 2px; }
  .document-card-access {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--muted-foreground);
  }
  .document-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
  .document-card-open { font-weight: 500; color: var(--foreground); text-decoration: none; }
  .document-card-open:hover { text-decoration: underline; }
  /* The whole readable card opens the document: « Ouvrir » is stretched over it, the undo form stays on top. */
  article.document-card { position: relative; }
  html:not([data-offline-copy]) article.document-card:hover { background: var(--surface); }
  .document-card-open::after { content: ""; position: absolute; inset: 0; border-radius: 9px; }
  .document-card-open:focus-visible { outline: none; }
  .document-card-open:focus-visible::after { box-shadow: 0 0 0 3px var(--jx-accent); }
  .document-card-undo form { position: relative; z-index: 1; }
  .document-card--hidden, .document-card--loading {
    align-items: center; border-style: dashed; color: var(--muted-foreground); background: transparent;
  }
  .document-card-placeholder { color: var(--muted-foreground); }
  /* The mover's way back, while the undo window lasts; a refused gesture says why in the card. */
  .document-card-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
  .document-card-undo-hint { color: var(--muted-foreground); }
  .document-card-refusal { margin: 4px 0 0; color: var(--destructive); }

  /* A page shown from its offline copy offers nothing that would fail. */
  html[data-offline-copy] .document-card-undo,
  html[data-offline-copy] .document-card-open { display: none; }

  /* A document chosen in the composer: a chip like a file's, with the document's icon. */
  .attachment-chip-icon-file, .attachment-chip-icon-document { display: inline-flex; }
  .attachment-chip-icon-document, .attachment-chip-icon-pencil, .attachment-chip[data-kind="document"] .attachment-chip-icon-file { display: none; }
  .attachment-chip[data-becomes] .attachment-chip-icon-file { display: none; }
  .attachment-chip[data-becomes] .attachment-chip-icon-pencil { display: inline-flex; }
  .attachment-chip[data-kind="document"] .attachment-chip-icon-document { display: inline-flex; }
  .attachment-chip[data-kind="document"]:not([data-state="failed"]) .attachment-chip-icon { color: var(--foreground); }
  .composer-attach.composer-insert-document { margin-left: 0; }
  .message-files.is-pending .message-file[data-kind="document"] { display: inline-flex; gap: 6px; }
  .message-file-kind { color: var(--muted-foreground); }

  /* The « Insérer un document » dialog: one button per document the person reads. */
  .document-picker-list {
    list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
    max-height: min(420px, 55vh); overflow-y: auto;
  }
  .document-pick {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
    border: 1px solid transparent; border-radius: 9px; background: transparent; color: inherit; font: inherit;
    cursor: pointer;
  }
  .document-pick:hover { background: var(--accent); }
  .document-pick:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 1px; }
  .document-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .document-pick-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; color: var(--foreground); }
  .document-pick-meta { color: var(--muted-foreground); overflow-wrap: anywhere; }

  /* The second step of the dialog: the choices in a column, each followed by what it does. */
  .document-share h3 { margin: 0 0 10px; font-size: 15px; overflow-wrap: anywhere; }
  .document-share-choices { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .document-share-choices .button { justify-content: center; }
  .document-share-choices p { margin: 0 0 10px; font-size: 13px; overflow-wrap: anywhere; }
  .document-share .button-row { margin-top: 4px; }
}