/*
MessageList

A scroller that fills its container and follows the newest message. The
scroll button and the overlay slot float over the viewport, so showing
and hiding them never moves anything.

  .message-list[data-at-bottom][data-stuck][data-mounting]
    .message-list-viewport (role=log)
      .message-list-content          the messages, spaced by --message-list-gap
    .message-list-overlay            top right: MessageListDownload
    .message-list-scroll             bottom center, hidden at the bottom
  .message-list-empty                centered placeholder
*/

@layer components {

.message-list {
  --message-list-gap:     var(--space-6);
  --message-list-padding: var(--space-4);

  position:       relative;
  display:        flex;
  flex-direction: column;
  width:          100%;
  height:         100%;
  min-height:     0;
  flex:           1 1 auto;
  overflow:       hidden;
}

.message-list-viewport {
  flex:                1 1 auto;
  min-height:          0;
  overflow-x:          hidden;
  overflow-y:          auto;
  overscroll-behavior: contain;
  scrollbar-gutter:    stable;
}

/* Until the controller starts, the server-rendered list rests at its newest
   message: a snap point at the content's end puts it there on the first
   paint, so mounting has nothing left to scroll. The point is a 1px marker,
   since a snap area taller than the viewport would let it rest anywhere. */
.message-list[data-mounting] > .message-list-viewport {
  scroll-snap-type: y mandatory;
}

.message-list[data-mounting] > .message-list-viewport > .message-list-content {
  position: relative;
}

.message-list[data-mounting] > .message-list-viewport > .message-list-content::after {
  content:           "";
  position:          absolute;
  inset-inline:      0;
  bottom:            0;
  height:            1px;
  scroll-snap-align: end;
}

.message-list-viewport:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

.message-list-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--message-list-gap);
  min-height:     100%;
  padding:        var(--message-list-padding);
}

/* Follow-ups from the same sender sit closer than separate messages. */
.message-list-content > .message[data-grouped] {
  margin-top: calc(var(--space-1) - var(--message-list-gap));
}

.message-list-overlay {
  position:    absolute;
  top:         var(--space-3);
  inset-inline-end: var(--space-3);
  display:     flex;
  gap:         var(--space-2);
}

.message-list-overlay:not(:has(*)) {
  display: none;
}

.message-list .message-list-overlay > .button,
.message-list > .button.message-list-scroll {
  border-radius: var(--radius-full);
  background:    var(--bg-elevated);
  box-shadow:    var(--overlay-shadow);
}

.button.message-list-scroll {
  position:   absolute;
  bottom:     var(--space-4);
  left:       50%;
  translate:  -50% 0;
  opacity:    1;
  visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-out),
              visibility 0s linear 0s;
}

.button.message-list-scroll:hover {
  background: var(--bg-muted);
}

.message-list[data-at-bottom] > .message-list-scroll {
  opacity:    0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-out),
              visibility 0s linear var(--duration-fast);
}

/* Empty */

.message-list-empty {
  display:         flex;
  flex:            1 1 auto;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  min-height:      100%;
  padding:         var(--space-8);
  text-align:      center;
  font-family:     var(--font-ui);
}

.message-list-empty-icon {
  display: flex;
  color:   var(--ink-dim);
}

.message-list-empty-icon:not(:has(*)) {
  display: none;
}

.message-list-empty-icon svg {
  width:  var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.message-list-empty-text {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.message-list-empty-title {
  margin:      0;
  font-family: var(--font-ui);
  font-size:   var(--text-ui);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-ui);
}

.message-list-empty-description {
  margin:    0;
  color:     var(--ink-dim);
  font-size: var(--text-ui);
}

}