/* =============================================================================
   SMJ Chat — Marketplace Chat UI  v8.0
   Complete rewrite: FAB pattern, bottom-right floating panel, no overlap.
   All colors via CSS variables from design-system.css.
   ============================================================================= */

/* ════════════════════════════════════════════════════════════════════════════
   1. CHAT OPEN BUTTON (inline on listing page — inside contact sidebar)
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-widget { position: relative; }

.smj-chat-open-btn {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  width           : 100%;
  padding         : 13px 20px;
  background      : var(--smj-btn-color);
  color           : var(--smj-white, #fff);
  border          : none;
  border-radius   : var(--smj-radius-sm, 8px);
  font-size       : 15px;
  font-weight     : 600;
  cursor          : pointer;
  transition      : background .18s ease, transform .18s ease, box-shadow .18s ease;
  justify-content : center;
  font-family     : var(--smj-font);
  box-shadow      : 0 2px 8px var(--smj-primary-alpha-20, rgba(26,111,181,.20));
}
.smj-chat-open-btn:hover {
  background  : var(--smj-btn-color-dk);
  transform   : translateY(-1px);
  box-shadow  : 0 4px 14px var(--smj-primary-alpha-25, rgba(26,111,181,.25));
}
.smj-chat-open-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   2. FLOATING CHAT PANEL — bottom-right, never overlaps content
      • Desktop: 400×560px panel, 20px from edges
      • Tablet:  360×500px, 16px from edges
      • Mobile:  full-width bottom sheet, 0 horizontal margin
   ════════════════════════════════════════════════════════════════════════════ */

/* Overlay — dimming layer behind modal */
.smj-chat-overlay {
  display          : none;
  position         : fixed;
  inset            : 0;
  background       : rgba(0,0,0,.40);
  z-index          : 9998;
  backdrop-filter  : blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity          : 0;
  transition       : opacity .22s ease;
}
.smj-chat-overlay--visible {
  display : block;
  opacity : 1;
}

