/* ─────────────────────────────────────────────────────────────────────────
   PipChat! Web — Messages.

   A two-pane deck sized to the viewport: the conversation list holds still on
   the left, the transcript scrolls on its own on the right, and the composer is
   pinned to the bottom of its pane. The page itself never scrolls, so sending a
   message never moves the furniture.

   Below 940px the two panes stop coexisting — `.show-thread` swaps which one is
   rendered, so a phone gets a full-width list or a full-width thread, never a
   squeezed pair.

   Reminder (see app.css): icons are inline <svg> with a viewBox and no
   width/height, so every component here declares its own svg size.
   ───────────────────────────────────────────────────────────────────────── */

.mt-normal { --mc: var(--type-normal); --mc-soft: var(--type-normal-soft); --mc-ink: var(--type-normal-2); }
.mt-biz    { --mc: var(--type-biz);    --mc-soft: var(--type-biz-soft);    --mc-ink: var(--type-biz-2); }
.mt-gov    { --mc: var(--type-gov);    --mc-soft: var(--type-gov-soft);    --mc-ink: var(--type-gov-2); }
.mt-pip    { --mc: var(--orange);      --mc-soft: var(--orange-soft);      --mc-ink: var(--orange-deep); }

.msg-deck {
  display: grid; grid-template-columns: 340px 1fr; gap: 16px;
  height: calc(100vh - var(--nav-h) - 132px); min-height: 460px;
  margin-bottom: 40px;
}

.msg-list, .msg-thread {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* ── Conversation list ────────────────────────────────────────────────── */
/* Two controls, two axes: an exclusive segmented control for state, and a type
   filter that stays a single icon until it is actually used. Six equal chips
   in one scrolling row was the crowding — and it hid that these are different
   questions. */
.msg-list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 10px; border-bottom: 1px solid var(--divider);
}

.msg-seg-wrap {
  display: flex; flex: 1; min-width: 0; padding: 3px;
  border-radius: 999px; background: var(--bg-2); border: 1px solid var(--hairline);
}
.msg-seg {
  flex: 1; text-align: center; padding: 6px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}
.msg-seg:hover { color: var(--ink); }
.msg-seg.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }

.msg-type-wrap { position: relative; flex-shrink: 0; }
.msg-typebtn {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  color: var(--muted); border: 1px solid var(--hairline); background: var(--paper);
  transition: background .12s, color .12s, border-color .12s;
}
.msg-typebtn:hover { background: var(--bg-2); color: var(--ink); }
.msg-typebtn svg { width: 15px; height: 15px; }
/* Active it names itself and carries its own clear — a narrowed list must never
   be mistakable for an empty inbox. */
