@layer components {
  /*
    受け取った連絡の一覧。実測: lists.md「BC2 議論の一覧」。
    - 行の幅いっぱいの1px #ececec の罫線で区切り、行は上下約9pxの余白と18pxの行の高さ。左右の余白は無い。
    - 件名は14〜15pxの太字の青緑に1pxの下線。差出人は黒の400、書き出しは #666。日付は末尾の茶色（--rx-meta）。
    - 差出人のアバターは30pxの円で、題名の列まで10px。件数は淡い青のピル（高さ18px・角丸9px・12px、2桁で幅21px）。
    今開いている行は37signalsの黄色のハイライト（#ffffcc）で塗る。ホバーの面は手本に無い（推測）のでその半分の淡い黄色。
    まだ開けていない連絡は、差出人を太字にして青緑の点を添える（推測）。
  */
  .rx-message-list {
    container: rx-message-list / inline-size;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--rx-text);
    font-size: var(--rx-body);
    line-height: calc(18 / 15);
    /* ここから新しい：青い細い線とラベル。前後の行の線と重ねない。 */
    & > .divider {
      padding-block: var(--rx-space-2) 0;
      padding-inline: var(--rx-space-3);
      & > .rx-divider {
        --rx-divider-color: var(--rx-link);
        & > span {
          color: var(--rx-link);
        }
      }
    }
    & > li {
      position: relative;
      min-inline-size: 0;
      & + li {
        border-block-start: var(--rx-stroke-width) solid var(--rx-border);
      }
      & > .row {
        /* 行は二段だけ。件名と「差出人 – 書き出し」を左に、時刻と未読の点を右の上下中央に置く。 */
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "body meta";
        align-items: center;
        gap: var(--rx-space-3);
        min-inline-size: 0;
        padding-block: 0.5625rem;
        padding-inline: 0;
        color: inherit;
        text-decoration: none;
        &:is(a):hover {
          background: color-mix(in srgb, var(--rx-mark) 50%, var(--rx-surface));
        }
        &:focus-visible {
          outline: 0.125rem solid var(--rx-focus-border);
          outline-offset: -0.125rem;
        }
        /* 差出人は共通のAvatar。画像のない行は、同じ大きさの淡い灰色の円に手紙のアイコンを置く。 */
        & > .avatar {
          grid-area: avatar;
          display: grid;
          place-items: center;
          align-self: start;
          inline-size: 1.875rem;
          block-size: 1.875rem;
          border-radius: 50%;
          background: var(--rx-gray-50);
          color: var(--rx-muted);
          /* 渡されたAvatarの大きさの指定にかかわらず、行のアバターの大きさとAvatarの既定の文字にそろえる。 */
          & > .rx-avatar {
            inline-size: 100%;
            block-size: 100%;
            font-size: var(--rx-small);
          }
        }
        & > .body {
          grid-area: body;
          display: grid;
          gap: 0.125rem;
          min-inline-size: 0;
          & > .title {
            display: flex;
            align-items: baseline;
            min-inline-size: 0;
            font-weight: 700;
            /*
              状態バッジ。件名の前に置き、形・大きさ・色は共通のBadgeに任せる（失敗は赤、他は灰）。
              バッジは縮めず、件名の一行目の文字の並びにそろえる。
            */
            & > .state {
              flex: none;
              margin-inline-end: var(--rx-space-2);
            }
            /* 件名は本文のリンクと同じ青緑の文字と下線にする。行のどこを押しても開く。 */
            & > .subject {
              min-inline-size: 0;
              overflow: hidden;
              color: var(--rx-link);
              text-decoration-line: underline;
              text-decoration-thickness: var(--rx-stroke-width);
              text-underline-offset: 0.15em;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            & > :is(.count, .attachment) {
              display: inline-flex;
              flex: none;
              align-items: center;
              gap: 0.125rem;
              margin-inline-start: var(--rx-space-2);
              color: var(--rx-muted);
              font-size: var(--rx-small);
              font-weight: 400;
              font-variant-numeric: tabular-nums;
            }
            /* 返信の件数は、BC2のコメント数と同じ淡い青のピル。数だけのピルは丸に近い形（2桁で幅21px）。 */
            & > .count {
              justify-content: center;
              min-inline-size: 1.125rem;
              padding-inline: 0.25rem;
              border-radius: var(--rx-radius-pill);
              background: var(--rx-pill-count);
              color: var(--rx-pill-count-text);
              line-height: 1.125rem;
            }
          }
          /* 差出人と書き出しは一行にまとめ、はみ出す分は書き出しの側で省略する。 */
          & > .summary {
            display: flex;
            align-items: baseline;
            min-inline-size: 0;
            color: var(--rx-muted);
            font-size: var(--rx-body);
            line-height: inherit;
            white-space: nowrap;
            & > .sender {
              flex: 0 1 auto;
              min-inline-size: 0;
              max-inline-size: 60%;
              overflow: hidden;
              color: var(--rx-text);
              text-overflow: ellipsis;
            }
            & > .preview {
              flex: 1 1 0;
              min-inline-size: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              &::before {
                content: "-";
                margin-inline: 0.3em;
              }
            }
          }
        }
        & > .meta {
          grid-area: meta;
          display: flex;
          align-items: center;
          gap: var(--rx-space-2);
          align-self: start;
          color: var(--rx-meta);
          font-size: var(--rx-body);
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
          /* 未読は時刻の後ろに置く小さな青緑の点。 */
          & > .unread {
            display: block;
            order: 1;
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-radius: 50%;
            background: var(--rx-link);
          }
        }
      }
      & > a.row:hover > .body > .title > .subject {
        color: var(--rx-link-hover);
      }
      &[data-unread="true"] > .row > .body > .summary > .sender {
        font-weight: 700;
      }
      /* 今、隣で開いている連絡は、DataListと同じ黄色のハイライトで示す。 */
      &[data-current="true"] > .row {
        background: var(--rx-mark);
      }
      /* 送信中は届くまでの間なので、行全体を少しだけ控えめにする。 */
      &[data-state="sending"] > .row {
        opacity: 0.72;
      }
      /* 閲覧できない連絡は、件名と差出人も淡い文字にして、開けないことを行全体で示す。 */
      &[data-unavailable="true"]
        > .row
        > .body
        > :is(.title, .title > .subject, .summary > .sender) {
        color: var(--rx-muted);
      }
    }
    /*
      0件の表示はEmptyStateが余白を持つので、一覧の空の行の余白は持たない。
      行を後から出し入れする画面でも、連絡の行が一つもない時だけ見せる。
    */
    & > .state[data-empty="true"] {
      padding-block: 0;
      padding-inline: 0;
      &:not(:only-child) {
        display: none;
      }
    }
    /* 差出人のアバターは左に置き、二段の本文をその右へ並べる。 */
    &[data-avatars="true"] > li > .row {
      grid-template-columns: 1.875rem minmax(0, 1fr) auto;
      grid-template-areas: "avatar body meta";
      column-gap: 0.625rem;
    }
    /* 書き出しを二行にする指定では、差出人の下で折り返す。 */
    &[data-preview-lines="2"] > li > .row > .body > .summary {
      flex-wrap: wrap;
      white-space: normal;
      & > .preview {
        flex-basis: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        &::before {
          content: none;
        }
      }
    }
    /* 狭い幅では、時刻を件名の行だけに置き、「差出人 – 書き出し」は下の段で幅いっぱいに使う。 */
    @container rx-message-list (inline-size < 30rem) {
      & > li > .row {
        grid-template-areas:
          "title meta"
          "summary summary";
        /* 日時は行の幅の4割までにし、文字を大きくしても本文の列を押し出さず折り返す。 */
        grid-template-columns: minmax(0, 1fr) fit-content(40%);
        column-gap: var(--rx-space-3);
        row-gap: 0.125rem;
        & > .body {
          display: contents;
          /* 件名は一行では数文字しか入らないため、二行まで折り返してから省略する。 */
          & > .title {
            grid-area: title;
            align-self: first baseline;
            /* 状態バッジ・件名・件数を一行に並べ、件名だけが縮んで二行まで折り返す。 */
            flex-wrap: nowrap;
            & > .subject {
              flex: 0 1 auto;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              white-space: normal;
              overflow-wrap: anywhere;
            }
          }
          & > .summary {
            grid-area: summary;
          }
        }
        /* 時刻は件名の一行目にそろえる。 */
        & > .meta {
          align-self: first baseline;
          flex-wrap: wrap;
          justify-content: end;
          text-align: end;
          white-space: normal;
        }
      }
      &[data-avatars="true"] > li > .row {
        grid-template-columns: 1.875rem minmax(0, 1fr) fit-content(40%);
        grid-template-areas:
          "avatar title meta"
          "avatar summary summary";
      }
    }
    /* さらに狭い時（文字を大きくした時を含む）は、アバターと日時を件名の上下へ回し、件名に幅を残す。 */
    @container rx-message-list (inline-size < 16rem) {
      & > li > .row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "title"
          "summary"
          "meta";
        /* バッジ・件名・件数が一行に入らない幅では、件数を次の行へ送り、行の外へはみ出さない。 */
        & > .body > .title {
          flex-wrap: wrap;
        }
        & > .meta {
          justify-content: start;
          text-align: start;
        }
      }
      &[data-avatars="true"] > li > .row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "avatar"
          "title"
          "summary"
          "meta";
        & > .avatar {
          justify-self: start;
        }
      }
    }
    /* 0件・読み込み中・失敗は、一覧の場所に文で示す。読み込み中だけ、行の形の斜線を流す。 */
    & > .state {
      display: grid;
      justify-items: center;
      gap: var(--rx-space-3);
      padding-block: var(--rx-space-8);
      padding-inline: var(--rx-space-3);
      color: var(--rx-muted);
      text-align: center;
    }
    &[data-state="loading"] > .state {
      justify-items: stretch;
      padding-block: var(--rx-space-4);
      text-align: start;
      &::before,
      &::after {
        content: "";
        block-size: 2.75rem;
        border-radius: var(--rx-radius-field);
        background:
          var(--rx-hatch) 0 0 / var(--rx-hatch-step) 100%,
          color-mix(in srgb, var(--rx-background) 70%, var(--rx-surface));
      }
      &::after {
        inline-size: 70%;
      }
      &::before,
      &::after {
        order: -1;
      }
    }
    &[data-state="error"] > .state {
      color: var(--rx-danger);
    }
  }
  @media (forced-colors: active) {
    .rx-message-list > li > .row > .meta > .unread {
      background: CanvasText;
    }
  }
}