@layer components {
  /* A conversation reads at a chat app's width, as Thread does, at every size. */
  .sheet {
    --measure: var(--thread-inline-size);

    position: absolute;
    inset-inline: var(--space-0);
    inset-block: var(--space-0) var(--dock-clearance);
    z-index: var(--z-sheet);
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  .sheet__panel {
    display: grid;
    grid-template-areas: "stack";
    grid-template-rows: minmax(var(--space-0), var(--track-fill));
    grid-template-columns: minmax(var(--space-0), var(--track-fill));
    flex: auto;
    min-block-size: var(--space-0);
    border-block-start: var(--border-width) solid var(--color-border);
    border-start-start-radius: var(--radius-sheet);
    border-start-end-radius: var(--radius-sheet);
    background-color: var(--color-bg);
    box-shadow: var(--elev-3);
    overflow: clip;
    translate: var(--space-0) calc(var(--size-fill) - var(--sheet-collapsed-block-size));
    pointer-events: auto;
    transition:
      translate var(--dur-sheet) var(--ease-calm),
      border-radius var(--dur-sheet) var(--ease-calm),
      box-shadow var(--dur-sheet) var(--ease-calm);
  }

  .sheet:has(.sheet__disclosure[open]) .sheet__panel {
    border-block-start-color: transparent;
    border-radius: var(--space-0);
    box-shadow: none;
    translate: none;
  }

  .sheet__disclosure,
  .sheet__accessory {
    grid-area: stack;
  }

  .sheet__disclosure {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: var(--space-0);
  }

  .sheet__disclosure::details-content {
    flex: auto;
    min-block-size: var(--space-0);
    overflow: clip;
    transition: content-visibility var(--dur-sheet) var(--ease-calm) allow-discrete;
  }

  .sheet__body {
    display: flex;
    flex-direction: column;
    block-size: var(--size-fill);
    min-block-size: var(--space-0);
  }

  .sheet__header {
    display: flex;
    flex: none;
    align-items: center;
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .sheet__header > :first-child {
    flex: auto;
    min-inline-size: var(--space-0);
  }

  .sheet__header > :not(:first-child) {
    flex: none;
    margin-inline-end: var(--space-5);
  }

  .sheet__content {
    flex: auto;
    min-block-size: var(--space-0);
  }

  .sheet__summary {
    display: grid;
    flex: none;
    grid-template-columns: minmax(var(--space-0), var(--measure));
    justify-content: center;
    row-gap: var(--space-3);
    padding-block: var(--space-3) var(--space-4);
    padding-inline: var(--gutter-fluid);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sheet__summary::-webkit-details-marker {
    display: none;
  }

  .sheet:has(.sheet__disclosure[open]) .sheet__summary {
    padding-block-start: calc(var(--safe-top) + var(--space-3));
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .sheet__grabber {
    justify-self: center;
    inline-size: var(--sheet-grabber-inline-size);
    block-size: var(--sheet-grabber-block-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-border-strong);
  }

  .sheet__summary-content {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline-end: calc(var(--space-13) + var(--space-9) + var(--space-6));
  }

  .sheet__accessory {
    position: relative;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: minmax(var(--space-0), var(--measure));
    justify-content: center;
    justify-items: end;
    align-self: start;
    padding-block-start: calc(var(--space-3) + var(--sheet-grabber-block-size) + var(--space-3));
    padding-inline: var(--gutter-fluid);
    pointer-events: none;
  }

  .sheet:has(.sheet__disclosure[open]) .sheet__accessory {
    padding-block-start: calc(var(--safe-top) + var(--space-3) + var(--sheet-grabber-block-size) + var(--space-3));
  }

  .sheet__accessory > * {
    pointer-events: auto;
  }

  .sheet__accessories {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .sheet__accessories .leave {
    --button-size: var(--space-9);

    position: relative;
  }

  .sheet__accessories .leave::before {
    content: "";
    position: absolute;
    inset: calc((var(--space-9) - var(--tap-min)) / 2);
  }
}

@layer platform {
  html.keyboard .sheet__header {
    display: none;
  }
}

@layer components {
  @media (width >= 1100px) {
    .stage:has(> .priority-panel) > .sheet {
      inset-inline-start: 40%;
    }

    .stage:has(> .priority-panel) > .sheet .sheet__panel {
      border-block-start: none;
      border-radius: var(--space-0);
      box-shadow: none;
      translate: none;
    }

    .stage:has(> .priority-panel) > .sheet .sheet__disclosure::details-content {
      content-visibility: visible;
    }

    .stage:has(> .priority-panel) > .sheet .sheet__summary {
      padding-block-start: calc(var(--safe-top) + var(--space-3));
      border-block-end: var(--border-width) solid var(--color-border);
      pointer-events: none;
      cursor: auto;
    }

    .stage:has(> .priority-panel) > .sheet .sheet__grabber {
      display: none;
    }

    .stage:has(> .priority-panel) > .sheet .sheet__accessory {
      padding-block-start: calc(var(--safe-top) + var(--space-3));
    }
  }
}

@layer components {
  .sheet__banner {
    flex: none;
    padding-block-start: var(--space-4);
    padding-inline: var(--gutter-fluid);
  }

  .sheet__banner:has(> :empty) {
    display: none;
  }
}