/* Messages (messages.js): the conversations list, one conversation as bubbles with the box to write in at the
   bottom, the @ list of members to mention, and a post someone sent as a small card. Built on the shared tokens
   and profile.css's pf- pieces (boxes, rows, faces, empty states); everything here is a msg- class. Light (cream)
   and the navy look both come from the tokens. Text is 16px and up; every tap target is 48px or more. */

:root, :root[data-theme="light"] {
  --msg-mine: #0b1f3b;                       /* your bubbles: navy, cream words */
  --msg-mine-ink: #f8f4e9;
  --msg-theirs: #ffffff;                     /* theirs: white, navy words */
  --msg-theirs-ink: #0b1f3b;
  --msg-dot: #3ba7f9;                        /* unread: the client's blue */
  --msg-dot-ink: #0b1f3b;
  --msg-bar: rgba(248, 244, 233, 0.94);      /* the composer's band over the page */
}
:root[data-theme="dark"] {
  --msg-mine: #3ba7f9;
  --msg-mine-ink: #0b1f3b;
  --msg-theirs: #122b4f;
  --msg-theirs-ink: #f8f4e9;
  --msg-dot: #3ba7f9;
  --msg-dot-ink: #0b1f3b;
  --msg-bar: rgba(11, 31, 59, 0.94);
}

/* The Shell's screen for it (app.js): the same width and side room as the library's, room at the foot for the
   dock (the mini player and the bottom navigation). */
