/*
 * FLMVR messaging drawer — all rules scoped to .flmvr-msg-*
 * Colors / surfaces match the portal contact modal (customer_contact_modal.php) and cpanel
 * (cpanel.css): white / #f8f9fa / #fafafa panels, #333 / #555 / #666 text, accent #335580.
 * Z-index: must sit above the fixed balance bar in library/includes/layout.php (z-index: 2000);
 * submenus in layout_menu.css use z-index: 9999 — keep the drawer below that so help dropdowns
 * still stack correctly when open.
 */
.flmvr-msg-root {
  --flmvr-msg-color-bg: #f6f7f9;
  --flmvr-msg-color-fg: #1a1a1a;
  --flmvr-msg-color-accent: #335580;
  --flmvr-msg-color-muted: #555;
  --flmvr-msg-color-heading: #333;
  --flmvr-msg-z-backdrop: 5000;
  --flmvr-msg-z-panel: 5010;
  --flmvr-msg-z-toggle: 5020;
  --flmvr-msg-z-anon: 5030;
  --flmvr-msg-radius: 10px;
  --flmvr-msg-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--flmvr-msg-color-fg);
  box-sizing: border-box;
}
.flmvr-msg-root * { box-sizing: border-box; }

.flmvr-msg-toggle {
  position: fixed;
  z-index: var(--flmvr-msg-z-toggle);
  right: 16px;
  bottom: 16px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--flmvr-msg-color-accent);
  color: #fff;
  box-shadow: var(--flmvr-msg-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flmvr-msg-toggle:hover { transform: scale(1.03); }
.flmvr-msg-toggle:focus { outline: 2px solid #0b57d0; outline-offset: 2px; }
/* When the drawer is open, the toggle would otherwise sit directly on top of the
 * composer's Send button in the bottom-right corner. The panel header already has
 * its own close (×) affordance, so we hide the launcher entirely while open. */
.flmvr-msg-toggle[aria-expanded="true"] { display: none; }

.flmvr-msg-icon-envelope {
  width: 22px;
  height: 22px;
  display: block;
  color: #fff;
}
.flmvr-msg-unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 10px;
  background: #c41e1e;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  padding: 0 5px;
  /* Sit above the SVG so the count isn't visually behind the icon edge. */
  z-index: 1;
  /* Hardware-accelerated filter so the small drop-shadow doesn't repaint
   * the whole toggle on every frame of the pulse animation. */
  box-shadow: 0 0 0 2px var(--flmvr-msg-color-accent);
}
.flmvr-msg-toggle.is-unread {
  /* Subtle ring to draw the eye even when the user has reduced motion and
   * the pulse animation is suppressed. */
  box-shadow: 0 0 0 3px rgba(196, 30, 30, 0.35), var(--flmvr-msg-shadow);
}
/* Pulse: a single bounce that re-fires per inbound admin message. The class
 * is removed and re-added on each new message; see pulseToggle() in the JS.
 * Animation is short (~600ms) so a burst of messages doesn't look frantic. */
@keyframes flmvr-msg-toggle-pulse {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.18); }
  40%  { transform: scale(0.96); }
  60%  { transform: scale(1.08); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.flmvr-msg-toggle.is-pulsing {
  animation: flmvr-msg-toggle-pulse 0.6s ease-in-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .flmvr-msg-toggle.is-pulsing { animation: none; }
}

/* Sound toggle in the panel header. Renders the bell SVG always; the slash
 * SVG is overlaid on top and shown ONLY when sound is OFF (the default), so
 * the user gets an unmistakable on/off cue without needing two icons. */
.flmvr-msg-sound-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.flmvr-msg-sound-toggle:hover,
.flmvr-msg-sound-toggle:focus-visible { background: #f0f2f5; color: #111; outline: none; }
.flmvr-msg-sound-toggle .flmvr-msg-icon-bell { display: block; }
.flmvr-msg-sound-toggle .flmvr-msg-sound-slash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.flmvr-msg-sound-toggle.is-on { color: var(--flmvr-msg-color-accent); }
.flmvr-msg-sound-toggle.is-on .flmvr-msg-sound-slash { display: none; }

.flmvr-msg-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--flmvr-msg-z-backdrop);
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
  opacity: 1;
}
/* [hidden] defaults to display:none, which blocks opacity/transform transitions. */
.flmvr-msg-backdrop[hidden] {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

.flmvr-msg-panel {
  position: fixed;
  z-index: var(--flmvr-msg-z-panel);
  right: 0;
  top: 0;
  /* 460px gives the customer composer enough horizontal room that Attach + textarea + Send
   * stay on one line and the in-drawer "Before we start" form's inputs/captcha don't feel
   * cramped. Admin mode overrides this to ~1100px below. */
  width: 460px;
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--flmvr-msg-color-bg);
  color: var(--flmvr-msg-color-fg);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  transform: translateX(0);
  transition: transform 0.25s ease, box-shadow 0.2s;
}
.flmvr-msg-panel[hidden] {
  /* Keep flex layout for transform; native [hidden] is display:none and prevents slide-in.
   * Avoid visibility:hidden here or the exit animation would disappear instantly. */
  display: flex !important;
  transform: translateX(100%);
  pointer-events: none;
}