/* Main panel */
.smj-chat-modal {
  display          : none;            /* hidden until .smj-chat-modal--open */
  position         : fixed;
  bottom           : 20px;            /* safe margin from bottom edge */
  right            : 20px;            /* safe margin from right edge */
  width            : 400px;
  max-width        : calc(100vw - 40px);
  height           : 560px;
  max-height       : calc(100vh - 100px);
  z-index          : 9999;
  background       : var(--smj-card-bg, #fff);
  border-radius    : 18px;            /* fully rounded — no bottom-flush */
  box-shadow       : 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  overflow         : hidden;
  flex-direction   : column;
  border           : 1px solid var(--smj-border, #e2e8f0);
  /* Will animate via transform */
  transform        : translateY(20px) scale(.97);
  opacity          : 0;
  transition       : transform .24s cubic-bezier(.34,1.56,.64,1),
                     opacity   .22s ease;
}

/* Open state — animate in */
.smj-chat-modal--open {
  display   : flex;
  transform : translateY(0) scale(1);
  opacity   : 1;
  animation : smjChatOpen .26s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes smjChatOpen {
  from { transform: translateY(24px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Minimized state */
.smj-chat-modal--minimized {
  height    : 56px !important;
  min-height: 56px;
  overflow  : hidden;
}

.smj-chat-modal-inner {
  display        : flex;
  flex-direction : column;
  height         : 100%;
  width          : 100%;
  overflow       : hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. CHAT HEADER
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-header {
  display          : flex;
  align-items      : center;
  gap              : 10px;
  padding          : 14px 16px;
  background       : var(--smj-btn-color);
  color            : var(--smj-white, #fff);
  flex-shrink      : 0;
  cursor           : pointer;           /* click header to minimize */
  user-select      : none;
  border-radius    : 18px 18px 0 0;
}
.smj-chat-header-avatar {
  width            : 36px;
  height           : 36px;
  border-radius    : 50%;
  background       : rgba(255,255,255,.2);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  font-size        : 16px;
  flex-shrink      : 0;
}
.smj-chat-header-avatar svg {
  width            : 18px;
  height           : 18px;
  flex-shrink      : 0;
  color            : currentColor;
}
.smj-chat-header-info { flex: 1; overflow: hidden; }
.smj-chat-header-title {
  font-weight      : 700;
  font-size        : 14px;
  white-space      : nowrap;
  overflow         : hidden;
  text-overflow    : ellipsis;
  font-family      : var(--smj-font);
}
.smj-chat-header-sub {
  display          : flex;
  align-items      : center;
  gap              : 5px;
  margin-top       : 2px;
  font-size        : 11.5px;
  opacity          : .85;
}

/* Header action buttons */
.smj-chat-header-actions {
  display          : flex;
  align-items      : center;
  gap              : 4px;
  flex-shrink      : 0;
}
.smj-chat-header-btn {
  background       : rgba(255,255,255,.15);
  border           : none;
  color            : var(--smj-white, #fff);
  width            : 28px;
  height           : 28px;
  border-radius    : 50%;
  cursor           : pointer;
  font-size        : 14px;
  line-height      : 1;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  transition       : background .15s ease;
  flex-shrink      : 0;
}
.smj-chat-header-btn:hover { background: rgba(255,255,255,.28); }
.smj-chat-close { /* legacy alias — same style */ }

/* ════════════════════════════════════════════════════════════════════════════
   4. STATUS DOT & CONNECTING ANIMATION
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-status-dot {
  width         : 7px;
  height        : 7px;
  border-radius : 50%;
  background    : rgba(255,255,255,.45);
  flex-shrink   : 0;
  display       : inline-block;
  position      : relative;
}
/* Pulse animation while connecting */
.smj-chat-status-dot.smj-connecting {
  background  : #fbbf24;
  animation   : smjPulse 1.2s ease-in-out infinite;
}
.smj-chat-status-dot.smj-online {
  background  : #4ade80;
  animation   : none;
}
.smj-chat-status-dot.smj-offline {
  background  : rgba(255,255,255,.35);
  animation   : none;
}
@keyframes smjPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}
.smj-chat-status-text { font-size: 11.5px; }

/* ════════════════════════════════════════════════════════════════════════════
   5. MESSAGES AREA
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-messages {
  flex           : 1;
  overflow-y     : auto;
  padding        : 14px 14px 8px;
  display        : flex;
  flex-direction : column;
  gap            : 4px;
  scroll-behavior: smooth;
  background     : var(--smj-surface, #f9fafb);
}
/* Subtle scrollbar */
.smj-chat-messages::-webkit-scrollbar { width: 4px; }
.smj-chat-messages::-webkit-scrollbar-track { background: transparent; }
.smj-chat-messages::-webkit-scrollbar-thumb { background: var(--smj-border, #e2e8f0); border-radius: 4px; }

/* ── Loading / empty states ─────────────────────────────────────────── */
.smj-chat-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 24px;
  color          : var(--smj-muted, #64748b);
  font-size      : 13px;
}
.smj-chat-loading::before {
  content        : '';
  display        : block;
  width          : 16px;
  height         : 16px;
  border         : 2px solid var(--smj-border, #e2e8f0);
  border-top-color: var(--smj-primary, #1a6fb5);
  border-radius  : 50%;
  animation      : smjSpin .7s linear infinite;
  flex-shrink    : 0;
}
@keyframes smjSpin { to { transform: rotate(360deg); } }

.smj-chat-empty-state {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 32px 20px;
  color          : var(--smj-muted, #64748b);
  text-align     : center;
  font-size      : 13px;
  flex           : 1;
}
.smj-chat-empty-state svg { width: 36px; height: 36px; opacity: .3; }

/* ════════════════════════════════════════════════════════════════════════════
   6. MESSAGE BUBBLES
   ════════════════════════════════════════════════════════════════════════════ */
.smj-bubble {
  display        : flex;
  align-items    : flex-end;
  gap            : 6px;
  max-width      : 88%;
  animation      : smjBubbleIn .18s ease both;
}
@keyframes smjBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.smj-bubble--mine  { align-self: flex-end;  flex-direction: row-reverse; }
.smj-bubble--theirs { align-self: flex-start; }

.smj-bubble-avatar {
  width         : 26px;
  height        : 26px;
  border-radius : 50%;
  object-fit    : cover;
  flex-shrink   : 0;
}
.smj-bubble-body {
  display        : flex;
  flex-direction : column;
  gap            : 2px;
  max-width      : 100%;
}
.smj-bubble-name {
  font-size      : 11px;
  color          : var(--smj-muted, #64748b);
  font-weight    : 600;
  padding-left   : 4px;
}
.smj-bubble--mine  .smj-bubble-body > div,
.smj-bubble--mine  .smj-bubble-body > p {
  background     : var(--smj-btn-color);
  color          : #fff;
  border-radius  : 16px 4px 16px 16px;
}
.smj-bubble--theirs .smj-bubble-body > div,
.smj-bubble--theirs .smj-bubble-body > p {
  background     : var(--smj-card-bg, #fff);
  color          : var(--smj-text, #1e293b);
  border-radius  : 4px 16px 16px 16px;
  border         : 1px solid var(--smj-border, #e2e8f0);
}
.smj-bubble-body > p {
  margin         : 0;
  padding        : 9px 13px;
  font-size      : 14px;
  line-height    : 1.45;
  word-break     : break-word;
}
.smj-bubble-time {
  font-size      : 10.5px;
  color          : var(--smj-muted, #64748b);
  padding        : 0 4px;
  align-self     : flex-end;
}
.smj-bubble--mine .smj-bubble-time { text-align: right; }
.smj-bubble-tick {
  font-size      : 11px;
  color          : var(--smj-muted, #64748b);
  padding-right  : 4px;
}
.smj-bubble-tick--seen { color: var(--smj-primary, #1a6fb5); }
.smj-bubble-img {
  max-width      : 180px;
  max-height     : 180px;
  border-radius  : 10px;
  object-fit     : cover;
  display        : block;
  cursor         : pointer;
}
.smj-bubble-img-link { display: block; }

/* ════════════════════════════════════════════════════════════════════════════
   7. SELLER SPLIT VIEW (buyer list + messages)
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-split {
  display        : flex;
  flex           : 1;
  overflow       : hidden;
}
.smj-chat-convos-panel {
  width          : 140px;
  min-width      : 120px;
  flex-shrink    : 0;
  border-right   : 1px solid var(--smj-border, #e2e8f0);
  display        : flex;
  flex-direction : column;
  overflow       : hidden;
  background     : var(--smj-surface, #f9fafb);
}
.smj-chat-convos-header {
  padding        : 9px 12px;
  font-size      : 11px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : .05em;
  color          : var(--smj-muted, #64748b);
  border-bottom  : 1px solid var(--smj-border, #e2e8f0);
  flex-shrink    : 0;
}
.smj-chat-convos-list { overflow-y: auto; flex: 1; }

.smj-convo-item {
  display        : flex;
  align-items    : center;
  gap            : 7px;
  padding        : 9px 10px;
  cursor         : pointer;
  border-bottom  : 1px solid var(--smj-border-light, #f3f4f6);
  transition     : background .12s ease;
  font-size      : 12.5px;
  color          : var(--smj-text, #1e293b);
}
.smj-convo-item:hover       { background: var(--smj-surface-2, #f1f5f9); }
.smj-convo-item--active     { background: var(--smj-info-bg, #eff6ff); color: var(--smj-primary); font-weight: 600; }
.smj-convo-item-avatar {
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  background     : var(--smj-surface-3, #e2e8f0);
  object-fit     : cover;
  flex-shrink    : 0;
  font-size      : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--smj-muted);
}
.smj-convo-item-unread {
  min-width      : 17px;
  height         : 17px;
  border-radius  : 999px;
  background     : var(--smj-danger, #dc2626);
  color          : #fff;
  font-size      : 10px;
  font-weight    : 700;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 0 4px;
  margin-left    : auto;
}
.smj-chat-messages-panel {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  overflow       : hidden;
  min-width      : 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   8. INPUT BAR
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-input-bar {
  display        : flex;
  align-items    : flex-end;
  gap            : 8px;
  padding        : 10px 12px;
  border-top     : 1px solid var(--smj-border, #e2e8f0);
  background     : var(--smj-card-bg, #fff);
  flex-shrink    : 0;
}
.smj-chat-img-btn {
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  background     : var(--smj-surface, #f9fafb);
  border         : 1.5px solid var(--smj-border, #e2e8f0);
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : background .14s ease, border-color .14s ease;
}
.smj-chat-img-btn:hover { background: var(--smj-info-bg, #eff6ff); border-color: var(--smj-primary); }
.smj-chat-img-btn svg { width: 16px; height: 16px; color: var(--smj-muted, #64748b); }

.smj-chat-textarea {
  flex           : 1;
  border         : 1.5px solid var(--smj-border, #e2e8f0);
  border-radius  : 20px;
  padding        : 8px 14px;
  font-size      : 14px;
  font-family    : var(--smj-font);
  color          : var(--smj-text);
  resize         : none;
  outline        : none;
  min-height     : 36px;
  max-height     : 100px;
  line-height    : 1.4;
  background     : var(--smj-surface, #f9fafb);
  transition     : border-color .14s ease, background .14s ease;
  overflow-y     : auto;
}
.smj-chat-textarea::placeholder { color: var(--smj-placeholder, #a0aec0); }
.smj-chat-textarea:focus {
  border-color   : var(--smj-primary);
  background     : var(--smj-card-bg, #fff);
  box-shadow     : 0 0 0 3px var(--smj-primary-alpha-12, rgba(26,111,181,.12));
}

.smj-chat-send-btn {
  width          : 36px;
  height         : 36px;
  border-radius  : 50%;
  background     : var(--smj-btn-color);
  border         : none;
  color          : #fff;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  transition     : background .14s ease, transform .14s ease;
  box-shadow     : 0 2px 6px var(--smj-primary-alpha-20, rgba(26,111,181,.2));
}
.smj-chat-send-btn:hover { background: var(--smj-btn-color-dk); transform: scale(1.05); }
.smj-chat-send-btn:active { transform: scale(.95); }
.smj-chat-send-btn svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════════════
   9. GUEST / LOGIN POPUP
   ════════════════════════════════════════════════════════════════════════════ */
.smj-chat-login-popup {
  display        : none;
  position       : fixed;
  inset          : 0;
  z-index        : 10001;
  align-items    : center;
  justify-content: center;
}
.smj-chat-login-popup.smj-chat-login-popup--open { display: flex; }

.smj-chat-login-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,.45);
  z-index        : -1;
  backdrop-filter: blur(3px);
}
.smj-chat-login-box {
  background     : var(--smj-card-bg, #fff);
  border-radius  : 18px;
  padding        : 32px 28px;
  width          : 320px;
  max-width      : calc(100vw - 40px);
  text-align     : center;
  box-shadow     : 0 8px 32px rgba(0,0,0,.16);
  position       : relative;
  animation      : smjChatOpen .26s cubic-bezier(.34,1.56,.64,1) both;
}
.smj-chat-login-close {
  position       : absolute;
  top            : 12px;
  right          : 12px;
  background     : var(--smj-surface, #f9fafb);
  border         : none;
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  cursor         : pointer;
  font-size      : 13px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--smj-muted, #64748b);
  transition     : background .14s ease;
}
.smj-chat-login-close:hover { background: var(--smj-surface-3, #e2e8f0); }
.smj-chat-login-icon {
  width          : 56px;
  height         : 56px;
  border-radius  : 50%;
  background     : var(--smj-info-bg, #eff6ff);
  margin         : 0 auto 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
}
.smj-chat-login-icon svg { width: 26px; height: 26px; color: var(--smj-primary); }
.smj-chat-login-box h3 {
  font-size      : 17px;
  font-weight    : 700;
  color          : var(--smj-text-strong, #111827);
  margin         : 0 0 8px;
}
.smj-chat-login-box p {
  font-size      : 13.5px;
  color          : var(--smj-muted, #64748b);
  margin         : 0 0 20px;
  line-height    : 1.5;
}
.smj-chat-login-btn {
  display        : block;
  width          : 100%;
  padding        : 11px;
  background     : var(--smj-btn-color);
  color          : #fff;
  border-radius  : 999px;
  text-decoration: none;
  font-weight    : 700;
  font-size      : 14px;
  margin-bottom  : 10px;
  transition     : background .15s ease;
}
.smj-chat-login-btn:hover { background: var(--smj-btn-color-dk); }
.smj-chat-register-link {
  font-size      : 13px;
  color          : var(--smj-primary);
  text-decoration: none;
  font-weight    : 500;
}
.smj-chat-register-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   10. IMAGE LIGHTBOX
   ════════════════════════════════════════════════════════════════════════════ */
#smj-img-lightbox {
  display        : none;
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,.88);
  z-index        : 10002;
  align-items    : center;
  justify-content: center;
  cursor         : zoom-out;
}
#smj-img-lightbox.smj-lb-open { display: flex; }
#smj-lb-img {
  max-width      : 90vw;
  max-height     : 88vh;
  object-fit     : contain;
  border-radius  : 8px;
  box-shadow     : 0 8px 48px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   11. FULL DASHBOARD INBOX (Messages page — NOT the floating modal)
   ════════════════════════════════════════════════════════════════════════════ */
.smj-inbox-wrap {
  display        : flex;
  border         : 1px solid var(--smj-border, #e2e8f0);
  border-radius  : var(--smj-radius, 12px);
  background     : var(--smj-card-bg, #fff);
  overflow       : hidden;
  height         : 600px;
  box-shadow     : var(--smj-shadow, 0 2px 12px rgba(0,0,0,.08));
  font-family    : var(--smj-font);
}
.smj-inbox-left {
  width          : 280px;
  min-width      : 240px;
  flex-shrink    : 0;
  display        : flex;
  flex-direction : column;
  border-right   : 1px solid var(--smj-border, #e2e8f0);
  background     : var(--smj-card-bg, #fff);
  overflow       : hidden;
}
.smj-inbox-search-wrap {
  padding        : 12px;
  border-bottom  : 1px solid var(--smj-border, #e2e8f0);
  flex-shrink    : 0;
}
.smj-inbox-search {
  width          : 100%;
  padding        : 8px 12px;
  border         : 1.5px solid var(--smj-border, #e2e8f0);
  border-radius  : 999px;
  font-size      : 13px;
  outline        : none;
  background     : var(--smj-surface, #f9fafb);
  font-family    : var(--smj-font);
  color          : var(--smj-text);
  transition     : border-color .14s ease;
}
.smj-inbox-search:focus { border-color: var(--smj-primary); background: var(--smj-card-bg, #fff); }
.smj-inbox-search::placeholder { color: var(--smj-placeholder, #a0aec0); }
.smj-inbox-list { flex: 1; overflow-y: auto; }

.smj-inbox-item {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 12px 14px;
  cursor         : pointer;
  border-bottom  : 1px solid var(--smj-border-light, #f3f4f6);
  transition     : background .12s ease;
  position       : relative;
  background     : var(--smj-card-bg, #fff);
}
.smj-inbox-item:hover           { background: var(--smj-surface, #f9fafb); }
.smj-inbox-item--active         { background: var(--smj-info-bg, #eff6ff); }
.smj-inbox-item--unread         { background: var(--smj-surface, #f9fafb); }
.smj-inbox-item--unread strong  { color: var(--smj-text-strong, #111827); }
.smj-inbox-item--unread .smj-inbox-item-preview { font-weight: 600; color: var(--smj-text); }

.smj-inbox-avatar-wrap  { position: relative; flex-shrink: 0; width: 44px; height: 44px; }
.smj-inbox-avatar       { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.smj-inbox-avatar[src=""], .smj-inbox-avatar:not([src]) { visibility: hidden; }
.smj-inbox-avatar-wrap .smj-avatar-fallback {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--smj-surface-3, #e2e8f0);
  border-radius  : 50%;
  color          : var(--smj-subtle, #94a3b8);
  pointer-events : none;
}
.smj-inbox-avatar-wrap .smj-avatar-fallback svg { width: 24px; height: 24px; }
.smj-inbox-online-dot {
  position       : absolute;
  bottom         : 1px;
  right          : 1px;
  width          : 11px;
  height         : 11px;
  border-radius  : 50%;
  background     : var(--smj-success, #16a34a);
  border         : 2px solid var(--smj-card-bg, #fff);
}
.smj-inbox-item-body    { flex: 1; overflow: hidden; }
.smj-inbox-item-top     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.smj-inbox-item-top strong { font-size: 14px; color: var(--smj-text); }
.smj-inbox-item-time    { font-size: 11px; color: var(--smj-muted, #64748b); flex-shrink: 0; }
.smj-inbox-item-sub     { font-size: 11px; color: var(--smj-muted, #64748b); margin-bottom: 2px; }
.smj-inbox-item-preview { font-size: 13px; color: var(--smj-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smj-inbox-badge {
  min-width      : 18px;
  height         : 18px;
  border-radius  : 999px;
  background     : var(--smj-danger, #dc2626);
  color          : #fff;
  font-size      : 10px;
  font-weight    : 700;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 0 4px;
  flex-shrink    : 0;
}
.smj-inbox-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 40px 20px;
  color          : var(--smj-muted, #64748b);
  gap            : 12px;
  text-align     : center;
  font-size      : 13px;
}
.smj-inbox-empty svg { width: 40px; height: 40px; opacity: .3; }

/* Right panel */
.smj-inbox-right {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  overflow       : hidden;
  min-width      : 0;
  background     : var(--smj-card-bg, #fff);
}
.smj-inbox-chat-area { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ── Inbox messages scroll area (was missing — caused collapsed layout) ── */
.smj-inbox-messages {
  flex           : 1;
  overflow-y     : auto;
  padding        : 16px;
  display        : flex;
  flex-direction : column;
  gap            : 4px;
  scroll-behavior: smooth;
  background     : var(--smj-surface, #f9fafb);
}
.smj-inbox-messages::-webkit-scrollbar { width: 4px; }
.smj-inbox-messages::-webkit-scrollbar-thumb { background: var(--smj-scrollbar-thumb, #d1d5db); border-radius: 4px; }

/* ── Inbox input bar (was missing — caused invisible input) ── */
.smj-inbox-input-bar {
  display        : flex;
  align-items    : flex-end;
  gap            : 8px;
  padding        : 10px 12px;
  border-top     : 1px solid var(--smj-border, #e2e8f0);
  background     : var(--smj-card-bg, #fff);
  flex-shrink    : 0;
}
.smj-inbox-input-bar .smj-chat-textarea {
  flex           : 1;
  min-width      : 0;
  resize         : none;
  border         : 1.5px solid var(--smj-border, #e2e8f0);
  border-radius  : var(--smj-radius, 12px);
  padding        : 9px 12px;
  font-size      : 14px;
  font-family    : var(--smj-font);
  line-height    : 1.45;
  background     : var(--smj-surface, #f9fafb);
  color          : var(--smj-text);
  outline        : none;
  max-height     : 120px;
  overflow-y     : auto;
  transition     : border-color .14s ease;
}
.smj-inbox-input-bar .smj-chat-textarea:focus {
  border-color   : var(--smj-primary);
  background     : var(--smj-card-bg, #fff);
  box-shadow     : 0 0 0 3px var(--smj-primary-alpha-12, rgba(59,130,246,.12));
}
.smj-inbox-input-bar .smj-chat-send-btn {
  width          : 38px;
  height         : 38px;
  flex-shrink    : 0;
  border-radius  : 50%;
  background     : var(--smj-primary, #3B82F6);
  color          : #fff;
  border         : none;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : background .15s ease, transform .15s ease;
}
.smj-inbox-input-bar .smj-chat-send-btn:hover  { background: var(--smj-primary-dk, #2563EB); transform: scale(1.06); }
.smj-inbox-input-bar .smj-chat-send-btn:active { transform: scale(.96); }
.smj-inbox-input-bar .smj-chat-send-btn svg { width: 18px; height: 18px; }
.smj-inbox-input-bar .smj-chat-img-btn {
  width          : 34px;
  height         : 34px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  color          : var(--smj-muted, #64748b);
  border-radius  : 8px;
  transition     : background .14s ease, color .14s ease;
  flex-shrink    : 0;
}
.smj-inbox-input-bar .smj-chat-img-btn:hover { background: var(--smj-surface, #f9fafb); color: var(--smj-primary); }
.smj-inbox-input-bar .smj-chat-img-btn svg { width: 18px; height: 18px; }

/* ── Empty state panel (was unstyled) ── */
.smj-inbox-empty-state {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 14px;
  color          : var(--smj-muted, #64748b);
  text-align     : center;
  padding        : 40px 24px;
  background     : var(--smj-surface, #f9fafb);
}
.smj-inbox-empty-state svg { width: 48px; height: 48px; opacity: .25; }
.smj-inbox-empty-state h3  { font-size: 17px; font-weight: 700; color: var(--smj-text, #1e293b); margin: 0; }
.smj-inbox-empty-state p   { font-size: 13.5px; margin: 0; max-width: 260px; line-height: 1.5; }
.smj-inbox-chat-header {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 12px 16px;
  border-bottom  : 1px solid var(--smj-border, #e2e8f0);
  background     : var(--smj-card-bg, #fff);
  flex-shrink    : 0;
}
.smj-inbox-chat-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
.smj-inbox-chat-avatar[src=""], .smj-inbox-chat-avatar:not([src]) { visibility: hidden; }
.smj-inbox-chat-header-info { flex: 1; min-width: 0; }
.smj-inbox-chat-header-info strong { font-size: 15px; display: block; color: var(--smj-text); }
.smj-inbox-chat-header-info > div { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.smj-inbox-back-btn {
  display        : none;
  background     : none;
  border         : none;
  cursor         : pointer;
  padding        : 4px;
  color          : var(--smj-muted, #64748b);
  flex-shrink    : 0;
}
.smj-inbox-back-btn svg { width: 22px; height: 22px; }
.smj-inbox-listing-link { color: var(--smj-muted, #64748b); flex-shrink: 0; display: flex; align-items: center; transition: color .15s; }
.smj-inbox-listing-link:hover { color: var(--smj-primary); }
.smj-inbox-listing-link svg { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════════════════════
   12. DASHBOARD UNREAD BADGE
   ════════════════════════════════════════════════════════════════════════════ */
.smj-dash-nav-badge {
  min-width    : 18px;
  height       : 18px;
  border-radius: var(--smj-radius-pill, 999px);
  background   : var(--smj-danger, #dc2626);
  color        : var(--smj-white, #fff);
  font-size    : 10px;
  font-weight  : 700;
  display      : inline-flex;
  align-items  : center;
  justify-content: center;
  padding      : 0 4px;
  margin-left  : 5px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════════════
   13. MOBILE WHATSAPP FIELD
   ════════════════════════════════════════════════════════════════════════════ */
.tmp-mobile-wa-wrap { display: flex; flex-direction: column; gap: 5px; }
.tmp-mobile-wa-input-row {
  display      : flex;
  align-items  : center;
  border       : 1.5px solid var(--smj-input-border, #e2e8f0);
  border-radius: var(--smj-radius-sm, 8px);
  overflow     : hidden;
  background   : var(--smj-card-bg, #fff);
  transition   : border-color .15s ease;
}
.tmp-mobile-wa-input-row:focus-within {
  border-color: var(--smj-primary);
  box-shadow  : 0 0 0 3px var(--smj-primary-alpha-12, rgba(26,111,181,.12));
}
.tmp-mobile-wa-icon {
  padding      : 0 12px;
  font-size    : 18px;
  background   : var(--smj-surface, #f9fafb);
  border-right : 1px solid var(--smj-border, #e2e8f0);
  height       : 100%;
  display      : flex;
  align-items  : center;
  line-height  : 1;
  user-select  : none;
}
.tmp-mobile-wa-input-row input[type="tel"] {
  flex       : 1;
  border     : none !important;
  outline    : none !important;
  padding    : 11px 14px;
  font-size  : 15px;
  background : transparent;
  box-shadow : none !important;
  color      : var(--smj-text);
  font-family: var(--smj-font);
}
.tmp-mobile-wa-hint { font-size: 12px; color: var(--smj-muted, #64748b); margin: 2px 0 0; }
.smj-field-tel,
.smj-field-wa {
  display        : inline-flex;
  align-items    : center;
  gap            : 4px;
  padding        : 3px 10px;
  border-radius  : var(--smj-radius-pill, 999px);
  font-size      : 13px;
  font-weight    : 600;
  text-decoration: none;
  transition     : opacity .15s ease;
}
.smj-field-tel { background: var(--smj-info-bg, #eff6ff); color: var(--smj-info-text, #1e40af); }
.smj-field-wa  { background: var(--smj-success-bg, #f0fdf4); color: var(--smj-success-text, #166534); }
.smj-field-tel:hover, .smj-field-wa:hover { opacity: .8; }
.tmp-fm__type--mobile_whatsapp { background: var(--smj-success-bg, #f0fdf4); color: var(--smj-success-text, #166534); }

/* ════════════════════════════════════════════════════════════════════════════
   14. BODY SCROLL LOCK (when modal open)
   ════════════════════════════════════════════════════════════════════════════ */
body.smj-no-scroll { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .smj-chat-modal {
    width      : 360px;
    height     : 500px;
    bottom     : 16px;
    right      : 16px;
  }
}

/* Mobile — full-width bottom sheet */
@media (max-width: 640px) {
  .smj-chat-modal {
    width        : 100vw;
    max-width    : 100vw;
    height       : 88dvh;
    max-height   : 88dvh;
    bottom       : 0;
    right        : 0;
    left         : 0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }
  .smj-chat-header { border-radius: 20px 20px 0 0; }

  /* Drag handle visual hint on mobile */
  .smj-chat-header::before {
    content        : '';
    display        : block;
    position       : absolute;
    top            : 8px;
    left           : 50%;
    transform      : translateX(-50%);
    width          : 36px;
    height         : 4px;
    background     : rgba(255,255,255,.35);
    border-radius  : 2px;
  }
  .smj-chat-header { position: relative; padding-top: 20px; }

  /* Seller split: stack vertically on mobile */
  .smj-chat-split { flex-direction: column; }
  .smj-chat-convos-panel {
    width      : 100%;
    height     : 140px;
    min-width  : unset;
    border-right : none;
    border-bottom: 1px solid var(--smj-border, #e2e8f0);
  }
  .smj-bubble { max-width: 92%; }

  /* Dashboard inbox mobile */
  .smj-inbox-wrap { height: calc(100vh - 120px); border-radius: 0; border-left: none; border-right: none; }
  .smj-inbox-left { width: 100%; position: absolute; inset: 0; z-index: 2; background: var(--smj-card-bg, #fff); border-right: none; transition: transform .25s ease; }
  .smj-inbox-left--hidden { transform: translateX(-100%); }
  .smj-inbox-right { position: absolute; inset: 0; z-index: 1; }
  .smj-inbox-wrap { position: relative; overflow: hidden; }
  .smj-inbox-back-btn { display: flex; }
}

/* =============================================================================
   SMJ Chat — v8.1 UI Polish & Overlay Fix Supplement
   Appended by bug-fix pass. These rules add visual improvements and fix
   the remaining overlay stacking issues via explicit containment rules.
   ============================================================================= */

/* ── Ensure .smj-chat-widget never creates a stacking context ── */
.smj-chat-widget {
  position : static !important;
  transform : none !important;
  filter    : none !important;
  will-change: auto !important;
  isolation : auto !important;
  z-index   : auto !important;
}

/* ── Chat overlay: always fixed to true viewport ── */
.smj-chat-overlay {
  position : fixed !important;
  inset     : 0 !important;
  z-index   : 9998 !important;
}

/* ── Chat modal: always fixed to true viewport ── */
.smj-chat-modal {
  position  : fixed !important;
  z-index   : 9999 !important;
}

/* ── Modern header: gradient instead of flat color ── */
.smj-chat-header {
  background    : linear-gradient(135deg, var(--smj-btn-color) 0%, var(--smj-btn-color-dk, #1558a0) 100%) !important;
  padding       : 13px 14px !important;
  box-shadow    : 0 2px 8px rgba(0,0,0,.12);
}

/* ── Header avatar: softer white ring ── */
.smj-chat-header-avatar {
  background    : rgba(255,255,255,.18) !important;
  border        : 1.5px solid rgba(255,255,255,.30);
  width         : 38px !important;
  height        : 38px !important;
}

/* ── Title font ── */
.smj-chat-header-title {
  font-size     : 14.5px !important;
  letter-spacing: -.01em;
}

/* ── Buyers panel: tighten label, add accent line ── */
.smj-chat-convos-header {
  font-size     : 10px !important;
  letter-spacing: .1em !important;
  color         : var(--smj-primary, #1a6fb5) !important;
  background    : var(--smj-info-bg, #eff6ff) !important;
  border-bottom : 2px solid var(--smj-primary, #1a6fb5) !important;
  padding       : 8px 12px !important;
}

/* ── Empty state: centered icon + softer text ── */
.smj-chat-empty-state {
  font-size     : 13.5px !important;
  color         : var(--smj-muted, #64748b) !important;
}
.smj-chat-empty-state p {
  font-weight   : 500;
  margin        : 0 !important;
}
.smj-chat-empty-state svg {
  opacity       : .18 !important;
  width         : 40px !important;
  height        : 40px !important;
}

/* ── Input bar: refined border ── */
.smj-chat-input-bar {
  border-top    : 1px solid var(--smj-border, #e2e8f0) !important;
  padding       : 10px 10px !important;
  gap           : 7px !important;
}

/* ── Textarea: pill shape ── */
.smj-chat-textarea {
  border-radius : 22px !important;
  padding       : 9px 15px !important;
  font-size      : 13.5px !important;
}

/* ── Send button: slight elevation on hover ── */
.smj-chat-send-btn {
  width         : 38px !important;
  height        : 38px !important;
}
.smj-chat-send-btn:hover {
  transform     : translateY(-1px) scale(1.06) !important;
  box-shadow    : 0 4px 10px rgba(26,111,181,.30) !important;
}

/* ── Close/minimize buttons: larger hit target ── */
.smj-chat-header-btn {
  width         : 30px !important;
  height        : 30px !important;
  font-size     : 13px !important;
}

/* ── Convo item active: left accent bar ── */
.smj-convo-item--active {
  border-left   : 3px solid var(--smj-primary, #1a6fb5) !important;
  padding-left  : 7px !important;
}

/* ── Message bubbles: slightly rounder ── */
.smj-bubble--mine .smj-bubble-body > p,
.smj-bubble--mine .smj-bubble-body > div {
  border-radius : 18px 4px 18px 18px !important;
}
.smj-bubble--theirs .smj-bubble-body > p,
.smj-bubble--theirs .smj-bubble-body > div {
  border-radius : 4px 18px 18px 18px !important;
}

/* ── Login box: refined ── */
.smj-chat-login-box {
  border-radius : 20px !important;
  padding       : 32px 24px 28px !important;
}
.smj-chat-login-btn {
  border-radius : 12px !important;
  padding       : 12px !important;
  font-size     : 15px !important;
}

/* ── Minimized state: show only header with visual hint ── */
.smj-chat-modal--minimized .smj-chat-header {
  border-radius : 18px !important;
}