/* ==========================================================================
   LeadSync - Globito de avatar
   El circulo con la inicial, sus tamanos y el puntito de conexion. Un operador es
   este globito en TODA la consola: lo que cambie aqui cambia en todas las pantallas.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* --- Avatar con iniciales de la lista de chats --- */

/* El color lo elige ui.js a partir del teléfono (siempre el mismo para la misma persona).
   El texto va SIEMPRE oscuro: los ocho tonos son claros a propósito, así el contraste no
   depende del tema y el círculo se ve igual de nítido en claro y en oscuro. */
.avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #06231b;
  user-select: none;

  /* Contenedor del puntito de conexión. */
  position: relative;

  /* Apagado por defecto. La hoja generada en presence.js pone --presencia:
     var(--presencia-on) en los usuarios conectados, y el navegador reevalúa el
     selector solo — también en los globitos que se pinten después. */
  --presencia: var(--presencia-off);
}
.avatar .ic {
  width: 19px;
  height: 19px;
}

/* --- Puntito de conexión del globito de operador --------------------------
   UN OPERADOR ES UN GLOBITO, y ese globito se repite por toda la consola. Lo que NO
   puede repetirse es el comportamiento: si alguien se desconecta, todas sus copias se
   apagan a la vez. Por eso el estado llega por variable CSS desde una sola hoja
   generada, y no recorriendo el DOM pantalla por pantalla. */

/* ESTE PUNTO NO LLEVA TRANSICIÓN, Y ES A PROPÓSITO.
   Con `transition: background-color`, al desconectarse alguien el punto SE QUEDABA VERDE:
   una transición sobre una propiedad cuyo valor sale de var() no se recalcula cuando lo
   único que cambia es la variable, y el navegador conserva el color anterior. Medido: con
   la transición #06c294, sin ella #55636b, sobre el mismo elemento y en el mismo instante.
   Registrar la variable con @property tampoco lo salva en una carga limpia (parecía
   funcionar, pero solo porque inyectarla forzaba un recálculo).
   Y tampoco se echa en falta: un punto que cambia de color es un ESTADO, no un
   movimiento, así que un fundido aquí no explicaría de dónde viene nada. Un indicador de
   conexión que miente es mucho peor que uno que no se difumina. */
.avatar .av-punto {
  position: absolute;
  right: 0;
  bottom: 0;

  /* PROPORCIONAL AL GLOBITO, NO FIJO. Los avatares van de 24 px (.avatar-xs) a 96 px
     (.avatar-lg): un punto de 11 px se comía la inicial en los pequeños. En porcentaje
     se escala solo, y una variante de tamaño nueva no obliga a añadir otra regla aquí
     —que es justo la clase de regla que se olvida. */
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: var(--presencia);

  /* El anillo recorta el punto contra el color del avatar, que cambia por persona: sin
     él, un punto verde sobre un avatar verde no se ve. Va en em (el box-shadow no
     admite %) y las variantes escalan su font-size, así que el anillo escala con ellas. */
  box-shadow: 0 0 0 .14em var(--bg-panel);
}
/* Los tonos viven en tokens/colors.css (--av-1..8): el nombre de una compañera en su globo
   (B129) sale del MISMO tono que su avatar, y un número escrito en dos sitios se separa. */
.av-1 { background: var(--av-1); }
.av-2 { background: var(--av-2); }
.av-3 { background: var(--av-3); }
.av-4 { background: var(--av-4); }
.av-5 { background: var(--av-5); }
.av-6 { background: var(--av-6); }
.av-7 { background: var(--av-7); }
.av-8 { background: var(--av-8); }

/* "Mensajes guardados" no es una persona: no lleva color de contacto ni iniciales, solo
   el marcador que ya lo identificaba, dentro del mismo círculo para que la columna de
   avatares no se rompa en la primera fila. */
.avatar-saved {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Tres tamaños para los sitios donde ya había un círculo con el icono de persona: la ficha
   del contacto, la ficha de Odoo y la cabecera de un destacado. Son el MISMO componente a
   propósito — la misma persona sale del mismo color en los cuatro sitios, y eso es lo que
   hace que sirva para reconocerla. */
.avatar-lg {
  width: 96px;
  height: 96px;
  font-size: 34px;
}
.avatar-lg .ic {
  width: 46px;
  height: 46px;
}
.avatar-md {
  width: 40px;
  height: 40px;
}
.avatar-md .ic {
  width: 21px;
  height: 21px;
}
.avatar-sm {
  width: 26px;
  height: 26px;
  font-size: 10.5px;
}
.avatar-sm .ic {
  width: 14px;
  height: 14px;
}
.session-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.session-preview {
  flex: 1;
  min-width: 0;
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-preview .role-tag { color: var(--accent); }

.bot-thinking-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .18s ease, transform .18s ease;
}
.bot-thinking-dot.active { opacity: .8; transform: scale(1); }
.bot-thinking-dot.training { background: var(--modo-entrenamiento); }
@media (prefers-reduced-motion: reduce) {
  .bot-thinking-dot { transition: none; }
}

/* item 63: "Fulano está escribiendo…" entre operadores. Va en cursiva y en el color de
   acento porque no es un mensaje: es un estado que dura segundos, y tiene que distinguirse
   de un vistazo del último mensaje al que sustituye. */
.typing-line {
  color: var(--accent);
  font-style: italic;
}
.session-preview .draft-tag {
  color: var(--danger);
  font-weight: 600;
}
.session-window {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.session-window .ic {
  width: 12px;
  height: 12px;
}
/* Ámbar: queda poco de la ventana; azul: cerrada, solo plantillas (que se pagan). */
.session-window.low { color: var(--warn); }
.session-window.expired { color: var(--info); }

/* queda menos de 1 h, como el punto y la barra */