@layer components {
  /* ——— A room inside the panel ———
     Basecamp's ping in the slideover: the panel stops scrolling and becomes
     the room's column — the head pinned, the stream the one scroller, the
     composer at the foot — on the panel's own width. Everything the room is
     made of is messages.css and chat-composer.css; this file only sizes the
     column and tightens the lines for a narrow box. */
  /* Wins over the shell's overlay `display: block` by layer, so the column
     holds whether the panel pushes or overlays. */
  #panel:has(.panel-chat) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* A narrow box: the lines and the composer sit closer to the edges, the
     bubble may take most of it, the faces a size down, the head tighter —
     four values the room's own files read. */
  .panel-chat {
    --room-inset: var(--inline-space);
    --chat-head-space: var(--block-space-half);

    display: flex;
    flex-direction: column;
    flex: 1;
    min-block-size: 0;
  }

  .panel-chat__head {
    flex: none;
  }

  .panel-chat__name {
    font-size: var(--text-normal);
    font-weight: 600;
  }

  .panel-chat .messages {
    --message-avatar-size: 1.75rem;
    --message-avatar-column: 0.75rem;
    --bubble-max-inline-size: 90%;
  }
}