/* ══ THE MESSAGES, AS CARDS OF NIGHT GLASS ════════════════════  20 Oct 2026 (rp171) ══
   Sir, 20 Oct 2026, after the side panels: "the messages are okay, but the
   messages will need improvements unique to itself, because the messages has
   a different aesthetic, but it still needs these decent improvement".

   The messages keep their own look: the night photograph under the whole
   page, night glass over it, gold for what you sent (Sir, 22 to 25 Sep). What
   changes is the construction, in the same progression as the dashboards'
   cards and the side panel (Mason 68, 69), at night:

   - THE GLASS BECOMES CARDS. The list and the bar over the thread with its
     notice under it were slabs of glass meeting the window's edges and each
     other, so the photograph showed as a rectangle cut out of the middle.
     Each is now a card with a 22px corner and a faint edge, 12px from the
     window and from each other, and the photograph runs round them. The place
     to write was already a capsule floating on the photograph (25 Sep) and
     keeps its place, 4px off the foot. The job's side sheet (Sir, 22 Sep: it slides in from
     the right, full height) floats the same way, 12px in.
   - THE CONVERSATIONS REACH A PHONE. At 800px and under the list was hidden
     and nothing brought it back: on a phone a person with two trades could
     read one conversation. The bar over the thread has a button for all of
     them (with a gold dot when one is unread), which opens the list as the
     side panel's card from the left (rp169): 12px under the masthead, the
     scrim, the way shut, Escape; choosing one shuts it.
   - NO LINES ACROSS THE THREAD (Sir, 22 Sep): the rule either side of "Quote
     accepted" and "Money paid in" (`.cs-rule`) had come back.

   Sir's earlier rulings are kept as they were: the list compact at a desk
   (faces, names, times) and drawn out when the pointer comes to it; the open
   row marked by its lighter ground alone, no edge; the job's sheet from the
   right. hyyryn-messages-cards.js adds the phone's button, scrim and close.

   Linked at the end of both messages pages, after their own sheets. Most
   rules win on count (`.msg-shell.msg-shell`, Mason 05). Where the page's own
   rule is `!important` (the list's display at a desk is not touched; the
   job sheet's place is), the page's rule was changed in place instead. */

:root { --msg-head: 74px; --mc-hair: rgba(243,238,227,.13); }
@media (max-width: 980px) { :root { --msg-head: 64px; } }

/* ── 1. at a desk and a half window: three cards over the photograph ─── */
@media (min-width: 801px) {
  html body .msg-shell.msg-shell { padding: 12px; gap: 12px; box-sizing: border-box; }

  /* the list */
  html body .msg-shell.msg-shell .conv-list { border-radius: 22px; overflow: hidden; }
  html body .msg-shell.msg-shell .conv-list::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--mc-hair), inset 0 1px 0 rgba(255,255,255,.06); }
  html body .msg-shell.msg-shell .conv-list .conv-head { border-bottom-color: transparent; }

  /* the bar over the thread and the notice under it: one card in two parts */
  html body .msg-shell.msg-shell .thread .thread-head {
    border-radius: 22px 22px 0 0;
    box-shadow: inset 1px 1px 0 var(--mc-hair), inset -1px 0 0 var(--mc-hair); }
  html body .msg-shell.msg-shell .thread .trust-notice {
    border-radius: 0 0 22px 22px;
    box-shadow: inset 1px -1px 0 var(--mc-hair), inset -1px 0 0 var(--mc-hair); }
  html body .msg-shell.msg-shell .thread .thread-body { margin-top: 0; }

  /* the place to write keeps its capsule (Sir, 25 Sep: "barely a gap at the bottom", 4px off the foot), so the
     thread's column runs to the foot of the window and only the list and the job's sheet stop 12px short of it */
  html body .msg-shell.msg-shell { padding-bottom: 0; }
  html body .msg-shell.msg-shell .conv-list { margin-bottom: 12px; }
}

/* ── 2. rows in the list ─────────────────────────────────────────────── */
html body .msg-shell.msg-shell .conv-list .conv-item { margin: 2px 8px; border-radius: 14px; }
html body .msg-shell.msg-shell .conv-list .conv-scroll { padding: 4px 0 8px; }

