/* hyyryn-messages-slide.css (rp174, 21 Oct 2026): the conversations drawn out smoothly at a desk.

   Sir, 21 Oct 2026: "The messages left panel should slide smoother and more seamless."

   WHAT IT DID. At a desk the list is compact (faces, names, times; Sir, 22 Sep) and draws out when the pointer comes
   to it, making room rather than covering the thread (Sir, 25 Sep). On the way out it changed its whole layout in one
   frame while its width was still 232px: the search box and the footer appeared and pushed the rows down by 64px, the
   unread count appeared, each row's time jumped from under the name to the right, the preview line appeared, and the
   names and previews then re-wrapped on every frame as the card widened. The curve (.16,1,.3,1) spent most of its
   movement in the first 80ms, so it read as a snap. It opened the moment the pointer passed within 28px.

   NOW. The list lays itself out at its open width (340px) all the time and the card clips it, so widening reveals
   what is already there instead of re-flowing it; the search and the footer open their height with the card; the
   count, the search and the preview fade in as the room arrives; each row is the same height open or compact, and its
   name and time glide to their places (the page's script, FLIP). The card, the thread making room and the reveal share
   one curve, 380ms out and 300ms back. The page's script waits 70ms before opening and 140ms before shutting.
   Reduced motion: no movement, as before. Desk only (1100px and wider); the phone's list is rp171's card. */

@media (min-width: 1100px) {
  /* one curve for the card, the thread making room, and everything revealed */
  html.list-compact body .msg-shell.msg-shell { transition: grid-template-columns 300ms cubic-bezier(.25,.8,.25,1); }
  html.list-compact.list-out body .msg-shell.msg-shell { transition-duration: 380ms; }
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list {
    transition: width 300ms cubic-bezier(.25,.8,.25,1), background-color 300ms ease; }
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list.conv-list { transition-duration: 380ms, 380ms; }

  /* laid out at the open width, clipped by the card: nothing inside re-flows as it widens */
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list > :is(.conv-head, .conv-search, .conv-found, .conv-scroll, .conv-legal) {
    width: 340px; min-width: 340px; box-sizing: border-box; }

  /* the count in the head: always laid out, faded with the room */
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list .conv-head .count {
    display: block !important; opacity: 0; transition: opacity 160ms ease; }
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list.conv-list .conv-head .count { opacity: 1; transition: opacity 240ms ease 140ms; }

  /* the search and the footer open their height with the card instead of appearing at full height */
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list .conv-search {
    display: block !important; overflow: hidden; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0;
    transition: max-height 300ms cubic-bezier(.25,.8,.25,1), padding 300ms cubic-bezier(.25,.8,.25,1), opacity 140ms ease; }
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list.conv-list .conv-search {
    max-height: 64px; padding-top: 14px; padding-bottom: 14px; border-bottom-width: 1px; opacity: 1;
    transition: max-height 380ms cubic-bezier(.25,.8,.25,1), padding 380ms cubic-bezier(.25,.8,.25,1), opacity 240ms ease 120ms; }
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list .conv-search input { display: block !important; }
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list .conv-legal {
    display: flex !important; overflow: hidden; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0;
    transition: max-height 300ms cubic-bezier(.25,.8,.25,1), padding 300ms cubic-bezier(.25,.8,.25,1), opacity 140ms ease; }
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list.conv-list .conv-legal {
    max-height: 45px; padding-top: 8px; padding-bottom: 8px; border-top-width: 1px; opacity: 1;
    transition: max-height 380ms cubic-bezier(.25,.8,.25,1), padding 380ms cubic-bezier(.25,.8,.25,1), opacity 240ms ease 120ms; }

  /* a row is the same height compact or open: the name and time (compact) or the name, time and preview (open) sit
     in the same 43px, so no row moves down as the card widens */
  html.list-compact body .msg-shell.msg-shell .conv-list .conv-item > div:last-child {
    min-height: 43px; display: flex; flex-direction: column; justify-content: center; }
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list .conv-item > div:last-child { justify-content: flex-start; }
  /* compact, the name stops before the card's edge (it is laid out 340px wide) */
  html.list-compact:not(.list-out) body .msg-shell.msg-shell .conv-list .conv-item .n { max-width: 140px; }
  /* the preview fades in on the line the time has left */
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list .conv-item .subj { animation: hy-list-in 260ms ease 120ms both; }
  @keyframes hy-list-in { from { opacity: 0; } to { opacity: 1; } }
  html.list-compact body .msg-shell.msg-shell .conv-list .conv-item .tm { will-change: transform; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.list-compact body .msg-shell.msg-shell,
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list,
  html.list-compact body .msg-shell.msg-shell .conv-list.conv-list :is(.conv-search, .conv-legal, .count) { transition: none !important; }
  html.list-compact.list-out body .msg-shell.msg-shell .conv-list .conv-item .subj { animation: none; }
}