#msg-screen { max-width: 1080px; padding: 0 16px calc(var(--dock-h) + 16px); overflow-x: clip; }
#msg-screen .view { padding-top: 2px; }
.msg-page [hidden] { display: none !important; }
.msg-page .page-title { margin: 20px 0 16px; }
.msg-page .page-title .display { font: 700 30px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.msg-page .page-title .page-lede { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
/* The name with the check after it, and @handle in small gray letters beside or under it. */
.msg-name { display: inline; font: 600 17px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.msg-name .pf-verified { vertical-align: -2px; }
.msg-handle { font-size: 14.5px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- #messages: the conversations ---------- */
.msg-list { margin: 0; }
.msg-row { min-height: 76px; padding: 12px 16px 12px 14px; gap: 12px; }
.msg-av { flex: 0 0 auto; display: block; }
.msg-row-text { gap: 3px; }
.msg-row-top { display: flex; align-items: baseline; gap: 6px 8px; min-width: 0; }
.msg-row-top .msg-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-top .msg-handle { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-when { flex: 0 0 auto; margin-left: auto; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.msg-last { display: block; font-size: 15.5px; line-height: 1.35; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row.unread .msg-last { color: var(--ink); font-weight: 500; }
.msg-row.unread .msg-when { color: var(--clay-dark); font-weight: 600; }
/* Unread: a blue dot with the number. */
.msg-dot {
  flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--msg-dot); color: var(--msg-dot-ink); font: 700 13px/1 var(--sans);
}

/* ---------- One conversation ---------- */
/* The screen is a column at least as tall as what's left under the header and over the dock, so the box to write
   in sits at the bottom even when there's little said yet, and sticks there while the notes scroll. */
.msg-thread { display: flex; flex-direction: column; min-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px) - var(--dock-h) - 16px); }
/* The person at the top: their face, name and @handle, a tap for their page. It stays put under the header. */
.msg-head {
  position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 3;
  margin: 0 -16px; padding: 6px 16px 8px;
  background: var(--msg-bar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.msg-head .pf-loading { padding: 8px 0; }
.msg-who {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 10px 4px 6px; border-radius: 14px;
  color: var(--ink); text-decoration: none;
}
.msg-who:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.msg-who > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.msg-who > svg { flex: 0 0 auto; color: var(--ink-2); }
.msg-who .msg-name { font-size: 18px; }
/* The notes, oldest at the top, the latest just over the box. */
.msg-log { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 10px 0 12px; }
.msg-log .pf-box { align-self: stretch; }
.msg-earlier { display: flex; justify-content: center; padding: 4px 0 8px; }
.msg-earlier .btn { width: auto; min-height: 48px; padding: 12px 22px; }
.msg-hello { display: grid; justify-items: center; gap: 4px; margin: auto 0 12px; text-align: center; color: var(--ink-2); }
.msg-hello p { margin: 0; max-width: 340px; font-size: 16px; line-height: 1.5; }
.msg-hello b { color: var(--ink); }
.msg-day { align-self: center; margin: 10px 0 4px; font: 600 12.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
/* A bubble: at most 84% wide; yours at the right in navy, theirs at the left in white; the time in small letters
   under the words. Notes close together (the same person, within five minutes) sit closer. */
.msg-bubble {
  position: relative; max-width: 84%; display: grid; gap: 6px;
  padding: 10px 14px 8px; border-radius: 18px;
  font-size: 16.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal;
  box-shadow: 0 1px 2px rgba(11, 31, 59, 0.06);
}
.msg-bubble.theirs { align-self: flex-start; background: var(--msg-theirs); color: var(--msg-theirs-ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-bubble.mine { align-self: flex-end; background: var(--msg-mine); color: var(--msg-mine-ink); border-bottom-right-radius: 6px; }
.msg-bubble.close { margin-top: -4px; }
.msg-bubble.theirs.close { border-top-left-radius: 8px; }
.msg-bubble.mine.close { border-top-right-radius: 8px; }
.msg-bubble.sending { opacity: 0.6; }
.msg-bubble.failed { outline: 2px solid var(--help); outline-offset: 1px; }
.msg-text { margin: 0; }
.msg-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg-mention { font-weight: 600; }
.msg-time { display: block; font-size: 12.5px; line-height: 1.2; opacity: 0.72; text-align: right; }
.msg-bubble.theirs .msg-time { text-align: left; }
.msg-retry { display: inline; margin: 0; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; min-height: 24px; }
/* A post someone sent: a small card inside the bubble, white in theirs, cream in yours, opening the post. */
.msg-post {
  display: grid; gap: 4px; margin: 0 -4px 2px; padding: 10px 12px; border-radius: 12px;
  background: var(--paper-2); color: var(--ink); text-decoration: none; border: 1px solid var(--line);
}
.msg-bubble.mine .msg-post { background: var(--cream-brand); color: var(--navy); border-color: transparent; }
.msg-post-who { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.msg-bubble.mine .msg-post-who { color: #4a5568; }
.msg-post-who .pf-verified { vertical-align: -3px; }
.msg-post b { font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; }
.msg-post p { margin: 0; font-size: 15px; line-height: 1.4; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.msg-post small { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; color: var(--clay-dark); }
.msg-bubble.mine .msg-post small { color: #1f6fb3; }
.msg-post:active { filter: brightness(0.97); }

/* The box to write in: stuck to the bottom, over the dock, with the Send button at its right. It grows to about
   five lines, then scrolls. */
.msg-composer {
  position: sticky; bottom: var(--dock-h); z-index: 4;
  display: flex; align-items: flex-end; gap: 8px;
  margin: 0 -16px; padding: 8px 16px 10px;
  background: var(--msg-bar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.msg-input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 140px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: 24px; resize: none;
  background: var(--paper); color: var(--ink); font: 16.5px/1.4 var(--sans);
}
.msg-input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 22%, transparent); }
.msg-send {
  flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: var(--clay); color: var(--navy);
  box-shadow: 0 4px 12px rgba(31, 111, 179, 0.25);
}
.msg-send svg { display: block; }
.msg-send:active { transform: translateY(1px); }
.msg-send:disabled { opacity: 0.5; }

/* ---------- @ and two letters: the members to mention, just above the box ---------- */
/* In another screen's composer (attachMentions makes one over the box) it sits in the flow, over the box's top edge;
   in a conversation's it floats over the notes. */
.msg-people {
  position: relative; z-index: 5; margin: 0 0 8px;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
  box-shadow: var(--pf-shadow, 0 8px 24px rgba(11, 31, 59, 0.1));
}
.msg-composer > .msg-people {
  position: absolute; left: 16px; right: 16px; bottom: calc(100% - 2px); margin: 0;
  box-shadow: 0 -6px 24px rgba(11, 31, 59, 0.14);
}
.msg-people ul { margin: 0; padding: 4px; list-style: none; }
.msg-person {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 6px 10px;
  border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left;
}
.msg-person span { flex: 1 1 auto; min-width: 0; display: grid; gap: 0; }
.msg-person b { font: 600 16px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-person small { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.msg-person.on, .msg-person:active { background: color-mix(in srgb, var(--clay) 14%, transparent); }
/* On a computer: the conversation no wider than the page's column. */
@media (min-width: 720px) {
  .msg-thread { max-width: 720px; margin: 0 auto; }
  .msg-head, .msg-composer { margin: 0; border-radius: 0; }
  .msg-composer > .msg-people { left: 0; right: 0; }
}
/* A short phone: a little less around the head. */
@media (max-height: 700px) { .msg-who { min-height: 52px; } }
/* No animation when asked. */
@media (prefers-reduced-motion: reduce) { .msg-bubble { transition: none; } }

/* ---------- A conversation's ⋯: report or block (and what a block looks like) ---------- */
.msg-head-row { display: flex; align-items: center; gap: 4px; }
.msg-head-row .msg-who { flex: 1 1 auto; min-width: 0; }
.msg-menu {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
.msg-menu:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.msg-blocked {
  display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 0; padding: 14px 16px; border-radius: 16px;
  background: var(--paper); box-shadow: var(--shadow); color: var(--ink);
}
.msg-blocked svg { flex: 0 0 auto; margin-top: 2px; color: var(--ink-2); }
.msg-blocked b { display: block; font: 600 16px/1.35 var(--sans); }
.msg-blocked small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }