@layer components {
  /* The bar of the documents' view (and of an extension's tab) on the desktop; the sheet has its own head. */
  .panel-bar {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: var(--conversation-header-height);
    padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--background);
  }
  .panel-bar ~ .panel-tabs { top: var(--conversation-header-height); }
  .panel-bar-title { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
  .panel-bar-exit, body.panel-fullscreen .panel-bar-fullscreen { display: none; }
  body.panel-fullscreen .panel-bar-exit { display: inline-flex; }
  .panel-bar-exit { gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; }
  .panel-bar-close, .panel-bar-fullscreen { width: 28px; height: 28px; }
  @media (max-width: 1099px) { .panel-bar { display: none; } }

  /* The settings: a head, the tabs, one pane at a time. */
  .settings-panel { display: flex; flex-direction: column; font-size: 13px; }
  .settings-panel [hidden] { display: none !important; }
  .settings-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 14px 8px 16px; }
  .settings-heading { flex: 1; min-width: 0; }
  .settings-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .settings-subtitle { margin: 2px 0 0; color: var(--muted-foreground); }
  .settings-close { flex: none; width: 28px; height: 28px; }
  /* The sheet names the place in its own head and closes itself. */
  @media (max-width: 1099px) { .settings-head { display: none; } }

  /* A group's summary lines replace the head wherever the sheet hides it. */
  .settings-sheet-lines { display: none; margin: 0; padding: 4px 16px 8px; list-style: none; color: var(--muted-foreground); }
  @media (max-width: 1099px) { .settings-sheet-lines { display: block; } }

  .settings-general { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 20px; }
  .settings-section { display: flex; flex-direction: column; gap: 10px; }
  .settings-section-title {
    margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground);
  }
  .settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .settings-actions form, .settings-rename { margin: 0; }
  .settings-actions .button, .settings-rename .button { gap: 6px; }
  @media (max-width: 1099px) {
    .settings-actions .button, .settings-rename .button { min-height: var(--tap); }
  }

  /* Général's CANAL rows: a line per setting, a chevron when the reader may change it. */
  .settings-rows { display: flex; flex-direction: column; margin: 0 -16px; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
  .settings-row {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; color: var(--foreground);
    font: inherit; text-decoration: none; border-top: 1px solid var(--border);
  }
  .settings-row:first-child { border-top: 0; }
  .settings-row > svg:first-child { flex: none; color: var(--muted-foreground); }
  .settings-row-label { flex: 1; font-size: 14px; }
  /* Two lines in a row: the name, then its muted meta. */
  .settings-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6px 0; }
  .settings-row-main .settings-row-label { flex: none; font-weight: 500; overflow-wrap: anywhere; }
  .settings-row-sub { font-size: 13px; color: var(--muted-foreground); }
  .settings-row-value { color: var(--muted-foreground); text-align: right; overflow-wrap: anywhere; }
  .settings-row--action:is(:hover, :active) { background: var(--secondary); }
  .settings-row--action:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--jx-accent); }
  .settings-row--action > svg:last-child { flex: none; color: var(--muted-foreground); }
  .settings-hint { margin: 0; color: var(--muted-foreground); line-height: 1.45; }
  .settings-name-form { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 12px; }
  .settings-field-label { margin: 0; font-size: 13px; font-weight: 500; }
  .settings-field-help { margin: 0; color: var(--muted-foreground); line-height: 1.45; }
  .settings-field-error { margin: 0; color: var(--jx-no); font-weight: 500; }
  .settings-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .settings-help-phone { display: none; }
  .settings-visibility { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
  .settings-card-form { margin: 0; }
  @media (max-width: 1099px) {
    .settings-help-desktop { display: none; }
    .settings-help-phone { display: inline; }
    .settings-row { min-height: var(--tap); }
  }

  /* Under the header: this reader's last documents, the way into the whole list, and « + ». */
  .documents-strip-frame { display: block; flex: none; }
  .documents-strip { display: flex; align-items: center; gap: 8px; padding: 8px var(--gutter); border-bottom: 1px solid var(--border); }
  .documents-chips-row {
    display: flex; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; min-width: 0; height: 28px; margin: 0; padding: 0;
    list-style: none; overflow: hidden;
  }
  .documents-chips-row li { display: flex; min-width: 0; }
  .documents-chip-link, .documents-all, .documents-strip-link {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--background); color: var(--foreground); font: inherit; text-decoration: none; cursor: pointer;
  }
  .documents-chip-link { max-width: 200px; }
  .documents-chip-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .documents-all { flex: none; font-weight: 500; }
  .documents-strip-link { border: 0; background: transparent; margin-left: auto; font-weight: 500; }
  .documents-chip-link:is(:hover, :active), .documents-all:is(:hover, :active), .documents-all[aria-expanded="true"] { background: var(--secondary); }
  .documents-chip-link:focus-visible, .documents-all:focus-visible, .documents-strip-link:focus-visible,
  .documents-strip-plus:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jx-accent); }
  .documents-chip-link svg, .documents-all svg, .documents-strip-empty svg { flex: none; color: var(--muted-foreground); }
  .documents-strip-empty { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted-foreground); }
  .documents-strip-menu { margin-left: auto; }
  .documents-strip-menu .menu-title { display: none; }
  /* A reader who just lost access keeps the page open: the strip would still name documents. */
  .conversation--revoked .documents-strip { display: none; }
  .documents-strip-plus {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 7px;
    background: transparent; color: var(--muted-foreground); cursor: pointer;
  }
  .documents-strip-plus:hover { background: var(--secondary); color: var(--foreground); }
  .documents-all-phone { display: none; }
  @media (max-width: 1099px) {
    .documents-strip { overflow: hidden; }
    .documents-all, .documents-strip-link { min-height: var(--tap); }
    .documents-all { order: -1; }
    .documents-chips-row { flex: 1; flex-wrap: nowrap; height: auto; overflow-x: auto; scrollbar-width: none; }
    .documents-chips-row li { flex: none; }
    .documents-chip-link { min-height: var(--tap); }
    .documents-strip-menu { display: none; }
    .documents-all-desktop { display: none; }
    .documents-all-phone { display: inline; }
  }
}