/* ============================================================
   Texas United — Member message centre (two-pane inbox + thread)
   Scoped under .txunited-msg. Brand tokens mirror the portal.
   ============================================================ */
.txunited-msg {
  --navy: #0a1d3b;
  --navy-700: #103057;
  --gold: #c9a14a;
  --gold-600: #b08a3a;
  --ink: #1a1a1a;
  --muted: #56607a;
  --faint: #8a8a8a;
  --paper: #faf7f2;
  --paper-2: #f3eee5;
  --card: #ffffff;
  --rule: #e5e0d6;
  --rule-soft: #efe9dd;
  --font: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num: 'Inter', system-ui, -apple-system, sans-serif;

  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  max-width: 1080px;
  margin: 0 auto;
}
.txunited-msg *, .txunited-msg *::before, .txunited-msg *::after { box-sizing: border-box; }
.txunited-msg .txunited-num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.txunited-msg a { color: inherit; text-decoration: none; }

.txunited-msg__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: min(72vh, 640px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10, 29, 59, .06), 0 8px 24px rgba(10, 29, 59, .05);
}

/* ---------- inbox ---------- */
.txunited-msg__inbox { border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.txunited-msg__inbox-head { padding: 16px 18px; font-weight: 800; font-size: 1.1rem; color: var(--navy); border-bottom: 1px solid var(--rule); background: var(--card); }
.txunited-msg__inbox-list { overflow-y: auto; flex: 1; min-height: 0; }
.txunited-msg__empty-inbox { padding: 18px; color: var(--muted); font-size: .88rem; }
.txunited-msg__conv { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); transition: background .14s; }
.txunited-msg__conv:hover { background: var(--paper-2); }
.txunited-msg__conv.is-active { background: var(--card); box-shadow: inset 3px 0 0 var(--gold); }
.txunited-msg__conv-av { flex: none; }
.txunited-msg__conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txunited-msg__conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.txunited-msg__conv-top b { font-size: .9rem; color: var(--navy); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txunited-msg__conv-time { font-size: .72rem; color: var(--faint); flex: none; }
.txunited-msg__conv-preview { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txunited-msg__conv.is-unread .txunited-msg__conv-top b,
.txunited-msg__conv.is-unread .txunited-msg__conv-preview { color: var(--navy); font-weight: 700; }
.txunited-msg__conv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- thread ---------- */
.txunited-msg__thread { display: flex; flex-direction: column; min-height: 0; }
.txunited-msg__placeholder { margin: auto; text-align: center; color: var(--muted); padding: 2rem; }
.txunited-msg__placeholder svg { width: 54px; height: 54px; color: var(--gold); margin: 0 auto .9rem; }
.txunited-msg__placeholder p { margin: 0 0 1rem; }
.txunited-msg__thread-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--card); }
.txunited-msg__back { display: none; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; color: var(--navy); flex: none; }
.txunited-msg__back:hover { background: var(--paper-2); }
.txunited-msg__back svg { width: 20px; height: 20px; }
.txunited-msg__thread-av { flex: none; }
.txunited-msg__thread-id b { display: block; font-size: .95rem; color: var(--navy); font-weight: 700; }
.txunited-msg__thread-link { font-size: .76rem; color: var(--gold-600); font-weight: 600; }
.txunited-msg__thread-link:hover { color: var(--navy); }

.txunited-msg__messages { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.txunited-msg__thread-empty { margin: auto; color: var(--faint); font-size: .85rem; font-style: italic; }
.txunited-msg__bubble { max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.45; }
.txunited-msg__bubble-body { display: block; overflow-wrap: break-word; word-wrap: break-word; }
.txunited-msg__bubble-time { display: block; font-size: .66rem; margin-top: 3px; opacity: .75; }
.txunited-msg__bubble--theirs { align-self: flex-start; background: var(--card); border: 1px solid var(--rule); color: var(--ink); border-bottom-left-radius: 4px; }
.txunited-msg__bubble--mine { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.txunited-msg__bubble--mine .txunited-msg__bubble-time { color: #cdd6e6; }

/* ---------- composer ---------- */
.txunited-msg__composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--rule); background: var(--card); }
.txunited-msg__composer-av { flex: none; }
.txunited-msg__composer-input { flex: 1; resize: none; min-height: 42px; max-height: 140px; border: 1px solid var(--rule); border-radius: 20px; padding: 10px 15px; font-family: var(--font); font-size: .92rem; line-height: 1.4; color: var(--ink); background: var(--paper); }
.txunited-msg__composer-input:focus { outline: none; border-color: var(--navy); background: #fff; }
.txunited-msg__send { flex: none; font-family: var(--font); font-weight: 600; font-size: .85rem; padding: .6rem 1.2rem; border-radius: 2px; border: 1.5px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; transition: background .16s, border-color .16s; }
.txunited-msg__send:hover { background: var(--gold-600); border-color: var(--gold-600); }
.txunited-msg__send[disabled] { opacity: .6; cursor: default; }
.txunited-msg__composer-msg { margin: 0; padding: 6px 16px; color: #8b1e1e; font-size: .82rem; }
.txunited-msg__composer-msg[hidden] { display: none; }
/* Reply locked — the pair is no longer (or not yet) connected. */
.txunited-msg__composer-locked { display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 16px; border-top: 1px solid var(--rule); background: var(--paper-2); color: var(--muted); font-size: .85rem; }
.txunited-msg__composer-locked svg { width: 17px; height: 17px; flex: none; color: var(--gold-600); }
.txunited-msg__btn { display: inline-block; font-weight: 600; font-size: .85rem; padding: .55rem 1.15rem; border-radius: 2px; border: 1.5px solid var(--rule); color: var(--navy); background: #fff; }
.txunited-msg__btn:hover { border-color: var(--navy); background: var(--paper-2); }

/* ---------- avatars (MemberAvatar markup) ---------- */
.txunited-msg .txunited-avatar { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; }
.txunited-msg .txunited-avatar--photo { object-fit: cover; }
.txunited-msg .txunited-avatar--initials { color: #fff; font-weight: 700; }
.txunited-msg .txunited-avatar--sm { width: 44px; height: 44px; font-size: .92rem; }
.txunited-msg .txunited-avatar--md { width: 40px; height: 40px; font-size: .85rem; }

/* ---------- responsive: single pane ---------- */
@media (max-width: 720px) {
  .txunited-msg__grid { grid-template-columns: 1fr; height: min(78vh, 640px); }
  .txunited-msg__thread { display: none; }
  .txunited-msg__grid.is-thread-open .txunited-msg__inbox { display: none; }
  .txunited-msg__grid.is-thread-open .txunited-msg__thread { display: flex; }
  .txunited-msg__back { display: flex; }
  .txunited-msg__bubble { max-width: 84%; }
}