/* Livechat — CSS v23. = v22 + VARIAS CONVERSACIONES A LA VEZ (diseño v5).
 *
 * El caso: se pide una cotización, responden tres talleres y hay que
 * compararlos. Hasta hoy tocaba volver atrás a la bandeja, entrar, volver a
 * salir. Diego: «hay que pensar en facilitarles la vida, no en complicárselas».
 *
 * Escritorio → columna de 244 px a la IZQUIERDA de la ventana expandida.
 *   La ventana ya crece hacia la izquierda (v13: `inset: 20px 24px 96px auto`),
 *   así que el hilo, el redactor y enviar NO se mueven un píxel al expandir:
 *   la columna aparece en el espacio nuevo.
 * Móvil → tira de caritas bajo la cabecera. Un toque para saltar.
 *
 * 🔴 Las dos SOLO existen con 2 o más conversaciones abiertas (clase `lc-multi`
 * en el panel). Con una, la pantalla se ve exactamente como antes.
 */
@import url('/styles/livechat-v22.css');

/* ═══════════════════════════════════════════════════════════════════════════
   1 · ESTRUCTURA — el hilo pasa a ser dos columnas
   ═══════════════════════════════════════════════════════════════════════════ */
/* Sin `lc-multi` esto es un simple envoltorio transparente: nada cambia. */
.lc-thread-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.lc-view--thread { flex-direction: column; }

/* Alto EXACTO de la cabecera partida. Las dos mitades miden lo mismo y su
   contenido va centrado: `HeadSplit5` del diseño es UNA sola barra, no dos. */
.lc-panel { --lc-splith: 60px; }

@media (min-width: 900px) {
  /* 🔴 CRECER A LO ANCHO Y CRECER A LO ALTO SON DOS COSAS DISTINTAS (Diego):
     · A lo ANCHO es AUTOMÁTICO. Con 2 o más conversaciones la ventana se
       ensancha 244 px hacia la izquierda para que quepa la columna. El alto,
       la posición y el borde derecho no se mueven: sigue siendo la misma
       ventanita de abajo a la derecha, solo que más ancha.
     · A lo ALTO es OPCIONAL. Eso lo sigue haciendo el botón de expandir, como
       siempre, y nada se estira solo encima del sitio. */
  .lc-panel.lc-multi:not(.is-expanded) .lc-panel__sheet {
    width: min(644px, calc(100vw - 48px));   /* 400 del hilo + 244 de la columna */
  }
  .lc-panel.lc-multi .lc-view--thread { flex-direction: row; }
  .lc-panel.lc-multi .lc-cols { display: flex; }

  /* 🔴 EL DEGRADADO ES UNO SOLO Y CRUZA LAS DOS COLUMNAS.
     Si cada cabecera lleva su propio `var(--lc-grad)`, cada una lo dibuja de
     principio a fin sobre SU ancho → en la costura el degradado se reinicia y
     se ve un corte. Se pinta una sola vez sobre el contenedor entero, como una
     franja de alto fijo, y las dos cabeceras van transparentes encima. */
  .lc-panel.lc-multi .lc-view--thread {
    background-color: var(--lc-s1);
    background-image: var(--lc-grad);
    background-repeat: no-repeat;
    background-size: 100% var(--lc-splith);
  }
  .lc-panel.lc-multi .lc-cols__head,
  .lc-panel.lc-multi .lc-thread-main > .lc-head { background: transparent; }

  /* Misma altura, mismo centrado vertical, mismo padding lateral. */
  .lc-panel.lc-multi .lc-cols__head,
  .lc-panel.lc-multi .lc-thread-main > .lc-head {
    height: var(--lc-splith);
    min-height: var(--lc-splith);
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
  }
  /* El fondo claro de la columna arranca DEBAJO de la cabecera, si no taparía
     la franja del degradado. */
  .lc-panel.lc-multi .lc-cols { background: transparent; border-right: 0; }
  .lc-panel.lc-multi .lc-cols__searchwrap,
  .lc-panel.lc-multi .lc-cols__body {
    background: var(--lc-s1);
    border-right: 1px solid var(--lc-line);
  }
}
/* Fuera de ese caso la columna no se pinta jamás (móvil incluido). El guardia
   de [hidden] evita que una clase gane la pelea al atributo. */
