/* ════════════════════════════════════════════════════════════════════════════
   LM MESSAGES — desktop re-skin (2nd/3rd column). Ported from
   designs/messages/messages-redesign.html, mapped to LM tokens + dark mode.
   Currently focused on the right-pane EMPTY STATE (no conversation open),
   which previously read as a bare "No Conversation Selected" box.
   Scoped under html.lm-messages-active so it's inert elsewhere.
   ════════════════════════════════════════════════════════════════════════════ */

/* Right-pane empty state — illustration + heading + copy + CTA + trust pills. */
.lm-msg-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; max-width: 460px; margin: 0 auto;
}
.lm-msg-empty-ill { position: relative; width: 120px; height: 120px; margin-bottom: 26px; display: grid; place-items: center; }
.lm-msg-empty-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--lm-primary-soft, #f1f8f4) 0%, var(--lm-surface, #f7f9fb) 78%);
  border: 1px solid var(--lm-primary-soft-2, #dcebe2);
}
.lm-msg-empty-bub {
  position: relative; width: 62px; height: 62px; border-radius: 20px 20px 20px 7px;
  background: var(--lm-primary, #0f6f4f); display: grid; place-items: center;
  box-shadow: 0 14px 28px -10px rgba(15, 111, 79, .5);
}
.lm-msg-empty-bub svg { width: 30px; height: 30px; color: #fff; }
.lm-msg-empty-spark { position: absolute; top: 24px; right: 24px; width: 14px; height: 14px; color: var(--lm-gold, #c79a3f); }
.lm-msg-empty-h { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--lm-text, #0f172a); }
.lm-msg-empty-p { margin: 9px 0 0; font-size: 14.5px; color: var(--lm-muted, #64748b); max-width: 36ch; line-height: 1.55; }
.lm-msg-empty-cta {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 24px;
  border-radius: 13px; background: var(--lm-primary, #0f6f4f); color: #fff; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(15, 111, 79, .6); transition: background .14s, transform .12s;
}
.lm-msg-empty-cta:hover { background: var(--lm-primary-strong, #0a5439); transform: translateY(-1px); color: #fff; text-decoration: none; }
.lm-msg-empty-cta svg { width: 17px; height: 17px; }
.lm-msg-empty-tips { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.lm-msg-empty-tip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--lm-text-2, #475569);
  background: var(--lm-bg, #fff); border: 1px solid var(--lm-border, #e7ecf1); border-radius: 999px;
  padding: 8px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.lm-msg-empty-tip svg { width: 14px; height: 14px; color: var(--lm-primary, #0f6f4f); flex: none; }

/* Dark mode */
html[data-lm-theme="dark"] .lm-msg-empty-h { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-msg-empty-p { color: var(--lm-muted, #b3bcc6); }
html[data-lm-theme="dark"] .lm-msg-empty-ring {
  background: radial-gradient(circle at 50% 36%, rgba(15, 111, 79, .18) 0%, var(--lm-surface, #151b23) 78%);
  border-color: rgba(15, 111, 79, .4);
}
html[data-lm-theme="dark"] .lm-msg-empty-tip { background: var(--lm-surface, #151b23); border-color: var(--lm-border, #2a3038); color: var(--lm-text-2, #b3bcc6); }

/* ── New-message compose: the "To:" row was far too tall (label/cursor floated
   at the top with a big gap above the divider). Make it a compact single line,
   vertically centred, so the divider sits right under it. Applies to both the
   desktop compose box (.chat-widget.fresh) and the /messages/new pane. */
.chat-widget.fresh .chat-to,
.panel-messages.fresh .chat-to {
  display: flex !important; align-items: center !important;
  padding-top: 10px !important; padding-bottom: 10px !important; min-height: 0 !important;
}
.chat-widget.fresh .chat-to > .to,
.panel-messages.fresh .chat-to > .to { padding: 0 !important; line-height: 1.5; font-weight: 700; }
.chat-widget.fresh .chat-to .tags,
.panel-messages.fresh .chat-to .tags { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.chat-widget.fresh .chat-to .typeahead input,
.panel-messages.fresh .chat-to .typeahead input { height: 28px; line-height: 28px; margin: 0; }

/* ── 2nd column "Messenger" header — pull it right up (was a big empty gap above
   the divider), match the Edit-Profile heading font, and keep the divider tight
   under it. The round grey new-message button becomes the brand-green pill. */
/* Pull the whole messenger block flush to the fixed topbar — kill any top
   margin/padding on the content wrapper + both columns so there's no empty white
   gap above "Messenger" (the body already reserves the 64px topbar). */
html.lm-messages-active .w-100.overflow-hidden.d-flex.bg-white,
html.lm-messages-active .x_side_msg_bar,
html.lm-messages-active .x_menu_sidebar_content.msg { margin-top: 0 !important; padding-top: 0 !important; }
html.lm-messages-active .x_side_msg_bar > .d-flex:first-child {
  padding: 8px 16px 12px !important; margin: 0 !important;
  border-bottom: 1px solid var(--lm-border, #e7ecf1);
}
html.lm-messages-active .x_side_msg_bar > .d-flex:first-child .side_widget_title {
  font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
  color: var(--lm-text, #0f172a) !important; margin: 0 !important; padding: 0 !important; line-height: 1.1;
}
html.lm-messages-active .x_side_msg_bar > .d-flex:first-child .flex-0 { margin: 0 !important; }
/* kill any extra top spacing on the (empty) threads area below the header */
html.lm-messages-active .x_side_msg_bar .js_live-messages-alt { border-top: 0 !important; margin-top: 0 !important; }
html.lm-messages-active .x_side_msg_bar .js_chat-new.btn {
  width: 40px; height: 40px; border-radius: 11px !important; border: none !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;
}
html.lm-messages-active .x_side_msg_bar .js_chat-new.btn:hover { background: var(--lm-primary-strong, #0a5439) !important; transform: translateY(-1px); }
html.lm-messages-active .x_side_msg_bar .js_chat-new.btn svg { color: #fff; }

/* ── New-message compose box ("modal") — give it the LM card look: fully rounded,
   soft elevated shadow, hairline border, tighter header with a bold title. */
.chat-widget.fresh {
  border-radius: 16px !important; overflow: hidden;
  border: 1px solid var(--lm-border, #e7ecf1) !important;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .34), 0 2px 10px -4px rgba(15, 23, 42, .12) !important;
}
.chat-widget.fresh .chat-widget-head {
  min-height: 0 !important; padding: 13px 16px !important;
  border-bottom: 1px solid var(--lm-border-2, #f0f3f6);
}
.chat-widget.fresh .chat-widget-head .name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--lm-text, #0f172a); }
.chat-widget.fresh .chat-head-btn { color: var(--lm-muted, #64748b); }
html[data-lm-theme="dark"] .chat-widget.fresh { border-color: var(--lm-border, #2a3038) !important; }
html[data-lm-theme="dark"] .chat-widget.fresh .chat-widget-head { border-bottom-color: var(--lm-border, #2a3038); }

/* THE top-gap fix: the messenger columns are position:sticky with top:64px, but
   the body already reserves 64px for the fixed topbar — so at rest the sticky
   offset pushed them ~21px BELOW the topbar (empty gap above "Messenger", and the
   column divider started below the bar). The columns are viewport-fit (no page
   scroll), so sticking at 0 keeps them flush to the topbar with no double offset. */
html.lm-messages-active .x_side_msg_bar,
html.lm-messages-active .x_menu_sidebar_content.msg { top: 0 !important; }