/* ═══════════════════════════════════════════════════════════════════════════
   LM MESSAGES — MOBILE (≤767px) re-skin to the approved Claude mockup.
   PRESENTATION ONLY. Re-skins existing Sngine core chat markup; touches NO
   JS/socket hook (.js_chat-*, .js_post-message, .js_scroller, .js_moment,
   .js_chat-color-me, data-cid, .conversation.right, message ids). Desktop is
   untouched (everything is inside @media ≤767px). Theme-aware via --lm-* vars.
   Targets: conversation list (.feeds-item), thread bubbles (.conversation),
   header (.panel-messages header), composer (.chat-form).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Per-sender bubble colours, inferred from the viewer's account type in a
   talent↔brand chat. me = the viewer's own bubbles, other = the counterpart. */
html              { --lm-bubble-me: #0f6f4f; --lm-bubble-other: #15324f; } /* talent viewer, light */
html.lm-acct-brand{ --lm-bubble-me: #15324f; --lm-bubble-other: #0f6f4f; } /* brand viewer,  light */
html.lm-dark      { --lm-bubble-me: #2ea16f; --lm-bubble-other: #25496f; } /* talent viewer, dark  */
html.lm-dark.lm-acct-brand { --lm-bubble-me: #25496f; --lm-bubble-other: #2ea16f; } /* brand viewer, dark */

@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────
     Single-pane layout fix. Core hides the LIST pane only on the thread
     URL (.x_menu_sidebar:not(.no_hide){display:none}); on the list URL the
     list gets .no_hide and shows, but the empty content pane is never hidden,
     so both rendered at width:100% in a flex row → a cramped 50/50 split.
     Hide the content pane while the list is shown so the list is full-width.
     ───────────────────────────────────────────────────────────── */
  .x_menu_sidebar.no_hide ~ .x_menu_sidebar_content { display: none !important; }
  .x_menu_sidebar.msg, .x_menu_sidebar_content.msg { width: 100% !important; flex: 1 1 100% !important; }

  /* Full-bleed the messenger across the WHOLE mobile range. The template's
     own full-width rule is gated at ≤520px, so 521–767px kept the container
     gutters → grey page-bg (#eef2f6) showed at the edges. Force edge-to-edge
     so there's no dark strip top/bottom/sides anywhere in messages. */
  .lm-messages-active .main-wrapper,
  .lm-messages-active .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  .lm-messages-active .container > .row.m-0,
  .lm-messages-active .row.m-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .lm-messages-active .main-wrapper { background: var(--lm-card, #fff); }

  /* ─────────────────────────────────────────────────────────────
     Conversation list (left threads pane)
     ───────────────────────────────────────────────────────────── */
  .x_side_msg_bar .side_widget_title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }

  .x_side_msg_bar .feeds-item { padding: 0 !important; border-bottom: 1px solid var(--lm-border-2, #f0f3f6); }
  .x_side_msg_bar .feeds-item.is-active {
    background: var(--lm-primary-soft, rgba(15,111,79,.08));
    box-shadow: inset 3px 0 0 var(--lm-primary, #0f6f4f);   /* green left stripe (both themes) */
  }
  /* drop the 3px left accent bar — mockup highlights the active row with bg only */
  .x_side_msg_bar .feeds-item::before { display: none !important; }
  .x_side_msg_bar .feeds-item .js_chat-start { padding: 12px 16px !important; gap: 0; align-items: center; }

  /* avatar 52px + online dot */
  .x_side_msg_bar .chat-avatar { flex: none; width: 46px; height: 46px; }
  .x_side_msg_bar .chat-avatar img,
  .x_side_msg_bar .chat-avatar .x_user_multi_avatar { width: 46px !important; height: 46px !important; }
  .x_side_msg_bar .online-dot {
    width: 13px !important; height: 13px !important; right: 1px !important; bottom: 1px !important;
    background: var(--lm-verify, #1faa5a) !important; border: 2.5px solid var(--lm-card, #fff) !important;
  }
  .x_side_msg_bar .online-dot.offline { display: none !important; }

  /* name row + preview + time */
  .x_side_msg_bar .feeds-item .mw-0.flex-1 { margin: 0 0 0 13px !important; padding: 0 !important; }
  .x_side_msg_bar .lm-msg-name-row { display: flex; align-items: center; gap: 6px; }
  .x_side_msg_bar .lm-msg-name-text { font-size: 15px; font-weight: 700; color: var(--lm-text); }
  .x_side_msg_bar .feeds-item .text { font-size: 13px; color: var(--lm-muted, #64748b); margin-top: 2px; }
  .x_side_msg_bar .feeds-item.unread .text { color: var(--lm-text); font-weight: 600; }
  .x_side_msg_bar .feeds-item .time { font-size: 11.5px; color: var(--lm-muted, #64748b); margin-top: 2px; }
  /* unread indicator dot on the right (no per-conversation count exists in the
     data, so we show a dot for the real unread state instead of a fake number) */
  .x_side_msg_bar .feeds-item.unread .js_chat-start { position: relative; }
  .x_side_msg_bar .feeds-item.unread .js_chat-start::after {
    content: ""; position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%; background: var(--lm-primary, #0f6f4f);
  }
  .x_side_msg_bar .feeds-item.unread .mw-0.flex-1 { padding-right: 16px !important; }

  /* new-message button → soft circle */
  .x_side_msg_bar .js_chat-new { color: var(--lm-primary, #0f6f4f); }

  /* ─────────────────────────────────────────────────────────────
     Conversation thread (right pane)
     ───────────────────────────────────────────────────────────── */
  .panel-messages .x_msg_user_name a,
  .panel-messages .x_msg_user_name > span { font-size: 16px; font-weight: 700; }
  .panel-messages .x_msg_user_name { gap: 8px !important; }

  /* message scroll area: soft gradient like the mockup */
  .js_conversation-container .panel-messages .js_scroller {
    background: linear-gradient(180deg, var(--lm-surface, #f6f8fa) 0%, var(--lm-bg, #fff) 100%);
  }

  /* bubbles */
  .panel-messages .conversation { margin-bottom: 8px; }
  .panel-messages .conversation-user { width: 34px; height: 34px; flex: none; }
  .panel-messages .conversation-body { max-width: 78%; }
  /* Bubble colour = the SENDER's account type within one chat: talent = green,
     brand = navy. The other party's account_type isn't in the message data
     (that's backend), so for the talent↔brand chat we infer it from the viewer
     via --lm-bubble-me / --lm-bubble-other (set at the top of this file):
       viewer talent → mine green,  theirs navy
       viewer brand  → mine navy,   theirs green
     Both themes handled by the vars. (.js_chat-color-me hook untouched.) */
  .panel-messages .conversation .text {
    padding: 10px 14px; font-size: 14px; line-height: 1.45;
    border: 0 !important; border-radius: 18px; color: #fff !important;
  }
  .panel-messages .conversation:not(.right) .text {
    background: var(--lm-bubble-other) !important; border-bottom-left-radius: 5px;
  }
  .panel-messages .conversation.right .text {
    background: var(--lm-bubble-me) !important; border-bottom-right-radius: 5px;
  }
  .panel-messages .conversation .text a { color: #fff !important; }
  .panel-messages .conversation .time { font-size: 10.5px; color: var(--lm-muted, #94a3b8); margin-top: 3px; }
  .panel-messages .conversation.right .time { text-align: right; }
  .panel-messages .conversation .seen { font-size: 10.5px; color: var(--lm-muted, #94a3b8); margin-top: 2px; }

  /* ─────────────────────────────────────────────────────────────
     Composer (.chat-form) — used in both thread + new/compose
     ───────────────────────────────────────────────────────────── */
  .chat-form { display: flex !important; align-items: center; gap: 9px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--lm-border, #e7ecf1); }
  .chat-form .chat-form-message {
    flex: 1; min-width: 0; order: 2;
    background: var(--lm-surface, #f6f8fa); border: 1px solid var(--lm-border, #e7ecf1); border-radius: 999px;
    display: flex; align-items: center; padding: 0 6px 0 16px;
  }
  .chat-form .chat-form-message textarea { background: transparent !important; padding: 10px 0 !important; max-height: 96px; }
  /* tools row: attach/voice/emoji stay; Send becomes a green circle on the right */
  .chat-form .x-form-tools { order: 3; padding: 0 !important; gap: 4px !important; flex: none; }
  .chat-form .x-form-tools-attach,
  .chat-form .x-form-tools-voice,
  .chat-form .x-form-tools-emoji { color: var(--lm-muted, #64748b); }
  /* hide the chat-colour-picker swatch on mobile (niche desktop control, not in
     the mockup; it rendered as a stray dark chip). The .js_chat-color-me bubble
     hook is untouched. */
  .chat-form .x-form-tools-colors { display: none !important; }
  .chat-form .x-form-tools-post.js_post-message {
    width: 42px; height: 42px; min-width: 42px; padding: 0 !important; border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0 !important;
    background: var(--lm-primary, #0f6f4f) !important; color: #fff !important;
  }
  /* render a paper-plane glyph inside the (text "Send") button */
  .chat-form .x-form-tools-post.js_post-message::before {
    content: ""; width: 18px; height: 18px;
    background: #fff; -webkit-mask: var(--lm-send-mask) center/contain no-repeat; mask: var(--lm-send-mask) center/contain no-repeat;
  }

  /* compose recipient picker */
  .panel-messages.fresh .chat-to { border-bottom: 1px solid var(--lm-border, #e7ecf1); }

  /* dark theme tweaks — bubble colours come from the --lm-bubble-* vars above
     (dark variants handled there), so no per-bubble dark overrides here. */
  html.lm-dark .js_conversation-container .panel-messages .js_scroller,
  html[data-lm-theme="dark"] .js_conversation-container .panel-messages .js_scroller {
    background: linear-gradient(180deg, var(--lm-surface, #151b23) 0%, var(--lm-bg, #0b1220) 100%);
  }
  html.lm-dark .chat-form .chat-form-message,
  html[data-lm-theme="dark"] .chat-form .chat-form-message { background: var(--lm-surface-2, #1c232c); border-color: var(--lm-border, #2a3038); }
}

/* paper-plane mask (data-URI) used by the Send button */
:root { --lm-send-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"); }

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP (≥768px) — polish the existing two-pane messenger to the approved
   messenger-desktop.html mockup. Presentation only; no hook/markup changes.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* ── Headers: trim the oversized "Messenger" / "New Message" titles ── */
  .x_side_msg_bar .side_widget_title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
  .panel-messages .side_widget_title { font-size: 18px !important; font-weight: 700; }
  .panel-messages > div:first-child,
  .panel-messages.fresh > div:first-child { padding: 10px 16px !important; }
  /* compact the "To:" field — was a tall block with the divider far below */
  .panel-messages.fresh .chat-to { padding: 8px 16px !important; }
  .panel-messages.fresh .chat-to .to { padding-top: 4px !important; font-size: 15px; font-weight: 700; }
  /* ── Conversation list rows — tighter, less space per chat ── */
  .x_side_msg_bar .feeds-item { border-left: 3px solid transparent; }
  .x_side_msg_bar .feeds-item::before { display: none !important; }      /* core left accent off */
  .x_side_msg_bar .feeds-item.is-active { background: var(--lm-primary-soft, #f3f8f5); border-left-color: var(--lm-primary, #0f6f4f); }
  .x_side_msg_bar .feeds-item .js_chat-start { padding: 9px 16px; }
  .x_side_msg_bar .chat-avatar { width: 40px; height: 40px; }
  .x_side_msg_bar .chat-avatar img,
  .x_side_msg_bar .chat-avatar .x_user_multi_avatar { width: 40px !important; height: 40px !important; }
  .x_side_msg_bar .online-dot {
    width: 13px !important; height: 13px !important; right: 1px !important; bottom: 1px !important;
    background: var(--lm-verify, #1faa5a) !important; border: 2.5px solid var(--lm-card, #fff) !important;
  }
  .x_side_msg_bar .online-dot.offline { display: none !important; }
  .x_side_msg_bar .lm-msg-name-text { font-size: 14.5px; font-weight: 700; }
  .x_side_msg_bar .feeds-item.unread .text { color: var(--lm-text); font-weight: 600; }

  /* ── Thread: centred column + mockup bubbles, coloured by sender type ── */
  .panel-messages[data-cid] .js_scroller > ul { max-width: 840px; margin: 0 auto; }
  .panel-messages .conversation { margin-bottom: 12px; }
  .panel-messages .conversation .text {
    padding: 11px 15px; font-size: 14.5px; line-height: 1.5;
    border: 0 !important; border-radius: 18px; color: #fff !important;
  }
  .panel-messages .conversation:not(.right) .text { background: var(--lm-bubble-other) !important; border-bottom-left-radius: 5px; }
  .panel-messages .conversation.right .text   { background: var(--lm-bubble-me)   !important; border-bottom-right-radius: 5px; }
  .panel-messages .conversation .text a { color: #fff !important; }

  /* ── Composer: [+] [input] [Send] (mockup). display:contents lets the tools
     <ul> children sit as flex items of .chat-form so we can place the + on the
     left, input in the middle, Send on the right. ── */
  .panel-messages .chat-form { display: flex !important; align-items: center; gap: 11px; padding: 14px 22px !important; }
  .panel-messages .chat-form .x-form-tools { display: contents !important; }
  .panel-messages .chat-form .x-form-tools-colors { display: none !important; }
  /* + (uses the attach button — opens add-photo; shown as a plus per mockup) */
  .panel-messages .chat-form .x-form-tools-attach {
    order: 1; width: 44px; height: 44px; flex: none; border: 1px solid var(--lm-border, #e7ecf1);
    border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--lm-primary, #0f6f4f);
  }
  .panel-messages .chat-form .x-form-tools-attach svg { display: none; }
  .panel-messages .chat-form .x-form-tools-attach::before { content: "+"; font-size: 26px; font-weight: 300; line-height: 1; color: var(--lm-primary, #0f6f4f); }
  .panel-messages .chat-form .chat-form-message {
    order: 2; flex: 1; min-width: 0;
    background: var(--lm-surface, #f6f8fa); border: 1px solid var(--lm-border, #e7ecf1); border-radius: 14px;
    display: flex; align-items: center; padding: 0 16px;
  }
  .panel-messages .chat-form .chat-form-message textarea { background: transparent !important; padding: 12px 0 !important; max-height: 120px; }
  .panel-messages .chat-form .x-form-tools-voice { order: 3; color: var(--lm-muted, #64748b); }
  .panel-messages .chat-form .x-form-tools-emoji { order: 4; color: var(--lm-muted, #64748b); }
  .panel-messages .chat-form .x-form-tools-post.js_post-message {
    order: 5; height: 46px; padding: 0 22px !important; border-radius: 12px !important;
    background: var(--lm-primary, #0f6f4f) !important; color: #fff !important; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
  }
  /* conversation-header name — the default headline ran oversized on desktop */
  .panel-messages .x_msg_user_name a,
  .panel-messages .x_msg_user_name > span:first-child { font-size: 17px !important; font-weight: 700; letter-spacing: -.01em; }
  /* kill the textarea scroll/resize grip that showed in the composer even when
     empty (Image: a grey vertical bar at the input's right edge). */
  .panel-messages .chat-form .chat-form-message textarea {
    resize: none !important; scrollbar-width: none !important; -ms-overflow-style: none !important;
  }
  .panel-messages .chat-form .chat-form-message textarea::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

/* Dark theme: make the active-row green visible in the messenger list (the
   soft tint + border were nearly invisible on the dark surface). */
html.lm-dark .x_side_msg_bar .feeds-item.is-active,
html.lm-dark .x_side_msg_bar ul .feeds-item.is-active,
html[data-lm-theme="dark"] .x_side_msg_bar .feeds-item.is-active,
html[data-lm-theme="dark"] .x_side_msg_bar ul .feeds-item.is-active {
  background: rgba(46, 161, 111, 0.20) !important;
  box-shadow: inset 3px 0 0 var(--lm-primary, #2ea16f) !important;
  border-left-color: transparent !important;
}

/* ── Mobile thread list: highlight UNREAD, not the auto-selected first row ──
   On mobile the list is shown ALONE (tapping a row opens the conversation
   full-screen), so the desktop "first conversation auto-selected" row must NOT
   read as a green selection here — it confused users into thinking it was open.
   Kill is-active on mobile (both themes) and move the green glow to UNREAD rows,
   the ones that actually need attention. Appended last + html-prefixed !important
   so it beats the global dark is-active rule above. */
@media (max-width: 767px) {
  html .x_side_msg_bar .feeds-item.is-active,
  html.lm-dark .x_side_msg_bar ul .feeds-item.is-active,
  html[data-lm-theme="dark"] .x_side_msg_bar ul .feeds-item.is-active {
    background: transparent !important;
    box-shadow: none !important;
    border-left-color: transparent !important;
  }
  html .x_side_msg_bar .feeds-item.unread {
    background: var(--lm-primary-soft, rgba(15, 111, 79, .08)) !important;
    box-shadow: inset 3px 0 0 var(--lm-primary, #0f6f4f) !important;
  }
  html[data-lm-theme="dark"] .x_side_msg_bar .feeds-item.unread {
    background: rgba(46, 161, 111, 0.16) !important;
    box-shadow: inset 3px 0 0 var(--lm-primary, #2ea16f) !important;
  }
}

/* Chat-head: [avatar] [who: name-row / status]. (desktop + mobile) */
.panel-messages .x_msg_user_name { align-items: center; }
.lm-msg-head-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.panel-messages .lm-msg-head-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; }
.panel-messages .lm-msg-head-who .lm-msg-head-status {
  flex-basis: 100%; margin: 1px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.2;
  color: var(--lm-primary-text, #0a5439);
}
.panel-messages .lm-msg-head-who .lm-msg-head-status.is-offline { color: var(--lm-muted, #64748b); }

/* Conversation list: clear gap between avatar and text + trimmer name
   (flex-gap on the row is reliable across widths; zero the Bootstrap mx). */
.x_side_msg_bar .feeds-item .js_chat-start { gap: 11px !important; }
.x_side_msg_bar .feeds-item .mw-0.flex-1 { margin: 0 !important; }
.x_side_msg_bar .lm-msg-name-text { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Confirm modal (used by .js_delete-conversation → core confirm()). Clean LM
   shell so "Delete conversation" reads nicely on desktop + mobile. Generic
   (#modal.modal-new-wide) so all confirms get the same tidy treatment.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal.modal-new-wide .modal-dialog { max-width: 440px; }
.modal.modal-new-wide .modal-content {
  border: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(15, 23, 42, .5);
}
.modal.modal-new-wide .modal-header { padding: 20px 24px 14px; border-bottom: 1px solid var(--lm-border-2, #f0f3f6); }
.modal.modal-new-wide .modal-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.modal.modal-new-wide .modal-body { padding: 20px 24px; }
.modal.modal-new-wide .modal-body h6 { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--lm-text-2, #475569); margin: 0; }
.modal.modal-new-wide .modal-footer { padding: 14px 24px; border-top: 1px solid var(--lm-border-2, #f0f3f6); gap: 8px; }
.modal.modal-new-wide .modal-footer .btn { height: 44px; padding: 0 18px; border-radius: 11px; font-weight: 700; font-size: 14.5px; }
.modal.modal-new-wide #modal-confirm-ok { background: var(--lm-primary, #0f6f4f); border-color: var(--lm-primary, #0f6f4f); }

/* ═══════════════════════════════════════════════════════════════════════════
   NEW MESSAGE — compose view reskin (designs/mobile/new-message.html).
   Re-skins the live /messages/new view (.panel-messages.fresh): empty canvas,
   the "To:" recipient field (.chat-to.js_autocomplete-tags), recipient chips,
   and the core typeahead dropdown (.dropdown-menu.auto-complete from
   ajax.autocomplete.tpl). Presentation only — every .js_* hook is preserved.
   Desktop + mobile (no media query unless geometry needs it).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Empty canvas — "Start a new message". lm-chat-popup.js adds .has-recipient
   to .panel-messages.fresh once a chip is present, which hides this. */
.panel-messages.fresh .lm-newmsg-empty {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px; gap: 6px; pointer-events: none;
}
.panel-messages.fresh.has-recipient .lm-newmsg-empty { display: none; }
.lm-newmsg-empty-ic {
  width: 72px; height: 72px; border-radius: 50%; margin-bottom: 8px;
  display: grid; place-items: center;
  background: var(--lm-primary-soft, #f3f8f5); color: var(--lm-primary, #0f6f4f);
}
.lm-newmsg-empty-ic svg { width: 34px; height: 34px; }
.lm-newmsg-empty-t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--lm-text, #0f172a); }
.lm-newmsg-empty-d { font-size: 13.5px; line-height: 1.5; color: var(--lm-muted, #64748b); max-width: 300px; }
html.lm-dark .lm-newmsg-empty-ic { background: rgba(46, 161, 111, .16); color: #2ea16f; }

/* "To:" recipient field */
.panel-messages.fresh .chat-to {
  position: relative; padding: 12px 16px; gap: 10px;
  background: var(--lm-card, #fff); border-bottom: 1px solid var(--lm-border, #e7ecf1);
}
.panel-messages.fresh .chat-to .to { padding: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--lm-muted, #64748b); }
.panel-messages.fresh .chat-to ul.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.panel-messages.fresh .chat-to ul.tags li {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 5px 8px 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--lm-primary-soft, #f3f8f5); color: var(--lm-primary-text, #0a5439);
}
.panel-messages.fresh .chat-to ul.tags li .btn-close { width: 7px; height: 7px; padding: 4px; opacity: .65; }
.panel-messages.fresh .chat-to .typeahead { position: static; }
.panel-messages.fresh .chat-to .typeahead input {
  border: 0 !important; outline: none !important; background: transparent !important;
  padding: 6px 2px; font-size: 14.5px; min-width: 120px; color: var(--lm-text, #0f172a);
}
html.lm-dark .panel-messages.fresh .chat-to { background: var(--lm-surface, #1c232c); }
html.lm-dark .panel-messages.fresh .chat-to ul.tags li { background: rgba(46, 161, 111, .16); color: #6fe3b3; }

/* Typeahead results dropdown (core renders rows from ajax.autocomplete.tpl) */
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; z-index: 40;
  max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--lm-card, #fff); border: 1px solid var(--lm-border, #e7ecf1);
  border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(11, 28, 38, .28);
}
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete ul { margin: 0; padding: 0; list-style: none; }
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete li { margin: 0; }
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-container {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; transition: background .12s;
}
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-container:hover { background: var(--lm-surface-2, #eef2f6); }
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-avatar {
  flex: none; width: 42px; height: 42px; margin: 0;
}
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-avatar > img.data-avatar,
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete img.data-avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; display: block;
}
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-content { min-width: 0; }
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-content strong {
  font-size: 14.5px; font-weight: 700; color: var(--lm-text, #0f172a);
}
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-content > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.panel-messages.fresh .chat-to .dropdown-menu.auto-complete .verified-badge { color: var(--lm-verify, #1faa5a); }
html.lm-dark .panel-messages.fresh .chat-to .dropdown-menu.auto-complete { background: var(--lm-surface-2, #1c232c); border-color: var(--lm-border, #2a3340); }
html.lm-dark .panel-messages.fresh .chat-to .dropdown-menu.auto-complete .data-container:hover { background: rgba(255, 255, 255, .05); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT POPUP — re-skin Sngine's floating .chat-widget.chat-box to the
   designs/mobile/chat-popup.html look. Desktop = docked bottom-right popup
   (geometry from style.css). Mobile = bottom-sheet (geometry from
   lm-profile-mobile.css). These rules (skin) apply at all widths; lm-chat-popup.js
   builds the .lm-chatpop-who wrapper + status line and the mobile scrim.
   Presentation only — js_post-message / js_chat-* / socket DOM untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-widget.chat-box { border-radius: 16px 16px 0 0; }
.chat-widget.chat-box .chat-widget-head {
  background: linear-gradient(180deg, var(--lm-primary-soft, #f3f8f5) 0%, var(--lm-card, #fff) 100%);
  border-bottom: 1px solid var(--lm-border-2, #f0f3f6);
}
.chat-widget.chat-box .chat-user-card .avatar { width: 42px; height: 42px; }
.chat-widget.chat-box .chat-user-card .avatar .online-dot {
  width: 12px; height: 12px; right: 0; bottom: 0;
  background: var(--lm-verify, #1faa5a); border: 2.5px solid var(--lm-card, #fff);
}
.chat-widget.chat-box .chat-user-card .avatar .online-dot.offline { background: var(--lm-muted-2, #94a3b8); }
/* Dark theme: the offline dot inherits `.online-dot.offline{background:var(--body-color)!important}`
   from style.css, and --body-color flips to near-white in dark → a glaring white blob over the
   avatar. Force a muted grey in EVERY dot context (chat-box, list, header, fab). The html/body
   prefix raises specificity so this wins over the base rule's !important. */
html.lm-dark .online-dot.offline,
html[data-lm-theme="dark"] .online-dot.offline,
body.night-mode .online-dot.offline { background: var(--lm-muted-2, #5b6675) !important; }
/* name + status stacked (lm-chat-popup.js wraps .name + .lm-chatpop-status here) */
.chat-widget.chat-box .lm-chatpop-who { display: flex; flex-direction: column; min-width: 0; }
.chat-widget.chat-box .chat-user-card .name { font-size: 0; line-height: 1.15; }
.chat-widget.chat-box .chat-user-card .name > span { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.chat-widget.chat-box .lm-chatpop-status {
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
  font-size: 12px; font-weight: 500; color: var(--lm-primary-text, #0a5439);
}
.chat-widget.chat-box .lm-chatpop-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lm-verify, #1faa5a); }
.chat-widget.chat-box .lm-chatpop-status.is-offline { color: var(--lm-muted, #64748b); }
.chat-widget.chat-box .lm-chatpop-status.is-offline::before { background: var(--lm-muted-2, #94a3b8); }
.chat-widget.chat-box .chat-head-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--lm-muted, #64748b); }
.chat-widget.chat-box .chat-head-btn:hover { background: var(--lm-surface-2, #eef2f6); opacity: 1; }

/* thread + bubbles (per-sender colour, same vars as the full thread) */
.chat-widget.chat-box .chat-conversations { background: linear-gradient(180deg, var(--lm-surface, #f6f8fa) 0%, var(--lm-card, #fff) 90px); }
.chat-widget.chat-box .conversation .text {
  color: #fff !important; border: 0 !important; border-radius: 18px;
  padding: 9px 13px; font-size: 14px; line-height: 1.45;
}
.chat-widget.chat-box .conversation:not(.right) .text { background: var(--lm-bubble-other) !important; border-bottom-left-radius: 5px; }
.chat-widget.chat-box .conversation.right .text { background: var(--lm-bubble-me) !important; border-bottom-right-radius: 5px; }
.chat-widget.chat-box .conversation .text a { color: #fff !important; text-decoration: underline; }
.chat-widget.chat-box .conversation .time { font-size: 10.5px; color: var(--lm-muted, #94a3b8); }
/* message-row avatar: keep it a fixed circle. The base .conversation-user is
   width/height:30px but has NO flex:none, so in the flex message row it shrank
   horizontally while keeping its height → a stretched oval (Image #88). Pin the
   flex-basis so it can't squash, and object-fit so a non-square src never warps. */
.chat-widget.chat-box .conversation-user { flex: 0 0 30px !important; }
.panel-messages .conversation-user { flex: none !important; }
.chat-widget.chat-box .conversation-user img,
.panel-messages .conversation-user img { object-fit: cover !important; }

/* composer — row 1 = [input pill] [green Send], row 2 = [photo][emoji].
   The Send sits in its OWN column beside the textarea (NOT absolutely
   overlapping it), vertically centred, so when the textarea grows tall the
   Send stays centred and the textarea keeps its own scrollbar clear of it.
   .x-form-tools is display:contents so its children (send + tool icons)
   become direct flex children of .chat-form and can be ordered/wrapped. */
.chat-widget.chat-box .chat-form {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; position: relative;
}
.chat-widget.chat-box .chat-form-message {
  order: 1; flex: 1 1 calc(100% - 54px); min-width: 0; margin: 0;
}
.chat-widget.chat-box .chat-form-message textarea {
  background: var(--lm-surface, #f6f8fa) !important; border-radius: 20px; padding-right: 16px !important;
}
html.lm-dark .chat-widget.chat-box .chat-form-message textarea { background: var(--lm-surface-2, #222a33) !important; }
.chat-widget.chat-box .x-form-tools { display: contents !important; } /* beat .d-flex !important on the ul */
/* green Send circle (row 1, right of input, vertically centred via align-items).
   suppress the duplicate ::before paper-plane the conversation-composer rule
   injects — our li already carries an inline <svg> plane. */
.chat-widget.chat-box .lm-chatpop-send {
  order: 2; position: static; flex: none; width: 44px; height: 44px; margin: 0 !important;
  display: grid !important; place-items: center; border-radius: 50% !important; font-size: 0 !important;
  background: var(--lm-primary, #0f6f4f) !important; color: #fff !important;
  box-shadow: 0 8px 16px -8px rgba(15, 111, 79, .6); transition: background .14s, transform .12s;
}
.chat-widget.chat-box .lm-chatpop-send::before { display: none !important; content: none !important; }
.chat-widget.chat-box .lm-chatpop-send:hover { background: var(--lm-primary-strong, #0a5439) !important; transform: translateY(-1px); }
.chat-widget.chat-box .lm-chatpop-send svg { width: 20px; height: 20px; display: block; }
/* tool icons — row 2 (forced to wrap because row 1 is full). Bigger glyphs +
   padded tap targets + spacing so they're easy to hit with a finger. */
.chat-widget.chat-box .x-form-tools-attach { order: 3; }
.chat-widget.chat-box .x-form-tools-voice  { order: 4; }
.chat-widget.chat-box .x-form-tools-emoji  { order: 5; }
.chat-widget.chat-box .x-form-tools-colors { display: none !important; }
.chat-widget.chat-box .x-form-tools-attach,
.chat-widget.chat-box .x-form-tools-voice,
.chat-widget.chat-box .x-form-tools-emoji {
  color: var(--lm-muted, #64748b) !important; cursor: pointer;
  padding: 7px; margin: 4px 8px 0 0; border-radius: 10px; line-height: 0;
}
.chat-widget.chat-box .x-form-tools-attach:hover,
.chat-widget.chat-box .x-form-tools-voice:hover,
.chat-widget.chat-box .x-form-tools-emoji:hover { background: var(--lm-surface-2, #eef2f6); color: var(--lm-primary, #0f6f4f) !important; }
.chat-widget.chat-box .x-form-tools-attach svg,
.chat-widget.chat-box .x-form-tools-voice svg,
.chat-widget.chat-box .x-form-tools-emoji svg { width: 25px; height: 25px; }

/* head: expand-to-full-conversation button (lm-chat-popup.js navigates) */
.chat-widget.chat-box .chat-head-btns { gap: 2px; }
.chat-widget.chat-box .lm-chatpop-expand svg { width: 18px; height: 18px; }

/* Desktop floating popup composer (Image #87): close the empty gap between the
   input row and the photo/emoji tool row, and shrink the green Send circle.
   Scoped to desktop — mobile keeps the larger 44px tap target + its own spacing. */
@media (min-width: 768px) {
  .chat-widget.chat-box .chat-form { gap: 2px 8px !important; }
  .chat-widget.chat-box .lm-chatpop-send { width: 38px; height: 38px; }
  .chat-widget.chat-box .lm-chatpop-send svg { width: 17px; height: 17px; }
  .chat-widget.chat-box .x-form-tools-attach,
  .chat-widget.chat-box .x-form-tools-voice,
  .chat-widget.chat-box .x-form-tools-emoji { margin-top: 0; }
}

/* Mobile: while a chat sheet is open, hide the bottom nav (z-index:90) so it
   can't bleed through / flicker under the sheet — same approach the discover
   sheet uses. lm-chat-popup.js adds .lm-chatpop-locked to <html> on open; the
   :has() fallback covers any open path that doesn't set the lock class. */
@media (max-width: 767px) {
  html.lm-chatpop-locked .lm-m-bottomnav,
  body:has(.chat-widget.chat-box.opened) .lm-m-bottomnav { display: none !important; }
}

/* shared scrim behind mobile sheet + (optional) desktop dim. Hidden until JS shows it. */
.lm-chatpop-scrim {
  position: fixed; inset: 0; z-index: 1001; background: rgba(11, 20, 16, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .26s; pointer-events: none;
}
.lm-chatpop-scrim.is-open { opacity: 1; pointer-events: auto; }
/* background scroll-lock while a sheet is open — overflow only (NOT position:fixed,
   which would break interactive-widget keyboard resizing). */
html.lm-chatpop-locked, html.lm-chatpop-locked body { overflow: hidden !important; overscroll-behavior: none; }

@media (max-width: 767px) {
  /* grip handle at the top of the sheet */
  .chat-widget.chat-box .chat-widget-head { padding-top: 18px !important; }
  .chat-widget.chat-box .chat-widget-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 5px; border-radius: 999px; background: var(--lm-border, #d4dae1);
  }
  /* the desktop dim scrim is only needed on mobile */
  .lm-chatpop-scrim { display: block; }
}
@media (min-width: 768px) {
  /* on desktop the popup is small + docked; no full-screen dim */
  .lm-chatpop-scrim { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chat header: account-type badge (Talent/Brand Account) under the name, in
   place of the Offline/Online text (the avatar dot conveys online). Reuses the
   shared .lm-account-type rounded-rect pill (lm-profile.css). Tighter avatar↔name
   gap + compact name per request.
   ═══════════════════════════════════════════════════════════════════════════ */
.panel-messages .x_msg_user_name { gap: 10px !important; }
.panel-messages .lm-msg-head-av { width: 42px; height: 42px; }
.panel-messages .lm-msg-head-who { gap: 0 6px; line-height: 1.18; }
/* account-type badge sits on its own line directly under the name */
.panel-messages .lm-msg-head-acct { flex-basis: 100%; margin-top: 4px; }
.chat-widget.chat-box .lm-chatpop-meta .lm-account-type,
.panel-messages .lm-msg-head-acct .lm-account-type { vertical-align: middle; }
/* Keep the account-type pill compact inside the chat-box popup. The chat-box
   .name has font-size:0 and the popup's generic SVG sizing was inflating the
   pill's icon → an over-tall pill (Image #86). Pin the icon size + vertical
   padding so the pill height matches the rest of the site; align-self:center
   stops the flex parent stretching it to the full name-line height. */
.chat-widget.chat-box .lm-account-type {
  align-self: center;
  font-size: 10px;
  line-height: 1.45;
  padding: 1px 6px;
}
.chat-widget.chat-box .lm-account-type svg {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto;
}

/* head line 2: account-type pill + verified + tier badges. lm-chat-popup.js
   relocates the .lm-chat-badges cluster (injected by lm-chat-enhance.js) here. */
.chat-widget.chat-box .lm-chatpop-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; margin-top: 2px; }
.chat-widget.chat-box .lm-chatpop-meta .lm-chatpop-status { margin-top: 0; }
.chat-widget.chat-box .lm-chatpop-meta .lm-chat-badges { display: inline-flex; align-items: center; gap: 5px; }
.chat-widget.chat-box .lm-chatpop-meta .lm-chat-verified { width: 15px; height: 15px; }
.chat-widget.chat-box .chat-user-card .name { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Messenger panel — uniform card surface (light theme). The /messages
   container is .bg-white but the inner .card-body / .chat-conversations were
   transparent, so the empty compose canvas showed the grey page background
   (#eef2f6) as an ugly band between the white header and composer. Paint the
   message surfaces with the theme card colour (white in light, dark surface in
   dark; the dark thread gradient keeps its higher-specificity override). */
.js_conversation-container.msg,
.panel-messages,
.panel-messages .card-body,
.panel-messages.fresh .chat-conversations { background: var(--lm-card, #fff); }

/* ═══════════════════════════════════════════════════════════════════════════
   Delete-conversation confirm modal — center it as a floating dialog on mobile
   (it was pinned flush to the bottom edge). Desktop already centers via Bootstrap.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .modal.modal-new-wide .modal-dialog {
    min-height: calc(100% - 2rem) !important;
    display: flex !important; align-items: center !important;
    margin: 1rem auto !important; max-width: calc(100% - 2rem) !important;
  }
  /* core mobile rule bottom-docks modals via .modal-content{margin-top:auto};
     override to auto top+bottom so the dialog centres vertically instead. */
  .modal.modal-new-wide .modal-content {
    margin-top: auto !important; margin-bottom: auto !important;
    border-radius: 18px !important; width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /messages PAGE chrome (≤767px) — the template only applied its full-screen
   treatment at ≤520px, so 521–767px got a tall header, a fat "To:" field, a
   composer clipped behind the fixed 64px bottom nav, and an empty canvas
   stranded in the vertical centre. Normalise across the whole mobile range.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* reserve space for the fixed 64px bottom nav (.lm-m-bottomnav) so the
     composer + list always sit ABOVE it instead of being clipped. */
  .x_menu_sidebar.msg,
  .x_menu_sidebar_content.msg {
    height: calc(100dvh - 49px - 64px) !important;
    min-height: calc(100dvh - 49px - 64px) !important;
    max-height: calc(100dvh - 49px - 64px) !important;
  }

  /* compact "New Message" header (was ~64px tall with an oversized title) */
  .panel-messages.fresh > div:first-child { padding: 6px 10px !important; }
  .panel-messages.fresh .side_widget_title { font-size: 19px !important; gap: 10px !important; }
  .panel-messages.fresh .side_widget_title svg { width: 26px !important; height: 26px !important; }

  /* compact the "To:" recipient field (was ~67px tall); bigger "To:" label */
  .panel-messages.fresh .chat-to { padding-top: 7px !important; padding-bottom: 7px !important; }
  .panel-messages.fresh .chat-to .to { padding-top: 6px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--lm-text, #0f172a) !important; }
  .panel-messages.fresh .chat-to .typeahead input { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 15px !important; }

  /* centre the empty "Start a new message" canvas (above the composer) */
  .panel-messages.fresh .lm-newmsg-empty { justify-content: center !important; padding-top: 0 !important; bottom: 78px !important; }

  /* bigger, easier-to-tap back arrows on every messenger header */
  .panel-messages .x_menu_sidebar_back,
  .panel-messages .lm-msg-back-btn {
    width: 44px !important; height: 44px !important; padding: 8px !important;
    display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
  }
  .panel-messages .x_menu_sidebar_back svg,
  .panel-messages .lm-msg-back-btn svg { width: 28px !important; height: 28px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GREY LEFT GUTTER FIX (desktop-narrow 769–1100px).
   lm-profile.css collapses the chrome sidebar to 80px and shifts the topbar to
   left:80px at ≤1100px, but `html.lm-chrome-active body` keeps padding-left:240px
   — so the messages panel started at x=240 with a ~160px strip of grey page
   background (#eef2f6) on its left. Align the messages content to the collapsed
   80px sidebar so the panel is flush against it (no grey strip anywhere).
   Below 769px the mobile layout already full-bleeds; above 1100px the sidebar is
   the full 240px so padding matches — both untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  html.lm-messages-active.lm-chrome-active body { padding-left: 80px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW-MESSAGE COMPOSE SHEET (.chat-box.fresh) — Sngine's #chat-box-new opened
   as a bottom-sheet on mobile (and a docked popup on desktop) by lm-chat-popup.js.
   Re-skin the "To:" field, head title, and empty canvas to match the page view.
   The .chat-widget.chat-box sheet geometry + composer skin already apply.
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-widget.chat-box.fresh .chat-user-card .name { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
/* "To:" field styling (both desktop popup + mobile sheet) */
.chat-widget.chat-box.fresh .chat-to {
  padding: 10px 14px !important; gap: 10px; border-bottom: 1px solid var(--lm-border, #e7ecf1);
  background: var(--lm-card, #fff);
}
/* mobile sheet ONLY: lift "To:" out of its template position-absolute into a
   normal-flow top bar (order:-1). On DESKTOP it must keep the template's absolute
   top placement, else it drops below the canvas and gets clipped. */
@media (max-width: 767px) {
  .chat-widget.chat-box.fresh .chat-to {
    position: relative !important; order: -1; width: 100%; margin: 0;
    left: auto !important; right: auto !important; top: auto !important;
  }
}
.chat-widget.chat-box.fresh .chat-to .to { padding: 6px 0 0 !important; font-size: 16px; font-weight: 700; color: var(--lm-text, #0f172a); }
.chat-widget.chat-box.fresh .chat-to ul.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chat-widget.chat-box.fresh .chat-to ul.tags li {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 5px 8px 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--lm-primary-soft, #f3f8f5); color: var(--lm-primary-text, #0a5439);
}
.chat-widget.chat-box.fresh .chat-to ul.tags li .btn-close { width: 7px; height: 7px; padding: 4px; opacity: .65; }
.chat-widget.chat-box.fresh .chat-to .typeahead { position: static; }
.chat-widget.chat-box.fresh .chat-to .typeahead input {
  border: 0 !important; outline: none !important; background: transparent !important;
  padding: 6px 2px; font-size: 15px; min-width: 120px; color: var(--lm-text, #0f172a);
}
html.lm-dark .chat-widget.chat-box.fresh .chat-to { background: var(--lm-surface, #1c232c); }
html.lm-dark .chat-widget.chat-box.fresh .chat-to ul.tags li { background: rgba(46, 161, 111, .16); color: #6fe3b3; }
/* typeahead results dropdown (rendered by core after the input) */
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; z-index: 40;
  max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--lm-card, #fff); border: 1px solid var(--lm-border, #e7ecf1);
  border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(11, 28, 38, .28);
}
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete ul { margin: 0; padding: 0; list-style: none; }
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete .data-container {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete .data-container:hover { background: var(--lm-surface-2, #eef2f6); }
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete .data-avatar { flex: none; width: 42px; height: 42px; margin: 0; }
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete img.data-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete .data-content strong { font-size: 14.5px; font-weight: 700; color: var(--lm-text, #0f172a); }
.chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete .data-content > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html.lm-dark .chat-widget.chat-box.fresh .chat-to .dropdown-menu.auto-complete { background: var(--lm-surface-2, #1c232c); border-color: var(--lm-border, #2a3340); }
/* empty "Start a new message" canvas — mobile sheet only (centred between the
   To bar and the composer). The small docked DESKTOP popup hides it (it has no
   room and the template's absolute To: would overlap it → the Image #78 mess). */
@media (max-width: 767px) {
  .chat-widget.chat-box.fresh .lm-newmsg-empty {
    position: absolute; left: 0; right: 0; top: 64px; bottom: 86px; z-index: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px; gap: 6px; pointer-events: none;
  }
  .chat-widget.chat-box.fresh.has-recipient .lm-newmsg-empty { display: none; }
}
@media (min-width: 768px) {
  .chat-widget.chat-box.fresh .lm-newmsg-empty { display: none !important; }
  /* desktop popup: smaller "New Message" title + "To:" label (they looked oversized) */
  .chat-widget.chat-box.fresh .chat-user-card .name { font-size: 14.5px !important; }
  .chat-widget.chat-box.fresh .chat-to { padding: 8px 14px !important; }
  .chat-widget.chat-box.fresh .chat-to .to { font-size: 13.5px !important; padding-top: 5px !important; }
  .chat-widget.chat-box.fresh .chat-to .typeahead input { font-size: 13.5px !important; }
}
.chat-widget.chat-box.fresh .chat-conversations { flex: 1 1 auto; min-height: 0; }

/* When the keyboard is open (lm-chat-popup.js pins the sheet above it) drop the
   safe-area padding under the composer — no home indicator while typing, so it
   would otherwise read as a grey gap below the input. */
.chat-widget.chat-box.lm-kb-open .chat-form { padding-bottom: 10px !important; }

@media (max-width: 767px) {
  /* On mobile the sheet IS the full experience — hide the "expand to full page"
     button so users don't land on the old (scroll-over-header) conversation page.
     Deep-links to /messages/{cid} are bounced back to the sheet in JS. */
  .chat-widget.chat-box .lm-chatpop-expand { display: none !important; }
}