.lc-cols { display: none; }
.lc-cols[hidden], .lc-tira[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · LA COLUMNA (List5, 244 px)
   ═══════════════════════════════════════════════════════════════════════════ */
.lc-cols {
  width: 244px;
  flex-shrink: 0;
  flex-direction: column;
  min-height: 0;
  background: var(--lc-s1);
  border-right: 1px solid var(--lc-line);
}
/* Mitad izquierda de la barra: el degradado lo pone el contenedor (arriba), acá
   solo va el filete blanco que separa las dos mitades. */
.lc-cols__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--lc-splith);
  padding: 0 14px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.lc-cols__t {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 16.5px; font-weight: 500; letter-spacing: -0.2px;
}
.lc-cols__n {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Buscador — aparece desde la SEXTA conversación. */
.lc-cols__searchwrap { flex-shrink: 0; padding: 10px 10px 4px; }
.lc-cols__search {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 10px;
  border-radius: 10px; background: var(--lc-surface, #fff);
  border: 1px solid var(--lc-line);
  color: var(--lc-ink4);
}
.lc-cols__search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--lc-ink);
}
.lc-cols__search input::placeholder { color: var(--lc-ink4); }
.lc-cols__search input::-webkit-search-cancel-button { display: none; }

.lc-cols__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 8px 12px;
  display: flex; flex-direction: column; gap: 3px;
}

