/* =============================================================
   WCFM Marketplace Live Chat – v1.2
   Tema laranja · FAB único · Layout melhorado
   ============================================================= */

:root {
  --wmc-primary:      #f97316;
  --wmc-primary-dark: #ea580c;
  --wmc-primary-glow: rgba(249,115,22,.4);
  --wmc-bg:           #ffffff;
  --wmc-bg-alt:       #faf7f5;
  --wmc-border:       #ede8e3;
  --wmc-text:         #1c1917;
  --wmc-text-muted:   #78716c;
  --wmc-mine-bg:      var(--wmc-primary);
  --wmc-mine-text:    #ffffff;
  --wmc-other-bg:     #f1f5f9;
  --wmc-other-text:   #1e293b;
  --wmc-shadow:       0 12px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
  --wmc-radius:       20px;
  --wmc-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wmc-z:            99999;
}

#wmc-chat-root *,
#wmc-seller-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--wmc-font);
}

/* ═══════════════════════════════════════════════
   FAB  –  único, esquerda, 100px do rodapé
   ═══════════════════════════════════════════════ */

.wmc-fab {
  position: fixed;
  bottom: 20px;
  left: 24px;
  z-index: var(--wmc-z);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wmc-primary);
  color: #fff;
  border: none;
  border-radius: 60px;
  padding: 14px 28px 14px 22px;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--wmc-primary-glow);
  transition: transform .2s, box-shadow .2s, background .2s;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.wmc-fab:hover {
  background: var(--wmc-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--wmc-primary-glow);
}
.wmc-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.wmc-fab-label { display: inline-block; }

/* FAB vendedor – laranja, esquerda */
.wmc-seller-fab {
  position: fixed;
  bottom: 20px;
  left: 24px;
  z-index: var(--wmc-z);
  background: var(--wmc-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--wmc-primary-glow);
  transition: transform .2s, box-shadow .2s;
}
.wmc-seller-fab:hover {
  background: var(--wmc-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--wmc-primary-glow);
}
.wmc-seller-fab svg { width: 24px; height: 24px; }

/* ── Badge ──────────────────────────────────────── */
.wmc-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  animation: wmc-pop .3s ease;
  line-height: 1;
}
.wmc-badge-inline {
  position: static;
  border: none;
  margin-left: 6px;
  vertical-align: middle;
}
@keyframes wmc-pop {
  0%  { transform: scale(0); }
  70% { transform: scale(1.2); }
  100%{ transform: scale(1); }
}

/* ═══════════════════════════════════════════════
   Janela de chat (comprador – esquerda)
   ═══════════════════════════════════════════════ */

.wmc-window {
  position: fixed;
  bottom: 88px;
  left: 24px;
  z-index: var(--wmc-z);
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--wmc-bg);
  border-radius: var(--wmc-radius);
  box-shadow: var(--wmc-shadow);
  overflow: hidden;
  animation: wmc-slide-up .25s ease;
  /* views ficam como flex column dentro */
}
@keyframes wmc-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Painel vendedor */
.wmc-seller-panel {
  position: fixed;
  bottom: 88px;
  left: 24px;
  z-index: var(--wmc-z);
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--wmc-bg);
  border-radius: var(--wmc-radius);
  box-shadow: var(--wmc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wmc-slide-up .25s ease;
}

/* ═══════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════ */

.wmc-header,
.wmc-seller-panel-header,
.wmc-seller-chat-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--wmc-primary);
  color: #fff;
  flex-shrink: 0;
  gap: 10px;
  min-height: 68px;
}

/* Thumbnail do produto no header */
.wmc-product-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.2);
}

