/* MISTER FAST — LIVEMAPCHAT WEB FLEXIBLE WORKSPACE V1.1 CSS
 * Approved Visual Target: Option 1 Header + Flexible Resizable Layout
 * Scoped strictly to LiveMapChat Web
 */

:root {
  --mf-sidebar-w: 220px;
  --mf-map-h: 480px;
  --mf-chat-w: 380px;
  --mf-chat-h: 620px;
  --mf-chat-x: calc(100vw - 410px);
  --mf-chat-y: 130px;
}

html,
body,
body[data-lmc-view],
body.mf-approved-design,
body.mf-desktop-shell-body {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* 1. DOCUMENT WINDOW & FLEXIBLE GRID CONTAINER */
body.mf-approved-design .mf514-window {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.mf-approved-design .mf514-grid {
  display: grid !important;
  grid-template-columns: var(--mf-sidebar-w, 220px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
  flex: 1 0 auto !important;
  min-height: calc(100vh - 160px) !important;
  margin-bottom: 0 !important;
  transition: grid-template-columns 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.mf-approved-design .mf-clean-footer {
  margin-top: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 2. SIDEBAR PANEL */
body.mf-approved-design .mf514-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: var(--mf-sidebar-w, 220px) !important;
  min-width: 0 !important;
  max-width: 360px !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-x: hidden !important;
}

/* Sidebar Vertical Drag Handle */
.mf-sidebar-drag-handle {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: calc(var(--mf-sidebar-w, 220px) - 8px) !important;
  right: auto !important;
  width: 16px !important;
  height: auto !important;
  cursor: col-resize !important;
  z-index: 150 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  touch-action: none !important;
}

.mf-sidebar-drag-handle::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 7px !important;
  width: 3px !important;
  background: transparent !important;
  transition: background 0.15s !important;
}

.mf-sidebar-drag-handle:hover::before,
.mf-sidebar-drag-handle.is-dragging::before {
  background: #FFC400 !important;
}

body.mf-approved-design .mf212-sidebar-toggle,
.mf212-sidebar-toggle {
  position: sticky !important;
  top: 45% !important;
  width: 22px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: #002B66 !important;
  border: 2px solid #FFC400 !important;
  color: #FFC400 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.18s, background 0.18s !important;
  z-index: 101 !important;
}

.mf212-sidebar-toggle:hover {
  background: #001A40 !important;
  transform: scale(1.1);
}

/* Sidebar Collapsed State (68px Icon-Only) */
:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) {
  --mf-sidebar-w: 68px !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar {
  width: 68px !important;
  min-width: 68px !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar .mf514-menu > :is(button, a) {
  grid-template-columns: 1fr !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 48px !important;
  margin: 0 auto !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar .mf514-menu > :is(button, a) b {
  display: none !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar .mf-web-icon-tile {
  margin: 0 auto !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar .mf3243-menu-user {
  padding: 8px 4px !important;
  justify-content: center !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar .mf3243-menu-user-copy {
  display: none !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf514-sidebar :is(.mf-route-web-badge, .mf-web-sidebar-news, .mf-approved-workspace-copy, .mf6875-home-tracking-slot) {
  display: none !important;
}

:is(body.mf-sidebar-collapsed, body.mf212-sidebar-collapsed) .mf212-sidebar-toggle span {
  display: inline-block;
  transform: rotate(180deg);
}

/* Sidebar Hidden State (0px) */
body.mf-sidebar-hidden {
  --mf-sidebar-w: 0px !important;
}

body.mf-sidebar-hidden .mf514-sidebar {
  display: none !important;
}

/* 3. CENTER WORKSPACE (MAP & COMPACT TOOLBAR) */
body.mf-approved-design .mf514-map-pane {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 16px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

body.mf-approved-design .mf514-map-pane > :is(.mf-workspace-top-bar, .mf-compact-map-toolbar) {
  order: -10 !important;
  width: 100% !important;
}

body.mf-approved-design .mf514-map-pane > .mf514-map-wrap {
  order: 1 !important;
}

body.mf-approved-design .mf514-map-pane > .mf215-map-driver-splitter {
  order: 2 !important;
}

body.mf-approved-design .mf514-map-pane > .mf3306-feed {
  order: 3 !important;
}

body.mf-approved-design .mf514-map-pane > :not(.mf-workspace-top-bar):not(.mf-compact-map-toolbar):not(.mf514-map-wrap):not(.mf215-map-driver-splitter):not(.mf3306-feed):not(.mf20-workspace-panel):not(.mf6875-home-tracking-slot):not(.mf-workspace-map-overlay-widgets) {
  display: none !important;
}

/* Compact Map Toolbar Header (Eliminating dead space) */
.mf-compact-map-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  min-height: 38px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mf-compact-map-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.mf-approved-design .mf-approved-workspace-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #003da5 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

body.mf-approved-design .mf-approved-workspace-copy {
  font-size: 11px !important;
  color: #7387a6 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.mf-compact-map-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mf-compact-route-nav {
  position: static !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.mf-compact-route-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #e8f0fe !important;
  border: 1px solid #bfdbfe !important;
  color: #003da5 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 61, 165, 0.08) !important;
  transition: all 0.15s !important;
}

.mf-compact-route-btn:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

.mf-compact-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mf-tool-compact-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #dce6f3 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.15s !important;
}

.mf-tool-compact-btn:hover {
  background: #f1f5f9 !important;
}

body.mf-approved-design .mf16-workspace-header {
  display: none !important;
}

body.mf-navigation-workspace-v21 .mf16-primary-nav:not(.mf-compact-route-nav) {
  display: none !important;
}

body.mf-approved-design .mf514-map-wrap {
  height: var(--mf-map-h, 480px) !important;
  min-height: 240px !important;
  max-height: 85vh !important;
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #dce6f3 !important;
  box-shadow: 0 4px 18px rgba(0, 43, 102, 0.06) !important;
  transition: height 0.05s ease-out;
}

body.mf-approved-design .mf514-map-wrap.is-resizing,
body.mf-approved-design .mf215-map-driver-splitter.is-dragging ~ .mf514-map-wrap {
  transition: none !important;
}

body.mf-approved-design #mf514Map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* 4. WORKSPACE TOP BAR & WIDGET AREA (WEATHER & FLEET SUMMARY) */
.mf-workspace-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}

.mf-workspace-top-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.mf-workspace-top-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.mf-workspace-top-right .mf-workspace-map-overlay-widgets {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  max-width: none !important;
  pointer-events: auto !important;
  z-index: auto !important;
}

@media (max-width: 900px) {
  .mf-workspace-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  .mf-workspace-top-right {
    width: 100% !important;
  }
  .mf-workspace-top-right .mf-workspace-map-overlay-widgets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

.mf-widget-card {
  pointer-events: auto !important;
  background: #ffffff !important;
  border: 1px solid #dce6f3 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(0, 43, 102, 0.06) !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  user-select: none !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.mf-widget-card:hover {
  box-shadow: 0 6px 18px rgba(0, 43, 102, 0.12) !important;
}

/* Weather Card */
.mf-widget-weather {
  min-width: 230px !important;
}

.mf-widget-weather-header,
.mf-widget-fleet-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.mf-widget-label {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #002B66 !important;
  letter-spacing: 0.2px !important;
}

.mf-widget-location {
  font-size: 10.5px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.mf-widget-weather-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.mf-weather-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mf-weather-icon {
  font-size: 26px !important;
  line-height: 1 !important;
}

.mf-weather-temp-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.mf-weather-temp {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #002B66 !important;
  line-height: 1.1 !important;
}

.mf-weather-desc {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #586e8e !important;
}

.mf-weather-details {
  font-size: 10px !important;
  color: #586e8e !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  text-align: right !important;
}

.mf-weather-details b {
  color: #002B66 !important;
}

.mf-weather-forecast-pills {
  display: flex !important;
  gap: 4px !important;
  margin-top: 4px !important;
}

.mf-forecast-pill {
  flex: 1 !important;
  background: #f0f5fc !important;
  border-radius: 6px !important;
  padding: 3px 4px !important;
  text-align: center !important;
  font-size: 9.5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
}

.mf-forecast-pill span {
  color: #6a82a4 !important;
  font-weight: 600 !important;
}

.mf-forecast-pill b {
  color: #002B66 !important;
  font-weight: 800 !important;
}

/* Fleet Summary Card */
.mf-widget-fleet-summary {
  min-width: 260px !important;
}

.mf-widget-fleet-summary .mf-widget-fleet-body {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mf-widget-fleet-summary .mf-widget-link {
  background: none !important;
  border: none !important;
  color: #003da5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.mf-fleet-total-box {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  background: #002B66 !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

.mf-fleet-total-box b {
  color: #FFC400 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.mf-fleet-total-box small {
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

.mf-fleet-status-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  flex: 1 !important;
}

.mf-fleet-status-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.mf-fleet-status-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.mf-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-bottom: 2px !important;
}

.mf-status-dot.is-online { background: #10b981 !important; }
.mf-status-dot.is-busy { background: #f59e0b !important; }
.mf-status-dot.is-idle { background: #06b6d4 !important; }
.mf-status-dot.is-offline { background: #ef4444 !important; }

.mf-fleet-status-item small {
  font-size: 9px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.mf-fleet-status-item b {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #002B66 !important;
  line-height: 1.2 !important;
}

/* Bottom Map Floating Bar (Approved Design Reference) */
.mf-map-bottom-bar {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 400 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  pointer-events: none !important;
}

.mf-map-bottom-tabs,
.mf-map-bottom-tools {
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 43, 102, 0.12) !important;
  border-radius: 999px !important;
  padding: 4px 6px !important;
  box-shadow: 0 4px 14px rgba(0, 43, 102, 0.12) !important;
}

.mf-map-bottom-tab {
  border: none !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.mf-map-bottom-tab.is-active {
  background: #003da5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 61, 165, 0.25) !important;
}

.mf-map-bottom-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #e8f0fe !important;
  border: 1px solid #bfdbfe !important;
  color: #003da5 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

.mf-map-bottom-icon-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #dce6f3 !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
}

/* 5. HORIZONTAL SPLITTER HANDLE */
.mf215-map-driver-splitter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  margin: 4px 0 !important;
  cursor: row-resize !important;
  user-select: none !important;
  position: relative !important;
  z-index: 30 !important;
}

.mf215-map-driver-splitter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 43, 102, 0.10);
}

.mf215-map-driver-splitter span {
  width: 72px !important;
  height: 8px !important;
  background: #FFC400 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0, 43, 102, 0.2) !important;
  position: relative !important;
  z-index: 2 !important;
  transition: transform 0.15s, background 0.15s !important;
}

.mf215-map-driver-splitter:hover span,
.mf215-map-driver-splitter.is-dragging span {
  background: #FFB300 !important;
  transform: scaleY(1.5) scaleX(1.05) !important;
}

/* Reset Layout Button in Quick Tools */
.mf-reset-layout-btn {
  background: #002B66 !important;
  color: #FFC400 !important;
  border: 1px solid #FFC400 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background 0.15s, transform 0.15s !important;
}

.mf-reset-layout-btn:hover {
  background: #001A40 !important;
  transform: translateY(-1px) !important;
}

/* 6. FLOATING RESIZABLE CHAT WINDOW */
body.mf-approved-design .mf514-chat-pane.mf-flexible-floating-chat {
  position: fixed !important;
  top: var(--mf-chat-y, 130px) !important;
  left: var(--mf-chat-x, calc(100vw - 410px)) !important;
  width: var(--mf-chat-w, 380px) !important;
  height: var(--mf-chat-h, 620px) !important;
  min-width: 320px !important;
  min-height: 380px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 80px) !important;
  z-index: 1050 !important;
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 43, 102, 0.22) !important;
  box-shadow: 0 16px 48px rgba(0, 43, 102, 0.28), 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  inset: auto !important;
  transition: opacity 0.15s, transform 0.15s;
}

/* Hide legacy duplicate dragbar */
.mf514-chat-pane .mf3305-chat-dragbar {
  display: none !important;
}

/* Chat States */
body.mf-approved-design .mf514-chat-pane.is-minimized,
body.mf-approved-design .mf514-chat-pane.is-closed {
  display: none !important;
}

body.mf-approved-design .mf514-chat-pane.is-maximized {
  top: 72px !important;
  left: auto !important;
  right: 16px !important;
  width: 440px !important;
  height: calc(100vh - 90px) !important;
  border-radius: 16px !important;
}

/* Chat Titlebar (Header Drag Handle) */
.mf-floating-chat-titlebar {
  background: linear-gradient(135deg, #002B66 0%, #001A40 100%) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: grab !important;
  user-select: none !important;
  border-top-left-radius: 17px !important;
  border-top-right-radius: 17px !important;
  flex-shrink: 0 !important;
}

.mf-floating-chat-titlebar:active,
.mf-floating-chat-titlebar.is-dragging {
  cursor: grabbing !important;
}

.mf-floating-chat-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mf-floating-chat-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #FFC400 !important;
  color: #002B66 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

.mf-floating-chat-titles {
  display: flex !important;
  flex-direction: column !important;
}

.mf-floating-chat-titles b {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
}

.mf-floating-chat-titles small {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.2 !important;
}

.mf-floating-chat-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mf-floating-chat-drag-indicator {
  font-size: 13px !important;
  opacity: 0.6 !important;
  margin-right: 4px !important;
}

.mf-chat-ctrl-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 0 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transition: background 0.15s, transform 0.15s !important;
}

.mf-chat-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.mf-chat-ctrl-btn.is-close:hover {
  background: #ef4444 !important;
}

/* 8-Direction Resizers */
.mf-chat-resizer {
  position: absolute !important;
  z-index: 999 !important;
}

.mf-chat-resizer.is-top {
  top: -4px !important;
  left: 10px !important;
  right: 10px !important;
  height: 8px !important;
  cursor: ns-resize !important;
}

.mf-chat-resizer.is-bottom {
  bottom: -4px !important;
  left: 10px !important;
  right: 10px !important;
  height: 8px !important;
  cursor: ns-resize !important;
}

.mf-chat-resizer.is-left {
  left: -4px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 8px !important;
  cursor: ew-resize !important;
}

.mf-chat-resizer.is-right {
  right: -4px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 8px !important;
  cursor: ew-resize !important;
}

.mf-chat-resizer.is-top-left {
  top: -4px !important;
  left: -4px !important;
  width: 14px !important;
  height: 14px !important;
  cursor: nwse-resize !important;
}

.mf-chat-resizer.is-top-right {
  top: -4px !important;
  right: -4px !important;
  width: 14px !important;
  height: 14px !important;
  cursor: nesw-resize !important;
}

.mf-chat-resizer.is-bottom-left {
  bottom: -4px !important;
  left: -4px !important;
  width: 14px !important;
  height: 14px !important;
  cursor: nesw-resize !important;
}

.mf-chat-resizer.is-bottom-right {
  bottom: -4px !important;
  right: -4px !important;
  width: 14px !important;
  height: 14px !important;
  cursor: nwse-resize !important;
}

/* Unified Account Banner */
body.mf-approved-design .mf-chat-unified-account-bar,
body.mf-desktop-shell-body .mf514-chat-pane .mf-chat-unified-account-bar,
.mf-chat-unified-account-bar {
  background: #003da5 !important;
  color: #fff !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}

.mf-chat-account-shield-box {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}

.mf-chat-account-user-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.mf-chat-account-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.mf-chat-account-logout-btn {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: underline !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}

.mf-chat-account-logout-btn:hover {
  color: #FFC400 !important;
}

/* 5 Mode Tabs - Panel 1 Target */
body.mf-approved-design .mf602-modes {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 6px 8px !important;
  gap: 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body.mf-approved-design .mf602-mode {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 2px !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s !important;
}

body.mf-approved-design .mf602-mode:hover {
  background: #f1f5f9 !important;
  color: #002B66 !important;
}

body.mf-approved-design .mf602-mode.is-active {
  background: #FFC400 !important;
  color: #002B66 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body.mf-approved-design .mf602-mode .mf-web-chat-mode-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
}

.mf-tab-badge-dot {
  position: absolute !important;
  top: 3px !important;
  right: 12px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  border: 1.5px solid #ffffff !important;
}

/* Floating Unread Badge Pill */
.mf-chat-unread-badge-pill {
  position: sticky !important;
  bottom: 12px !important;
  margin-left: auto !important;
  margin-right: 12px !important;
  margin-top: -34px !important;
  z-index: 50 !important;
  background: #002B66 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(0, 43, 102, 0.35) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: transform 0.15s, background 0.15s !important;
}

.mf-chat-unread-badge-pill:hover {
  background: #003DA5 !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* Messages Area & White Cards (Panel 1 Design Match) */
body.mf-approved-design .mf514-messages {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #f8fafc !important;
}

body.mf-approved-design .mf514-message {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 100% !important;
}

body.mf-approved-design .mf514-message-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

body.mf-approved-design .mf514-message > div {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-width: 82% !important;
  overflow-wrap: anywhere !important;
}

body.mf-approved-design .mf514-message > div b {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #003da5 !important;
  margin-bottom: 4px !important;
}

body.mf-approved-design .mf514-message > div b em {
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-left: 6px !important;
}

body.mf-approved-design .mf514-message > div b time {
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  margin-left: 6px !important;
}

body.mf-approved-design .mf514-message > div small {
  display: block !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  margin-top: 6px !important;
}

/* Outgoing message (Panel 1: Soft warm yellow bubble + dark blue MF avatar) */
body.mf-approved-design .mf514-message.is-mine {
  flex-direction: row-reverse !important;
}

body.mf-approved-design .mf514-message.is-mine .mf514-message-avatar {
  background: #002B66 !important;
  color: #FFC400 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 43, 102, 0.25) !important;
}

body.mf-approved-design .mf514-message.is-mine > div {
  background: #FFF3C4 !important;
  border-color: #fed7aa !important;
  color: #0f172a !important;
  border-radius: 16px 16px 4px 16px !important;
}

.mf-msg-checkmarks {
  color: #0284c7 !important;
  font-weight: 800 !important;
  margin-left: 4px !important;
}

.mf-msg-media-wrap {
  margin-top: 6px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  max-width: 260px !important;
  border: 1px solid #e2e8f0 !important;
}

.mf-msg-media-img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body.mf-approved-design .mf514-message .mf-chat-sticker-bubble,
body.mf-approved-design .mf514-message > div:has(.mf-chat-sticker-img) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.mf-approved-design .mf514-message .mf-chat-sticker-img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block !important;
}

/* Composer Styling */
body.mf-approved-design .mf514-composer {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.mf-composer-action-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 17px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.15s, transform 0.15s !important;
  flex-shrink: 0 !important;
}

.mf-composer-action-btn:hover {
  background: #f1f5f9 !important;
  transform: scale(1.1) !important;
}

.mf-composer-text-input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 38px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  background: #f8fafc !important;
  outline: none !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
}

.mf-composer-text-input:focus {
  border-color: #003da5 !important;
  background: #fff !important;
}

body.mf-approved-design .mf514-send {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #002B66 !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 15px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, transform 0.15s !important;
}

body.mf-approved-design .mf514-send:hover {
  background: #003DA5 !important;
  transform: scale(1.08) !important;
}

/* =========================================================
   7. UNIFIED CHAT PICKER ARCHITECTURE (V1.3 EXCLUSIVE STATE)
   Clean single internal scroll pane, zero nested scrollbars
   ========================================================= */

/* Hide Account bar in floating window to match approved Image 3 */
body.mf-approved-design .mf514-chat-pane .mf-chat-unified-account-bar {
  display: none !important;
}

/* Unified Picker Panel Container */
.mf-chat-unified-picker {
  flex: 0 0 auto !important;
  max-height: min(230px, 45vh) !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 -4px 14px rgba(0, 43, 102, 0.05) !important;
  z-index: 10 !important;
}

.mf-chat-unified-picker[hidden],
.mf-picker-mode-content[hidden] {
  display: none !important;
}

.mf-picker-mode-content {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Picker Header (Always fixed at top of picker) */
.mf-picker-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 12px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.mf-picker-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.mf-picker-close-btn {
  background: transparent !important;
  border: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  transition: background 0.15s, color 0.15s !important;
}

.mf-picker-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Category Tabs (Single horizontal strip) */
.mf631-emoji-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-shrink: 0 !important;
  scrollbar-width: none !important;
}

.mf631-emoji-tabs::-webkit-scrollbar {
  display: none !important;
}

.mf631-emoji-tabs button {
  background: #e2e8f0 !important;
  border: 0 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}

.mf631-emoji-tabs button:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}

.mf631-emoji-tabs button.is-active {
  background: #003DA5 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 61, 165, 0.25) !important;
}

/* =========================================================
   THE SINGLE SCROLL PANE: Exactly ONE vertical scrollbar!
   ========================================================= */
.mf-picker-scroll-pane {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 8px !important;
  max-height: 195px !important;
  scrollbar-width: thin !important;
  box-sizing: border-box !important;
}

/* VIEW A: Emoji Library with 10 Left Categories (Panel 2) */
.mf-emoji-split-container {
  display: flex !important;
  gap: 6px !important;
  height: 180px !important;
  overflow: hidden !important;
}

.mf-emoji-split-container[hidden],
.mf-sticker-view-container[hidden],
.mf631-sticker-grid[hidden] {
  display: none !important;
}

.mf-emoji-cat-nav {
  width: 125px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-right: 4px !important;
  border-right: 1px solid #e2e8f0 !important;
  scrollbar-width: none !important;
}

.mf-emoji-cat-nav::-webkit-scrollbar {
  display: none !important;
}

.mf-emoji-cat-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.12s !important;
}

.mf-emoji-cat-btn:hover {
  background: #f1f5f9 !important;
  color: #002B66 !important;
}

.mf-emoji-cat-btn.is-active {
  background: #FFC400 !important;
  color: #002B66 !important;
  font-weight: 800 !important;
}

.mf-emoji-cat-content {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  padding: 2px 4px !important;
}

.mf-emoji-5col-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 4px !important;
}

.mf-emoji-btn {
  background: transparent !important;
  border: 0 !important;
  font-size: 22px !important;
  padding: 4px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  transition: transform 0.12s, background 0.12s !important;
}

.mf-emoji-btn:hover {
  background: #f1f5f9 !important;
  transform: scale(1.2) !important;
}

/* VIEW B: Sticker Library (Panel 3) */
.mf631-sticker-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 4px !important;
}

.mf-sticker-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 6px 4px !important;
  cursor: pointer !important;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s !important;
}

.mf-sticker-btn:hover {
  background: #f8fafc !important;
  border-color: #003da5 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 6px rgba(0, 61, 165, 0.12) !important;
}

.mf-sticker-btn img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

.mf-sticker-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Panel 4: Image & File Picker Subtabs & Grids */
.mf-image-subtabs {
  display: flex !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.mf-image-subtabs button {
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.mf-image-subtabs button.is-active {
  background: #003DA5 !important;
  color: #ffffff !important;
}

.mf-chat-image-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  padding: 2px !important;
}

.mf-chat-image-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f8fafc !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 3px !important;
  cursor: pointer !important;
  transition: transform 0.12s, border-color 0.12s !important;
}

.mf-chat-image-card:hover {
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}

.mf-chat-image-card.is-selected {
  border-color: #003da5 !important;
  box-shadow: 0 0 0 2px rgba(0, 61, 165, 0.25) !important;
  background: #eff6ff !important;
}

.mf-chat-image-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}

.mf-chat-image-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.mf-photo-check-badge {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(0, 43, 102, 0.45) !important;
  color: transparent !important;
  border: 1.5px solid #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  transition: all 0.15s !important;
}

.mf-chat-image-card.is-selected .mf-photo-check-badge {
  background: #003DA5 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: scale(1.1) !important;
}

.mf-chat-image-card-title {
  font-size: 9px !important;
  color: #334155 !important;
  text-align: center !important;
  margin-top: 3px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mf-image-picker-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  gap: 8px !important;
}

.mf-img-bottom-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.mf-img-sel-count-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #002B66 !important;
  white-space: nowrap !important;
}

.mf-img-sel-thumbs-strip {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  overflow-x: auto !important;
}

.mf-img-sel-thumb-mini {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  border: 1px solid #cbd5e1 !important;
}

.mf-img-bottom-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mf-img-clear-btn {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.mf-img-send-btn {
  background: #002B66 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.mf-img-send-btn:hover {
  background: #003DA5 !important;
}

.mf-document-picker-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 4px !important;
}

.mf-doc-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  gap: 8px !important;
}

.mf-doc-icon {
  font-size: 20px !important;
}

.mf-doc-info b {
  display: block !important;
  font-size: 11.5px !important;
  color: #0f172a !important;
}

.mf-doc-info small {
  font-size: 10px !important;
  color: #64748b !important;
}

.mf-doc-send-trigger {
  background: #002B66 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Panel 5: Share Location Mode */
.mf-location-card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 6px !important;
}

.mf-location-map-snippet {
  height: 105px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #e0f2fe url('../../../livemapchat/assets/images/mf_chat_phone_map.webp') center/cover no-repeat !important;
  border: 1px solid #bae6fd !important;
  display: grid !important;
  place-items: center !important;
}

.mf-location-radar-pulse {
  position: absolute !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 2px solid #0284c7 !important;
  background: rgba(2, 132, 199, 0.18) !important;
  animation: mf-radar-pulse 2s infinite ease-out !important;
}

.mf-location-center-marker {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.mf-location-pin-icon {
  font-size: 24px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

.mf-location-pin-label {
  background: #002B66 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

.mf-location-address-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

.mf-location-addr-icon {
  font-size: 18px !important;
  color: #003DA5 !important;
}

.mf-location-addr-texts b {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.mf-location-addr-texts small {
  display: block !important;
  font-size: 10px !important;
  color: #64748b !important;
}

.mf-location-submit-btn {
  width: 100 !important;
  background: #002B66 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 8px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background 0.15s !important;
}

.mf-location-submit-btn:hover {
  background: #003DA5 !important;
}

/* Panel 6: Voice Recorder Mode */
.mf-voice-card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
}

.mf-voice-mic-hero-wrap {
  margin-top: 4px !important;
}

.mf-voice-mic-hero-btn {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #eff6ff !important;
  border: 2px solid #3b82f6 !important;
  color: #1d4ed8 !important;
  font-size: 26px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition: all 0.2s !important;
}

.mf-voice-mic-hero-btn.is-recording {
  animation: mf-mic-pulse 1.4s infinite !important;
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

.mf-voice-timer-wrap {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.mf-voice-waveform-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5px !important;
  height: 28px !important;
  width: 100% !important;
  max-width: 220px !important;
}

.mf-waveform-bar {
  width: 3px !important;
  height: 14px !important;
  background: #3b82f6 !important;
  border-radius: 999px !important;
  animation: mf-wave-bounce 0.8s infinite alternate ease-in-out !important;
}

.mf-voice-actions-row {
  display: flex !important;
  width: 100% !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

.mf-voice-action-btn {
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 0 !important;
  transition: all 0.15s !important;
}

.mf-voice-action-btn.is-delete {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

.mf-voice-action-btn.is-listen {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
}

.mf-voice-action-btn.is-send {
  background: #002B66 !important;
  color: #ffffff !important;
}

.mf-voice-action-btn.is-send:hover {
  background: #003DA5 !important;
}

@keyframes mf-radar-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  50% { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(2.0); opacity: 0; }
}

@keyframes mf-wave-bounce {
  0% { height: 4px; }
  100% { height: 24px; }
}

@keyframes mf-mic-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.mf-img-upload-trigger-btn {
  width: 100% !important;
  padding: 7px 10px !important;
  border: 1px dashed #003da5 !important;
  border-radius: 8px !important;
  background: #eff6ff !important;
  color: #003da5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  margin-bottom: 8px !important;
}

.mf-img-upload-trigger-btn:hover {
  background: #dbeafe !important;
}

/* Image Upload Preview Card */
.mf-upload-preview-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px !important;
}

.mf-upload-preview-thumb-wrap {
  width: 140px !important;
  height: 90px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #cbd5e1 !important;
  background: #f1f5f9 !important;
  display: grid !important;
  place-items: center !important;
}

.mf-upload-preview-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.mf-upload-preview-info {
  text-align: center !important;
  line-height: 1.2 !important;
}

.mf-upload-preview-info b {
  font-size: 12px !important;
  color: #0f172a !important;
  display: block !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mf-upload-preview-info small {
  font-size: 10px !important;
  color: #64748b !important;
}

.mf-upload-preview-actions {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  justify-content: center !important;
}

.mf-upload-cancel-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.mf-upload-confirm-btn {
  background: #002B66 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.mf-upload-confirm-btn:hover {
  background: #003DA5 !important;
}

/* Single Scroll Hint (from Image 3) */
.mf-picker-single-scroll-hint {
  font-size: 11px !important;
  color: #94a3b8 !important;
  text-align: left !important;
  padding-top: 8px !important;
  padding-bottom: 2px !important;
}

/* Disable legacy conflicting heights / overflows */
body.mf-approved-design .mf514-chat-pane :is(.mf631-emoji-panel, .mf514-emoji, .mf-chat-image-panel) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 7. CORNER DOCK BADGE (MINIMIZED CHAT) */
.mf-chat-dock-badge {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 920 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s !important;
}

.mf-chat-dock-inner {
  background: linear-gradient(135deg, #002B66 0%, #001A40 100%) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 43, 102, 0.35), 0 0 0 2px #FFC400 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.mf-chat-dock-badge:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 30px rgba(0, 43, 102, 0.45) !important;
}

.mf-chat-dock-icon {
  font-size: 16px !important;
}

.mf-chat-dock-badge-pill {
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* General helper classes for desktop/mobile widget elements */
.mf-widget-mobile-only {
  display: none !important;
}
.mf-widget-desktop-only {
  display: block;
}
.mf-sidebar-mobile-close-btn {
  display: none;
}
.mf-chat-ctrl-btn.is-mobile-collapse {
  display: none;
}

/* ==========================================================================
   8. RESPONSIVE OPTIMIZATIONS (TABLET & MOBILE) V1.2
   ========================================================================== */

/* 1024px: Sidebar adapts cleanly, map maintains full visibility */
@media (max-width: 1024px) {
  body.mf-approved-design {
    --mf-sidebar-w: 68px !important;
  }
}

/* <= 900px: Tablet & Mobile Shell Layout */
@media (max-width: 900px) {
  /* Off-canvas Mobile Sidebar Drawer */
  body.mf-approved-design .mf514-grid {
    grid-template-columns: 1fr !important;
  }
  body.mf-approved-design .mf514-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 82vw !important;
    z-index: 1500 !important;
    background: #002B66 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.mf-sidebar-mobile-open .mf514-sidebar {
    transform: translateX(0) !important;
  }
  .mf-sidebar-mobile-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 10 !important;
  }
  .mf-sidebar-drag-handle,
  .mf212-sidebar-toggle {
    display: none !important;
  }
  .mf-mobile-drawer-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 20, 50, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 1450 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }
  body.mf-sidebar-mobile-open .mf-mobile-drawer-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.mf-sidebar-mobile-open {
    overflow: hidden !important;
  }

  /* Map Pane & Padding */
  body.mf-approved-design .mf514-map-pane {
    padding: 12px 14px 68px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Compact Map Toolbar */
  .mf-compact-map-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding: 0 2px !important;
    min-height: 0 !important;
  }
  .mf-compact-map-title-wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .mf-approved-workspace-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #002B66 !important;
    line-height: 1.15 !important;
  }
  .mf-approved-workspace-copy {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }
  .mf-compact-route-nav,
  .mf422-live-header-button {
    display: none !important;
  }
  .mf-tool-compact-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  }

  /* Relocated 2-Column Weather & Fleet Summary Grid (Above Map) */
  .mf-workspace-map-overlay-widgets {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }
  .mf-workspace-map-overlay-widgets .mf-widget-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: 0 2px 6px rgba(0, 43, 102, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    min-height: 76px !important;
  }
  .mf-widget-weather-header,
  .mf-widget-fleet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .mf-widget-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
  }
  .mf-widget-weather-art-icon,
  .mf-widget-fleet-art-icon {
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .mf-widget-desktop-only {
    display: none !important;
  }
  .mf-widget-mobile-only {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 4px !important;
  }
  .mf-compact-city-title,
  .mf-compact-fleet-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
  }
  .mf-compact-weather-sub,
  .mf-compact-fleet-sub {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
  }

  /* Live Map Wrap: Clean, rounded, fully visible canvas */
  body.mf-approved-design .mf514-map-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(280px, 42vh, 420px) !important;
    min-height: 260px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 3px 12px rgba(0, 43, 102, 0.06) !important;
    margin-bottom: 12px !important;
  }
  .mf215-map-driver-splitter {
    display: none !important;
  }

  /* Driver List Feed Accordion */
  .mf3306-feed {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 43, 102, 0.04) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
  }
  .mf3306-feed-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    background: #ffffff !important;
  }
  .mf3306-feed-title b {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }
  .mf3306-feed-title small {
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }
  .mf-fleet-accordion-chevron {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #475569 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: transform 0.2s ease !important;
    cursor: pointer !important;
  }
  .mf3306-feed.is-collapsed .mf-fleet-accordion-chevron {
    transform: rotate(-90deg) !important;
  }
  .mf3306-feed.is-collapsed .mf3306-summary,
  .mf3306-feed.is-collapsed .mf3306-toolbar,
  .mf3306-feed.is-collapsed .mf3306-list,
  .mf3306-feed.is-collapsed .mf3306-empty,
  .mf3306-feed.is-collapsed .mf3306-loadmore {
    display: none !important;
  }
}

/* <= 768px: Mobile Chat Bottom Dock & Slide-up Sheet */
@media (max-width: 768px) {
  /* Pinned Bottom Dock Bar */
  .mf-unified-chat-dock {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 48px !important;
    background: #002B66 !important;
    z-index: 1200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #144d93 !important;
    box-shadow: 0 -3px 12px rgba(0, 43, 102, 0.2) !important;
    cursor: pointer !important;
    user-select: none !important;
    transform: none !important;
  }
  .mf-unified-chat-dock .mf-chat-dock-inner {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .mf-unified-chat-dock .mf-dock-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
  }
  .mf-unified-chat-dock .mf-dock-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #bfdbfe !important;
    font-size: 13px !important;
  }
  .mf-unified-chat-dock:hover {
    background: #001f4d !important;
    transform: none !important;
  }

  body.mf-mobile-chat-open .mf-unified-chat-dock {
    display: none !important;
  }

  /* Mobile Slide-up Bottom Sheet Chat */
  body.mf-approved-design .mf514-chat-pane.mf-flexible-floating-chat {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 12px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 12px) !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 1600 !important;
    box-shadow: 0 -8px 30px rgba(0, 20, 50, 0.35) !important;
    transform: translateY(105%) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    pointer-events: none !important;
  }
  body.mf-mobile-chat-open .mf514-chat-pane.mf-flexible-floating-chat {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Chat header adjustments for mobile */
  .mf-chat-resizer,
  .mf-floating-chat-drag-indicator,
  .mf-chat-ctrl-btn.is-minimize,
  .mf-chat-ctrl-btn.is-maximize {
    display: none !important;
  }
  .mf-chat-ctrl-btn.is-mobile-collapse {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
    margin-right: 4px !important;
  }
}

