@layer components {
  .documents-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; font-size: 13px; min-height: 60vh; }
  .documents-panel p { margin: 0; }
  .documents-panel-title { margin: 0; font-size: 14px; font-weight: 600; }
  .documents-panel-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .documents-panel-item { display: flex; flex-direction: column; gap: 4px; }
  .documents-panel-empty {
    display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 28px 8px; text-align: center;
  }
  .documents-panel-empty-icon {
    width: 38px; height: 38px; border-radius: 10px; background: var(--muted); color: var(--muted-foreground);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .documents-panel-empty-title { font-size: 14px; font-weight: 600; }
  .documents-panel-empty-hint { color: var(--muted-foreground); line-height: 1.5; max-width: 400px; }
  .documents-panel-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

  /* A document, its editor or the new document form in the panel: the list's margins. */
  turbo-frame[data-panel-pane="documents"]:not(:has(> .documents-panel)) {
    display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  }
  turbo-frame[data-panel-pane="documents"]:empty { padding: 0; }

  /* Filter and « Nouveau », then the list's frame. */
  .documents-panel-bar { display: flex; align-items: center; gap: 6px; }
  .documents-filter { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; }
  .documents-filter-query {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px;
    border: 1px solid var(--input); border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--background);
  }
  .documents-filter-query:focus-within { border-color: var(--jx-accent); box-shadow: 0 0 0 3px var(--ring); }
  .documents-filter-query svg { flex: none; }
  .documents-filter-query input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 13px; color: var(--foreground);
  }
  .documents-filter-query input::placeholder { color: var(--muted-foreground); }
  .documents-filter-status {
    flex: none; height: 32px; max-width: 112px; padding: 0 6px; border: 1px solid var(--input); border-radius: var(--radius-md);
    background: var(--background); color: var(--foreground); font: inherit; font-size: 13px;
  }
  .documents-filter-status:focus-visible { outline: none; border-color: var(--jx-accent); box-shadow: 0 0 0 3px var(--ring); }
  .documents-new { flex: none; }
  .documents-panel-body { display: flex; flex-direction: column; gap: 14px; }
  .documents-panel-section { display: flex; flex-direction: column; gap: 7px; }
  .documents-panel-heading {
    margin: 0; display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground);
  }
  .documents-panel-heading--rule::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .documents-panel-no-match { color: var(--muted-foreground); }

  /* A document of the place: title and status, then version, author and age. */
  .document-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
  .document-list-item {
    position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
  }
  .document-list-item:hover { background: var(--surface); }
  .document-list-icon {
    width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--muted); color: var(--muted-foreground);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .document-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .document-list-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .document-list-title {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); text-decoration: none;
  }
  /* The whole card opens the document. */
  .document-list-title::after { content: ""; position: absolute; inset: 0; border-radius: 9px; }
  .document-list-title:focus-visible { outline: none; }
  .document-list-title:focus-visible::after { box-shadow: 0 0 0 3px var(--jx-accent); }
  .document-list-status { flex: none; padding: 1px 7px; font-weight: 600; }
  .document-list-meta { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .document-list-access {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--muted-foreground);
  }

  /* Documents of other places this conversation's messages carry. */
  .documents-referenced-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
  .documents-reference {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px;
    color: var(--foreground); text-decoration: none;
  }
  .documents-reference:hover { background: var(--surface); text-decoration: none; }
  .documents-reference-icon { flex: none; display: inline-flex; color: var(--muted-foreground); }
  .documents-reference-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  /* The title shrinks first; a long origin keeps up to half the row and wraps between words, never ellipsized. */
  .documents-reference-origin {
    margin-left: auto; flex: 0 0 auto; max-width: 50%; text-align: right; overflow-wrap: break-word;
    color: var(--muted-foreground);
  }
  .documents-panel-note { color: var(--muted-foreground); padding: 2px 2px 0; }

  /* The phone's status chips replace the select. They do not exist from 1100 px; the sheet below it sizes the rest. */
  .documents-chips { display: none; }

  @media (max-width: 1099px) {
    .sheet .documents-panel { min-height: 0; padding: 4px var(--gutter) 16px; font-size: var(--text-body); }
    .sheet .documents-panel-bar { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
    /* The form's children join the bar, so the chips row spans the whole sheet and not the width the search leaves. */
    .sheet .documents-filter { display: contents; }
    .sheet .documents-filter-query {
      height: var(--tap); gap: 8px; padding: 0 12px; border-color: transparent; border-radius: 11px; background: var(--muted);
    }
    .sheet .documents-filter-query:focus-within { border-color: var(--jx-accent); background: var(--background); }
    .sheet .documents-filter-query svg { width: 18px; height: 18px; }
    .sheet .documents-filter-query input { font-size: 1rem; }
    .sheet .documents-filter-status { display: none; }
    .sheet .documents-new { height: var(--tap); }
    .sheet .documents-chips {
      order: 3; flex: 1 0 100%; min-width: 0; display: flex; gap: 6px; padding: 5px 4px;
      overflow-x: auto; scrollbar-width: none;
    }
    .sheet .documents-chip {
      flex: none; position: relative; height: 34px; padding: 0 13px; border: 1px solid var(--border);
      border-radius: 999px; background: var(--background); color: var(--foreground);
      font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    }
    /* The drawn chip is 34 px; a finger answers on 44: the row gives the 5 px above and below, inside its own box, so
       its scrolling clip (overflow-x: auto clips y too) never cuts the touch area. The inset adds the 1 px border. */
    .sheet .documents-chip::after { content: ""; position: absolute; inset: -6px 0; }
    .sheet .documents-chip[aria-pressed="true"] {
      border-color: var(--foreground); background: var(--foreground); color: var(--background);
    }
    .sheet .document-list-item, .sheet .documents-reference { gap: 12px; border-radius: 13px; }
    .sheet .document-list-item { min-height: 56px; padding: 12px; }
    .sheet .document-list-title::after { border-radius: 13px; }
    .sheet .document-list-icon { width: 36px; height: 36px; border-radius: 9px; }
    .sheet .document-list-icon svg { width: 18px; height: 18px; }
    .sheet .document-list-title { font-size: 15.5px; }
    .sheet .documents-reference { min-height: 52px; }
  }
}