/* /connect/views/messages.css — Direct Messages "Vibrant Community" v2
 * Polished modern chat: distinct mine/theirs bubbles, tidy day separators,
 * a clean composer with a compact tool row, and a refined conversation list
 * with unread emphasis.
 *
 * Loaded AFTER views.css so it wins the cascade at equal specificity. Every
 * colour comes from the --bcc-* tokens; the only literal colours are the
 * on-gradient ink #fff and neutral scrim/shadow alpha
 * (rgba(0,0,0,a) / rgba(255,255,255,a)) — no thematic brand hex.
 *
 * Scoped under `.msgx` (the layout root). Body-mounted surfaces (the emoji
 * picker and the New Message modal) use their own `.bcc-emoji-picker` /
 * `.msgx-newmodal` scopes.
 * Breakpoints: two-pane >=768 | single-pane with Back <=767.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   0. LAYOUT / CARD FRAME
=============================================================== */
.msgx.bcc-messages-layout {
  /* Positioning context: on mobile the sidebar/thread are absolute with
     inset:0 and must anchor to this layout (below the sticky #bcc-topbar),
     not to the initial containing block (the viewport). */
  position:      relative;
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    var(--bcc-shadow-1);
}

/* ================================================================
   1. CONVERSATION LIST (sidebar)
=============================================================== */
.msgx .bcc-messages-sidebar {
  width:         340px;
  background:    var(--bcc-surface-1);
  border-right:  1px solid var(--bcc-border);
}
.msgx .bcc-messages-header {
  padding:      var(--bcc-s4) var(--bcc-s5);
  border-bottom: 1px solid var(--bcc-border);
  background:   linear-gradient(180deg, var(--bcc-surface-2), var(--bcc-surface-1));
}
.msgx .bcc-messages-sidebar-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-xl);
  font-weight:    600;
  letter-spacing: .002em;
}
.msgx .bcc-convo-list { padding: var(--bcc-s2); }

.msgx .bcc-convo-loading,
.msgx .bcc-convo-empty { padding: var(--bcc-s6) var(--bcc-s5); color: var(--bcc-ink-3); }

/* ── Conversation item ───────────────────────────────────────── */
.msgx .bcc-convo-item {
  gap:           var(--bcc-s3);
  padding:      var(--bcc-s3);
  min-height:   64px;
  margin:       0 0 2px;
  border:       1px solid transparent;
  border-radius: var(--bcc-r-md);
  transition:   background var(--bcc-dur-1) var(--bcc-ease),
                border-color var(--bcc-dur-1) var(--bcc-ease);
}
.msgx .bcc-convo-item:hover { background: var(--bcc-surface-2); }
.msgx .bcc-convo-item:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}
.msgx .bcc-convo-item-active {
  background:   var(--bcc-primary-tint);
  border-color: var(--bcc-primary-soft);
}
.msgx .bcc-convo-item-active .bcc-convo-name { color: var(--bcc-primary); }
.msgx .bcc-convo-item-unread { background: var(--bcc-primary-tint); }
.msgx .bcc-convo-item-unread .bcc-convo-name { font-weight: 700; color: var(--bcc-ink); }
.msgx .bcc-convo-item-unread .bcc-convo-preview { color: var(--bcc-ink-2); font-weight: 500; }
.msgx .bcc-convo-item-unread .bcc-convo-time { color: var(--bcc-primary); font-weight: 600; }

.msgx .bcc-convo-avatar .bcc-avatar,
.msgx .bcc-convo-avatar-group {
  width:     42px;
  height:    42px;
  font-size: var(--bcc-t-sm);
}
.msgx .bcc-convo-avatar-group {
  background: var(--bcc-primary-soft);
  color:      var(--bcc-primary);
}
.msgx .bcc-convo-name { font-weight: 600; }
.msgx .bcc-convo-preview-ic {
  display:        inline-flex;
  vertical-align: -3px;
  margin-right:   4px;
  color:          var(--bcc-primary);
}
.msgx .bcc-convo-preview-ic .bcc-icon { width: 13px; height: 13px; }

.msgx .bcc-convo-badge {
  min-width:   20px;
  height:      20px;
  padding:     0 6px;
  font-size:   11px;
  box-shadow:  0 0 0 2px var(--bcc-surface-1);
}

/* ================================================================
   2. THREAD HEADER
=============================================================== */
.msgx .bcc-thread-header {
  padding:      var(--bcc-s3) var(--bcc-s5);
  border-bottom: 1px solid var(--bcc-border);
  background:   linear-gradient(180deg, var(--bcc-surface-2), var(--bcc-surface-1));
}
.msgx .bcc-thread-heading {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  flex:           1;
  gap:            1px;
}
.msgx .bcc-thread-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-lg);
  font-weight:    600;
  letter-spacing: .002em;
}
.msgx .bcc-thread-sub {
  font-size:     var(--bcc-t-xs);
  color:         var(--bcc-ink-3);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.msgx .bcc-thread-back { min-height: 44px; }

/* ================================================================
   3. MESSAGE AREA + DAY SEPARATORS
=============================================================== */
.msgx .bcc-thread-messages {
  padding:    var(--bcc-s5) var(--bcc-s5) var(--bcc-s6);
  gap:        var(--bcc-s1);
  background: var(--bcc-bg);
}
.msgx .bcc-thread-empty,
.msgx .bcc-msg-loading { color: var(--bcc-ink-3); }

.msgx .bcc-msg-day-sep {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  margin:      var(--bcc-s5) 0 var(--bcc-s3);
}
.msgx .bcc-msg-day-sep::before,
.msgx .bcc-msg-day-sep::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--bcc-border);
}
.msgx .bcc-msg-day-sep-label {
  font-size:      var(--bcc-t-xs);
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-pill);
  padding:        3px 12px;
  white-space:    nowrap;
}

/* ================================================================
   4. BUBBLES (distinct mine / theirs)
=============================================================== */
.msgx .bcc-msg-group {
  gap:        3px;
  margin-top: var(--bcc-s3);
}
.msgx .bcc-msg-group:first-child { margin-top: 0; }
.msgx .bcc-msg-bubble { max-width: min(72%, 520px); }

.msgx .bcc-msg-body {
  padding:       var(--bcc-s3) var(--bcc-s4);
  border-radius: var(--bcc-r-lg);
  font-size:     var(--bcc-t-sm);
  line-height:   1.55;
  box-shadow:    var(--bcc-shadow-1);
}
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-body {
  background:                 linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:                      #fff;
  border:                     1px solid transparent;
  border-bottom-right-radius: var(--bcc-r-xs);
}
.msgx .bcc-msg-bubble[data-mine="false"] .bcc-msg-body {
  background:                var(--bcc-surface-1);
  color:                     var(--bcc-ink);
  border:                    1px solid var(--bcc-border);
  border-bottom-left-radius: var(--bcc-r-xs);
}
.msgx .bcc-msg-sender {
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-ink-3);
  padding:     0 var(--bcc-s1);
}
.msgx .bcc-msg-time { opacity: 0; padding: 0 var(--bcc-s2); }
.msgx .bcc-msg-bubble:hover .bcc-msg-time,
.msgx .bcc-msg-bubble:focus-within .bcc-msg-time { opacity: 1; }

/* ── Scripture card ─────────────────────────────────────────── */
.msgx .bcc-msg-scripture-card {
  border-left:   3px solid var(--bcc-accent);
  background:    var(--bcc-accent-soft);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
  padding:       var(--bcc-s3);
}
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-scripture-card {
  background:        rgba(255,255,255,.15);
  border-left-color: rgba(255,255,255,.6);
}
.msgx .bcc-msg-scripture-ref {
  display:     flex;
  align-items: center;
  gap:         5px;
  color:       var(--bcc-accent);
}
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-scripture-ref { color: rgba(255,255,255,.9); }
.msgx .bcc-msg-scripture-text { color: var(--bcc-ink); }
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-scripture-text { color: rgba(255,255,255,.92); }

/* ── Prayer card ────────────────────────────────────────────── */
.msgx .bcc-msg-prayer-card {
  border-left:   3px solid var(--bcc-primary);
  background:    var(--bcc-primary-soft);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
  padding:       var(--bcc-s3);
}
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-prayer-card {
  background:        rgba(255,255,255,.15);
  border-left-color: rgba(255,255,255,.6);
}
.msgx .bcc-msg-prayer-label {
  display:     flex;
  align-items: center;
  gap:         5px;
  color:       var(--bcc-primary);
}
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-prayer-label { color: rgba(255,255,255,.9); }
.msgx .bcc-msg-prayer-body { color: var(--bcc-ink); }
.msgx .bcc-msg-bubble[data-mine="true"] .bcc-msg-prayer-body { color: rgba(255,255,255,.92); }

/* ── Reactions ──────────────────────────────────────────────── */
.msgx .bcc-msg-reactions { padding: 0 var(--bcc-s2); margin-top: 2px; }
.msgx .bcc-reaction-pill {
  min-height:    26px;
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-pill);
  color:         var(--bcc-ink-2);
}
.msgx .bcc-reaction-pill:hover {
  background:   var(--bcc-surface-3);
  border-color: var(--bcc-primary);
}
.msgx .bcc-reaction-pill.bcc-reaction-mine {
  background:   var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color:        var(--bcc-primary);
}
.msgx .bcc-msg-react-btn {
  width:           30px;
  height:          30px;
  padding:         0;
  border-radius:   50%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bcc-surface-1);
  border:          1px solid var(--bcc-border);
  color:           var(--bcc-ink-2);
  align-self:      flex-end;
}
.msgx .bcc-msg-bubble:hover .bcc-msg-react-btn,
.msgx .bcc-msg-bubble:focus-within .bcc-msg-react-btn { opacity: 1; }
.msgx .bcc-msg-react-btn:hover { background: var(--bcc-surface-3); color: var(--bcc-primary); }
.msgx .bcc-msg-react-btn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* Touch devices: always expose the react affordance. */
@media (hover: none) {
  .msgx .bcc-msg-react-btn,
  .msgx .bcc-msg-time { opacity: 1; }
}

/* ================================================================
   5. EMOJI PICKER
=============================================================== */
.bcc-emoji-picker {
  display:       flex;
  gap:           var(--bcc-s1);
  padding:       var(--bcc-s2);
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-xl);
  box-shadow:    var(--bcc-shadow-3);
}
.bcc-emoji-picker .bcc-emoji-option {
  width:           40px;
  height:          40px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  line-height:     1;
  border-radius:   var(--bcc-r-md);
  background:      transparent;
  border:          1px solid transparent;
  cursor:          pointer;
  transition:      background var(--bcc-dur-1) var(--bcc-ease),
                   transform  var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-emoji-picker .bcc-emoji-option:hover { background: var(--bcc-surface-3); transform: scale(1.08); }
.bcc-emoji-picker .bcc-emoji-option:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* ================================================================
   6. COMPOSER (compact tool row + clean input)
=============================================================== */
.msgx .bcc-thread-composer {
  align-items: flex-end;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s3) var(--bcc-s4);
  border-top:  1px solid var(--bcc-border);
  background:  var(--bcc-surface-1);
}
.msgx .bcc-composer-actions { gap: var(--bcc-s1); }
.msgx .bcc-composer-scripture,
.msgx .bcc-composer-prayer {
  min-width:    44px;
  min-height:   44px;
  border-radius: var(--bcc-r-md);
  color:        var(--bcc-ink-2);
}
.msgx .bcc-composer-scripture:hover,
.msgx .bcc-composer-prayer:hover { background: var(--bcc-surface-3); color: var(--bcc-primary); }
.msgx .bcc-composer-input {
  min-height:    44px;
  max-height:    140px;
  padding:       11px var(--bcc-s4);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
  background:    var(--bcc-surface-2);
  color:         var(--bcc-ink);
  font-size:     var(--bcc-t-sm);
  line-height:   1.5;
  transition:    border-color var(--bcc-dur-1) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-1) var(--bcc-ease);
}
.msgx .bcc-composer-input:hover { border-color: var(--bcc-primary); }
.msgx .bcc-composer-input:focus {
  outline:      none;
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 3px var(--bcc-primary-tint);
}
.msgx .bcc-composer-send {
  min-height:    44px;
  min-width:     44px;
  border-radius: var(--bcc-r-lg);
}

/* Attachment (scripture / prayer) preview above the composer */
.msgx #bcc-composer-meta-preview { padding: 0 var(--bcc-s4) var(--bcc-s2); }
.msgx .bcc-composer-meta-card {
  border-left:   3px solid var(--bcc-primary);
  background:    var(--bcc-primary-tint);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s2) var(--bcc-s3);
}
.msgx .bcc-composer-meta-clear { min-width: 32px; min-height: 32px; }

/* ================================================================
   7. SIDE PANELS (scripture / prayer)
=============================================================== */
.msgx .bcc-side-panel { background: var(--bcc-surface-1); gap: var(--bcc-s3); }
.msgx .bcc-side-panel-header {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-family: var(--bcc-font-display);
  font-weight: 600;
}
.msgx .bcc-scripture-preview-ref { color: var(--bcc-accent); }
.msgx .bcc-prayer-item {
  border:     1px solid var(--bcc-border);
  background: var(--bcc-surface-2);
  cursor:     pointer;
  transition: background var(--bcc-dur-1) var(--bcc-ease),
              border-color var(--bcc-dur-1) var(--bcc-ease);
}
.msgx .bcc-prayer-item:hover { background: var(--bcc-surface-3); border-color: var(--bcc-border-strong); }
.msgx .bcc-prayer-item:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.msgx .bcc-prayer-item-cat { color: var(--bcc-accent); }

/* ================================================================
   8. EMPTY STATE
=============================================================== */
.msgx .bcc-messages-empty { background: var(--bcc-bg); gap: var(--bcc-s2); text-align: center; }
.msgx .bcc-messages-empty-icon { color: var(--bcc-primary); opacity: .5; font-size: 2.75rem; }
.msgx .bcc-messages-empty-title {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  color:       var(--bcc-ink-2);
  margin:      0;
}
.msgx .bcc-messages-empty-sub {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-3);
  margin:    0;
  max-width: 280px;
}

/* ================================================================
   9. NEW MESSAGE MODAL (member search + chips)
=============================================================== */
.msgx-newmodal .bcc-input-wrap { position: relative; }
.msgx-newmodal .bcc-people-results { margin-top: var(--bcc-s3); max-height: 240px; }
.msgx-newmodal .bcc-person-result {
  min-height:    52px;
  padding:       var(--bcc-s2) var(--bcc-s3);
  border:        1px solid transparent;
  border-radius: var(--bcc-r-md);
  transition:    background var(--bcc-dur-1) var(--bcc-ease),
                 border-color var(--bcc-dur-1) var(--bcc-ease);
}
.msgx-newmodal .bcc-person-result:hover { background: var(--bcc-surface-2); border-color: var(--bcc-border); }
.msgx-newmodal .bcc-person-result:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.msgx-newmodal .bcc-person-add {
  margin-left: auto;
  color:       var(--bcc-primary);
  display:     inline-flex;
}
.msgx-newmodal .bcc-selected-people { gap: var(--bcc-s2); margin: var(--bcc-s3) 0 0; }
.msgx-newmodal .bcc-selected-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  min-height:    34px;
  padding:       4px 6px 4px 12px;
  border-radius: var(--bcc-r-pill);
  background:    var(--bcc-primary-soft);
  border:        1px solid var(--bcc-primary);
  color:         var(--bcc-ink);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
}
.msgx-newmodal .bcc-chip-remove {
  width:           24px;
  height:          24px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  color:           var(--bcc-primary);
  background:      transparent;
  border:          none;
  cursor:          pointer;
}
.msgx-newmodal .bcc-chip-remove:hover { background: var(--bcc-primary-tint); }
.msgx-newmodal .bcc-chip-remove:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.msgx-newmodal .bcc-people-noresult { padding: var(--bcc-s4) var(--bcc-s3); text-align: center; }

/* ================================================================
   9b. SEARCH (sidebar filter + full-text results)
=============================================================== */
.msgx .bcc-msg-search {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s3) var(--bcc-s4);
  border-bottom: 1px solid var(--bcc-border);
  background:  var(--bcc-surface-1);
  flex-shrink: 0;
}
.msgx .bcc-msg-search-icon { display: inline-flex; color: var(--bcc-ink-3); flex: none; }
.msgx .bcc-msg-search-icon .bcc-icon { width: 16px; height: 16px; }
.msgx .bcc-convo-search {
  flex:          1;
  min-width:     0;
  min-height:    40px;
  padding:       8px var(--bcc-s3);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
  background:    var(--bcc-surface-2);
  color:         var(--bcc-ink);
  font-size:     var(--bcc-t-sm);
  line-height:   1.4;
  -webkit-appearance: none;
  appearance:    none;
  transition:    border-color var(--bcc-dur-1) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-1) var(--bcc-ease);
}
.msgx .bcc-convo-search:hover { border-color: var(--bcc-primary); }
.msgx .bcc-convo-search:focus {
  outline:      none;
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 3px var(--bcc-primary-tint);
}
.msgx .bcc-convo-search::placeholder { color: var(--bcc-ink-3); }

/* Wrapper holds the list + results (results overlay it on mobile). */
.msgx .bcc-msg-list-wrap {
  position:       relative;
  flex:           1;
  min-height:     0;
  display:        flex;
  flex-direction: column;
}

.msgx .bcc-msg-search-results {
  flex:       1;
  min-height: 0;
  padding:    0 var(--bcc-s2) var(--bcc-s2);
  overflow-y: auto;
  background: var(--bcc-surface-1);
}
.msgx .bcc-msg-search-results[hidden] { display: none; }
.msgx .bcc-msg-search-section-title {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  padding:        var(--bcc-s3) var(--bcc-s3) var(--bcc-s1);
}
.msgx .bcc-msg-search-item {
  padding:       var(--bcc-s2) var(--bcc-s3);
  border:        1px solid transparent;
  border-radius: var(--bcc-r-md);
  cursor:        pointer;
  transition:    background var(--bcc-dur-1) var(--bcc-ease),
                 border-color var(--bcc-dur-1) var(--bcc-ease);
}
.msgx .bcc-msg-search-item:hover { background: var(--bcc-surface-2); border-color: var(--bcc-border); }
.msgx .bcc-msg-search-item:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.msgx .bcc-msg-search-item-name { font-weight: 600; color: var(--bcc-ink); }
.msgx .bcc-msg-search-item-meta {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
  white-space: nowrap;
  overflow:    hidden;
}
.msgx .bcc-msg-search-item-conv { color: var(--bcc-primary); font-weight: 600; }
.msgx .bcc-msg-search-item-sender { overflow: hidden; text-overflow: ellipsis; }
.msgx .bcc-msg-search-item-time { margin-left: auto; flex: none; }
.msgx .bcc-msg-search-item-snippet {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.45;
}
.msgx .bcc-msg-search-mark {
  background:    var(--bcc-primary-tint);
  color:         var(--bcc-primary);
  border-radius: 3px;
  padding:       0 2px;
  font-weight:   600;
}
.msgx .bcc-msg-search-empty {
  padding:   var(--bcc-s3);
  color:     var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}

/* Jump-to-message pulse target */
@keyframes bccMsgHighlight {
  0%   { box-shadow: 0 0 0 0 var(--bcc-primary-tint); }
  40%  { box-shadow: 0 0 0 5px var(--bcc-primary-tint); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.msgx .bcc-msg-highlight {
  border-radius: var(--bcc-r-md);
  animation:     bccMsgHighlight 1.5s var(--bcc-ease) 1;
}

/* ================================================================
   10. RESPONSIVE — two-pane >=768, single-pane with Back <=767
=============================================================== */
@media (min-width: 768px) {
  .msgx .bcc-messages-sidebar { position: relative; width: 340px; inset: auto; }
  .msgx .bcc-msg-sidebar-hidden { display: flex; }
  .msgx .bcc-messages-thread { position: relative; inset: auto; }
  .msgx .bcc-thread-back { display: none; }
  .msgx .bcc-messages-empty { display: flex; }
}

@media (max-width: 767px) {
  .msgx.bcc-messages-layout { border: 0; border-radius: 0; }
  .msgx .bcc-messages-sidebar {
    position:   absolute;
    inset:      0;
    width:      100%;
    background: var(--bcc-surface-1);
  }
  .msgx .bcc-msg-sidebar-hidden { display: none; }
  .msgx .bcc-messages-thread {
    position:   absolute;
    inset:      0;
    background: var(--bcc-bg);
  }
  .msgx .bcc-thread-back { display: inline-flex; }
  .msgx .bcc-messages-empty { display: none; }
  .msgx .bcc-msg-bubble { max-width: 86%; }
  .msgx .bcc-thread-messages {
    padding: var(--bcc-s4) var(--bcc-s4) var(--bcc-s6);
  }
  .msgx .bcc-composer-send-label { display: none; }
  /* Full-width results overlay the (filtered) list */
  .msgx .bcc-msg-search-results:not([hidden]) {
    position:   absolute;
    inset:      0;
    z-index:    3;
    box-shadow: var(--bcc-shadow-2);
  }

  /* 1. Header + New button stay pinned at the top and are tappable */
  .msgx .bcc-messages-header {
    flex-shrink: 0;
    gap:         var(--bcc-s3);
    padding:     var(--bcc-s3) var(--bcc-s4);
  }
  .msgx .bcc-messages-sidebar-title { font-size: var(--bcc-t-lg); }
  .msgx #bcc-msg-new-btn {
    min-height: 44px;
    flex-shrink: 0;
  }

  /* 2. Search — 16px avoids iOS focus zoom, 44px touch target */
  .msgx .bcc-msg-search {
    flex-shrink: 0;
    padding:     var(--bcc-s2) var(--bcc-s3);
  }
  .msgx .bcc-convo-search {
    font-size:   16px;
    min-height:  44px;
  }

  /* 3. Composer — 16px input, safe-area clearance, ≥44px controls */
  .msgx .bcc-composer-input { font-size: 16px; }
  .msgx .bcc-thread-composer {
    padding:        var(--bcc-s3) var(--bcc-s4);
    padding-bottom: max(var(--bcc-s3), env(safe-area-inset-bottom, 0px));
  }
  .msgx .bcc-composer-send,
  .msgx .bcc-composer-scripture,
  .msgx .bcc-composer-prayer { min-width: 44px; min-height: 44px; }

  /* 4. Empty state — centered with a tappable call-to-action */
  .msgx .bcc-convo-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--bcc-s3);
    text-align:      center;
  }
  .msgx .bcc-convo-empty .bcc-btn { min-height: 44px; }

  /* 8. Keep long words inside bubbles */
  .msgx .bcc-msg-body { overflow-wrap: anywhere; }

  /* Full-bleed layout: #bcc-main's mobile padding (incl. the 56px bottom-nav
     clearance) is for scrolling views. Messages fills the viewport, so drop
     it while the full-height view is visible. */
  #bcc-main:has(> .bcc-view-full:not([hidden])) { padding: 0; }

  /* Bottom-anchor short threads (chat convention) so a young conversation
     sits just above the composer instead of leaving a large gap under the
     header. The auto margin collapses to 0 once the content overflows, so
     scrolling still works. */
  .msgx .bcc-thread-messages > :first-child { margin-top: auto; }

  /* 7. The floating Bible Parlor widget covers the composer send button on
     mobile, so hide it only while Messages is the visible view. Using :has()
     with :not([hidden]) needs no teardown hook and auto-restores the widget
     when the view is hidden. */
  .bcc-app:has(#bcc-view-messages:not([hidden]) .msgx.bcc-messages-layout) .bcc-bp-widget {
    display: none;
  }

  /* Let the composer be fully usable: hide the fixed bottom nav while
     Messages is the active view (navigation stays available via the
     hamburger drawer). */
  .bcc-app:has(#bcc-view-messages:not([hidden])) #bcc-mobile-nav { display: none; }
}

/* ================================================================
   10b. COARSE-POINTER (TOUCH) TARGETS — tablets + phones.
   The max-width:767px block above covered phones only; these
   controls regressed below 44px on touch tablets. Where enlarging
   the element would change the visual/layout (round icon buttons
   inside bubbles/chips), the hit area is grown with a transparent
   ::after so the 44px target is met without resizing the control.
   ================================================================ */
@media (pointer: coarse) {
  /* React button (desktop 30px): keep the 30px circle, add a 44px
     hit area. */
  .msgx .bcc-msg-react-btn { position: relative; }
  .msgx .bcc-msg-react-btn::after {
    content:  '';
    position: absolute;
    inset:    -7px;
  }

  /* New-message chip remove (desktop 24px): keep the chip at its
     height, add a 44px hit area. */
  .msgx-newmodal .bcc-chip-remove { position: relative; }
  .msgx-newmodal .bcc-chip-remove::after {
    content:  '';
    position: absolute;
    inset:    -10px;
  }

  /* Emoji option (desktop 40px) → 44px. */
  .bcc-emoji-picker .bcc-emoji-option { min-width: 44px; min-height: 44px; }

  /* iOS focus-zoom guard for the composer input (was 13px). */
  .msgx .bcc-composer-input { font-size: 16px; }
}

/* ================================================================
   11. REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .msgx .bcc-convo-item,
  .msgx .bcc-msg-react-btn,
  .bcc-emoji-picker .bcc-emoji-option,
  .msgx .bcc-composer-input,
  .msgx .bcc-msg-search-item { transition: none; }
  .bcc-emoji-picker .bcc-emoji-option:hover { transform: none; }
  .msgx .bcc-msg-highlight { animation: none; box-shadow: 0 0 0 3px var(--bcc-primary-tint); }
}