/* Vendas → Chat (ML pós-venda) — estilo WhatsApp Web, no design system Swisz. */
.vchat-wrap { display: flex; flex-direction: column; height: calc(100vh - 132px); min-height: 460px; }
.vchat-intro { font-size: 12.5px; color: var(--ink-soft, #5b5148); background: var(--surface-2, #fbf7f2); border: 1px solid var(--line, #ece3d8); border-radius: 10px; padding: 9px 13px; margin-bottom: 10px; line-height: 1.5; flex: none; }
.vchat-loading, .vchat-erro { padding: 28px; color: #8a8078; text-align: center; }
.vchat-erro { color: #c0392b; }
.rup-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #d9cfc4; border-top-color: var(--primary, #c75d2c); border-radius: 50%; animation: vchatspin .7s linear infinite; vertical-align: middle; }
@keyframes vchatspin { to { transform: rotate(360deg); } }

.vchat { flex: 1; display: grid; grid-template-columns: 340px 1fr; min-height: 0; border: 1px solid var(--line, #ece3d8); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow, 0 1px 3px rgba(60,40,20,.06)); }

/* ── Inbox ── */
.vchat-inbox { border-right: 1px solid var(--line, #ece3d8); display: flex; flex-direction: column; min-height: 0; background: var(--surface-2, #fbf7f2); }
.vchat-inbox-top { padding: 10px; border-bottom: 1px solid var(--line, #ece3d8); flex: none; }
.vchat-busca { width: 100%; border: 1px solid var(--line-2, #e2d7ca); border-radius: 20px; padding: 7px 13px; font-size: 13px; background: #fff; box-sizing: border-box; }
.vchat-busca:focus { outline: none; border-color: var(--primary, #c75d2c); }
.vchat-contas { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.vchat-conta-chip { border: 1px solid var(--line-2, #e2d7ca); background: #fff; border-radius: 14px; padding: 3px 11px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft, #6b6156); cursor: pointer; }
.vchat-conta-chip.on { background: var(--ink, #2f2a24); color: #fff; border-color: var(--ink, #2f2a24); }

.vchat-list { flex: 1; overflow-y: auto; min-height: 0; }
.vchat-vazio { padding: 26px 16px; text-align: center; color: #9a9088; font-size: 13px; }
.vchat-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f0e9e0; transition: background .1s; }
.vchat-item:hover { background: #f4ede4; }
.vchat-item.on { background: #fdeee2; }
.vchat-item.bloq { opacity: .58; }
.vchat-av { width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.vchat-av-sm { width: 34px; height: 34px; font-size: 12px; }
.vchat-item-mid { flex: 1; min-width: 0; }
.vchat-item-top { display: flex; align-items: center; gap: 6px; }
.vchat-item-nome { font-weight: 600; font-size: 13.5px; color: var(--ink, #2f2a24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vchat-conta-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; flex: none; }
.vchat-item-prev { font-size: 12px; color: #8a8078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.vchat-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.vchat-item-hora { font-size: 10.5px; color: #a89e94; }
.vchat-badge { background: var(--primary, #c75d2c); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

/* ── Conversa ── */
.vchat-main { display: flex; flex-direction: column; min-height: 0; background: #f7f1ea; background-image: radial-gradient(#ece3d8 .5px, transparent .5px); background-size: 18px 18px; }
.vchat-nada { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9a9088; font-size: 14px; text-align: center; padding: 24px; gap: 10px; }
.vchat-nada-ic { font-size: 40px; opacity: .5; }
.vchat-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--line, #ece3d8); flex: none; }
.vchat-voltar { display: none; border: none; background: none; font-size: 26px; line-height: 1; color: var(--ink-soft, #6b6156); cursor: pointer; padding: 0 4px 0 0; }
.vchat-head-tx { display: flex; flex-direction: column; }
.vchat-head-tx b { font-size: 14px; color: var(--ink, #2f2a24); }
.vchat-head-sub { font-size: 11.5px; color: #8a8078; display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.vchat-pedido { color: var(--primary, #c75d2c); text-decoration: none; font-weight: 600; }
.vchat-pedido:hover { text-decoration: underline; }

.vchat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.vchat-bal { display: flex; max-width: 74%; }
.vchat-bal.in { align-self: flex-start; }
.vchat-bal.out { align-self: flex-end; }
.vchat-bal-in { padding: 6px 9px 5px; border-radius: 10px; box-shadow: 0 1px 1px rgba(60,40,20,.08); font-size: 13.5px; line-height: 1.4; color: var(--ink, #2f2a24); position: relative; }
.vchat-bal.in .vchat-bal-in { background: #fff; border-top-left-radius: 3px; }
.vchat-bal.out .vchat-bal-in { background: #dcf6e3; border-top-right-radius: 3px; }
.vchat-bal-tx { white-space: pre-wrap; word-break: break-word; }
.vchat-bal-meta { font-size: 10px; color: #9a9088; text-align: right; margin-top: 2px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.vchat-tick { color: #b9afa4; font-size: 11px; }
.vchat-tick.lido { color: #34b7f1; }
.vchat-img { max-width: 240px; max-height: 260px; border-radius: 8px; display: block; margin-bottom: 3px; cursor: zoom-in; }
.vchat-mod { font-size: 10.5px; color: #c0392b; margin-top: 2px; }

/* ── Caixa de resposta ── */
.vchat-erro-inline { background: #fdeaea; color: #c0392b; font-size: 12px; padding: 6px 14px; flex: none; }
.vchat-bloqueada { padding: 13px 16px; background: #fff; border-top: 1px solid var(--line, #ece3d8); color: #8a7e70; font-size: 12.5px; text-align: center; flex: none; }
.vchat-caixa { background: #fff; border-top: 1px solid var(--line, #ece3d8); padding: 8px 12px; flex: none; }
.vchat-anexo-tag { font-size: 12px; color: var(--ink-soft, #6b6156); background: #f4ede4; border-radius: 8px; padding: 5px 10px; margin-bottom: 6px; display: inline-block; }
.vchat-anexo-x { border: none; background: none; cursor: pointer; font-size: 15px; color: #c0392b; margin-left: 4px; }
.vchat-caixa-row { display: flex; align-items: flex-end; gap: 8px; }
.vchat-attach { font-size: 19px; cursor: pointer; padding: 5px; opacity: .7; flex: none; }
.vchat-attach:hover { opacity: 1; }
.vchat-input { flex: 1; border: 1px solid var(--line-2, #e2d7ca); border-radius: 18px; padding: 9px 14px; font-size: 13.5px; resize: none; font-family: inherit; line-height: 1.35; max-height: 120px; box-sizing: border-box; }
.vchat-input:focus { outline: none; border-color: var(--primary, #c75d2c); }
.vchat-cont { font-size: 10.5px; color: #a89e94; flex: none; padding-bottom: 6px; }
.vchat-cont.over { color: #c0392b; font-weight: 700; }
.vchat-enviar { background: var(--primary, #c75d2c); color: #fff; border: none; border-radius: 18px; padding: 9px 18px; font-weight: 700; font-size: 13px; cursor: pointer; flex: none; }
.vchat-enviar:disabled { opacity: .5; cursor: default; }

/* ── Lightbox ── */
.vchat-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 9000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.vchat-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

/* ── Responsivo (tela estreita: alterna inbox ↔ conversa) ── */
@media (max-width: 820px) {
  .vchat { grid-template-columns: 1fr; }
  .vchat-main { display: none; }
  .vchat.vchat-emconv .vchat-inbox { display: none; }
  .vchat.vchat-emconv .vchat-main { display: flex; }
  .vchat-voltar { display: block; }
}