/* ── 3. no lines across the thread (Sir, 22 Sep) ─────────────────────── */
html body .msg-shell.msg-shell .thread .course .cs-rule { opacity: 0; }   /* kept as space: the chip stays centred between them */

/* ── 4. on a phone: the conversations as the side panel's card ───────── */
.m-list-btn, .m-list-x, .m-list-scrim { display: none; }
@media (max-width: 800px) {
  html body .msg-shell.msg-shell .conv-list {
    display: flex; flex-direction: column; position: fixed; z-index: 206;
    top: calc(var(--msg-head) + 12px); left: 12px; bottom: 12px; width: min(320px, calc(100vw - 24px));
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.8);
    transform: translateX(calc(-100% - 24px)); visibility: hidden;
    transition: transform 320ms cubic-bezier(.22,.85,.3,1), visibility 0s linear 320ms;
  }
  html body .msg-shell.msg-shell .conv-list::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--mc-hair), inset 0 1px 0 rgba(255,255,255,.06); }
  html.m-list-open body .msg-shell.msg-shell .conv-list {
    transform: none; visibility: visible; transition: transform 320ms cubic-bezier(.22,.85,.3,1); }
  html body .msg-shell.msg-shell .conv-list .conv-head { position: relative; }
  html body .msg-shell.msg-shell .conv-list .conv-head .count { margin-right: 42px; }   /* room for the way shut */

  .m-list-scrim {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--msg-head); z-index: 205;
    background: rgba(4,9,15,.45); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
  html.m-list-open .m-list-scrim { opacity: 1; pointer-events: auto; }

  /* the button for all of them, at the start of the bar over the thread */
  html body .msg-shell .thread .thread-head .m-list-btn {
    position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0 10px 0 0; padding: 0;
    border: 0; border-radius: 50%; background: rgba(243,238,227,.10); cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(243,238,227,.20); }
  html body .msg-shell .thread .thread-head .m-list-btn::before {
    content: ''; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat; }
  html body .msg-shell .thread .thread-head .m-list-btn.has-unread::after {
    content: ''; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%;
    background: #E2AC68; box-shadow: 0 0 0 2px #0A1628; }
  html body .msg-shell .thread .thread-head .m-list-btn:focus-visible { outline: 2px solid #E2AC68; outline-offset: 2px; }

  /* the way shut, in the list's head */
  html body .msg-shell .conv-list .m-list-x {
    display: grid; place-items: center; position: absolute; top: 50%; right: 14px; translate: 0 -50%;
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(243,238,227,.10); box-shadow: inset 0 0 0 1px rgba(243,238,227,.22); }
  html body .msg-shell .conv-list .m-list-x::before {
    content: ''; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat; }
  html body .msg-shell .conv-list .m-list-x:focus-visible { outline: 2px solid #E2AC68; outline-offset: 2px; }

  /* the bar over the thread and the notice, as one card with a margin; the bar's words give way
     before its buttons (the job's name ran under the call button) */
  html body .msg-shell.msg-shell .thread .thread-head {
    margin: 8px 8px 0; padding: 12px 14px; gap: 10px; border-radius: 20px 20px 0 0;
    box-shadow: inset 1px 1px 0 var(--mc-hair), inset -1px 0 0 var(--mc-hair); }
  html body .msg-shell.msg-shell .thread .thread-head .who { flex: 1 1 auto; min-width: 0; }
  html body .msg-shell.msg-shell .thread .thread-head .who > div { min-width: 0; }
  html body .msg-shell.msg-shell .thread .thread-head .who :is(.n, .s) { overflow: hidden; text-overflow: ellipsis; }
  html body .msg-shell.msg-shell .thread .thread-head .acts { flex: none; }
  html body .msg-shell.msg-shell .thread .trust-notice {
    margin: 0 8px; padding-left: 14px; padding-right: 14px; border-radius: 0 0 20px 20px;
    box-shadow: inset 1px -1px 0 var(--mc-hair), inset -1px 0 0 var(--mc-hair); }
}
@media (prefers-reduced-motion: reduce) {
  html body .msg-shell.msg-shell .conv-list, .m-list-scrim { transition: none; }
}
@media (forced-colors: active) {
  html body .msg-shell.msg-shell .conv-list { border: 1px solid CanvasText; }
}