/* Desktop Minimized Floating Corner Pill (Reference Thumbnail 4: ย่อ MF Chat มุมล่างขวา) */
@media (min-width: 769px) {
  .mf-unified-chat-dock {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background: #002B66 !important;
    border: 2px solid #FFC400 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(0, 43, 102, 0.3) !important;
    padding: 6px 16px !important;
    cursor: pointer !important;
    z-index: 1500 !important;
    transition: transform 0.18s, background 0.18s !important;
  }
  .mf-unified-chat-dock:hover {
    transform: translateY(-2px) scale(1.03) !important;
    background: #001a40 !important;
  }
  .mf-unified-chat-dock .mf-chat-dock-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
  }
  .mf-unified-chat-dock .mf-dock-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .mf-unified-chat-dock .mf-chat-dock-label {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }
  .mf-unified-chat-dock .mf-chat-dock-badge-pill {
    background: #FFC400 !important;
    color: #002B66 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }
  .mf-unified-chat-dock .mf-dock-right .mf-dock-action-text {
    display: none !important;
  }
}

/* V2.0 Clean Room Tabs matching Design Reference Panel 1-3 */
body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-modes {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  min-height: 60px !important;
  height: 60px !important;
  max-height: 60px !important;
  flex: 0 0 60px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 4px 2px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #1e293b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}

body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-mode:hover {
  background: #f1f5f9 !important;
}

body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-mode.is-active {
  background: #FFC400 !important;
  color: #002B66 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 8px rgba(255, 196, 0, 0.4) !important;
}

body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-mode .mf-web-chat-mode-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  display: block !important;
}