.wmc-header-text {
  flex: 1;
  min-width: 0;
}
.wmc-seller-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wmc-product-ref {
  font-size: 11px;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.wmc-panel-title {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  display: flex;
  align-items: center;
}
.wmc-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Botão fechar — mínimo 44×44px para tap target adequado */
.wmc-close-btn {
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.wmc-close-btn:hover  { background: rgba(255,255,255,.28); }
.wmc-close-btn:active { background: rgba(255,255,255,.40); }

/* Botão voltar / "← Chats" */
.wmc-back-btn {
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background .15s;
  white-space: nowrap;
}
.wmc-back-btn:hover { background: rgba(255,255,255,.28); }

/* ═══════════════════════════════════════════════
   Login prompt
   ═══════════════════════════════════════════════ */
.wmc-login-prompt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  color: var(--wmc-text);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   Área de mensagens
   ═══════════════════════════════════════════════ */

/* min-height:0 é essencial para flex scroll funcionar corretamente —
   sem ele o item flex não encolhe abaixo do tamanho do conteúdo,
   empurrando o campo de input para fora da tela */
#wmc-view-chat,
#wmc-view-inbox {
  min-height: 0;
  overflow: hidden;
}

.wmc-messages {
  flex: 1;
  min-height: 0;   /* permite que o container encolha e o input fique fixo */
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.wmc-messages::-webkit-scrollbar { width: 4px; }
.wmc-messages::-webkit-scrollbar-thumb { background: var(--wmc-border); border-radius: 2px; }

/* Mensagem */
.wmc-msg {
  display: flex;
  gap: 10px;
  max-width: 82%;
  animation: wmc-msg-in .2s ease;
}
@keyframes wmc-msg-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wmc-msg.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.wmc-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: auto;
  border: 1.5px solid var(--wmc-border);
}
.wmc-msg-body { display: flex; flex-direction: column; gap: 3px; }
.wmc-msg-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--wmc-text-muted);
  padding: 0 6px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.wmc-msg.is-mine .wmc-msg-name { text-align: right; }
.wmc-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.wmc-msg.is-mine .wmc-msg-bubble {
  background: var(--wmc-mine-bg);
  color: var(--wmc-mine-text);
  border-bottom-right-radius: 5px;
}
.wmc-msg:not(.is-mine) .wmc-msg-bubble {
  background: var(--wmc-other-bg);
  color: var(--wmc-other-text);
  border-bottom-left-radius: 5px;
}
.wmc-msg-time {
  font-size: 10px;
  color: var(--wmc-text-muted);
  padding: 0 6px;
}
.wmc-msg.is-mine .wmc-msg-time { text-align: right; }

/* Mensagem de sistema */
.wmc-system-msg {
  text-align: center;
  font-size: 12px;
  color: var(--wmc-text-muted);
  padding: 6px 14px;
  background: var(--wmc-bg-alt);
  border-radius: 20px;
  align-self: center;
  max-width: 88%;
  line-height: 1.4;
}

/* Loading dots */
.wmc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  flex-shrink: 0;
}
.wmc-dot-pulse,
.wmc-dot-pulse::before,
.wmc-dot-pulse::after {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wmc-primary);
  animation: wmc-pulse 1.2s infinite ease-in-out;
  display: inline-block;
}
.wmc-dot-pulse { animation-delay: 0s; }
.wmc-dot-pulse::before { content:''; margin: 0 4px; animation-delay: .2s; }
.wmc-dot-pulse::after  { content:''; animation-delay: .4s; }
@keyframes wmc-pulse {
  0%,80%,100% { transform: scale(.6); opacity:.4; }
  40%         { transform: scale(1);  opacity:1; }
}
.wmc-loading-msg {
  padding: 24px;
  text-align: center;
  color: var(--wmc-text-muted);
  font-size: 13px;
}

