/* MINI Chat Composer recovery: preserve existing form, handlers, and visual alignment */
@media (max-width: 767px) {
  body[data-mf-workspace="chat"] .mf63451-tools {
    display: none !important;
  }
  body.mf-mini-keyboard .mf-mini-bottom-nav {
    display: none !important;
  }
  body.mf-mini-keyboard[data-mf-workspace="chat"] .mf514-chat-pane {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ==========================================================================
   PAGE 04: CHAT COMPOSER MEDIA TOOLS V1.0
   ========================================================================== */

/* Strict Composer Layout: [ + ] [ input ] [ send ] */
body[data-mf-workspace="chat"] .mf514-composer.mf63451-composer {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  z-index: 760 !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Pending Message Preview inside Message History (.mf514-messages) */
.mf514-message.is-pending {
  align-self: flex-end !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  margin: 6px 0 !important;
  animation: mfBubbleSlideIn 0.2s ease-out !important;
}

@keyframes mfBubbleSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-pending-image-bubble {
  position: relative !important;
  max-width: 220px !important;
  width: 220px !important;
  background: #003DA5 !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 3px 12px rgba(0, 61, 165, 0.25) !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
}

.mf-pending-remove-btn {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

.mf-pending-remove-btn:active {
  transform: scale(0.9) !important;
  background: rgba(220, 38, 38, 0.85) !important;
}

.mf-pending-img {
  width: 100% !important;
  max-height: 220px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

.mf-pending-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 5px !important;
  font-size: 10.5px !important;
  color: #E0E7FF !important;
  gap: 6px !important;
}

.mf-pending-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 130px !important;
}

.mf-pending-size {
  color: #BFDBFE !important;
  flex: 0 0 auto !important;
}

.mf-pending-status {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin-top: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #FEF08A !important;
}

.mf-pending-status.is-error {
  color: #FECACA !important;
}

/* ==========================================================================
   MEDIA PREVIEW / OVERSIZED ICON RECOVERY & SAFETY GUARDS
   ========================================================================== */

/* Hide any legacy detached preview container */
.mf632-upload-preview,
[data-mf632-upload-preview] {
  display: none !important;
}

/* Phase 2: Strict media icon size limits inside chat & previews */
body.mf-mini .mf598-file-card span:first-child,
body.mf-mini .mf600-media-unavailable span:first-child,
body.mf-mini .mf598-expired-media span:first-child,
body.mf-mini .chat-media-fallback .mf-fallback-icon,
body.mf-mini .mf-msg-content .mf-serv-icon img,
body.mf-mini .mf-msg-content .mf-quick-icon img {
  max-width: 32px !important;
  max-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* Phase 3: Image Message Card Rendering */
body.mf-mini .mf598-image-card {
  display: block !important;
  max-width: 220px !important;
  width: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #D8E0EC !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.mf-mini .mf598-image-card img {
  display: block !important;
  max-width: 220px !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px 10px 0 0 !important;
  background: #F1F5F9 !important;
  margin: 0 auto !important;
}

body.mf-mini .mf598-image-card > span {
  display: block !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #003DA5 !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

/* Phase 4: Failed Image Fallback */
body.mf-mini .mf600-media-unavailable,
body.mf-mini .chat-media-fallback {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 220px !important;
  width: 220px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  border: 1px dashed #CBD5E1 !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  box-sizing: border-box !important;
}

body.mf-mini .mf600-media-unavailable b {
  font-size: 11px !important;
  color: #1E293B !important;
  display: block !important;
}

body.mf-mini .mf600-media-unavailable small {
  font-size: 9.5px !important;
  color: #64748B !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Phase 5: File Message Card */
body.mf-mini .mf598-file-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 240px !important;
  min-width: 180px !important;
  padding: 8px 10px !important;
  border: 1px solid #D8E0EC !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  color: #0F172A !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

body.mf-mini .mf598-file-card b {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  color: #0F172A !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mf-mini .mf598-file-card small {
  font-size: 9.5px !important;
  color: #003DA5 !important;
  font-weight: 600 !important;
  display: block !important;
}

/* Global Safety Guards */
body.mf-mini .chat-media-preview img,
body.mf-mini .chat-attachment-card img,
body.mf-mini .chat-media-fallback img,
body.mf-mini .mf-pending-img {
  max-width: 220px !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Ride Request & Driver Status Constraints */
body.mf-mini .mf-ride-status-card,
body.mf-mini .mf-request-status-card,
body.mf-mini .mf-driver-search-status,
body.mf-mini .mf-selected-driver-status,
body.mf-mini .mf-status-card,
body.mf-mini .mf6343-ride-status,
body.mf-mini [data-mf-request-status] {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 16px rgba(0, 61, 165, 0.08) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.mf-mini .mf-status-illustration,
body.mf-mini .mf-request-status-illustration,
body.mf-mini .mf-ride-status-illustration,
body.mf-mini [data-mf-status-illustration] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  max-width: 90px !important;
  max-height: 90px !important;
  flex: 0 0 64px !important;
}

body.mf-mini .mf-status-illustration img,
body.mf-mini .mf-request-status-illustration img,
body.mf-mini [data-mf-status-illustration] img:first-child {
  width: 56px !important;
  height: 56px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  display: block !important;
}

body.mf-mini .mf-status-check,
body.mf-mini .mf-check-badge,
body.mf-mini .mf-status-illustration img:last-child:not(:first-child) {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain !important;
}

/* Composer Row: [ + ] [ input ] [ send ] */
body[data-mf-workspace="chat"] .mf63451-input-row.mf-mini-composer-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  height: 40px !important;
  box-sizing: border-box !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1. Left: [+] Attachment Button */
body[data-mf-workspace="chat"] .mf-composer-plus-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid #D8E0EC !important;
  background: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #003DA5 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

body[data-mf-workspace="chat"] .mf-composer-plus-btn.is-active,
body[data-mf-workspace="chat"] .mf-composer-plus-btn:active {
  background: #EFF6FF !important;
  border-color: #003DA5 !important;
  transform: rotate(45deg) !important;
}

/* 2. Center: Input Wrapper */
body[data-mf-workspace="chat"] .mf-composer-input-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-mf-workspace="chat"] .mf-composer-input-wrap input[name="message"] {
  width: 100% !important;
  height: 40px !important;
  border-radius: 20px !important;
  border: 1.5px solid #D8E0EC !important;
  background: #FFFFFF !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: #0F172A !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: border-color 0.15s ease !important;
}

body[data-mf-workspace="chat"] .mf-composer-input-wrap input[name="message"]:focus {
  border-color: #003DA5 !important;
  box-shadow: 0 0 0 2px rgba(0, 61, 165, 0.1) !important;
}

/* 3. Right: Send Button — Pure 40x40 Blue Circle with White Icon */
body[data-mf-workspace="chat"] .mf514-send.mf63451-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #003DA5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 61, 165, 0.3) !important;
  position: static !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body[data-mf-workspace="chat"] .mf514-send.mf63451-send::before,
body[data-mf-workspace="chat"] .mf514-send.mf63451-send::after {
  display: none !important;
  content: none !important;
}

body[data-mf-workspace="chat"] .mf514-send.mf63451-send:active {
  transform: scale(0.94) !important;
}

body[data-mf-workspace="chat"] .mf-send-svg-icon {
  width: 20px !important;
  height: 20px !important;
  fill: #FFFFFF !important;
  display: block !important;
  margin: auto !important;
  transform: translate(1px, 0) !important;
}

/* ==========================================================================
   ATTACHMENT TRAY
   ========================================================================== */
.mf-mini-attachment-tray {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0, 61, 165, 0.12) !important;
  padding: 10px 14px !important;
  margin: 0 8px 8px !important;
  box-sizing: border-box !important;
  animation: mfTraySlideUp 0.18s ease-out !important;
  z-index: 770 !important;
}

@keyframes mfTraySlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-mini-attachment-tray[hidden] {
  display: none !important;
}

.mf-attachment-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
}

.mf-attachment-option:active {
  background: #F1F5F9 !important;
  transform: scale(0.95) !important;
}

.mf-attachment-icon-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #EFF6FF !important;
  border: 1.5px solid #DBEAFE !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease !important;
}

.mf-attachment-option:active .mf-attachment-icon-circle {
  background: #FFC400 !important;
  border-color: #FFC400 !important;
}

.mf-attachment-icon-circle img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.mf-attachment-option span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

/* ==========================================================================
   MEDIA / LOCATION / FILE PREVIEW MODAL
   ========================================================================== */
.mf-mini-media-preview-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}

.mf-mini-media-preview-modal[hidden] {
  display: none !important;
}

.mf-media-preview-card {
  width: 100% !important;
  max-width: 360px !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #E2E8F0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.mf-media-preview-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.mf-media-preview-header b {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.mf-preview-close-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #E2E8F0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}

.mf-media-preview-body {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

.mf-preview-img {
  width: 100% !important;
  max-height: 200px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #0F172A !important;
}

.mf-preview-info-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
}

.mf-preview-info-box img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  flex: 0 0 32px !important;
}

.mf-preview-info-text b {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #003DA5 !important;
  display: block !important;
}

.mf-preview-info-text small {
  font-size: 11px !important;
  color: #64748B !important;
  display: block !important;
  margin-top: 2px !important;
}

.mf-media-preview-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

.mf-media-preview-actions button {
  flex: 1 !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.mf-btn-secondary {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

.mf-btn-primary {
  background: #003DA5 !important;
  border: 0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 61, 165, 0.3) !important;
}

.mf-btn-primary:active {
  background: #002B78 !important;
}

/* Chat bubble media & location attachments */
.mf-mini .mf-msg-media-img {
  max-width: 100% !important;
  max-height: 200px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  display: block !important;
  margin-top: 4px !important;
  cursor: pointer !important;
}

.mf-mini .mf-msg-location-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  background: #EFF6FF !important;
  border-radius: 10px !important;
  border: 1px solid #DBEAFE !important;
  margin-top: 4px !important;
  text-decoration: none !important;
  color: inherit !important;
}

.mf-mini .mf-msg-file-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  background: #F8FAFC !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  margin-top: 4px !important;
  text-decoration: none !important;
  color: inherit !important;
}