@layer components {
  :root {
    --messages-sidebar-width: clamp(20rem, 26vw, 26rem);
    --messages-sidebar-duration: var(--duration-slow);
  }

  /* Wide screens: the open sidebar takes the right edge and the page narrows beside it. */
  @media (min-width: 1100px) {
    html[data-sidebar-open] body:has(> .messages-sidebar) {
      padding-inline-end: var(--messages-sidebar-width);

      #main {
        inline-size: calc(100dvw - var(--messages-sidebar-width));
      }

      .bar {
        inset-inline-end: var(--messages-sidebar-width);
      }

      .tray--notifications {
        inset-inline-end: calc(var(--messages-sidebar-width) + var(--tray-margin));
      }
    }
  }

  .messages-sidebar {
    display: contents;
  }

  .messages-sidebar__pane {
    background-color: var(--color-canvas);
    block-size: 100dvh;
    border-inline-start: var(--border);
    display: flex;
    flex-direction: column;
    inline-size: var(--messages-sidebar-width);
    inset: 0 0 0 auto;
    outline: none;
    padding-block-end: env(safe-area-inset-bottom);
    position: fixed;
    transition: translate var(--messages-sidebar-duration) var(--ease-out-expo), visibility var(--messages-sidebar-duration);
    translate: 100% 0;
    visibility: hidden;
    z-index: calc(var(--z-tray) + 3);

    [data-sidebar-open] & {
      translate: 0 0;
      visibility: visible;
    }

    @media (max-width: 1099px) {
      box-shadow: var(--shadow);
    }

    @media (max-width: 639px) {
      border-inline-start: 0;
      inline-size: 100%;
    }

    @media print {
      display: none;
    }
  }

  .messages-sidebar__frame {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
  }

  .messages-sidebar__bar {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    flex: none;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    min-block-size: 2.75rem;
    padding: var(--block-space-half) var(--inline-space);
  }

  .messages-sidebar__title {
    flex: 1 1 auto;
    font-size: var(--text-normal);
    line-height: 1.15;
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    a {
      color: inherit;
      text-decoration: none;
    }

    @media (any-hover: hover) {
      a:hover {
        text-decoration: underline;
      }
    }
  }

  .messages-sidebar__scroll {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--block-space-half) var(--inline-space) var(--block-space);
  }

  .messages-sidebar__skeleton {
    background: repeating-linear-gradient(to bottom, var(--color-ink-lightest) 0 2.5rem, transparent 2.5rem 3rem);
    border-radius: 0.5em;
    flex: 1 1 auto;
    margin: var(--block-space) var(--inline-space);
    mask-image: linear-gradient(to bottom, oklch(0% 0 0) 0, oklch(0% 0 0 / 0) 60%);
  }

  .messages-sidebar__none {
    margin: var(--block-space-half) var(--inline-space);
  }

  /* Ping someone */
  .directs {
    --avatar-size: 2rem;

    column-gap: calc(var(--inline-space) / 1.5);
    display: grid;
    grid-auto-columns: 3.5rem;
    grid-auto-flow: column;
    justify-content: start;
    mask-image: linear-gradient(to left, oklch(0% 0 0 / 0) 0, oklch(0% 0 0) 2rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: var(--block-space-half);
    scrollbar-width: none;
  }

  .direct {
    border-radius: 0.5em;
    color: var(--color-ink);
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    min-inline-size: 0;
    padding-block: 0.25rem;
    text-decoration: none;

    .avatar {
      font-size: var(--text-x-small);
    }

    .avatar--icon {
      --icon-size: 0.9rem;
    }

    @media (any-hover: hover) {
      &:hover .avatar:not(.avatar--icon) {
        filter: brightness(0.85);
      }

      &:hover .avatar--icon {
        border-color: var(--color-ink);
      }
    }
  }

  .direct__name {
    font-size: var(--text-x-small);
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Conversations, and the firms to pick from */
  .messages-sidebar__scroll .row {
    > .row__body {
      padding-block: calc(var(--block-space) / 3);
    }

    .row__title {
      font-size: var(--text-small);
    }

    .row__meta {
      font-size: var(--text-x-small);
    }
  }

  .messages-sidebar__conversations {
    --rows-margin: 0;
    --rows-padding: 0;
  }

  .messages-sidebar__heading {
    color: var(--color-warning-text);
    font-size: var(--text-small);
    font-weight: 800;
    line-height: var(--leading-snug);
    margin: var(--block-space-half) 0 0.25em;
    padding-inline: var(--inline-space);
  }

  .messages-sidebar__rule {
    --border-color: var(--color-ink-lighter);

    margin: var(--block-space-half) var(--inline-space);
  }

  .messages-sidebar__conversation {
    --avatar-size: 1.5rem;

    > .row__body {
      align-items: center;
      flex-direction: row;
      gap: var(--inline-space);
    }

    .avatar {
      font-size: var(--text-x-small);
    }

    .row__title {
      font-weight: 500;
    }

    &.unread {
      --avatar-size: 2rem;

      > .row__body {
        align-items: start;
      }

      .row__title {
        font-weight: 800;
      }

      .row__meta {
        overflow-wrap: anywhere;
      }
    }
  }

  .messages-sidebar__reading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-inline-size: 0;
  }

  .messages-sidebar__end {
    align-items: end;
    align-self: start;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.3em;
  }

  .messages-sidebar__when {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    padding-block-start: 0.1rem;
  }

  .messages-sidebar__count {
    background-color: var(--color-warning-filled);
    border-radius: 99rem;
    color: var(--color-ink-inverted);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
    min-inline-size: 1.7em;
    padding: 0.35em 0.5em;
    text-align: center;
  }

  /* A conversation read inside the sidebar fills it, with the composer at the foot. */
  .messages-sidebar__thread {
    --message-background: var(--color-ink-lightest);
    --message-padding: 0.4rem calc(var(--inline-space) * 1.25);

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    font-size: var(--text-small);
    min-block-size: 0;

    .messages {
      --message-avatar-size: 1.5rem;
      --message-space: 0.9em;
      --reaction-size: var(--text-x-small);
    }

    .message__avatar {
      font-size: var(--text-x-small);
    }

    .message__body {
      max-inline-size: 90%;
    }
  }
}