/* ── Estados de la columna: vacía · error · sin resultados ── */
.lc-cols__msg { margin: auto; text-align: center; padding: 20px 14px; }
.lc-cols__msgic {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--lc-surface, #fff);
  border: 1px solid var(--lc-line); color: var(--lc-ink4);
}
.lc-cols__msgic--err { background: #FBEAEA; border-color: transparent; color: var(--lc-sale); }
.lc-cols__msg strong {
  display: block; font-family: var(--font-sans); font-size: 13px;
  font-weight: 700; color: var(--lc-ink);
}
.lc-cols__msg p {
  margin: 5px 0 0; font-family: var(--font-sans); font-size: 12px;
  color: var(--lc-ink3); line-height: 1.45;
}
.lc-cols__retry {
  margin-top: 12px; height: 34px; padding: 0 14px;
  border-radius: 10px; border: 1.5px solid var(--lc-accent);
  background: var(--lc-surface, #fff); color: var(--lc-accent);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.lc-cols__retry:hover { background: var(--lc-accent-soft); }

/* ── Rótulo del grupo "Cerradas" ── */
.lc-cols__sep { display: flex; align-items: center; gap: 7px; padding: 12px 12px 6px; }
.lc-cols__sep span {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px;
  letter-spacing: 0.7px; text-transform: uppercase; color: var(--lc-ink3m);
}
.lc-cols__sep i { flex: 1; height: 1px; background: var(--lc-line); }
.lc-cols__more {
  margin: 2px 4px; height: 34px; border-radius: 10px;
  border: 1px dashed var(--lc-line-s); background: transparent;
  color: var(--lc-ink3); font-family: var(--font-sans); font-size: 12px;
  font-weight: 600; cursor: pointer;
}
.lc-cols__more:hover { background: var(--lc-surface, #fff); color: var(--lc-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · LA FILA (Row5) — tres renglones y nada más
   ═══════════════════════════════════════════════════════════════════════════ */
.lc-crow {
  position: relative;
  display: flex; gap: 9px;
  width: 100%; padding: 10px 11px 10px 12px;
  border: 0; border-radius: 12px; background: transparent;
  text-align: left; cursor: pointer;
  transition: background 0.15s ease;
}
/* El escalonado corre SOLO al aparecer la columna (regla del diseño). Si corriera
   en cada repintado, cambiar de conversación se vería como una recarga entera. */
.lc-cols__body.is-stagger .lc-crow {
  animation: lcFadeUp 320ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
  animation-delay: calc(var(--lc-i, 0) * 45ms);
}
.lc-crow:hover { background: rgba(255, 255, 255, 0.7); }
.lc-crow.is-active {
  background: var(--lc-surface, #fff);
  box-shadow: var(--lc-sh-sm);
}
/* Barra azul de 3 px: la conversación que estás leyendo. */
.lc-crow.is-active::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--lc-accent);
}
.lc-crow.is-closed { opacity: 0.66; }

/* 🔴 `align-self: flex-start` + alto propio: como la fila es flex, sin esto el
   envoltorio se ESTIRA a lo alto de los tres renglones y el punto de presencia
   —que va anclado abajo— termina flotando junto a la vista previa en vez de
   pegado al avatar. */
.lc-crow__avwrap {
  position: relative; flex-shrink: 0; align-self: flex-start;
  display: block; width: 34px; height: 34px;
}
.lc-crow__avwrap .lc-avatar,
.lc-crow__avwrap .lc-team-avatar { width: 34px; height: 34px; font-size: 12px; }
.lc-crow__dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lc-ink4); border: 2px solid var(--lc-s1);
}
.lc-crow.is-active .lc-crow__dot { border-color: var(--lc-surface, #fff); }
.lc-crow__dot.is-on { background: var(--lc-live); }

/* Los tres renglones llevan interlineado propio: sin esto heredan el 1.5 del
   panel y la fila se infla de 76 a ~110 px. */
.lc-crow__main { flex: 1; min-width: 0; display: block; }
.lc-crow__l1 { display: flex; align-items: baseline; gap: 6px; line-height: 1.25; }
.lc-crow__name {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
  line-height: 1.25; color: var(--lc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-crow.is-unread .lc-crow__name { font-weight: 800; }
.lc-crow__time {
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px;
  color: var(--lc-ink3m); font-variant-numeric: tabular-nums;
}
.lc-crow.is-unread .lc-crow__time { color: var(--lc-accent); }

.lc-crow__l2 { display: flex; align-items: center; gap: 5px; margin-top: 3px; min-width: 0; line-height: 1.2; }
.lc-crow__l2 .lc-tag { flex-shrink: 0; font-size: 8.5px; padding: 1px 5px; line-height: 1.5; border-radius: 5px; }
.lc-crow__ctx {
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px;
  color: var(--lc-ink3m);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-crow__cerrada {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.3px; color: var(--lc-ink3m);
}

.lc-crow__l3 { display: flex; align-items: center; gap: 7px; margin-top: 4px; line-height: 1.3; }
.lc-crow__prev {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.3; color: var(--lc-ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-crow.is-unread .lc-crow__prev { color: var(--lc-ink); font-weight: 600; }
/* Mensaje retirado por Textti: en cursiva gris con el ojo tachado. El texto que
   se muestra es el MOTIVO que ya manda el servidor («…: incluía datos de
   contacto»), nunca lo retirado. Diego 2026-08-04: decir por qué evita la
   desconfianza de un «Textti retiró el mensaje» a secas. */
.lc-crow__prev--retirado {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-style: italic; color: var(--lc-ink3m); font-weight: 400;
}
.lc-crow.is-unread .lc-crow__prev--retirado { color: var(--lc-ink3m); font-weight: 400; }
.lc-crow__prev--retirado svg { flex-shrink: 0; color: var(--lc-ink4); }

/* Globito de no leídos: rojo, con el número, igual que en la burbuja. */
.lc-crow__badge {
  flex-shrink: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--lc-sale); color: #fff;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: lcBadgePop 260ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

/* Esqueletos mientras carga (cuatro filas). */
.lc-crow--skel { cursor: default; animation: none; }
.lc-crow--skel .lc-skel { display: block; }
.lc-crow--skel .lc-skel--av { width: 34px; height: 34px; border-radius: 50%; }
.lc-crow--skel .lc-skel--l1 { height: 11px; border-radius: 5px; width: 70%; }
.lc-crow--skel .lc-skel--l2 { height: 9px; border-radius: 5px; width: 42%; margin-top: 7px; }
.lc-crow--skel .lc-skel--l1 + .lc-skel--l2 + .lc-skel--l1 { width: 88%; margin-top: 7px; }

/* Destello: llegó un mensaje en esta conversación. Verde vivo, dos veces y para. */
@keyframes lcRowFlash {
  0%   { background: rgba(0, 168, 98, 0.14); }
  100% { background: transparent; }
}
.lc-crow.is-flash { animation: lcRowFlash 1.6s ease-out 2; }
@keyframes lcBadgePop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* La bandeja "Mensajes" del widget usa el mismo lenguaje: las cerradas bajan al
   final, en gris, y el globito también trae el número. */
.lc-item.is-closed { opacity: 0.66; }
.lc-item .lc-crow__badge { align-self: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · LA TIRA DEL MÓVIL (TiraA) — Camino A
   ═══════════════════════════════════════════════════════════════════════════ */
.lc-tira { display: none; }
@media (max-width: 899px) {
  .lc-panel.lc-multi .lc-tira {
    display: flex; gap: 12px;
    flex-shrink: 0;
    padding: 9px 14px;
    overflow-x: auto;
    background: var(--lc-surface, #fff);
    border-bottom: 1px solid var(--lc-line);
    scrollbar-width: none;
    animation: lcNudgeIn 260ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
  }
  .lc-panel.lc-multi .lc-tira::-webkit-scrollbar { display: none; }
}
.lc-tira__it {
  width: 54px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.lc-tira__avwrap {
  position: relative;
  display: inline-flex; padding: 2.5px;
  border-radius: 50%; border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.lc-tira__it.is-active .lc-tira__avwrap { border-color: var(--lc-accent); }
.lc-tira__avwrap .lc-avatar,
.lc-tira__avwrap .lc-team-avatar { width: 40px; height: 40px; font-size: 14px; }
.lc-tira__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--lc-sale); color: #fff;
  border: 2px solid var(--lc-surface, #fff);
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lc-tira__badge.is-pop { animation: lcBadgePop 260ms cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.lc-tira__name {
  width: 54px; text-align: center;
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 500;
  color: var(--lc-ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-tira__it.is-active .lc-tira__name { font-weight: 700; color: var(--lc-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · ENSEÑANZA DE LA PRIMERA VEZ (Coach5) — una sola vez, solo móvil
   ═══════════════════════════════════════════════════════════════════════════ */
/* El velo tapa el hilo pero NO la tira: lo que se está enseñando tiene que
   verse. Por eso la tira sube de capa mientras el globo está en pantalla. */
.lc-view--thread { position: relative; }
.lc-coach { position: absolute; inset: 0; z-index: 30; }
@media (min-width: 900px) { .lc-coach { display: none !important; } }
.lc-coach__veil { position: absolute; inset: 0; background: rgba(14, 14, 16, 0.5); }
.lc-panel.lc-coach-on .lc-tira { position: relative; z-index: 32; }
/* 🔴 El `top` lo mide el JS desde la tira real (`--lc-coach-top`): una altura
   fija no acierta en ningún teléfono porque la cabecera cambia con el área
   segura y con el tamaño de letra del sistema. El globo va centrado, así la
   flecha apunta a la tira y no queda cortado contra el borde. */
.lc-coach__pop {
  position: absolute; z-index: 35;
  left: 16px; right: 16px; width: auto; max-width: 290px; margin: 0 auto;
  top: var(--lc-coach-top, 140px);
  animation: lcNudgeIn 260ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.lc-coach__arrow {
  display: block; width: 12px; height: 12px; margin: 0 auto -6px;
  background: var(--lc-ink); transform: rotate(45deg); border-radius: 2px;
}
.lc-coach__box {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--lc-ink); color: #fff;
  border-radius: 12px; padding: 12px 14px 12px;
  box-shadow: 0 12px 30px rgba(14, 14, 16, 0.34);
}
.lc-coach__txt {
  margin: 0;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
}
.lc-coach__ok {
  margin-top: 10px; padding: 0 18px;
  min-height: 40px;
  border: 0; border-radius: 9px;
  background: var(--lc-surface, #fff); color: var(--lc-ink);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · AJUSTES FINOS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Con la columna al lado, el hilo de la ventana ALTA tiene 443 px: las burbujas
   no deben estirarse hasta perder el renglón cómodo de lectura. En la ventana
   normal el hilo conserva sus 400 px de siempre y no hay nada que ajustar. */
@media (min-width: 900px) {
  .lc-panel.lc-multi.is-expanded .lc-msg__bubble { max-width: 340px; }
}

/* El aviso flotante se calla mientras la columna esté a la vista: la fila ya
   destella y saca su globito, y decir lo mismo dos veces es ruido. Fuera de ese
   caso (chat contraído, móvil, chat cerrado) el aviso sigue igual que en v22 —
   el arreglo de "los avisos no quedan detrás del panel" queda intacto. */
body.lc-cols-open .lc-toast-stack { opacity: 0; pointer-events: none; }

/* ── Movimiento reducido: nada crece, nada desliza, nada destella ── */
@media (prefers-reduced-motion: reduce) {
  .lc-cols__body.is-stagger .lc-crow,
  .lc-crow.is-flash,
  .lc-crow__badge,
  .lc-tira__badge.is-pop,
  .lc-panel.lc-multi .lc-tira,
  .lc-coach__pop {
    animation: none !important;
  }
  .lc-panel__sheet { transition: none !important; }
}