@layer components {
  /* The list and an open thread take what the header, the strip and the bar leave of the screen, and each scrolls inside it. Under 20rem a landscape phone would leave the thread no room, so the page scrolls instead. */
  @media (width >= 960px) {
    body.chat-page {
      block-size: 100dvh;
      grid-template-rows: minmax(0, 1fr) auto;

      #global-container {
        min-block-size: 0;
      }

      #main {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-block-size: 20rem;
        padding-block-end: calc(var(--footer-height) + env(safe-area-inset-bottom));
      }
    }
  }

  /* On a phone the list is a page of its own, so only the open thread holds the screen. */
  @media (width < 960px) {
    body.chat-page:has(#main .thread) {
      block-size: 100dvh;
      grid-template-rows: minmax(0, 1fr) auto;

      #global-container {
        min-block-size: 0;
      }

      #main {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-block-size: 20rem;
        padding-block-end: calc(var(--footer-height) + env(safe-area-inset-bottom));
      }
    }
  }

  .chat {
    --chat-conversations-size: 19rem;

    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 40rem;
    text-align: start;

    &:has(> .chat__conversations) {
      max-inline-size: 65rem;
    }

    &:has(.thread) {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-block-size: 0;
    }

    @media (width >= 960px) {
      &:has(> .chat__conversations) {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: minmax(0, var(--chat-conversations-size)) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-block-size: 0;
      }
    }

    @media (width < 960px) {
      &:has(.thread) {
        inline-size: auto;
        margin-inline: calc(var(--main-padding) * -1);
        max-inline-size: none;
      }

      &:has(.thread) > .chat__conversations,
      &:not(:has(.thread)) > .chat__thread {
        display: none;
      }
    }
  }

  .chat__conversations,
  .chat__thread {
    min-inline-size: 0;
  }

  .chat__conversations {
    --rows-margin: 0;

    display: block;

    @media (width >= 960px) {
      --rows-bg: transparent;
      --rows-border-size: 0;
      --rows-padding: 0;
      --rows-shadow: none;

      border-inline-end: var(--border);
      overflow-y: auto;
      padding: var(--block-space) var(--block-space-half);
    }

    /* Beside a thread, its own empty state is the one on screen. */
    &:has(.row) .blank-slate,
    .chat:has(.thread) > & .blank-slate {
      display: none;
    }

    .row[aria-current] {
      background-color: var(--color-canvas);
    }

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

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

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

  .chat:has(> .chat__conversations):not(:has(.chat__conversations .row)) .chat__pick {
    display: none;
  }

  .chat__pick {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0;
    padding: var(--block-space-double) var(--block-space);
    text-align: center;
  }

  .thread__title,
  .thread {
    --thread-gutter: calc(var(--inline-space) + 1cqi);
  }

  .thread__title {
    border-block-end: var(--border);
    flex: none;
    font-size: var(--text-normal);
    line-height: 1.15;
    margin-block: 0;
    padding: var(--block-space-half) var(--thread-gutter);

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

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

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

  .thread:has(.message) .messages__empty {
    display: none;
  }

  .messages {
    --message-avatar-size: 2.5rem;
    --message-column-gap: 0.66ch;
    --message-space: 1.33em;
    --reaction-size: var(--text-small);

    display: flex;
    flex: 1 1 auto;
    flex-direction: column-reverse;
    gap: var(--message-space);
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--block-space);

    &:not(:has(.message)) {
      flex: none;
      padding-block: 0;
    }
  }

  /* Two classes, to outrank the small slate's own margin in tools.css. */
  .thread .messages__empty {
    border: 0;
    margin-block: auto;
    text-align: center;
  }

  .messages__note {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0;
    padding: var(--block-space);
    text-align: center;
  }

  .message {
    --avatar-size: var(--message-avatar-size);

    column-gap: var(--message-column-gap);
    display: grid;
    flex: none;
    grid-template-areas:
      "sep sep"
      "avatar body";
    grid-template-columns: var(--message-avatar-size) minmax(0, 1fr);
    padding-inline: var(--thread-gutter);
  }

  .message--me {
    grid-template-areas:
      "sep sep"
      "body avatar";
    grid-template-columns: minmax(0, 1fr) var(--message-avatar-size);

    .message__body {
      justify-self: end;
    }

    :is(.message__meta, .message__heading) {
      flex-direction: row-reverse;
    }
  }

  .message__day-separator {
    align-items: center;
    display: none;
    font-size: var(--text-x-small);
    font-weight: 600;
    grid-area: sep;
    grid-template-columns: 1fr auto 1fr;
    margin: 0 0 var(--message-space);
    text-align: center;
    text-transform: uppercase;

    &::before,
    &::after {
      border-block-start: 2px solid var(--color-ink-lighter);
      content: "";
    }

    .message--first-of-day & {
      display: grid;
    }
  }

  .message__day {
    background-color: var(--color-ink-lighter);
    border-radius: 3em;
    letter-spacing: 0.03em;
    padding: 0.5em var(--inline-space-double);
  }

  .message__avatar {
    align-self: start;
    grid-area: avatar;
  }

  .message__body {
    display: flex;
    grid-area: body;
    justify-self: start;
    max-inline-size: min(80ch, 85%);
    min-inline-size: 0;
    position: relative;

    @media (width < 640px) {
      max-inline-size: 100%;
    }
  }

  .message__body-content {
    background-color: var(--message-background, var(--color-canvas));
    border-radius: 0.66em;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: var(--message-padding, 0.66rem calc(var(--inline-space) * 1.5));
  }

  .message__meta {
    align-items: center;
    column-gap: calc(var(--message-column-gap) / 2);
    display: flex;
    line-height: 1.5;
    min-inline-size: 0;
  }

  .message__heading {
    align-items: baseline;
    column-gap: calc(var(--message-column-gap) / 2);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 400;
    line-height: inherit;
    margin: 0;
    min-inline-size: 0;
  }

  .message__author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message__permalink {
    color: var(--color-ink-dark);
    text-decoration: none;
    white-space: nowrap;

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

  .message__presentation {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  /* The menu hangs from the bubble's row, not the button, so it stays inside the scrolling thread at any width. */
  .message .message__actions {
    flex: none;
    margin-inline-start: auto;
    position: static;
  }

  .message--me .message__actions {
    margin-inline: 0 auto;
  }

  /* Two classes, to outrank the circle buttons.css makes of any labelled icon button. */
  .message .message__options-btn {
    --btn-background: transparent;
    --btn-size: 1.5em;
    --icon-size: 0.9em;

    margin-block: -0.25em;

    @media (any-hover: hover) {
      opacity: 0;
      transition: opacity var(--duration-medium) ease-in-out;

      .message:hover &,
      .message:has(dialog[open]) &,
      &:focus-visible {
        opacity: 1;
      }
    }

    @media (any-hover: none) {
      opacity: 0.5;
    }
  }

  .message .message__actions-menu {
    inset: auto auto 100% 0;
    margin: 0 0 0.25rem;
    translate: none;
  }

  .message--me .message__actions-menu {
    inset: auto 0 100% auto;
  }

  .message__edited {
    color: var(--color-ink-dark);
    white-space: nowrap;
  }

  .message:not(.message--editable) :is(.message__edit, .message__retract) {
    display: none;
  }

  .message__retract-form {
    display: flex;
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .message__reacting {
    display: flex;
    flex-wrap: wrap;
    padding-inline: calc(var(--popup-item-padding-inline) / 2);

    @media (any-hover: hover) {
      &:hover {
        background-color: transparent;
      }
    }
  }

  .message__react-btn {
    block-size: 2em;
    inline-size: 2em;
    padding: 0;
  }

  .message__edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--inline-space-half);
    margin-block: var(--inline-space-half);

    textarea {
      inline-size: 100%;
      resize: none;
    }
  }

  .message__edit-actions {
    display: flex;
    gap: var(--inline-space-half);
  }

  .message__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-start: 0.35rem;

    &:not(:has(.reaction)) {
      display: none;
    }
  }

  /* In rem through the tokens: an em here would be read against the avatar's own smaller letters. */
  .reaction {
    --avatar-size: calc(var(--reaction-size) * 1.3);

    align-items: center;
    border: var(--border);
    border-radius: 2em;
    display: inline-flex;
    font-size: var(--reaction-size);
    gap: 0.25em;
    padding: 0.1em 0.4em 0.1em 0.15em;

    .avatar {
      font-size: 0.6em;
    }
  }

  .reaction__form {
    display: none;

    .reaction--mine & {
      display: inline-flex;
    }
  }

  .reaction__remove {
    --btn-background: transparent;
    --icon-size: 0.7em;

    block-size: 1.3em;
    inline-size: 1.3em;
  }

  .message--highlighted .message__body-content {
    animation: tint-fade var(--duration-slow) ease-out 1s backwards;
  }

  .composer {
    flex: none;
    padding: var(--block-space-half) var(--thread-gutter) var(--block-space);
  }

  .composer__note {
    margin-block: 0 var(--block-space-half);
  }

  .composer__input {
    --icon-size: 1.25rem;
    --input-background: var(--color-canvas);
    --input-border-color: var(--color-ink-light);
    --input-border-radius: 1.3rem;
    --input-padding: 0.55rem var(--block-space);

    cursor: text;
  }

  /* Inline, the field would leave a descender's room under its one line. */
  .composer__input .autoresize__textarea {
    display: block;
  }
}