/* ████████████████████████████████████████████████████████ */
/* ██  messages.css — conv list, matches row, msg tabs    ██ */
/* ████████████████████████████████████████████████████████ */

#p-msg{padding:14px 18px 0;gap:0;flex-direction:column}
.ptitle{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.05rem}
.micro{font-size:0.66rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim)}

/* ── MATCHES ROW ───────────────────────────────────────── */
.nrow{display:flex;gap:11px;overflow-x:auto;overflow-y:hidden;padding-bottom:3px;touch-action:pan-x;overscroll-behavior-y:contain}
.nrow::-webkit-scrollbar{display:none}
.nm{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.nmr{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2.5px solid #4ade80;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 0 0 1px rgba(74,222,128,0.25)}
.nmr .od{position:absolute;bottom:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#4ade80;border:2px solid var(--bg)}
.nml{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.68rem;font-weight:700;color:var(--tx);max-width:60px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── CONVERSATION LIST ─────────────────────────────────── */
.divl{height:1px;background:var(--border);margin:2px 0}
.ci{display:flex;gap:11px;align-items:center;padding:10px 8px;border-radius:12px;cursor:pointer;transition:background 0.15s}
.ci:hover{background:var(--surf2)}
/* Friend-chat rows previously had a blue tinted background — removed since
   the Friend pill badge below already conveys the relationship at a glance,
   and the row tint felt heavy in the conv list. The badge stays. */
.ci-friend-tag{
  display:inline-flex;align-items:center;
  font-size:0.56rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:#38bdf8;background:rgba(56,189,248,0.12);
  border:1px solid rgba(56,189,248,0.3);
  padding:1px 5px;border-radius:4px;margin-left:6px;flex-shrink:0;
}
.cav{width:48px;height:48px;border-radius:50%;background:var(--surf3);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;overflow:hidden}
.cav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cif{flex:1;min-width:0}
.cname2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.88rem;color:var(--tx);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.clast{font-size:0.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Right column wrapper — timestamp on top, unread badge below. Collapses
   to just the timestamp when unread is 0 (badge isn't rendered). */
.cmeta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;align-self:flex-start;padding-top:2px}
.ctime{font-size:0.63rem;color:var(--dim);line-height:1.2}
/* When the conversation has unread messages, the timestamp picks up the
   accent so the entire right column (time + badge) reads as one unit. */
.ctime-unread{color:var(--acc);font-weight:600}
/* Unread badge — accent-coloured pill matching the bell, social-tab and
   messages-tab nav badges. Plus Jakarta Sans for digit consistency with
   the rest of the app (replaces the old bright-green debug-counter look). */
.unrd{background:var(--acc);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.62rem;font-weight:800;font-variant-numeric:tabular-nums;min-width:18px;height:18px;border-radius:9px;padding:0 5px;display:flex;align-items:center;justify-content:center;line-height:1}

/* ── MESSAGE SUB-TABS ──────────────────────────────────── */
.msg-stabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:10px;flex-shrink:0}
.msg-stab{flex:1;padding:8px 10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.75rem;font-weight:700;color:var(--dim);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px}
.msg-stab.on{color:var(--gold);border-bottom-color:var(--gold)}

/* ── MESSAGE BUBBLE WIDTH ──────────────────────────────── */
.msg-bw{max-width:74%}
@media(min-width:600px){.msg-bw{max-width:54%}}

/* Touch devices can't hover — keep the per-message arrow + quick-react buttons
   visible so users can reach Report / Block / Info / Edit / Delete without a
   gesture the system doesn't support. Desktop mouse users keep the hover-only
   reveal via the inline onmouseenter/leave handlers. */
@media(hover:none){
  .msg-row .msg-arrow,
  .msg-row .msg-react-btn{display:flex !important}
}

/* ── REACTION CHIPS ────────────────────────────────────────── */
.reaction-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px 3px 6px;border-radius:12px;background:var(--surf);border:1.5px solid var(--border);font-size:0.85rem;letter-spacing:2px;cursor:pointer;transition:border-color 0.12s,background 0.12s;user-select:none;line-height:1}
.reaction-chip:hover{border-color:var(--border2);background:var(--surf2)}
.reaction-chip.mine{background:var(--surf);border-color:var(--border)}
.reaction-chip.mine:hover{background:var(--surf2)}
.reaction-chip .rc-count{font-size:0.72rem;font-weight:700;color:var(--dim);font-family:'Plus Jakarta Sans',sans-serif}
.msg-react-row{display:flex;flex-wrap:wrap;gap:4px;padding-top:5px}
@keyframes _heartPop{0%{transform:scale(0.3);opacity:1}40%{transform:scale(1.4)}70%{transform:scale(1) translateY(-8px);opacity:1}100%{transform:scale(0.9) translateY(-28px);opacity:0}}

/* ──────────────────────────────────────────────────────────
   Universal chat overlay (used from profile/meetup/etc.)
   Reuses #mobile-chat-panel as the render target. On mobile it
   stays the existing full-screen sheet. On desktop it becomes a
   right-aligned side panel with a tinted backdrop so the user
   keeps their original tab visible behind the chat.
   ────────────────────────────────────────────────────────── */
#mobile-chat-panel,#ev-chat-ov-panel{
  transform:translateX(100%);
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
#mobile-chat-panel.cm-open,#ev-chat-ov-panel.cm-open{
  transform:translateX(0);
}
#chat-ov-backdrop{
  position:fixed;inset:0;z-index:9299;
  background:rgba(0,0,0,0.35);backdrop-filter:blur(2px);
  opacity:0;transition:opacity 0.25s ease;
  display:none;
}
#chat-ov-backdrop.on{opacity:1}
/* Desktop side-panel treatment applies ONLY when the chat is mounted as a
   cross-page overlay (opened from profile/meetup/etc. — i.e. _chatOvOrigin
   is set and the panel carries the `cov-mode` class). When the user is in
   the Messages tab itself, the panel keeps its original full-viewport
   layout so desktop users still get the proper list + chat experience. */
@media (min-width: 640px){
  #mobile-chat-panel.cov-mode,
  #ev-chat-ov-panel{
    left:auto !important;right:0;top:0;bottom:0;
    width:min(460px, 100vw);
    border-left:1px solid var(--border);
    padding:16px 20px 20px !important;
  }
}
/* Shadow: subtle on mobile, pronounced when it's a desktop side panel */
#mobile-chat-panel.cov-mode,#ev-chat-ov-panel{box-shadow:-8px 0 24px rgba(0,0,0,0.25)}
#mobile-chat-panel:not(.cov-mode){box-shadow:none}

