/* Chat entre comprador y vendedor. */

/* Globito de mensajes sin leer en la cabecera */
.con-globito { position: relative; }
.globito {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--azul); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff;
}

/* ---------- Lista de conversaciones ---------- */
.chat-list { display: grid; gap: 10px; }
.chat-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px; text-decoration: none; color: var(--ink);
}
.chat-row:hover { background: var(--gray); }
.chat-row img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--gray); }
.chat-row-body { min-width: 0; }
.chat-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.chat-row-top strong { font-size: 1rem; }
.chat-row-sub { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-last { font-size: .9rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.chat-row-last.sin-leer { color: var(--ink); font-weight: 700; }
.chat-badge {
  background: var(--azul); color: #fff; border-radius: 999px; min-width: 24px; height: 24px; padding: 0 7px;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
}

/* ---------- Conversación ---------- */
.chat-page { display: flex; flex-direction: column; max-width: 820px; margin: 0 auto; width: 100%; }
.chat-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px;
}
.chat-head-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.chat-head-item img { width: 46px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--gray); }
.chat-head-item > div { min-width: 0; }
.chat-head-item strong { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-user { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: .9rem; }
.chat-head-user .avatar { width: 34px; height: 34px; font-size: .85rem; }

.chat-box {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray);
  padding: 16px; height: min(52vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}
.chat-vacio { margin: auto; text-align: center; color: var(--muted); max-width: 34ch; }
.chat-vacio strong { display: block; color: var(--ink); margin-bottom: 6px; }

.burbuja { max-width: 78%; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.burbuja p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja .hora { display: block; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.burbuja.mia { align-self: flex-end; background: var(--ink); color: #fff; border-color: var(--ink); border-bottom-right-radius: 4px; }
.burbuja.mia .hora { color: #b9c7de; }
.burbuja.suya { align-self: flex-start; border-bottom-left-radius: 4px; }

.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.chat-form textarea { min-height: 48px; max-height: 140px; resize: none; padding: 12px 14px; border-radius: 22px; }
.chat-form .btn { border-radius: 22px; }
.chat-aviso { margin: 10px 0 0; text-align: center; }

@media (max-width: 560px) {
  .chat-box { height: min(48vh, 380px); padding: 12px; }
  .burbuja { max-width: 86%; }
  .chat-form .btn { padding: 0 16px; }
  .enviar-texto { display: none; }
  .chat-head-user span:not(.avatar) { display: none; }
  .chat-row { grid-template-columns: 52px 1fr auto; }
  .chat-row img { width: 52px; }
}