@layer components {
  /* Bottom sheet (Ui::SheetComponent, lib/sheet.js). From 1100 px a sheet is a centered dialog, and an inline one is
     its container's own content: no box, no head, the page's colors (a dialog's CanvasText would be inherited). */
  .sheet {
    flex-direction: column; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: 85dvh;
    margin: auto; padding: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--background); color: var(--foreground);
    box-shadow: 0 16px 40px -12px light-dark(oklch(0 0 0 / 0.25), oklch(0 0 0 / 0.6)), var(--shadow-sm);
  }
  .sheet[open] { display: flex; }
  .sheet::backdrop { background: oklch(0 0 0 / 0.45); }
  /* The page behind never scrolls under the finger. */
  :root:has(dialog.sheet[open]) { overflow: hidden; }
  .sheet-head { position: relative; flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 14px 10px 8px 20px; }
  .sheet-title { flex: 1; min-width: 0; padding-top: 5px; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
  .sheet-close { flex: none; }
  .sheet-grip { display: none; }
  /* Positioned so visually hidden labels inside are clipped by the sheet, not the page. From its content, not 0: in a
     sheet sized by its content, WebKit kept a 0 basis and showed the head alone. */
  .sheet-body {
    position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 20px 20px;
  }
  .sheet-foot {
    flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
  }
  .sheet--inline, .sheet--inline > .sheet-body { display: contents; color: inherit; }
  .sheet--inline > :is(.sheet-head, .sheet-foot) { display: none; }
  /* A bare sheet (a message's actions) shows only its grip; its close button shows once the keyboard reaches it. */
  .sheet--bare .sheet-close { margin-left: auto; }
  .sheet--bare .sheet-close:not(:focus-visible) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* A drawer (the conversation's settings) is a right-hand panel from 1100 px, with no grip nor head of its own; below,
     it is the bottom sheet that follows. */
  @media (min-width: 1100px) {
    .sheet--drawer {
      width: min(440px, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto;
      border-width: 0 0 0 1px; border-radius: 0;
    }
    .sheet--drawer > .sheet-head { display: none; }
    .sheet--drawer > .sheet-body { padding: 0; }
  }

  /* Mobile shell: anchored to the bottom, full width on a phone, 640 px at most on a tablet, clear of the home
     indicator. The grip answers a finger on 64 × 44 px over the title's first line (never over a control). */
  @media (max-width: 1099px) {
    .sheet {
      width: min(100%, 640px); max-height: 92dvh; margin: auto auto 0;
      border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .sheet[data-size="half"] { height: 50dvh; }
    .sheet[data-size="full"] { height: 92dvh; }
    /* The 44 px touch square around "Fermer" must end inside the head: the scrolling body wins hits at its edge. */
    .sheet-head { padding: 20px 8px 8px 16px; }
    .sheet-grip {
      display: block; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 64px; height: var(--tap);
      padding: 0; border: 0; background: none; color: inherit;
    }
    .sheet-grip-bar {
      display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px;
      background: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
    }
    /* A finger pulls a sheet by its head or a part marked data-sheet-drag, never by its body; two fingers still zoom. */
    .sheet :is(.sheet-head, [data-sheet-drag]) { touch-action: pinch-zoom; }
    .sheet[open][data-dragging]::backdrop { opacity: calc(1 - var(--sheet-drag, 0)); }
    button.sheet-grip { cursor: pointer; }
    button.sheet-grip:active .sheet-grip-bar { background: var(--muted-foreground); }
    button.sheet-grip:focus-visible { outline: none; }
    button.sheet-grip:focus-visible .sheet-grip-bar { box-shadow: 0 0 0 3px var(--jx-accent); }
    .sheet-body { padding: 4px var(--gutter) calc(16px + var(--safe-bottom)); }
    .sheet:has(> .sheet-foot) > .sheet-body { padding-bottom: 16px; }
    /* The settings carry their own spacing, as they did in the inline sheet. */
    .sheet--drawer > .sheet-body { padding: 0 0 var(--safe-bottom); }
    .sheet-foot { padding: 12px var(--gutter) calc(12px + var(--safe-bottom)); }
    .sheet--inline:not([open]) { display: none; }
    .sheet--inline[open] { display: flex; color: var(--foreground); }
    .sheet--inline[open] > :is(.sheet-head, .sheet-foot) { display: flex; }
    .sheet--inline[open] > .sheet-body { display: block; padding: 0 0 var(--safe-bottom); }
    .sheet--inline[open]:has(> .sheet-foot) > .sheet-body { padding-bottom: 0; }
  }

  @media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {
    .sheet {
      transition: translate .22s ease-out, height .2s ease-out, transform .2s ease-out, display .22s allow-discrete,
        overlay .22s allow-discrete;
    }
    /* The finger leads: nothing lags behind it. */
    .sheet[data-dragging], .sheet[data-dragging]::backdrop { transition: none; }
    .sheet:not([open]) { translate: 0 100%; }
    .sheet::backdrop { opacity: 0; transition: opacity .22s, display .22s allow-discrete, overlay .22s allow-discrete; }
    .sheet[open]::backdrop { opacity: 1; }
    @starting-style {
      .sheet[open] { translate: 0 100%; }
      .sheet[open]::backdrop { opacity: 0; }
    }
  }

  @media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .sheet--drawer {
      transition: translate .2s ease-out, display .2s allow-discrete, overlay .2s allow-discrete;
    }
    .sheet--drawer:not([open]) { translate: 100% 0; }
    .sheet--drawer::backdrop { opacity: 0; transition: opacity .2s ease-out, display .2s allow-discrete, overlay .2s allow-discrete; }
    .sheet--drawer[open]::backdrop { opacity: 1; }
    @starting-style {
      .sheet--drawer[open] { translate: 100% 0; }
      .sheet--drawer[open]::backdrop { opacity: 0; }
    }
  }
}