/* ────────────────────────────────────────────────────────────────────────
   Desktop two-pane messages layout
   When the Messages tab is active on a desktop-sized viewport, the chat
   list (#p-msg, capped at 480px) stays on the left and the chat panel
   docks into the empty space to its right — classic Slack/iMessage layout.
   Mobile (<768px) ignores all of this; the chat panel keeps its existing
   fullscreen slide-in behaviour.
   The body.cm-msg-tab flag is toggled in core.js's go() function so the
   docked positioning only applies on the messages tab itself, never on
   profile/meetup/etc. (where the chat is a true cross-page overlay).
   ─────────────────────────────────────────────────────────────────────── */
#msg-empty-pane{display:none}
@media (min-width: 768px){
  /* Sidebar narrow (68px) + #p-msg max-width (480px) = 548px from viewport
     left. The docked region fills everything to the right of that. */
  body.cm-msg-tab #mobile-chat-panel.cm-open,
  body.cm-msg-tab #ev-chat-ov-panel.cm-open{
    left:calc(68px + 480px) !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:auto !important;
    transform:none !important;
    transition:none !important;
    border-left:1px solid var(--border);
    box-shadow:none !important;
    /* Right padding bumped to 32 so sent-message bubbles (right-aligned via
       justify-content:flex-end inside msg-list) sit comfortably away from
       the panel edge instead of touching it. Left + top + bottom keep the
       previous values — only the right buffer was the visual issue. */
    padding:14px 32px 18px 22px !important;
  }
  /* In docked mode, hide-when-closed via visibility (not display:none) —
     the open routine briefly removes .cm-open then re-adds it via rAF to
     restart the slide animation, and a display swap there would flicker.
     visibility:hidden cleanly reveals the empty-state placeholder behind.
     transition:none kills the mobile slide-out — at desktop scale that
     animation reads as a "page-wide" panel sliding right when the user
     just navigates to another tab, which is jarring. The panel snaps to
     translateX(100%) instead so the body-class change to a non-msg tab
     happens silently. */
  body.cm-msg-tab #mobile-chat-panel:not(.cm-open),
  body.cm-msg-tab #ev-chat-ov-panel:not(.cm-open){
    visibility:hidden !important;
    transition:none !important;
  }
  /* Hide the header close (back-arrow) button on docked desktop — there's
     no "back" in a two-pane layout, the conversation list is always
     visible to the left. The button is wired up in openMobileChat /
     openEventChatOverlay; we just visually suppress it here. */
  body.cm-msg-tab #mobile-chat-panel .cov-close-btn,
  body.cm-msg-tab #ev-chat-ov-panel .cov-close-btn{
    display:none !important;
  }
  /* Tinted backdrop is meaningless in the two-pane layout — both panes
     are visible at once, no need to dim anything. */
  body.cm-msg-tab #chat-ov-backdrop{display:none !important}
  /* Empty state placeholder fills the docked region when no chat is open.
     Sits behind the chat panel z-index-wise, so when a chat opens it covers
     the placeholder; when the chat closes the placeholder shows again. */
  body.cm-msg-tab #msg-empty-pane{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:fixed;top:0;bottom:0;
    left:calc(68px + 480px);right:0;z-index:1;
    color:var(--muted);text-align:center;padding:40px;gap:12px;
    background:var(--bg);border-left:1px solid var(--border);
    pointer-events:none;
  }
  .msg-empty-title{
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
    font-size:1.05rem;color:var(--tx);margin-top:6px;
  }
  .msg-empty-sub{
    font-size:0.82rem;color:var(--muted);max-width:300px;line-height:1.5;
  }
}
@media (min-width: 1380px){
  /* Sidebar widens to 192px at this breakpoint; recalculate the docked
     region's left edge so the chat panel + placeholder still align with
     the right edge of #p-msg. */
  body.cm-msg-tab #mobile-chat-panel.cm-open,
  body.cm-msg-tab #ev-chat-ov-panel.cm-open,
  body.cm-msg-tab #msg-empty-pane{
    left:calc(192px + 480px) !important;
  }
}
/* Drag handle for mobile swipe-to-close */
.cov-handle{
  flex-shrink:0;width:36px;height:4px;border-radius:2px;
  background:var(--border2);margin:0 auto 10px;cursor:grab;
  touch-action:none;
}
.cov-handle:active{cursor:grabbing}
@media (min-width: 640px){ .cov-handle{display:none} }
/* Expand button reused in both DM and event overlay headers */
.cov-expand-btn{
  background:var(--surf2);border:1px solid var(--border);
  border-radius:50%;width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;transition:all 0.15s;
}
.cov-expand-btn:hover{color:var(--acc);border-color:var(--acc)}

/* "Now · ends HH:MM" pill on the event-chat list. Amber matches the rest of
   the running-meetup treatment (check-in CTA, "happening now" pill) — the
   whole mid-event surface is warm so running events pop against upcoming
   (type-colored) and ended (gray) rows. */
.cm-chat-live-badge{color:#fbbf24;background:rgba(245,158,11,0.14);border:1px solid rgba(245,158,11,0.35)}
body.light .cm-chat-live-badge{color:#b45309;background:rgba(245,158,11,0.10);border-color:rgba(245,158,11,0.28)}