.flmvr-msg-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid #e2e4e8;
  gap: 8px;
}
.flmvr-msg-panel-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--flmvr-msg-color-heading);
}
.flmvr-msg-panel-actions { display: flex; align-items: center; gap: 6px; }
.flmvr-msg-close, .flmvr-msg-btn-assign, .flmvr-msg-btn-close, .flmvr-msg-presence-toggle, .flmvr-msg-anon-submit, .flmvr-msg-send {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.flmvr-msg-close {
  border: none;
  min-width: 36px;
  background: transparent;
  color: #666;
  font-size: 28px;
  line-height: 1;
}
.flmvr-msg-close:hover,
.flmvr-msg-close:focus { color: #111; }
.flmvr-msg-send { background: var(--flmvr-msg-color-accent); color: #fff; border: none; }
.flmvr-msg-presence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-color: #b7dfc0;
  background: #edf8f0;
  color: #176f32;
  font-weight: 600;
}
.flmvr-msg-presence-toggle[hidden],
.flmvr-msg-root:not(.flmvr-msg-mode-admin) .flmvr-msg-presence-toggle {
  display: none !important;
}
.flmvr-msg-presence-toggle::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #28a745;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.14);
}
.flmvr-msg-presence-toggle.is-hidden {
  color: #666;
  background: #f5f6f7;
  border-color: #c8ccd2;
  border-style: solid;
}
.flmvr-msg-presence-toggle.is-hidden::before {
  background: #adb5bd;
  box-shadow: none;
}

.flmvr-msg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Customer mode keeps the queue stacked above the thread (it's hidden anyway). Admin mode
 * (.flmvr-msg-mode-admin) flips .flmvr-msg-body into a two-column grid: left rail + right
 * pane. The grid sizing lives in the admin block at the bottom of this file. */
.flmvr-msg-queue {
  max-height: 30vh;
  overflow: auto;
  background: #fff;
  border-bottom: 1px solid #e2e4e8;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.flmvr-msg-queue[hidden] { display: none; }
.flmvr-msg-queue-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; }
.flmvr-msg-queue-item {
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
}
.flmvr-msg-queue-item.is-active, .flmvr-msg-queue-item:hover { background: #eef1f6; }
.flmvr-msg-queue-item:focus { outline: 2px solid #6699cc; outline-offset: -2px; }

.flmvr-msg-conversation {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
  background: var(--flmvr-msg-color-bg);
  color: var(--flmvr-msg-color-fg);
}

.flmvr-msg-messages {
  list-style: none;
  margin: 0;
  padding: 12px 14px 8px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  max-height: 45vh;
  color: var(--flmvr-msg-color-fg);
  background: #fafafa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin: 0 8px 8px;
}
/* Threaded chat layout
 *
 * Each <li.flmvr-msg-message> is a flex row that places its bubble-wrap on the
 * left for incoming messages (data-author="other"|"admin"|"email") and on the
 * right for the viewer's own messages (data-author="self") and for other support
 * staff in the cockpit (data-author="staff_side"). System messages are
 * centered. The bubble-wrap holds an author label, the bubble, and a timestamp,
 * stacked and aligned to whichever side the row is on.
 */
.flmvr-msg-message {
  display: flex;
  margin: 0 0 12px;
  align-items: flex-end;
}
.flmvr-msg-page-ruler {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  color: #7a8794;
  font-size: 11px;
  list-style: none;
}
.flmvr-msg-page-ruler::before,
.flmvr-msg-page-ruler::after {
  content: "";
  flex: 1;
  border-top: 1px solid #d9e0e7;
}
.flmvr-msg-page-ruler a {
  color: #7a8794;
  text-decoration: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flmvr-msg-page-ruler a:hover,
.flmvr-msg-page-ruler a:focus { text-decoration: underline; }
.flmvr-msg-message[data-author="self"],
.flmvr-msg-message[data-author="staff_side"] { justify-content: flex-end; }
.flmvr-msg-message[data-author="system"] { justify-content: center; }
.flmvr-msg-message[data-author="other"],
.flmvr-msg-message[data-author="admin"],
.flmvr-msg-message[data-author="email"] { justify-content: flex-start; }

.flmvr-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  min-width: 0;
}
.flmvr-msg-message[data-author="self"] .flmvr-msg-bubble-wrap,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-bubble-wrap { align-items: flex-end; }
.flmvr-msg-message[data-author="system"] .flmvr-msg-bubble-wrap { align-items: center; max-width: 90%; }
.flmvr-msg-message[data-author="other"] .flmvr-msg-bubble-wrap,
.flmvr-msg-message[data-author="admin"] .flmvr-msg-bubble-wrap,
.flmvr-msg-message[data-author="email"] .flmvr-msg-bubble-wrap { align-items: flex-start; }

.flmvr-msg-author {
  font-size: 11px;
  color: #666;
  font-weight: 600;
  margin: 0 4px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.flmvr-msg-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--flmvr-msg-radius);
  background: #fff;
  border: 1px solid #e0e2e6;
  color: var(--flmvr-msg-color-fg);
  word-wrap: break-word;
  white-space: pre-wrap;
  /* Public-site layouts (and signup_layout) often set text-align: center on
     section wrappers; without an explicit override those rules inherit all
     the way down into the bubble and visually center wrap-broken lines.
     Chat reads left-to-right regardless of which side the bubble itself
     sits on — system messages override below for the centered pill look. */
  text-align: left;
}
/* "You" (the viewer) — accent color, right-aligned tail */
.flmvr-msg-message[data-author="self"] .flmvr-msg-bubble {
  background: var(--flmvr-msg-color-accent);
  border-color: var(--flmvr-msg-color-accent);
  color: #fff;
  border-bottom-right-radius: 2px;
}
/* Other admin (customer/anon viewer — left) */
.flmvr-msg-message[data-author="admin"] .flmvr-msg-bubble {
  background: #e8f0ff;
  border-color: #b6ccff;
  border-bottom-left-radius: 2px;
}
/* Other support staff or legacy anonymous staff author (cockpit viewer — right, not "You") */
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-bubble {
  background: #e8f0ff;
  border-color: #b6ccff;
  border-bottom-right-radius: 2px;
}
/* Customer / inbound email — left, neutral */
.flmvr-msg-message[data-author="other"] .flmvr-msg-bubble,
.flmvr-msg-message[data-author="email"] .flmvr-msg-bubble {
  border-bottom-left-radius: 2px;
}
.flmvr-msg-message[data-author="email"] .flmvr-msg-bubble { background: #fdf6e3; border-color: #e6d8a0; }
/* System notices — pill, centered, no chrome */
.flmvr-msg-message[data-author="system"] .flmvr-msg-bubble {
  background: transparent;
  border: none;
  color: #666;
  font-style: italic;
  font-size: 13px;
  padding: 4px 0;
  text-align: center;
}
.flmvr-msg-message[data-author="system"] .flmvr-msg-author { display: none; }

/* Timestamp + inline read/delivery receipt (self messages) */
.flmvr-msg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 2px 4px 0;
  max-width: 100%;
}
.flmvr-msg-message[data-author="self"] .flmvr-msg-meta,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-meta { justify-content: flex-end; }
.flmvr-msg-message[data-author="other"] .flmvr-msg-meta,
.flmvr-msg-message[data-author="admin"] .flmvr-msg-meta,
.flmvr-msg-message[data-author="email"] .flmvr-msg-meta { justify-content: flex-start; }
.flmvr-msg-message[data-author="system"] .flmvr-msg-meta { justify-content: center; }
.flmvr-msg-message-time {
  display: inline;
  font-size: 11px;
  color: #888;
  margin: 0;
}
.flmvr-msg-delivery-receipt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  min-height: 1.1rem;
  font-size: 12px;
  line-height: 1;
  color: #64748b;
  cursor: default;
  border-radius: 4px;
  user-select: none;
}
.flmvr-msg-delivery-receipt:focus-visible {
  outline: 2px solid #0b57d0;
  outline-offset: 1px;
}
.flmvr-msg-delivery-sig { display: none; }
.flmvr-msg-delivery-trail { display: none; font-size: 11px; color: #94a3b8; }
.flmvr-msg-delivery-receipt--last .flmvr-msg-delivery-sig { display: inline; }
.flmvr-msg-delivery-receipt--seen-trail .flmvr-msg-delivery-trail { display: inline; }
.flmvr-msg-delivery-receipt--state-hidden {
  display: none !important;
}
/* Color accents by run state (from data-run-state) */
.flmvr-msg-delivery-receipt[data-run-state="queued_for_email"] .flmvr-msg-delivery-sig { color: #a05a00; }
.flmvr-msg-delivery-receipt[data-run-state="nudged"] .flmvr-msg-delivery-sig { color: #475569; }
.flmvr-msg-delivery-receipt[data-run-state="live_pending"] .flmvr-msg-delivery-sig { color: #64748b; }
.flmvr-msg-delivery-receipt[data-run-state="live_pending"] .flmvr-msg-delivery-sig,
.flmvr-msg-delivery-receipt[data-run-state="queued_for_email"] .flmvr-msg-delivery-sig {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.flmvr-msg-delivery-receipt[data-run-state="seen"] .flmvr-msg-delivery-sig {
  color: #198754;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.flmvr-msg-delivery-receipt--seen-trail[data-run-state="seen"] .flmvr-msg-delivery-trail { color: #94a3b8; }

/* ----------------------------------------------------------------------------
 * In-message attachments
 *
 * Each <button.flmvr-msg-attachment> is a self-contained chip rendered inside the
 * .flmvr-msg-bubble-wrap of an attachment-bearing message. Image attachments are
 * rendered as a thumbnail tile (.is-image) with the filename + size below; all other
 * mime types are rendered as a flat horizontal pill (.is-file) with a typed icon, the
 * filename, and the size. The chip is a real <button>, so it inherits keyboard
 * activation; clicking triggers an authenticated download via fetch + blob URL.
 * ------------------------------------------------------------------------- */
.flmvr-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  max-width: 100%;
}
.flmvr-msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 8px;
  color: #1a1a1a;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  max-width: 100%;
}
.flmvr-msg-attachment:hover,
.flmvr-msg-attachment:focus-visible {
  background: #f3f6fa;
  border-color: #6699cc;
  box-shadow: 0 0 0 2px rgba(102, 153, 204, 0.2);
  outline: none;
}
.flmvr-msg-attachment.is-pending-scan {
  cursor: progress;
  opacity: 0.6;
  border-style: dashed;
}
.flmvr-msg-attachment.is-scan-blocked {
  cursor: not-allowed;
  opacity: 1;
  border-style: solid;
}
.flmvr-msg-attachment.is-scan-failed {
  background: #fff1f1;
  border-color: #dc3545;
  color: #7a1f1f;
}
.flmvr-msg-attachment.is-scan-infected {
  background: #ffe8e8;
  border-color: #a40000;
  color: #7a0000;
}
.flmvr-msg-attachment.is-scan-failed:hover,
.flmvr-msg-attachment.is-scan-failed:focus-visible,
.flmvr-msg-attachment.is-scan-infected:hover,
.flmvr-msg-attachment.is-scan-infected:focus-visible {
  background: #fff1f1;
  border-color: #dc3545;
  box-shadow: none;
}
.flmvr-msg-attachment.is-thumb-failed { background: #f8eaea; border-color: #e0b9b9; }

/* File chips: paperclip-style icon + filename/size meta column */
.flmvr-msg-attachment.is-file .flmvr-msg-attachment-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

/* Image chips: vertical tile so the thumbnail dominates */
.flmvr-msg-attachment.is-image {
  flex-direction: column;
  align-items: stretch;
  padding: 6px;
  gap: 4px;
  width: 180px;
  max-width: 100%;
}
.flmvr-msg-attachment-thumb {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #eef0f4;
  border-radius: 4px;
}

.flmvr-msg-attachment-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.flmvr-msg-attachment-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.flmvr-msg-attachment-size {
  font-size: 11px;
  color: #666;
  margin-top: 1px;
}
.flmvr-msg-attachment-status {
  font-size: 11px;
  color: #b02a37;
  font-weight: 600;
  margin-top: 1px;
}

/* Self-authored attachments mirror the bubble color so the conversation reads as a
 * single right-aligned column when the user sends a file. */
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment {
  background: #e8f0fb;
  border-color: #c4d6f0;
}
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment:hover,
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment:focus-visible {
  background: #d6e6f9;
}
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment.is-scan-failed,
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment.is-scan-failed:hover,
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment.is-scan-failed:focus-visible,
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment.is-scan-infected,
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment.is-scan-infected:hover,
.flmvr-msg-message[data-author="self"] .flmvr-msg-attachment.is-scan-infected:focus-visible {
  background: #fff1f1;
  border-color: #dc3545;
}

.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment {
  background: #e8f0ff;
  border-color: #b6ccff;
}
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment:hover,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment:focus-visible {
  background: #d6e6fa;
}
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment.is-scan-failed,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment.is-scan-failed:hover,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment.is-scan-failed:focus-visible,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment.is-scan-infected,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment.is-scan-infected:hover,
.flmvr-msg-message[data-author="staff_side"] .flmvr-msg-attachment.is-scan-infected:focus-visible {
  background: #fff1f1;
  border-color: #dc3545;
}

.flmvr-msg-error {
  margin: 0 12px 8px;
  color: #a40000;
  font-size: 14px;
}

/* Composer: paperclip + textarea on one row; Send on a compact footer row (right). */
.flmvr-msg-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  background: #fff;
  border-top: 1px solid #e2e4e8;
  color: var(--flmvr-msg-color-fg);
  /* Same as .flmvr-msg-prelude fields: public-site layouts often center the main column;
     without this, composer text inherits centered alignment from a parent section. */
  text-align: left;
}
.flmvr-msg-composer[hidden] { display: none; }
.flmvr-msg-composer-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.flmvr-msg-composer-footer {
  display: flex;
  justify-content: flex-end;
}
.flmvr-msg-composer-input {
  flex: 1;
  min-width: 0;
  min-height: 64px;
  max-height: 160px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  resize: vertical;
  text-align: left;
}
.flmvr-msg-composer-input:focus {
  outline: none;
  border-color: #6699cc;
  box-shadow: 0 0 0 2px rgba(102, 153, 204, 0.2);
}
/* Paperclip target — icon only, to the left of the chat box */
.flmvr-msg-attach-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  min-height: 40px;
  margin-top: 2px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #d6d8de;
  background: #f6f7f9;
  cursor: pointer;
  user-select: none;
  color: #444;
}
.flmvr-msg-attach-w:hover { background: #eef0f4; }
.flmvr-msg-attach-w:focus-within { outline: 2px solid rgba(102, 153, 204, 0.4); }
.flmvr-msg-paperclip { display: block; }
.flmvr-msg-composer .flmvr-msg-send {
  min-height: 36px;
  min-width: 84px;
  padding: 0 16px;
}

/* Thread attachment count in drawer header (admin / any thread with files) */
.flmvr-msg-panel-actions .flmvr-msg-thread-attachments {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  min-height: 32px;
  padding: 2px 8px;
  margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
}
.flmvr-msg-panel-actions .flmvr-msg-thread-attachments:hover {
  background: rgba(0, 0, 0, 0.2);
}
.flmvr-msg-panel-actions .flmvr-msg-thread-attachments[hidden] { display: none; }
.flmvr-msg-thread-attach-count {
  font-size: 12px;
  font-weight: 600;
  min-width: 1em;
  text-align: center;
}
.flmvr-msg-clip-ico { display: block; }

/* Full-height attachment list overlay in conversation column */
.flmvr-msg-attach-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
.flmvr-msg-attach-panel[hidden] { display: none; }
.flmvr-msg-attach-panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.flmvr-msg-attach-panel-dialog {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  max-height: 85%;
  min-width: min(100%, 360px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.flmvr-msg-attach-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e4e8;
  background: #f8f9fb;
}
.flmvr-msg-attach-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.flmvr-msg-attach-panel-close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #555;
  padding: 0 4px;
}
.flmvr-msg-attach-panel-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px 12px;
  overflow: auto;
  max-height: 50vh;
  font-size: 13px;
}
.flmvr-msg-attach-panel-item { padding: 8px 0; border-bottom: 1px solid #eee; }
.flmvr-msg-attach-panel-item:last-child { border-bottom: 0; }
.flmvr-msg-attach-panel-dl {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: #1a4d8f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.flmvr-msg-attach-panel-dl:hover { color: #0d2d55; }
.flmvr-msg-attach-panel-dl.is-pending-scan {
  cursor: progress;
  color: #777;
  text-decoration: none;
}
.flmvr-msg-attach-panel-dl.is-scan-blocked {
  cursor: not-allowed;
  color: #b02a37;
  text-decoration: none;
}
.flmvr-msg-attach-panel-meta {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}
.flmvr-msg-attach-panel-empty { color: #888; font-style: italic; padding: 8px 0; }
.flmvr-msg-breadcrumbs[hidden] { display: none; }

/* ============================================================================
 * Anonymous "Before we start" prelude — lives INSIDE the drawer's conversation
 * column (not a modal overlay). When shown, it replaces the message list +
 * composer for that visitor; once they identify themselves, hideAnonPrelude()
 * swaps back to the normal chat surface.
 * ========================================================================= */
.flmvr-msg-prelude {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  background: #fff;
  border-top: 1px solid #e2e4e8;
  overflow: auto;
}
.flmvr-msg-prelude[hidden] { display: none; }
.flmvr-msg-prelude-header { display: flex; flex-direction: column; gap: 6px; }
.flmvr-msg-prelude-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--flmvr-msg-color-heading);
}
.flmvr-msg-consent-text {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}
.flmvr-msg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Public-site layouts (signup_layout in particular) wrap the page body in
     a center-aligned section. Without an explicit override the field label,
     input placeholder text, and inline help text all inherit that center
     alignment and the form looks like a centered receipt instead of a
     standard left-to-right input column. */
  text-align: left;
}
.flmvr-msg-field label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.flmvr-msg-field-req { color: #c0392b; margin-left: 2px; }
.flmvr-msg-field-opt { color: #888; font-weight: 400; margin-left: 4px; }
.flmvr-msg-prelude input[type="email"],
.flmvr-msg-prelude input[type="text"],
.flmvr-msg-prelude textarea.flmvr-msg-prelude-message {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #c8ccd2;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  color: #222;
  box-sizing: border-box;
  /* Form fields read left-to-right; without this, inherited
     text-align: center from public-site wrappers makes the placeholder
     and typed input float in the center of the field. */
  text-align: left;
}
.flmvr-msg-prelude textarea.flmvr-msg-prelude-message {
  /* Composer-style: comfortable typing area, vertical resize only so the
     visitor can drag it taller for longer messages but the prelude form
     can't be widened past the drawer panel. */
  min-height: 96px;
  resize: vertical;
  line-height: 1.4;
}
.flmvr-msg-prelude input[type="email"]:focus,
.flmvr-msg-prelude input[type="text"]:focus,
.flmvr-msg-prelude textarea.flmvr-msg-prelude-message:focus {
  outline: none;
  border-color: #6699cc;
  box-shadow: 0 0 0 2px rgba(102, 153, 204, 0.2);
}
/* The hCaptcha container is always visible inside the prelude. While the API is still
 * loading we paint a "Loading verification…" note via .flmvr-msg-hcaptcha-note so the
 * visitor can see something is coming; once the widget renders, the note is removed
 * and the iframe takes over. If the script never loads, the note flips to a failure
 * message instead of leaving the gap empty. */
.flmvr-msg-prelude .flmvr-msg-hcaptcha {
  min-height: 0;
}
.flmvr-msg-prelude .flmvr-msg-hcaptcha[data-state="loading"],
.flmvr-msg-prelude .flmvr-msg-hcaptcha[data-state="failed"] {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d6d8de;
  border-radius: 6px;
  background: #fafbfc;
  padding: 10px 12px;
}
.flmvr-msg-hcaptcha-note {
  margin: 0;
  font-size: 13px;
  color: #555;
  text-align: center;
}
.flmvr-msg-prelude .flmvr-msg-hcaptcha[data-state="failed"] .flmvr-msg-hcaptcha-note {
  color: #b3261e;
}
.flmvr-msg-prelude-error {
  margin: 0;
  color: #b3261e;
  font-size: 13px;
}
.flmvr-msg-prelude-error[hidden] { display: none; }
.flmvr-msg-prelude-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.flmvr-msg-anon-submit[disabled] { opacity: 0.6; cursor: progress; }

/* Queue row text — same #333 / #666 hierarchy as cpanel tables */
.flmvr-msg-queue-customer { color: #333; font-weight: 600; }
.flmvr-msg-queue-time { color: #666; font-size: 12px; }
.flmvr-msg-queue-empty { color: #666; padding: 12px 8px; list-style: none; }

/* ============================================================================
 * Admin mode — "cockpit" layout
 *
 * Two-column body: left rail (filters + scrollable thread list) + right pane
 * (active conversation). Wider panel (~1100px) so admins can scan many threads
 * while keeping the active conversation comfortably wide.
 * ========================================================================= */
.flmvr-msg-mode-admin .flmvr-msg-panel { width: min(100vw, 1100px); }
.flmvr-msg-mode-admin .flmvr-msg-body {
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
}
.flmvr-msg-mode-admin .flmvr-msg-queue {
  width: var(--flmvr-msg-queue-width, 510px);
  flex: 0 0 var(--flmvr-msg-queue-width, 510px);
  min-width: 280px;
  max-width: 62%;
  max-height: none;
  height: 100%;
  border-right: 1px solid #e2e4e8;
  border-bottom: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.flmvr-msg-mode-admin .flmvr-msg-splitter {
  display: block;
  flex: 0 0 8px;
  cursor: col-resize;
  background: linear-gradient(to right, transparent 0, transparent 3px, #d5dce5 3px, #d5dce5 5px, transparent 5px);
}
.flmvr-msg-mode-admin .flmvr-msg-splitter:hover,
.flmvr-msg-mode-admin .flmvr-msg-splitter.is-dragging {
  background: linear-gradient(to right, transparent 0, transparent 3px, #8aa4c2 3px, #8aa4c2 5px, transparent 5px);
}
.flmvr-msg-mode-admin .flmvr-msg-splitter[hidden] { display: none; }
.flmvr-msg-mode-admin .flmvr-msg-conversation {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}
.flmvr-msg-mode-admin .flmvr-msg-messages { max-height: none; flex: 1; }

/* Admin toolbar (filters/sort/search) above the rail list */
.flmvr-msg-admin-toolbar {
  padding: 10px 10px 8px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.flmvr-msg-admin-tb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flmvr-msg-admin-tb-row label {
  flex: 1 1 auto;
  font-size: 12px;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.flmvr-msg-admin-tb-row select {
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid #c8ccd2;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}
.flmvr-msg-admin-tb-search { flex: 1 1 100%; }
.flmvr-msg-admin-q {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #c8ccd2;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
.flmvr-msg-admin-tb-status { font-size: 11px; color: #666; min-height: 14px; }
.flmvr-msg-admin-tb-status.is-error { color: #a40000; }

/* Admin queue list — rich rows */
.flmvr-msg-mode-admin .flmvr-msg-queue-list { padding: 4px; }
.flmvr-msg-mode-admin .flmvr-msg-queue-item {
  display: block;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: 6px;
  border: 1px solid transparent;
  position: relative;
}
.flmvr-msg-mode-admin .flmvr-msg-queue-item.is-active {
  background: #e6efff;
  border-color: #b6ccff;
}
.flmvr-msg-mode-admin .flmvr-msg-queue-item.needs-reply { border-left: 3px solid #c41e1e; padding-left: 7px; }
.flmvr-msg-queue-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  min-width: 0;
}
.flmvr-msg-queue-row1 .flmvr-msg-queue-customer {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flmvr-msg-queue-row1 .flmvr-msg-queue-time { flex-shrink: 0; }
.flmvr-msg-presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #adb5bd;
  flex-shrink: 0;
}
.flmvr-msg-presence-dot.is-present { background: #28a745; }
.flmvr-msg-presence-dot.is-away { background: #adb5bd; }
.flmvr-msg-presence-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flmvr-msg-queue-attachments {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #64748b;
  flex-shrink: 0;
  font-size: 11px;
}
.flmvr-msg-queue-attachments svg {
  display: block;
  width: 13px;
  height: 13px;
}
.flmvr-msg-queue-snippet {
  font-size: 12px;
  color: #555;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flmvr-msg-queue-row3 { font-size: 11px; color: #666; }
.flmvr-msg-queue-assignee.unassigned { color: #a05a00; font-weight: 600; }
.flmvr-msg-queue-kind {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #e2e8f0;
  color: #334155;
}
.flmvr-msg-queue-kind.k-support { background: #dbeafe; color: #1e3a8a; }
.flmvr-msg-queue-kind.k-sales   { background: #dcfce7; color: #166534; }
.flmvr-msg-queue-kind.k-system  { background: #f1f5f9; color: #475569; }
.flmvr-msg-queue-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c41e1e;
  flex-shrink: 0;
}

/* Admin top-bar action buttons (Snooze / Assign / Close|Reopen) sit between title and X.
 * The label of each button morphs based on the selected conversation's state:
 *   .flmvr-msg-btn-assign  : "Assign to me" / "Release" / "Take over"
 *   .flmvr-msg-btn-snooze  : "Snooze" / "Snoozed until <date>"
 *   .flmvr-msg-btn-close   : "Close" / "Reopen"
 */
.flmvr-msg-admin-actions { display: flex; gap: 6px; align-items: center; position: relative; }
.flmvr-msg-admin-actions .flmvr-msg-btn-assign,
.flmvr-msg-admin-actions .flmvr-msg-btn-close,
.flmvr-msg-admin-actions .flmvr-msg-btn-snooze {
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid #c8ccd2;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flmvr-msg-admin-actions .flmvr-msg-btn-assign:disabled,
.flmvr-msg-admin-actions .flmvr-msg-btn-close:disabled,
.flmvr-msg-admin-actions .flmvr-msg-btn-snooze:disabled { opacity: 0.5; cursor: not-allowed; }
.flmvr-msg-admin-actions .flmvr-msg-btn-assign:not(:disabled):hover,
.flmvr-msg-admin-actions .flmvr-msg-btn-close:not(:disabled):hover,
.flmvr-msg-admin-actions .flmvr-msg-btn-snooze:not(:disabled):hover { background: #eef1f6; }

/* Snooze popover anchors to the snooze button; the wrap establishes the positioning context. */
.flmvr-msg-btn-snooze-wrap { position: relative; display: inline-flex; }
.flmvr-msg-snooze-pop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 10;
}
.flmvr-msg-snooze-pop[hidden] { display: none; }
.flmvr-msg-snooze-pop-header {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6b6f78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.flmvr-msg-snooze-pop-header[hidden] { display: none; }
.flmvr-msg-snooze-pop > button {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}
.flmvr-msg-snooze-pop > button:hover,
.flmvr-msg-snooze-pop > button:focus-visible { background: #eef1f6; outline: none; }
.flmvr-msg-snooze-pop .flmvr-msg-snooze-wake {
  margin-top: 4px;
  border-top: 1px solid #e2e4e8;
  color: #4d6f8a;
  font-weight: 600;
}

.flmvr-msg-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
  padding: 40px 20px;
  text-align: center;
}
.flmvr-msg-empty-state[hidden] { display: none; }

.flmvr-msg-thread-context {
  border-bottom: 1px solid var(--flmvr-msg-color-border);
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 12px;
}
.flmvr-msg-thread-context[hidden] { display: none; }
.flmvr-msg-thread-context-row + .flmvr-msg-thread-context-row { margin-top: 3px; }
.flmvr-msg-thread-context-recipient + .flmvr-msg-thread-context-recipient::before {
  content: ", ";
}
.flmvr-msg-thread-context a {
  color: #1d4ed8;
  text-decoration: none;
}
.flmvr-msg-thread-context a:hover,
.flmvr-msg-thread-context a:focus { text-decoration: underline; }

/* Admin slide-out at phone widths: list / thread drill-down (same behavior as /control/m/messages). */
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-panel { width: 100%; }
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-queue {
  width: 100% !important;
  flex: 1 1 auto !important;
  flex-basis: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  border-right: none;
  border-bottom: none;
}
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-conversation {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-messages {
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
}
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-splitter { display: none !important; }

@media (max-width: 720px) {
  .flmvr-msg-panel { width: 100%; max-width: 100%; }
  .flmvr-msg-messages { max-height: 40vh; }
}

/* --------------------------------------------------------------------------
 * Control mobile messaging (/control/m/messages) — scoped to .flmvr-msg-mobile-control
 * so desktop /control pages with the slide-out tray are unchanged.
 * -------------------------------------------------------------------------- */
html.flmvr-msg-mobile-control-page,
html.flmvr-msg-mobile-control-page body.flmvr-msg-mobile-control-body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.flmvr-msg-mobile-control {
  /* Full-screen shell: no FAB, no scrim */
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
}
.flmvr-msg-mobile-control .flmvr-msg-toggle,
.flmvr-msg-mobile-control .flmvr-msg-backdrop {
  display: none !important;
}
.flmvr-msg-mobile-control .flmvr-msg-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  transform: none !important;
  border-radius: 0;
  box-shadow: none;
  display: flex !important;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.flmvr-msg-mobile-control .flmvr-msg-panel[hidden] {
  display: flex !important;
  transform: none !important;
  pointer-events: auto;
}
.flmvr-msg-mobile-control .flmvr-msg-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Inbox list: full width; thread: full width conversation */
.flmvr-msg-mobile-control.flmvr-msg-mobile-control--inbox .flmvr-msg-conversation,
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown.flmvr-msg-mobile-control--inbox .flmvr-msg-conversation {
  display: none !important;
}
.flmvr-msg-mobile-control.flmvr-msg-mobile-control--thread .flmvr-msg-queue,
.flmvr-msg-mobile-control.flmvr-msg-mobile-control--thread .flmvr-msg-splitter,
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown.flmvr-msg-mobile-control--thread .flmvr-msg-queue,
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown.flmvr-msg-mobile-control--thread .flmvr-msg-splitter {
  display: none !important;
}
.flmvr-msg-mobile-control .flmvr-msg-queue {
  width: 100% !important;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  border-right: none;
  border-bottom: none;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.flmvr-msg-mobile-control .flmvr-msg-conversation {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.flmvr-msg-mobile-control .flmvr-msg-messages {
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 8px;
}
.flmvr-msg-mobile-control .flmvr-msg-composer {
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}
.flmvr-msg-mobile-control .flmvr-msg-panel-header {
  flex-wrap: wrap;
  padding-left: max(8px, env(safe-area-inset-left, 0));
  padding-right: max(8px, env(safe-area-inset-right, 0));
  gap: 4px;
}
/* Bold, high-contrast back control (SVG); same 44px tap target */
.flmvr-msg-mobile-control .flmvr-msg-mobile-back,
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-mobile-back {
  order: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  padding: 0;
  margin: 0 4px 0 0;
  border: 0;
  background: #e8eaef;
  border-radius: 8px;
  line-height: 0;
  color: #0f172a;
  cursor: pointer;
  flex-shrink: 0;
}
.flmvr-msg-mobile-control .flmvr-msg-mobile-back:active,
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-mobile-back:active {
  background: #dce0e6;
}
.flmvr-msg-mobile-back-ico {
  display: block;
  flex-shrink: 0;
}
.flmvr-msg-mobile-control .flmvr-msg-mobile-back[hidden],
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-mobile-back[hidden] {
  display: none;
}
.flmvr-msg-mode-admin.flmvr-msg-admin-tray-drilldown .flmvr-msg-panel-header {
  flex-wrap: wrap;
  gap: 4px;
}

/* Admin mobile list: hide Snooze / Assign / Close (only valid in thread view). */
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--inbox .flmvr-msg-admin-actions {
  display: none !important;
}

/* Admin mobile list: one top row — Messages … [bell][presence][×] (× flush right). */
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--inbox .flmvr-msg-panel-header {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--inbox .flmvr-msg-panel-title {
  flex: 1 1 auto;
  min-width: 0;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--inbox .flmvr-msg-panel-actions {
  flex-shrink: 0;
  margin-left: auto;
}

/* Admin mobile thread: row 1 = [←] customer/To … [×]; hide title / bell / presence (DOM: ctx hoisted into header via JS). */
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-panel-title,
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-sound-toggle,
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-presence-toggle {
  display: none !important;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-panel-header {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px 8px;
  padding-top: 8px;
  padding-bottom: 6px;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-mobile-back {
  order: 1;
  align-self: center;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-panel-header > .flmvr-msg-thread-context {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
  border-bottom: none;
  background: transparent;
  padding: 2px 6px 2px 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #334155;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-panel-header > .flmvr-msg-thread-context .flmvr-msg-thread-context-row + .flmvr-msg-thread-context-row {
  margin-top: 2px;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-panel-actions {
  order: 3;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
/* Row 2: Snooze / Assign / Close / attachments (compact) */
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 {
  order: 10;
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding-top: 2px;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-btn-assign,
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-btn-close,
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-btn-snooze {
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-btn-snooze-wrap {
  position: relative;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-thread-attachments {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 40px;
  min-height: 34px;
  padding: 4px 8px;
  margin-left: auto;
  margin-right: 0;
  border: 1px solid #c8ccd2;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-thread-attachments:hover {
  background: #eef1f6;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-thread-attachments:focus-visible {
  outline: 2px solid rgba(51, 85, 128, 0.45);
  outline-offset: 1px;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-thread-attachments .flmvr-msg-clip-ico {
  color: inherit;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-thread-attachments .flmvr-msg-thread-attach-count {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: inherit;
}
.flmvr-msg-mode-admin.flmvr-msg-mobile-control--thread .flmvr-msg-admin-mobile-thread-row2 .flmvr-msg-thread-attachments[hidden] {
  display: none !important;
}
/* Compact mobile filters: search + chips; full controls live in a bottom sheet. */
.flmvr-msg-admin-toolbar--mobile .flmvr-msg-admin-tb-search {
  flex: 1 1 100%;
  min-width: 0;
}
.flmvr-msg-mobile-control .flmvr-msg-admin-toolbar {
  overflow: visible;
  padding: 10px 12px 8px;
}
.flmvr-msg-mobile-control .flmvr-msg-admin-q {
  min-height: 44px;
  border-radius: 8px;
  font-size: 16px;
}
.flmvr-msg-mobile-filterbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.flmvr-msg-mobile-filter-chip {
  appearance: none;
  min-height: 36px;
  border: 1px solid #c8ccd2;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
}
.flmvr-msg-mobile-filter-chip.is-active {
  border-color: #335580;
  background: #e6efff;
  color: #1e3a8a;
}
.flmvr-msg-mobile-filter-more {
  margin-left: auto;
}
.flmvr-msg-mobile-filter-scrim {
  position: fixed;
  inset: 0;
  z-index: 6040;
  background: rgba(15, 23, 42, 0.28);
}
.flmvr-msg-mobile-filter-scrim[hidden] {
  display: none;
}
.flmvr-msg-mobile-filter-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6050;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0));
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.16);
}
.flmvr-msg-mobile-filter-sheet[hidden] {
  display: none;
}
.flmvr-msg-mobile-filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.flmvr-msg-mobile-filter-close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 24px;
  line-height: 1;
}
.flmvr-msg-mobile-filter-sheet .flmvr-msg-admin-tb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.flmvr-msg-mobile-filter-sheet .flmvr-msg-admin-tb-row label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.flmvr-msg-mobile-filter-sheet .flmvr-msg-admin-tb-row select {
  min-height: 44px;
  border-radius: 8px;
  font-size: 16px;
}
.flmvr-msg-mobile-control .flmvr-msg-admin-actions {
  flex-wrap: wrap;
  max-width: 100%;
}
.flmvr-msg-mobile-control .flmvr-msg-btn-assign,
.flmvr-msg-mobile-control .flmvr-msg-btn-close,
.flmvr-msg-mobile-control .flmvr-msg-btn-snooze {
  min-height: 40px;
  font-size: 12px;
  padding: 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .flmvr-msg-panel, .flmvr-msg-backdrop, .flmvr-msg-toggle { transition: none; }
}