/* ======================================================
   MaestryAI · Painel Operacional — ABA CONVERSAS
   Somente leitura. Lê chats + chat_messages do Supabase
   da Moana. Nenhum envio de mensagem acontece aqui.
   ====================================================== */

/* ---------- layout geral da view ---------- */
.cv-wrap {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: start;
}

.cv-panel {
  background: var(--lb-glass);
  border: 1px solid var(--lb-glass-border);
  border-radius: 22px;
  box-shadow: var(--lb-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

/* ---------- coluna esquerda: lista ---------- */
.cv-listhead {
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(226,141,0,0.14);
}

.cv-listhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cv-listtitle {
  font-family: 'Marcellus', serif;
  font-size: calc(15px * var(--fs));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-green-deep);
}

.cv-count {
  font-family: 'Manrope', sans-serif;
  font-size: calc(11px * var(--fs));
  font-weight: 700;
  color: var(--lb-gold-deep);
  background: rgba(242,179,0,0.14);
  border: 1px solid rgba(226,141,0,0.22);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.cv-search {
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-size: calc(12.5px * var(--fs));
  color: var(--lb-ink);
  background: var(--lb-glass-strong);
  border: 1px solid var(--lb-glass-border);
  border-radius: 12px;
  padding: 9px 12px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cv-search::placeholder { color: var(--lb-muted); }
.cv-search:focus {
  border-color: rgba(226,141,0,0.5);
  box-shadow: 0 0 0 3px rgba(242,179,0,0.14);
}

.cv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cv-fbtn {
  font-family: 'Manrope', sans-serif;
  font-size: calc(10.5px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--lb-muted);
  background: transparent;
  border: 1px solid rgba(226,141,0,0.22);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: all .18s ease;
}
.cv-fbtn:hover { color: var(--lb-gold-deep); border-color: rgba(226,141,0,0.44); }
.cv-fbtn.is-active {
  color: #3A2600;
  background: linear-gradient(135deg, #FFD776, #E28D00);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(226,141,0,0.28);
}
:root[data-theme="dark"] .cv-fbtn.is-active { color: #1A1000; }

.cv-list {
  max-height: 620px;
  overflow-y: auto;
}

.cv-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226,141,0,0.10);
  cursor: pointer;
  transition: background .16s ease;
}
.cv-item:hover { background: rgba(242,179,0,0.08); }
.cv-item.is-active { background: rgba(242,179,0,0.16); }

.cv-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Marcellus', serif;
  font-size: 15px;
  color: #3A2600;
  background: linear-gradient(135deg, #FFE7AE, #E9A93C);
  box-shadow: 0 3px 10px rgba(226,141,0,0.24);
}

.cv-item-body { flex: 1; min-width: 0; }

.cv-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cv-name {
  font-family: 'Manrope', sans-serif;
  font-size: calc(12.5px * var(--fs));
  font-weight: 700;
  color: var(--lb-green-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-time {
  flex: none;
  font-size: calc(10px * var(--fs));
  color: var(--lb-muted);
  white-space: nowrap;
}

.cv-preview {
  margin-top: 2px;
  font-size: calc(11.5px * var(--fs));
  color: var(--lb-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cv-preview b { color: var(--lb-gold-deep); font-weight: 700; }

.cv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.cv-tag {
  font-size: calc(9.5px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
}
.cv-tag--ia   { color: var(--lb-gold-deep); background: rgba(242,179,0,0.16); border-color: rgba(226,141,0,0.24); }
.cv-tag--humano { color: #7A4B00; background: rgba(255,149,0,0.18); border-color: rgba(255,149,0,0.3); }
.cv-tag--pago { color: var(--lb-green-sage); background: rgba(109,127,75,0.16); border-color: rgba(109,127,75,0.26); }
:root[data-theme="dark"] .cv-tag--humano { color: #FFC583; }

.cv-empty {
  padding: 34px 18px;
  text-align: center;
  color: var(--lb-muted);
  font-size: calc(12px * var(--fs));
}

/* ---------- coluna direita: thread ---------- */
.cv-thread { display: flex; flex-direction: column; min-height: 520px; }

.cv-threadhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(226,141,0,0.14);
}

.cv-back {
  display: none;
  flex: none;
  border: 1px solid rgba(226,141,0,0.24);
  background: transparent;
  color: var(--lb-gold-deep);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: calc(11px * var(--fs));
  font-weight: 700;
  cursor: pointer;
}

.cv-threadtitle {
  font-family: 'Marcellus', serif;
  font-size: calc(16px * var(--fs));
  color: var(--lb-green-deep);
  line-height: 1.2;
}

.cv-threadsub {
  margin-top: 2px;
  font-size: calc(11px * var(--fs));
  color: var(--lb-muted);
}

.cv-threadhead-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.cv-body {
  flex: 1;
  padding: 18px 16px 22px;
  max-height: 620px;
  overflow-y: auto;
}

.cv-daysep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
}
.cv-daysep:first-child { margin-top: 0; }
.cv-daysep::before, .cv-daysep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(226,141,0,0.18);
}
.cv-daysep span {
  font-size: calc(10px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb-muted);
  white-space: nowrap;
}

.cv-row { display: flex; margin-bottom: 10px; }
.cv-row--lead { justify-content: flex-start; }
.cv-row--bot  { justify-content: flex-end; }

.cv-bubble {
  max-width: 74%;
  border-radius: 16px;
  padding: 10px 13px 7px;
  font-size: calc(12.5px * var(--fs));
  line-height: 1.5;
  color: var(--lb-ink);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 4px 14px rgba(156,104,0,0.07);
}

.cv-bubble--lead {
  background: var(--lb-glass-strong);
  border: 1px solid var(--lb-glass-border);
  border-bottom-left-radius: 5px;
}

.cv-bubble--bot {
  background: linear-gradient(135deg, rgba(255,231,174,0.92), rgba(233,169,60,0.86));
  border: 1px solid rgba(226,141,0,0.28);
  border-bottom-right-radius: 5px;
  color: #3A2600;
}
:root[data-theme="dark"] .cv-bubble--bot {
  background: linear-gradient(135deg, rgba(226,141,0,0.38), rgba(122,75,0,0.5));
  color: #FFF3DC;
}

.cv-who {
  font-size: calc(9.5px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 3px;
}

.cv-stamp {
  display: block;
  margin-top: 4px;
  font-size: calc(9.5px * var(--fs));
  opacity: 0.6;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cv-resumo {
  margin-top: 16px;
  border-top: 1px dashed rgba(226,141,0,0.24);
  padding-top: 12px;
}
.cv-resumo summary {
  cursor: pointer;
  font-size: calc(11px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lb-gold-deep);
  list-style: none;
}
.cv-resumo summary::-webkit-details-marker { display: none; }
.cv-resumo summary::before { content: '▸ '; }
.cv-resumo[open] summary::before { content: '▾ '; }
.cv-resumo pre {
  margin: 10px 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: calc(11.5px * var(--fs));
  line-height: 1.55;
  color: var(--lb-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .cv-wrap { grid-template-columns: 1fr; }
  .cv-list { max-height: none; }
  .cv-wrap.is-open .cv-panel--list { display: none; }
  .cv-wrap:not(.is-open) .cv-panel--thread { display: none; }
  .cv-wrap.is-open .cv-back { display: block; }
  .cv-bubble { max-width: 88%; }
}

/* ---------- botão de destaque: WhatsApp do lead ---------- */
.cv-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Manrope', sans-serif;
  font-size: calc(11px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #10301C;
  background: linear-gradient(135deg, #7BE7A4, #25D366);
  border: 1px solid rgba(18,140,80,0.32);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(37,211,102,0.28);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cv-wa::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.16c-.24.68-1.4 1.3-1.94 1.35-.5.05-1.13.07-1.82-.11a16.5 16.5 0 0 1-1.65-.61c-2.9-1.25-4.8-4.17-4.94-4.37-.15-.2-1.19-1.58-1.19-3.02s.76-2.14 1.03-2.44c.27-.3.58-.37.78-.37h.56c.18 0 .42-.07.66.5.24.58.83 2.02.9 2.17.07.15.12.32.02.52-.1.2-.15.32-.3.5-.15.17-.31.39-.44.52-.15.15-.3.31-.13.61.17.3.76 1.25 1.63 2.03 1.12 1 2.06 1.31 2.36 1.46.3.15.47.13.64-.08.17-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.7.8 1.99.95.29.15.48.22.55.35.07.12.07.72-.17 1.4Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.16c-.24.68-1.4 1.3-1.94 1.35-.5.05-1.13.07-1.82-.11a16.5 16.5 0 0 1-1.65-.61c-2.9-1.25-4.8-4.17-4.94-4.37-.15-.2-1.19-1.58-1.19-3.02s.76-2.14 1.03-2.44c.27-.3.58-.37.78-.37h.56c.18 0 .42-.07.66.5.24.58.83 2.02.9 2.17.07.15.12.32.02.52-.1.2-.15.32-.3.5-.15.17-.31.39-.44.52-.15.15-.3.31-.13.61.17.3.76 1.25 1.63 2.03 1.12 1 2.06 1.31 2.36 1.46.3.15.47.13.64-.08.17-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.7.8 1.99.95.29.15.48.22.55.35.07.12.07.72-.17 1.4Z'/></svg>") center/contain no-repeat;
}
.cv-wa:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37,211,102,0.36); filter: saturate(1.06); }
.cv-wa:active { transform: translateY(0); }

@media (max-width: 900px) {
  .cv-threadhead { flex-wrap: wrap; }
  .cv-threadhead-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .cv-wa {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
    padding: 11px 14px;
    font-size: calc(12px * var(--fs));
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* No celular a sidebar (orb/carga) empurrava a lista pra ~1600px de rolagem.
   Na aba Conversas ela sai de cena — o chat é o que importa ali. */
@media (max-width: 900px) {
  body[data-view="conversas"] .lb-sidebar { display: none; }
}

/* Telefone sob o nome na lista — identificar o lead sem ter ele salvo. */
.cv-fone {
  margin-top: 1px;
  font-size: calc(11px * var(--fs));
  font-weight: 700;
  color: var(--lb-gold-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}