.msg-typechip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.msg-typechip:hover { background: #000; }
.msg-typechip svg { width: 13px; height: 13px; }
.msg-typechip svg:last-child { opacity: .65; }

.msg-typemenu {
  position: absolute; right: 0; top: calc(100% + 7px); min-width: 186px; z-index: 20;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 5px; display: none;
}
.msg-typemenu.open { display: block; }
.mtm-head {
  display: block; padding: 7px 11px 6px; font-size: 10.5px; font-weight: 800;
  color: var(--subtle); text-transform: uppercase; letter-spacing: .07em;
}

.msg-rows { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.msg-empty { padding: 10px; }
.msg-more { padding: 12px; text-align: center; border-top: 1px solid var(--divider); }

.msg-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  border-bottom: 1px solid var(--divider); position: relative; transition: background .12s;
}
.msg-row:hover { background: var(--bg-2); }
.msg-row.on { background: var(--mc-soft); }
.msg-row.on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mc);
}
.mr-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mr-top { display: flex; align-items: baseline; gap: 8px; }
.mr-name {
  font-size: 14px; font-weight: 700; color: var(--ink); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-row.is-unread .mr-name { font-weight: 900; }
.mr-time { font-size: 11px; color: var(--subtle); font-weight: 600; flex-shrink: 0; }
.mr-bottom { display: flex; align-items: center; gap: 8px; }
.mr-prev {
  font-size: 12.5px; color: var(--muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-row.is-unread .mr-prev { color: var(--body); font-weight: 600; }
.mr-you { color: var(--subtle); }
.mr-badge {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.mr-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.mr-tag {
  padding: 2px 7px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--hairline);
  font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.mr-tag.warn { background: var(--amber-soft); color: #8A5500; border-color: transparent; }
.mr-tag.danger { background: var(--red-soft); color: var(--red); border-color: transparent; }

/* ── Thread ───────────────────────────────────────────────────────────── */
.msg-none, .msg-blank {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; padding: 40px 26px; color: var(--muted);
}
.msg-none-ic, .msg-blank > svg {
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg-2); color: var(--subtle); margin-bottom: 6px; padding: 15px;
}
.msg-none-ic svg { width: 24px; height: 24px; }
.msg-none b, .msg-blank b { font-size: 15px; font-weight: 800; color: var(--ink); }
.msg-none span, .msg-blank span { font-size: 13px; max-width: 300px; line-height: 1.5; }

.msg-head {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border-bottom: 1px solid var(--divider); background: var(--mc-soft, var(--bg-2)); flex-shrink: 0;
}
.msg-head .spacer { flex: 1; }
.msg-back { display: none; width: 32px; height: 32px; border-radius: 9px; place-items: center; color: var(--body); flex-shrink: 0; }
.msg-back:hover { background: var(--paper); }
.msg-back svg { width: 18px; height: 18px; }
.msg-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mw-tx { display: flex; flex-direction: column; min-width: 0; }
.mw-tx b { font-size: 14.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-tx span { font-size: 11.5px; color: var(--mc-ink, var(--muted)); font-weight: 600; }
a.msg-who:hover .mw-tx b { text-decoration: underline; }

.msg-menu-wrap { position: relative; flex-shrink: 0; }
.msg-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 20;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 5px; display: none;
}
.msg-menu.open { display: block; }

.msg-stream {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 3px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%),
    var(--bg-2);
}
.msg-older { text-align: center; padding: 4px 0 14px; }

.msg-day { text-align: center; margin: 14px 0 10px; }
.msg-day span {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--hairline);
  font-size: 11px; font-weight: 700; color: var(--muted);
}

.msg-system { text-align: center; margin: 8px 0; }
.msg-system span {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--hairline);
  font-size: 12px; color: var(--muted); max-width: 80%;
}

.msg-b { display: flex; margin-top: 3px; }
.msg-b.mine { justify-content: flex-end; }
.msg-b.theirs { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
.bub-who { font-size: 11px; font-weight: 700; color: var(--muted); margin: 6px 0 2px 12px; }

.bub {
  position: relative; max-width: min(560px, 76%); padding: 9px 13px 7px;
  border-radius: 16px; font-size: 14px; line-height: 1.5;
  box-shadow: var(--shadow-sm); overflow-wrap: anywhere;
}
.msg-b.theirs .bub { background: var(--paper); color: var(--body); border-bottom-left-radius: 5px; }
.msg-b.mine .bub {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border-bottom-right-radius: 5px;
}
.msg-b.pending .bub { opacity: .62; }
.bub.gone {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2); color: var(--subtle); font-style: italic;
  border: 1px dashed var(--hairline); box-shadow: none;
}
.bub.gone svg { width: 13px; height: 13px; }
.bub-tx { display: block; white-space: pre-wrap; }

.bub-meta {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  margin-top: 3px; font-size: 10.5px; opacity: .72;
}
.msg-b.mine .bub-meta { color: rgba(255,255,255,.92); }
.msg-b.theirs .bub-meta { color: var(--subtle); }
.bub-tick svg { width: 12px; height: 12px; }
.bub-edited { font-style: italic; }

.bub-img { border-radius: 11px; max-width: 100%; max-height: 320px; object-fit: cover; cursor: zoom-in; }

.bub-card {
  display: flex; align-items: center; gap: 11px; min-width: 210px;
  padding: 3px 2px; color: inherit;
}
.bc-thumb {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: rgba(0,0,0,.06);
}
.msg-b.mine .bc-thumb { background: rgba(255,255,255,.2); }
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bc-thumb svg { width: 19px; height: 19px; }
.bc-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bc-kicker { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; opacity: .72; }
.bc-tx b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-price { font-size: 12px; opacity: .8; }
.bub-card > svg { width: 15px; height: 15px; opacity: .6; flex-shrink: 0; }
a.bub-card:hover .bc-tx b { text-decoration: underline; }

/* ── Composer & gates ─────────────────────────────────────────────────── */
.msg-composer {
  display: flex; align-items: flex-end; gap: 9px; padding: 11px 13px 6px;
  border-top: 1px solid var(--divider); background: var(--paper); flex-shrink: 0;
}
.msg-attach {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  color: var(--muted); cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s;
}
.msg-attach:hover { background: var(--bg-2); color: var(--ink); }
.msg-attach svg { width: 19px; height: 19px; }
.msg-input {
  flex: 1; resize: none; max-height: 150px; padding: 10px 14px;
  border: 1px solid var(--hairline); border-radius: 19px; background: var(--bg-2);
  font-size: 14px; line-height: 1.45; color: var(--ink); transition: border-color .14s, box-shadow .14s;
}
.msg-input:focus {
  outline: none; background: var(--paper); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.msg-send { width: 38px; height: 38px; padding: 0; border-radius: 999px; flex-shrink: 0; }
.msg-send svg { width: 17px; height: 17px; }
.msg-hint {
  font-size: 10.5px; color: var(--subtle); text-align: center;
  padding: 0 0 9px; background: var(--paper); flex-shrink: 0;
}

.msg-gate {
  padding: 16px; border-top: 1px solid var(--divider); background: var(--bg-2);
  text-align: center; flex-shrink: 0;
}
.msg-gate p { font-size: 13.5px; color: var(--body); font-weight: 600; }
.msg-gate-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 11px; }
.msg-gate.blocked, .msg-gate.muted {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--muted); font-size: 13px;
}
.msg-gate.blocked svg, .msg-gate.muted svg { width: 16px; height: 16px; flex-shrink: 0; }
.msg-gate.blocked { background: var(--red-soft); }
.msg-gate.blocked p { color: var(--red); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 939px) {
  /* One pane at a time. `.show-thread` is set the moment a conversation opens
     and cleared by navigating back to /messages. */
  .msg-deck { grid-template-columns: 1fr; height: calc(100vh - var(--nav-h) - 120px); }
  .msg-deck .msg-thread { display: none; }
  .msg-deck.show-thread .msg-list { display: none; }
  .msg-deck.show-thread .msg-thread { display: flex; }
  .msg-back { display: grid; }
  .bub { max-width: 84%; }
}

@media (max-width: 600px) {
  .msg-deck { height: calc(100vh - var(--nav-h) - 96px); margin-bottom: 20px; }
  .msg-stream { padding: 14px 11px; }
  .bub { max-width: 88%; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-row, .msg-tab, .msg-input { transition: none; }
}