/* Aviso de bloqueio */
.wmc-block-notice {
  background: #fef3c7;
  border-top: 1px solid #fde68a;
  color: #92400e;
  font-size: 12px;
  padding: 9px 18px;
  flex-shrink: 0;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════
   Input
   ═══════════════════════════════════════════════ */
.wmc-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--wmc-border);
  background: var(--wmc-bg);
  flex-shrink: 0;
}
.wmc-input {
  flex: 1;
  border: 1.5px solid var(--wmc-border);
  border-radius: 22px;
  padding: 9px 16px;
  font-size: 14px;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  transition: border-color .2s;
  color: var(--wmc-text);
  background: var(--wmc-bg-alt);
}
.wmc-input:focus {
  border-color: var(--wmc-primary);
  background: #fff;
}
.wmc-send-btn {
  background: var(--wmc-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}
.wmc-send-btn:hover { background: var(--wmc-primary-dark); transform: scale(1.06); }
.wmc-send-btn svg { width: 17px; height: 17px; }

.wmc-footer-note {
  font-size: 10px;
  color: var(--wmc-text-muted);
  text-align: center;
  padding: 5px 0 10px;
  background: var(--wmc-bg);
  flex-shrink: 0;
}

/* Botões */
.wmc-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity .2s, transform .15s;
}
.wmc-btn:hover { opacity: .88; transform: translateY(-1px); }
.wmc-btn-primary { background: var(--wmc-primary); color: #fff; }

/* Link produto */
a.wmc-product-link {
  color: rgba(255,255,255,.95);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
  border-bottom: 1px dotted rgba(255,255,255,.5);
  transition: opacity .15s;
}
a.wmc-product-link:hover { opacity: .8; }

/* ═══════════════════════════════════════════════
   Lista de conversas (inbox comprador + vendedor)
   ═══════════════════════════════════════════════ */
.wmc-conv-list {
  flex: 1;
  overflow-y: auto;
}
.wmc-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wmc-border);
  cursor: pointer;
  transition: background .15s;
}
.wmc-conv-item:hover { background: var(--wmc-bg-alt); }
.wmc-conv-item.has-unread { background: #fff7ed; }

/* Thumbnail do produto na lista */
.wmc-conv-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--wmc-border);
  background: var(--wmc-bg-alt);
}

.wmc-conv-info { flex: 1; min-width: 0; }
.wmc-conv-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wmc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wmc-conv-sub {
  font-size: 11px;
  color: var(--wmc-primary);
  font-weight: 600;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wmc-conv-preview {
  font-size: 12px;
  color: var(--wmc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.wmc-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.wmc-conv-time { font-size: 10px; color: var(--wmc-text-muted); }
.wmc-conv-unread {
  background: var(--wmc-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: wmc-pop .3s ease;
}

/* Tag de papel (comprador / vendedor) na lista do inbox */
.wmc-role-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--wmc-primary);
  color: #fff;
  border-radius: 6px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: .85;
}

.wmc-no-chats {
  padding: 48px 28px;
  text-align: center;
  color: var(--wmc-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.wmc-no-chats svg {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  display: block;
  opacity: .3;
}

/* ═══════════════════════════════════════════════
   Sub-chat do vendedor (overlay)
   ═══════════════════════════════════════════════ */
.wmc-seller-chat {
  position: absolute;
  inset: 0;
  background: var(--wmc-bg);
  display: flex;
  flex-direction: column;
  border-radius: var(--wmc-radius);
  overflow: hidden;
  animation: wmc-slide-up .2s ease;
  z-index: 1;
}
.wmc-seller-chat-header { gap: 10px; }

/* Pulsação nova mensagem */
.wmc-seller-fab.has-new {
  animation: wmc-ring 1.5s ease infinite;
}
@keyframes wmc-ring {
  0%   { box-shadow: 0 0 0 0 var(--wmc-primary-glow); }
  70%  { box-shadow: 0 0 0 14px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

/* WCFM menu badge */
#wmc-wcfm-menu-item .wcfm_menu_count {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  border-radius: 10px;
  padding: 2px 6px;
  margin-left: 4px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════
   RESPONSIVO  ≤ 480px  –  fullscreen
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wmc-fab {
    bottom: 80px;
    left: 12px;
    font-size: 14px;
    padding: 14px 22px 14px 18px;
  }
  .wmc-seller-fab {
    bottom: 80px;
    left: 12px;
  }
  .wmc-window,
  .wmc-seller-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 2147483647 !important; /* z-index máximo — nada sobrepõe no mobile */
    animation: wmc-full-in .22s ease !important;
  }
  .wmc-seller-chat { border-radius: 0; }

  /* Botão fechar maior no mobile — fácil de tocar em telas pequenas e PWA */
  .wmc-close-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 26px !important;
  }
  @keyframes wmc-full-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}