/* Livechat v2 — CSS v17. = v16 + arreglos de la 4ª ronda (Diego 2026-07-17):
 *  I11b) Home "Para ti": fila de pedido al mockup (punto de estado + columna ETA "LLEGA/día").
 *        La tarjeta del hilo (.ptcard) se rediseñó en card-css.ts (inline), no aquí.
 *  I5)  "Está escribiendo…": burbuja de puntos en el hilo del widget (agente→cliente).
 *  I8)  Gate de cuenta: 2 botones + correo por revelado (fiel al diseño).
 */
@import url('/styles/livechat-v16.css');

/* ── I11b) Punto de estado + ETA en las filas de "Para ti" ── */
.lc-pt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--lc-ink-4, #a1a1aa); }
.lc-pt-dot.is-live { background: var(--lc-accent, #0071e3); animation: lcPtPulse 1.8s ease-in-out infinite; }
.lc-pt-dot.is-prep { background: var(--lc-ink-3, #71717a); }
.lc-pt-dot.is-ok   { background: #00a862; }
.lc-pt-dot.is-warn { background: #d97706; }
@keyframes lcPtPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.lc-pt-eta { flex-shrink: 0; margin-left: 2px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.12; }
.lc-pt-eta em { font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--lc-ink-4, #a1a1aa); }
.lc-pt-eta b { font-family: var(--font-serif, Georgia, serif); font-size: 14px; font-weight: 500; color: var(--lc-ink, #09090b); white-space: nowrap; }

/* ── I5) "Está escribiendo…" del AGENTE en el hilo: burbuja de puntos estilo par ──
   (NO reusa .pqa-ai__typing — eso es del Q&A de la PDP). */
.lc-typing { display: flex; justify-content: flex-start; padding: 2px 4px 8px 40px; }
.lc-typing__bubble { display: inline-flex; align-items: center; gap: 4px; padding: 10px 13px; border-radius: 15px; border-bottom-left-radius: 5px; background: var(--lc-surface, #fff); border: 1px solid var(--lc-line, #e4e4e7); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.lc-typing__bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-ink-4, #a1a1aa); animation: lcTypingBounce 1.3s infinite ease-in-out both; }
.lc-typing__bubble i:nth-child(2) { animation-delay: 0.16s; }
.lc-typing__bubble i:nth-child(3) { animation-delay: 0.32s; }
@keyframes lcTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── I8) Escudo del gate en contexto PAGO (E2 AnonGateBody) ── */
.lc-gate__shield { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin: 0 0 15px; border-radius: 12px; background: color-mix(in oklab, var(--lc-accent, #0071e3) 6%, #fff); border: 1px solid var(--lc-line, #e4e4e7); }
.lc-gate__shield-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: #fff; color: var(--lc-accent, #0071e3); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); }
.lc-gate__shield p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--lc-ink-2, #3f3f46); }
.lc-trust { display: inline-flex; align-items: center; gap: 6px; }