/**
 * FCA Custom Menus — Mobile bar + pull-out tray
 *
 * A larger, nicer replacement for FluentCommunity's native mobile bottom menu,
 * with a tray that slides up from behind it to host the sidebar menu, search,
 * chat, alerts or custom HTML. The bar is the switcher (no tab strip in the
 * tray); an optional raised centre button opens/closes it. Panels keep their
 * own state so you can slide the tray back and keep browsing where you were.
 * Everything here is mobile-only (<= 768px).
 *
 * Theme-aware: consumes FC's own CSS vars; also styles FC's dark selectors.
 */

.fca-cm {
  --fca-cm-bar-h: 64px;
  --fca-cm-bg: var(--fcom-primary-bg, #fff);
  --fca-cm-text: var(--fcom-menu-text, var(--fcom-primary-text, #050505));
  --fca-cm-muted: var(--fcom-text-off, #8a8d91);
  --fca-cm-border: var(--fcom-primary-border, #e4e6eb);
  --fca-cm-active: var(--fcom-text-link, #1877f2);
  --fca-cm-hover: var(--fcom-secondary-bg, #f0f2f5);
  /* Sits with FC's own mobile menu (1001) and BELOW Element Plus overlays
     (2000+), so post drawers, dialogs and pickers cover the bar instead of
     the bar covering their composer / action buttons. */
  --fca-cm-z: 1000;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fcom_dark_mode .fca-cm,
[data-theme="dark"] .fca-cm {
  --fca-cm-bg: var(--fcom-primary-bg, #1c1e21);
  --fca-cm-border: var(--fcom-primary-border, #303339);
  --fca-cm-hover: var(--fcom-secondary-bg, #26282c);
}

/* ── Bottom bar ─────────────────────────────────────────────────────────── */
.fca-cm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the tray: the bar must stay visible & tappable while the tray is
     open, so tapping the same icon closes it (toggle) and other icons switch. */
  z-index: calc(var(--fca-cm-z) + 5);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: calc(var(--fca-cm-bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--fca-cm-bg);
  border-top: 1px solid var(--fca-cm-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.fca-cm-bar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--fca-cm-text);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.fca-cm-bar-item .fca-cm-ico {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.fca-cm-ico .fca-cm-img { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; display: block; }
.fca-cm-center .fca-cm-ico .fca-cm-img { width: 26px; height: 26px; }
.fca-cm-bar-item .fca-cm-ico svg {
  width: 24px;
  height: 24px;
  display: block;
}

.fca-cm-bar-item .fca-cm-lbl {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fca-cm-bar-item:active { opacity: 0.6; }
.fca-cm-bar-item.is-active { color: var(--fca-cm-active); }

/* Panel buttons carry two icons; the X shows while that button's panel is open. */
.fca-cm-bar-btn .fca-cm-ico { position: relative; }
.fca-cm-bar-btn .fca-cm-ico-main,
.fca-cm-bar-btn .fca-cm-ico-close { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity .2s ease, transform .25s ease; }
.fca-cm-bar-btn .fca-cm-ico-close { position: absolute; inset: 0; opacity: 0; transform: rotate(-90deg) scale(.6); }
.fca-cm-bar-btn .fca-cm-ico-main svg, .fca-cm-bar-btn .fca-cm-ico-close svg { width: 24px; height: 24px; }

/* ── Centre button (barStyle "center") ─────────────────────────────────────
   A round button cradled by the bar: a ring in the bar colour wraps it, so
   the bar's edge appears to curve around it. No drop shadow, no label. */
.fca-cm-bar.is-center { padding: 0 6px; }
.fca-cm-bar-item.fca-cm-center { flex: 0 0 80px; justify-content: flex-start; padding: 0; overflow: visible; }
.fca-cm-center .fca-cm-ico {
  width: 54px;
  height: 54px;
  margin-top: -13px; /* ~80% of the ring sits inside the bar */
  border-radius: 50%;
  background: var(--fca-cm-active);
  color: #fff;
  border: 6px solid var(--fca-cm-bg);
  box-sizing: content-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
  transition: transform .2s ease;
}
.fca-cm-center .fca-cm-ico svg,
.fca-cm-center .fca-cm-ico-main svg,
.fca-cm-center .fca-cm-ico-close svg { width: 26px; height: 26px; }
.fca-cm-center .fca-cm-emoji { font-size: 24px; }
.fca-cm-center .fca-cm-lbl { display: none; }
.fca-cm-center:active .fca-cm-ico { transform: scale(.95); }
.fca-cm-center:active { opacity: 1; }
.fca-cm-center.is-active { color: var(--fca-cm-text); }
.fca-cm-center .fca-cm-badge { top: -12px; left: calc(50% + 14px); }
/* Open tray: the centre panel button becomes a close button. */
.fca-cm.is-tray-open .fca-cm-center.is-panel .fca-cm-ico-main { opacity: 0; transform: rotate(90deg) scale(.6); }
.fca-cm.is-tray-open .fca-cm-center.is-panel .fca-cm-ico-close { opacity: 1; transform: none; }
/* Other panel buttons: X only on the one whose panel is showing. */
.fca-cm-bar-btn.is-active:not(.fca-cm-center) .fca-cm-ico-main { opacity: 0; transform: rotate(90deg) scale(.6); }
.fca-cm-bar-btn.is-active:not(.fca-cm-center) .fca-cm-ico-close { opacity: 1; transform: none; }

/* ── Bar shapes ───────────────────────────────────────────────────────────── */
.fca-cm[data-shape="rounded"] .fca-cm-bar,
.fca-cm[data-shape="floating"] .fca-cm-bar {
  border-top: none;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.fca-cm[data-shape="rounded"] .fca-cm-bar { border-radius: 24px 24px 0 0; }
.fca-cm[data-shape="floating"] .fca-cm-bar {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: var(--fca-cm-bar-h);
  padding-bottom: 0;
  border-radius: calc(var(--fca-cm-bar-h) / 2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.fca-cm[data-shape="floating"] .fca-cm-bar.is-center { padding: 0 14px; }
.fca-cm[data-shape="floating"] .fca-cm-bar-item:first-child { border-radius: 32px 0 0 32px; }
.fca-cm[data-shape="floating"] .fca-cm-bar-item:last-child { border-radius: 0 32px 32px 0; }

/* ── Icons only ───────────────────────────────────────────────────────────── */
.fca-cm-no-labels .fca-cm-bar-item .fca-cm-lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fca-cm-no-labels .fca-cm-bar-item .fca-cm-ico { width: 26px; height: 26px; }
.fca-cm-no-labels .fca-cm-bar-item .fca-cm-ico svg { width: 26px; height: 26px; }
.fca-cm-no-labels .fca-cm-center .fca-cm-ico { width: 54px; height: 54px; }
.fca-cm-no-labels .fca-cm-center .fca-cm-ico svg { width: 26px; height: 26px; }

/* Unread badge (chat) */
.fca-cm-badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
}
.fca-cm-badge.is-visible { display: block; }
.fca-cm-badge-inline { position: static; margin-left: auto; }

/* ── Scrim (transparent — no dark backdrop, per spec — just catches taps) ── */
.fca-cm-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--fca-cm-z) + 3);
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.fca-cm-scrim.is-open { opacity: 1; visibility: visible; }

/* ── Pull-out tray ─────────────────────────────────────────────────────── */
.fca-cm-tray {
  position: fixed;
  left: 0;
  right: 0;
  /* Runs to the bottom of the screen BEHIND the bar (the bar sits a z-index
     above, so it stays tappable and tapping the open panel's icon closes the
     tray). Padding reserves the bar's height so the tray's own content is
     never hidden under it, and the rounded / floating bar never shows the
     tray's bottom edge at its corners. */
  bottom: 0;
  z-index: calc(var(--fca-cm-z) + 4);
  display: flex;
  flex-direction: column;
  height: 85vh;
  max-height: 85vh;
  padding-bottom: calc(var(--fca-cm-bar-h) + var(--fca-cm-bar-gap, 0px) + env(safe-area-inset-bottom, 0px));
  background: var(--fca-cm-bg);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.fca-cm[data-animation="fade"] .fca-cm-tray {
  transform: translateY(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.fca-cm-tray.is-open { transform: translateY(0); }
.fca-cm[data-animation="fade"] .fca-cm-tray.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Drag grip */
.fca-cm-grip {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  cursor: grab;
  touch-action: none;
}
.fca-cm-grip span {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--fca-cm-border);
}

/* Header */
.fca-cm-tray-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--fca-cm-border);
}
.fca-cm-tray-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fca-cm-text);
}
.fca-cm-tray-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--fca-cm-hover);
  color: var(--fca-cm-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Body / panel host — this is the contract host consumers append into */
.fca-pwa-sidebar-content {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.fca-cm-slot {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.fca-cm-slot.active { display: flex; }

/* Generic scroll region inside a slot (also one level down, inside the
   alerts / chat wrappers, which put a fixed header above the list) */
.fca-cm-slot > .fca-cm-scroll,
.fca-cm-alerts > .fca-cm-scroll,
.fca-cm-chat > .fca-cm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Sidebar/nav clone + custom html panels ────────────────────────────── */
.fca-cm-navlist { padding: 12px; }
.fca-cm-navlist a,
.fca-cm-navlist .fca-cm-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  color: var(--fca-cm-text);
  text-decoration: none;
  font-size: 15px;
}
.fca-cm-navlist a:active,
.fca-cm-navlist .fca-cm-nav-item:active { background: var(--fca-cm-hover); }
.fca-cm-custom-html { padding: 16px; color: var(--fca-cm-text); }

/* ── Sidebar menu in the tray (clone of #fcom_sidebar_wrap) ────────────── */
.fca-cm-sidebar { padding: 4px 12px 16px; color: var(--fca-cm-text); }
.fca-cm-sidebar ul { list-style: none; margin: 0; padding: 0; }
.fca-cm-sidebar nav { margin: 0; }
.fca-cm-sidebar .fcom_general_menu { margin-bottom: 8px; }
.fca-cm-sidebar .fcom_desktop_only { display: none; }
.fca-cm-sidebar .fcom_menu_link,
.fca-cm-sidebar .fcom_menu_item a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--fca-cm-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
}
.fca-cm-sidebar .fcom_menu_link:active { background: var(--fca-cm-hover); }
.fca-cm-sidebar .fcom_menu_link.is-active { background: var(--fca-cm-hover); color: var(--fca-cm-active); font-weight: 600; }
.fca-cm-sidebar .community_avatar,
.fca-cm-sidebar .fcom_no_avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}
.fca-cm-sidebar .community_avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.fca-cm-sidebar .fcom_shape { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 20px; line-height: 1; }
.fca-cm-sidebar .fcom_shape svg, .fca-cm-sidebar .fcom_shape .el-icon, .fca-cm-sidebar .fcom_shape .el-icon svg { width: 22px; height: 22px; }
.fca-cm-sidebar .fcom_shape img { width: 100%; height: 100%; object-fit: cover; }
.fca-cm-sidebar .community_name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fca-cm-sidebar .fcom_communities_menu { margin-top: 10px; }

/* FC's contextual menu (admin settings) copied into the Menu panel */
.fca-cm-context-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--fca-cm-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
}
.fca-cm-context-menu a:active { background: var(--fca-cm-hover); }
.fca-cm-context-menu a.router-link-exact-active { background: var(--fca-cm-hover); color: var(--fca-cm-active); font-weight: 600; }
.fca-cm-context-menu h4 {
  margin: 0;
  padding: 10px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fca-cm-muted);
}
.fca-cm-context-menu + div { border-top: 1px solid var(--fca-cm-border, rgba(0,0,0,.08)); margin-top: 8px; padding-top: 4px; }
.fca-cm-sidebar .fcom_space_group_header { display: flex; align-items: center; }
.fca-cm-sidebar .space_section_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fca-cm-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fca-cm-sidebar .space_section_title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fca-cm-sidebar .space_section_title .fcom_space_down { display: flex; opacity: 1; visibility: visible; width: 14px; height: 14px; flex-shrink: 0; transition: transform .2s ease; }
.fca-cm-sidebar .fcom_space_down svg { width: 14px; height: 14px; }
.fca-cm-sidebar .fcom_group_collapsed .fcom_space_down { transform: rotate(-90deg); }
.fca-cm-sidebar .fcom_group_collapsed nav { display: none; }
.fca-cm-sidebar .fcom_space_create { display: none; }
.fca-cm-sidebar li.fca-sub > a.fca-sub-head .community_name { font-weight: 600; }
.fca-cm-sidebar .fca-sub-chev { margin-left: auto; display: flex; width: 14px; height: 14px; flex-shrink: 0; opacity: .6; transition: transform .2s ease; }
.fca-cm-sidebar .fca-sub-chev svg { width: 14px; height: 14px; }
.fca-cm-sidebar li.fca-sub.is-collapsed .fca-sub-chev { transform: rotate(-90deg); }
.fca-cm-sidebar ul.fca-sub-list { display: block; gap: 0; padding-left: 18px; } /* other add-ons style a global .fca-sub-list */
.fca-cm-sidebar li.fca-sub.is-collapsed > ul.fca-sub-list { display: none; }
.fca-cm-sidebar .fcom_space_menu_lock, .fca-cm-sidebar .fcom_lock_icon { margin-left: auto; opacity: .6; }
/* Footer: FC's sidebar-foot links (Settings, WordPress admin) for admins. */
.fca-cm-sidebar-foot {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--fca-cm-border);
  background: var(--fca-cm-bg);
}
.fca-cm-sidebar-foot .fcom_admin_menu { display: flex; flex: 1 1 auto; gap: 8px; }
.fca-cm-sidebar-foot a.fcom_inline_icon_link_item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--fca-cm-hover);
  color: var(--fca-cm-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.fca-cm-sidebar-foot .el-icon { display: flex; width: 20px; height: 20px; }
.fca-cm-sidebar-foot .el-icon svg { width: 20px; height: 20px; }

/* ── Chat panel ────────────────────────────────────────────────────────── */
.fca-cm-chat { display: flex; flex-direction: column; height: 100%; }
.fca-cm-chat-empty,
.fca-cm-chat-loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--fca-cm-muted);
  font-size: 14px;
}
.fca-cm-thread {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--fca-cm-border);
  color: var(--fca-cm-text);
  font: inherit;
}
.fca-cm-thread:active { background: var(--fca-cm-hover); }
.fca-cm-thread-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fca-cm-hover);
}
.fca-cm-thread-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fca-cm-thread-name {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fca-cm-thread-preview {
  font-size: 13px;
  color: var(--fca-cm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fca-cm-thread.is-unread .fca-cm-thread-name { font-weight: 700; }
.fca-cm-thread.is-unread .fca-cm-thread-preview { color: var(--fca-cm-text); }
.fca-cm-thread-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--fca-cm-active);
  visibility: hidden;
}
.fca-cm-thread.is-unread .fca-cm-thread-dot { visibility: visible; }

/* Conversation view */
.fca-cm-convo { display: flex; flex-direction: column; height: 100%; }
.fca-cm-convo-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--fca-cm-border);
}
.fca-cm-convo-back {
  border: none;
  background: none;
  color: var(--fca-cm-active);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.fca-cm-convo-title { font-size: 15px; font-weight: 600; color: var(--fca-cm-text); }
.fca-cm-convo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fca-cm-msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
}
.fca-cm-msg.is-mine {
  align-self: flex-end;
  background: var(--fca-cm-active);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.fca-cm-msg.is-theirs {
  align-self: flex-start;
  background: var(--fca-cm-hover);
  color: var(--fca-cm-text);
  border-bottom-left-radius: 4px;
}
.fca-cm-convo-foot {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--fca-cm-border);
}
.fca-cm-convo-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--fca-cm-border);
  border-radius: 20px;
  background: var(--fca-cm-bg);
  color: var(--fca-cm-text);
  font: inherit;
  font-size: 14px;
}
.fca-cm-convo-send {
  flex-shrink: 0;
  padding: 0 16px;
  border: none;
  border-radius: 20px;
  background: var(--fca-cm-active);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.fca-cm-convo-send:disabled { opacity: 0.5; cursor: default; }

/* Message meta / rich content */
.fca-cm-msg-group { display: flex; flex-direction: column; gap: 2px; max-width: 82%; }
.fca-cm-msg-group.is-mine { align-self: flex-end; align-items: flex-end; }
.fca-cm-msg-group.is-theirs { align-self: flex-start; align-items: flex-start; }
.fca-cm-msg-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--fca-cm-muted);
  padding: 0 6px;
}
.fca-cm-msg-group .fca-cm-msg { max-width: 100%; }
.fca-cm-msg-time {
  font-size: 10px;
  color: var(--fca-cm-muted);
  padding: 0 6px;
}
.fca-cm-msg .chat_text { white-space: pre-wrap; }
.fca-cm-msg .chat_text p { margin: 0; }
.fca-cm-msg .chat_text a { color: inherit; text-decoration: underline; }
.fca-cm-msg .chat_medias { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fca-cm-msg .chat_media img { max-width: 100%; max-height: 220px; border-radius: 10px; display: block; }
.fca-cm-msg .chat_media_overlay { display: none; }
.fca-cm-msg.is-pending { opacity: 0.6; }
.fca-cm-msg.is-failed { outline: 1px solid #ef4444; }
.fca-cm-load-more {
  align-self: center;
  margin: 0 0 4px;
  padding: 6px 14px;
  border: 1px solid var(--fca-cm-border);
  border-radius: 16px;
  background: var(--fca-cm-bg);
  color: var(--fca-cm-active);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.fca-cm-chat-error {
  padding: 6px 12px;
  font-size: 12px;
  color: #ef4444;
  text-align: center;
}
.fca-cm-convo-input { resize: none; max-height: 96px; line-height: 1.35; }
.fca-cm-thread-time {
  font-size: 11px;
  color: var(--fca-cm-muted);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
}
.fca-cm-thread-avatar { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--fca-cm-muted); font-size: 16px; overflow: hidden; }
.fca-cm-thread-avatar img, .fca-cm-thread-avatar svg { width: 100%; height: 100%; object-fit: cover; }
.fca-cm-thread-section {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fca-cm-muted);
}

/* ── Alerts panel ──────────────────────────────────────────────────────── */
.fca-cm-alerts { display: flex; flex-direction: column; height: 100%; }
.fca-cm-alerts-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fca-cm-muted);
  border-bottom: 1px solid var(--fca-cm-border);
}
.fca-cm-alerts-readall {
  border: none;
  background: none;
  color: var(--fca-cm-active);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.fca-cm-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--fca-cm-border);
  color: var(--fca-cm-text);
  font: inherit;
}
.fca-cm-alert:active { background: var(--fca-cm-hover); }
.fca-cm-alert.is-unread { background: color-mix(in srgb, var(--fca-cm-active) 6%, transparent); }
.fca-cm-alert .fca-cm-thread-avatar { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; }
.fca-cm-alert-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fca-cm-alert-text { font-size: 14px; line-height: 1.35; }
.fca-cm-alert-text b, .fca-cm-alert-text strong { font-weight: 600; }
.fca-cm-alert-time { font-size: 11px; color: var(--fca-cm-muted); }
.fca-cm-alert.is-unread .fca-cm-thread-dot { visibility: visible; }