body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-mode b {
  font-size: 11px !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  display: block !important;
}

body.mf-desktop-shell-body .mf-flexible-floating-chat .mf602-mode .mf-tab-badge-dot {
  position: absolute !important;
  top: 4px !important;
  right: 12px !important;
  width: 7px !important;
  height: 7px !important;
  background: #ef4444 !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
}


/* Mobile drawer keeps readable labels even when desktop sidebar was collapsed. */
@media (max-width:700px) {
  body.mf-approved-design .mf514-sidebar .mf514-menu {
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;padding:52px 14px 20px!important;
  }
  body.mf-approved-design .mf514-sidebar .mf514-menu > :is(button,a) {
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;width:100%!important;min-width:0!important;
    min-height:88px!important;margin:0!important;padding:10px 6px!important;gap:7px!important;
  }
  body.mf-approved-design .mf514-sidebar .mf514-menu > :is(button,a) b {
    display:block!important;font-size:14px!important;line-height:1.35!important;
    white-space:normal!important;text-align:center!important;color:inherit!important;
  }
  body.mf-approved-design .mf514-sidebar .mf-web-icon-tile {flex-shrink:0!important;}
}

/* Shared map controls: one action per tool and a separate toolbar below the map. */
body.mf-approved-design .mf514-map-wrap {overflow:visible!important;margin-bottom:126px!important;}
body.mf-approved-design .mf514-map-wrap .mf-map-bottom-bar {
  top:calc(100% + 8px)!important;bottom:auto!important;left:0!important;right:0!important;
  width:100%!important;display:flex!important;flex-direction:column!important;gap:8px!important;
  align-items:stretch!important;z-index:20!important;
}
body.mf-approved-design .mf-map-bottom-tabs {
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border-radius:14px!important;gap:4px!important;padding:6px!important;min-width:0!important;
}
body.mf-approved-design .mf-map-bottom-tab {
  min-width:0!important;min-height:44px!important;padding:6px 4px!important;
  white-space:normal!important;word-break:normal!important;line-height:1.35!important;border-radius:10px!important;
}
body.mf-approved-design .mf-map-bottom-tools {
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
  border-radius:14px!important;padding:6px!important;gap:6px!important;min-width:0!important;
}
body.mf-approved-design .mf-map-bottom-tools > button {
  min-height:44px!important;flex-shrink:0!important;white-space:nowrap!important;
}
body.mf-approved-design .mf-map-bottom-icon-btn {width:44px!important;height:44px!important;}
body.mf-approved-design .mf514-map-wrap .mf30-map-actions,
body.mf-approved-design .mf514-map-wrap .mf21-side-tools [data-mf21-mode="route"],
body.mf-approved-design .mf514-map-wrap .mf21-side-tools [data-mf21-mode="fleet"],
body.mf-approved-design .mf514-map-wrap .mf21-side-tools [data-mf21-mode="live"] {display:none!important;}
body.mf-approved-design .mf514-map-wrap .leaflet-top.leaflet-left {top:10px!important;left:10px!important;}
body.mf-approved-design .mf514-map-wrap .leaflet-control-zoom {margin:0!important;}
body.mf-approved-design .mf514-map-wrap .leaflet-control-zoom a {width:44px!important;height:44px!important;line-height:44px!important;}
body.mf-approved-design .mf514-map-wrap .mf21-side-tools {top:114px!important;left:10px!important;bottom:auto!important;gap:0!important;}
body.mf-approved-design .mf514-map-wrap .mf21-map-tool {width:44px!important;height:44px!important;margin:0!important;}
body.mf-approved-design .mf514-map-wrap .mf514-locate {top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;width:44px!important;height:44px!important;}
@media(max-width:700px) {
  body.mf-approved-design .mf514-map-wrap {margin-bottom:180px!important;}
  body.mf-approved-design .mf-map-bottom-tools {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body.mf-approved-design .mf-map-bottom-tools > button {width:100%!important;min-width:0!important;margin:0!important;padding:6px!important;}
  body.mf-approved-design .mf-map-bottom-tools > :is(.mf-map-bottom-btn,.mf-reset-layout-btn) {grid-column:span 2!important;}
}
body.mf-approved-design .mf514-map-wrap .mf514-locate {position:absolute!important;} @media(max-width:700px){body.mf-approved-design .mf514-map-wrap{margin-bottom:208px!important;}}

/* Consistent shared vector menu icons, with visible action labels. */
body.mf-approved-design .mf-map-bottom-bar .mf-map-menu-symbol {
  display:grid!important;place-items:center!important;width:32px!important;height:32px!important;
  border-radius:10px!important;background:#edf3ff!important;flex-shrink:0!important;
}
body.mf-approved-design .mf-map-menu-symbol img {width:23px!important;height:23px!important;display:block!important;}
body.mf-approved-design .mf-map-bottom-bar .mf-map-menu-label {font-size:12px!important;line-height:1.35!important;font-weight:700!important;}
body.mf-approved-design .mf-map-bottom-tab {display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;}
body.mf-approved-design .mf-map-bottom-tab.is-active .mf-map-menu-symbol {background:#fff!important;}
body.mf-approved-design .mf-map-bottom-tools > button {
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;min-height:72px!important;width:auto!important;padding:8px 12px!important;border-radius:12px!important;
}
body.mf-approved-design .mf-map-bottom-tools .mf-reset-layout-btn {background:#002b66!important;color:#ffc400!important;border:1px solid #ffc400!important;}
body.mf-approved-design .mf-map-bottom-tools .mf-reset-layout-btn .mf-map-menu-symbol {background:#fff2bd!important;}
body.mf-approved-design .mf514-map-wrap {margin-bottom:160px!important;}
@media(max-width:700px){
  body.mf-approved-design .mf-map-bottom-tab {flex-direction:column!important;min-height:76px!important;gap:4px!important;padding:6px 2px!important;}
  body.mf-approved-design .mf-map-bottom-tools {grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body.mf-approved-design .mf-map-bottom-tools > :is(.mf-map-bottom-btn,.mf-reset-layout-btn) {grid-column:auto!important;}
  body.mf-approved-design .mf-map-bottom-tools > button {width:100%!important;min-height:72px!important;padding:8px 4px!important;}
  body.mf-approved-design .mf514-map-wrap {margin-bottom:274px!important;}
}

body.mf-approved-design .mf-map-menu-symbol svg {width:24px!important;height:24px!important;color:#003da5!important;} body.mf-approved-design .mf-reset-layout-btn .mf-map-menu-symbol {background:transparent!important;} body.mf-approved-design .mf-reset-layout-btn .mf-map-menu-symbol svg {color:#ffc400!important;}

/* MF Chat: compact message bubbles and coherent line-icon navigation. */
body.mf-approved-design .mf514-chat-pane {border-radius:22px!important;border:1px solid #dce5f3!important;box-shadow:0 16px 50px #002b6626!important;background:#f6f8fc!important;overflow:hidden!important;}
body.mf-approved-design .mf-floating-chat-titlebar {min-height:60px!important;background:#002b66!important;padding:10px 14px!important;}
body.mf-approved-design .mf-floating-chat-drag-indicator {display:none!important;}
body.mf-approved-design .mf-chat-line-icon {width:22px!important;height:22px!important;display:block!important;flex-shrink:0!important;}
body.mf-approved-design .mf602-modes {display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;padding:8px!important;background:#fff!important;flex-shrink:0!important;}
body.mf-approved-design .mf602-mode {min-width:0!important;min-height:64px!important;border-radius:14px!important;padding:6px 2px!important;display:flex!important;flex-direction:column!important;gap:5px!important;align-items:center!important;justify-content:center!important;}
body.mf-approved-design .mf602-mode.is-active {background:#ffc400!important;color:#002b66!important;box-shadow:0 3px 9px #ffc40040!important;}
body.mf-approved-design .mf-web-chat-mode-icon {width:30px!important;height:30px!important;display:grid!important;place-items:center!important;background:#edf3ff!important;border-radius:10px!important;color:#003da5!important;}
body.mf-approved-design .mf602-mode b {font-size:12px!important;line-height:1.3!important;}
body.mf-approved-design .mf514-messages {padding:14px 12px 54px!important;background:#f6f8fc!important;gap:12px!important;min-height:0!important;}
body.mf-approved-design .mf514-message {background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0 0 12px!important;gap:8px!important;align-items:flex-start!important;}
body.mf-approved-design .mf514-message-avatar {width:32px!important;height:32px!important;font-size:12px!important;flex-shrink:0!important;border:1px solid #dbe5f5!important;}
body.mf-approved-design .mf514-message > div {padding:10px 12px!important;border-radius:16px 16px 16px 4px!important;background:#fff!important;border:1px solid #e0e7f2!important;box-shadow:0 2px 6px #002b6605!important;min-width:0!important;max-width:calc(100% - 40px)!important;}
body.mf-approved-design .mf514-message.is-mine > div {background:#003da5!important;color:#fff!important;border-color:#003da5!important;border-radius:16px 16px 4px 16px!important;}
body.mf-approved-design .mf514-message.is-mine > div :is(b,p,small,em) {color:#fff!important;}
body.mf-approved-design .mf514-message p {margin:5px 0!important;line-height:1.55!important;font-size:14px!important;overflow-wrap:anywhere!important;}
body.mf-approved-design .mf514-message > div small {font-size:10px!important;opacity:.7!important;}
body.mf-approved-design .mf514-composer {display:grid!important;grid-template-columns:repeat(5,44px) minmax(0,1fr) 44px!important;gap:5px!important;padding:8px 10px!important;}
body.mf-approved-design .mf-composer-action-btn,body.mf-approved-design .mf514-send {width:44px!important;height:44px!important;border-radius:14px!important;}
body.mf-approved-design .mf-composer-action-btn {background:#f0f4fa!important;color:#4b6080!important;}
body.mf-approved-design .mf514-send {background:#003da5!important;border-radius:50%!important;}
body.mf-approved-design .mf-composer-text-input {height:44px!important;font-size:14px!important;width:100%!important;}
body.mf-approved-design .mf-chat-unread-badge-pill {font-size:11px!important;padding:7px 12px!important;max-width:160px!important;}
@media(max-width:700px){
 body.mf-approved-design .mf514-composer {grid-template-columns:repeat(5,minmax(0,1fr)) 44px!important;gap:4px!important;}
 body.mf-approved-design .mf-composer-text-input {grid-row:2!important;grid-column:1 / span 5!important;}
 body.mf-approved-design .mf514-send {grid-row:2!important;grid-column:6!important;}
 body.mf-approved-design .mf-composer-action-btn {justify-self:center!important;}
}
body.mf-approved-design .mf514-composer{grid-template-columns:repeat(5,minmax(0,1fr)) 44px!important;} body.mf-approved-design .mf-composer-text-input{grid-row:2!important;grid-column:1 / span 5!important;} body.mf-approved-design .mf514-send{grid-row:2!important;grid-column:6!important;} body.mf-approved-design .mf-composer-action-btn{justify-self:center!important;}
body.mf-approved-design .mf514-composer{height:auto!important;min-height:112px!important;grid-template-rows:44px 44px!important;} body.mf-approved-design .mf514-chat-pane{min-height:0!important;} body.mf-approved-design .mf-composer-action-btn .mf6863-icon,body.mf-approved-design .mf514-send .mf6863-icon{width:22px!important;height:22px!important;}
body.mf-approved-design .mf514-chat-pane.mf-flexible-floating-chat{min-height:0!important;min-width:0!important;} body.mf-approved-design .mf514-chat-pane .mf514-composer .mf-composer-text-input{grid-row:1!important;} body.mf-approved-design .mf514-chat-pane .mf514-composer .mf514-send{grid-row:1!important;} body.mf-approved-design .mf514-chat-pane .mf514-composer .mf-composer-action-btn{grid-row:2!important;}
body.mf-approved-design .mf514-chat-pane .mf601-new-badge{bottom:124px!important;right:14px!important;font-size:11px!important;padding:7px 11px!important;max-width:160px!important;}

/* ==========================================================================
   MISTER FAST CHAT IMAGE & STICKER TRANSPARENT BACKGROUND FIX V2.0.2
   Scope: Media & Sticker Messages only. Preserves original Text Bubbles.
   ========================================================================== */
/* Remove blue/white background, border, box-shadow and padding from media message bubble wrappers */
body.mf-approved-design .mf514-message > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]),
body.mf-approved-design .mf514-message.is-mine > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]),
body.mf-approved-design .mf514-message.is-media > div,
body.mf-approved-design .mf514-message.is-sticker > div,
body.mf-approved-design .mf514-message[data-mf-msg-type="sticker"] > div,
body.mf-approved-design .mf514-message[data-mf-msg-type="image"] > div,
body.mf-approved-design .mf514-message > .mf-chat-sticker-bubble,
body.mf-approved-design .mf514-message.is-mine > .mf-chat-sticker-bubble,
body.mf-approved-design .mf514-message > .mf-msg-media-wrap,
body.mf-approved-design .mf514-message.is-mine > .mf-msg-media-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure sender name is visible in media messages (override white text in .is-mine) */
body.mf-approved-design .mf514-message > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > b,
body.mf-approved-design .mf514-message.is-mine > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > b,
body.mf-approved-design .mf514-message.is-media > div > b,
body.mf-approved-design .mf514-message.is-sticker > div > b {
  color: #003da5 !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

body.mf-approved-design .mf514-message > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > b em,
body.mf-approved-design .mf514-message.is-mine > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > b em,
body.mf-approved-design .mf514-message.is-media > div > b em,
body.mf-approved-design .mf514-message.is-sticker > div > b em {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Ensure timestamp & checkmarks are visible and aligned in media messages */
body.mf-approved-design .mf514-message > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > small,
body.mf-approved-design .mf514-message.is-mine > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > small,
body.mf-approved-design .mf514-message.is-media > div > small,
body.mf-approved-design .mf514-message.is-sticker > div > small {
  color: #64748b !important;
  font-size: 10px !important;
  display: block !important;
  margin-top: 4px !important;
  opacity: 1 !important;
}

body.mf-approved-design .mf514-message.is-mine > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) > small,
body.mf-approved-design .mf514-message.is-mine.is-media > div > small,
body.mf-approved-design .mf514-message.is-mine.is-sticker > div > small {
  text-align: right !important;
}

body.mf-approved-design .mf514-message > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) .mf-msg-checkmarks,
body.mf-approved-design .mf514-message.is-mine > div:has(.mf-chat-sticker-bubble, .mf-chat-sticker-img, .mf598-image-card, .mf-msg-media-wrap, .mf55-message-image, [data-mf-msg-type="sticker"], [data-mf-msg-type="image"]) .mf-msg-checkmarks {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

/* Sticker Bubble & Image styling: 100% transparent background, die-cut alpha preservation */
body.mf-approved-design .mf514-message .mf-chat-sticker-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px 0 !important;
  display: inline-block !important;
  line-height: 1 !important;
}

body.mf-approved-design .mf514-message .mf-chat-sticker-img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 140px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 43, 102, 0.12)) !important;
  transition: transform 0.15s ease !important;
}

body.mf-approved-design .mf514-message .mf-chat-sticker-img:hover {
  transform: scale(1.05) !important;
}

/* Photo / Image Bubble styling: No blue box, preserve natural aspect ratio */
body.mf-approved-design .mf514-message .mf598-image-card,
body.mf-approved-design .mf514-message .mf-msg-media-wrap,
body.mf-approved-design .mf514-message a:has(.mf55-message-image) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px 0 !important;
  display: block !important;
  max-width: 260px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.mf-approved-design .mf514-message .mf598-image-card img,
body.mf-approved-design .mf514-message .mf-msg-media-wrap img,
body.mf-approved-design .mf514-message .mf55-message-image {
  background: transparent !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0, 43, 102, 0.1) !important;
  max-width: 100% !important;
  max-height: 280px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

body.mf-approved-design .mf514-message .mf598-image-card > span {
  display: block !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-align: center !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border-radius: 0 0 10px 10px !important;
}