/* Link-style row (e.g. "Open full chat") */
.fca-cm-linkrow {
  display: block;
  padding: 12px 16px;
  text-align: center;
  color: var(--fca-cm-active);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-top: 1px solid var(--fca-cm-border);
  cursor: pointer;
}

/* ── Hide FC's native mobile menu when ours is active (mobile only) ─────── */
@media (max-width: 768px) {
  body.fca-cm-active .fcom_mobile_menu { display: none !important; }

  /* Optional: hide FC's top-left hamburger. Our Menu button still opens the
     drawer by calling .click() on it, which works while display:none. */
  body.fca-cm-hide-hamburger .fcom_space_opener_btn { display: none !important; }

  /* Mirror FC's own mobile-menu behaviour so the bar never sits on top of
     something the user is trying to type into or tap. */

  /* Post drawer / comment modal open: FC drops its menu to z-index 0. */
  body.fcom_post_modal_opened .fca-cm-bar,
  body.fcom_post_modal_opened .fca-cm-tray,
  body.fcom_post_modal_opened .fca-cm-scrim { z-index: 0 !important; }

  /* On-screen keyboard open (FC toggles html.fcom_keyboard_open from
     visualViewport): hide the bar and release the reserved bottom padding so
     the composer / reply box gets the space. Keep the bar when it is our own
     tray the user is typing into. */
  html.fcom_keyboard_open .fca-cm:not(.is-tray-open) .fca-cm-bar { display: none !important; }
  html.fcom_keyboard_open body.fca-cm-active:not(.fca-cm-tray-open) {
    --fcom-mobile-menu-height: 0px !important;
  }

  /* The centre button's ring overhangs the bar's top edge. */
  .fca-cm-bar.is-center { overflow: visible; }

  /* FC's scroll-to-top FAB sits at z 1900 and would float over the open tray. */
  body.fca-cm-tray-open .fcom_scroll_to_top { display: none !important; }

  /* Scrolling down: FC slides its menu away; do the same. */
  .fca-cm-bar { transition: transform .3s ease; }
  body.fcom_scrolling-down_mbl .fca-cm:not(.is-tray-open) .fca-cm-bar { transform: translateY(100%); }

  /* Reserve space for our fixed bar. FC's layout already pads its content by
     var(--fcom-mobile-menu-height); that var reflects FC's (now hidden) native
     menu, so re-point it at OUR bar height (+ safe area). Defined on body so it
     wins over any :root-level value for all descendants. --fca-cm-bar-h is set
     inline on body by mobile-tray.js from the configured bar height. */
  body.fca-cm-active {
    --fcom-mobile-menu-height: calc(var(--fca-cm-bar-h, 64px) + var(--fca-cm-bar-gap, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  }

}

/* ── Desktop: hide our mobile UI entirely ──────────────────────────────── */
@media (min-width: 769px) {
  .fca-cm { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fca-cm-tray,
  .fca-cm-scrim { transition: none; }
}