/* ==========================================================================
   LeadSync - Composer
   La pildora del composer, el editor con formato de WhatsApp, la grabacion de notas
   de voz y la bandeja de emojis.

   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.
   ========================================================================== */

/* --- Composer --- */
.composer {
  position: relative;
  min-height: 68px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;

  /* item 7: el editor crece hacia arriba; botones abajo */
  gap: 10px;

}
.composer input { flex: 1; }

/* El aviso que sustituye a la caja en un chat abierto de otro departamento. Aparece en el
   sitio de la caja, así que entra desde abajo, como ella. */
.composer-ajeno {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  color: var(--warn);
  font-size: 14px;
  animation: composerAjenoEntra .18s ease;
}
.composer-ajeno .ic { flex: 0 0 auto; width: 18px; height: 18px; }
@keyframes composerAjenoEntra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .composer-ajeno { animation: none; }
}

/* --- La píldora del composer (item R10, d_7.png) ---------------------------
   El campo y sus iconos son UNA sola pieza: el borde y el fondo los pone la píldora, no
   el editor. Así el foco enciende el conjunto (focus-within) en vez de dibujar un
   recuadro dentro de otro, y los iconos quedan alineados con la ÚLTIMA línea del texto
   cuando el mensaje crece (align-items: flex-end). */
.composer-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);

  /* Radio grande pero NO 50%: con varias líneas la píldora crece y un radio en
     porcentaje se deformaría en un óvalo. */
  border-radius: 24px;
  transition: border-color .15s ease;
}
.composer-pill:focus-within { border-color: var(--accent); }

/* Los iconos de dentro son más pequeños que los sueltos de antes: comparten caja con el
   texto y a 34px la píldora se hacía innecesariamente alta. */
.pill-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.pill-btn .ic {
  width: 19px;
  height: 19px;
}

/* Encendido = hay algo activo detrás (hoy, la firma). Se marca en los tres puntos porque
   es el botón que lo esconde: si no, el estado quedaría invisible al cerrar el popover. */
.pill-btn.on {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* --- Editor con estilos de WhatsApp (item 7, f_27/28) --- */
.composer-editor {
  flex: 1;
  min-width: 0;

  /* item 4: altura tipo Twitter — mínimo 1 línea, máximo 10 y luego scroll (el
     contenteditable crece solo con el contenido; los topes los ponen estas cotas). */

  /* CON UNA SOLA LÍNEA, el editor tiene que medir LO MISMO que los botones (36px), o la
     píldora la define él y los botones —alineados abajo— quedan 8px por debajo del centro
     (b_25). 1.45em de línea + 8px arriba y abajo = 36,3px: la altura del botón.
     Al saltar de línea crece él y los botones se quedan abajo, que es lo correcto. */
  min-height: calc(1.45em + 16px);
  max-height: calc(14.5em + 16px);
  overflow-y: auto;
  background: transparent;
  border: none;
  padding: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  transition: border-color .15s ease;
}
.composer-editor:focus { outline: none; }

/* EL PLACEHOLDER NO PARTE EN DOS LÍNEAS (lo cazaste tú): el editor tiene `white-space:
   pre-wrap` porque el MENSAJE sí tiene que envolver, y el texto de ayuda lo heredaba — en
   móvil el composer se abría a dos renglones estando vacío y rompía la forma de píldora.
   Aquí se invierte solo para el texto de ayuda: una línea y elipsis. Que no se lea entero da
   igual; es una pista, no contenido. */
.composer-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  pointer-events: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-editor[contenteditable="false"] {
  opacity: .6;
  cursor: not-allowed;
}

/* Símbolos de formato tenues; el contenido va estilizado (f_27/28). */
.composer-editor .wa-esym { opacity: .45; }
.composer-editor b { font-weight: 700; }
.composer-editor i { font-style: italic; }
.composer-editor s { text-decoration: line-through; }
.composer-editor code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .92em;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}
.composer-editor .wa-eline-b { font-weight: 700; }

/* Barra de formato sobre la selección (f_27). */
.wa-format-bar {
  position: fixed;
  z-index: 300;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
  animation: menuIn .12s ease;
}
.wa-fmt-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wa-fmt-btn:hover { background: var(--bg-hover); }
.send-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s ease, transform .1s ease;
}
.send-btn:hover { background: var(--accent-strong); }
.send-btn:active { transform: scale(.92); }
.send-btn .ic {
  width: 20px;
  height: 20px;
}

/* --- Grabar notas de voz (item 30, f_22.png y f_23.png) ---------------------
   El micrófono sale cuando no hay texto escrito y, en cuanto se escribe algo, deja
   su sitio al botón de enviar. En reposo va desnudo (solo el icono) y al pasar el
   ratón se enciende en verde, como en la captura. */
.mic-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.mic-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--on-accent);
}
.mic-btn:active:not(:disabled) { transform: scale(.92); }
.mic-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.mic-btn .ic {
  width: 20px;
  height: 20px;
}

/* La barra de grabación TAPA el composer en vez de convivir con él: mientras se graba
   no hay nada que escribir, y así no hay que reordenar sus hijos. */
.rec-bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--bg-elev);
}
.rec-discard {
  color: var(--text-dim);
  flex: 0 0 auto;
}
.rec-discard:hover { color: var(--danger); }
.rec-play,
.rec-toggle {
  flex: 0 0 auto;
  color: var(--text);
}
.rec-toggle { color: var(--danger); }
.rec-toggle.rec-paused { color: var(--text); }
.rec-play:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Punto rojo que late mientras se graba. */
.rec-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  animation: rec-latido 1.4s ease-in-out infinite;
}
@keyframes rec-latido {
  0%,
  100% {
    opacity: 1;
  }
  50% { opacity: .25; }
}
.rec-time {
  flex: 0 0 auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.rec-time-end { color: var(--text-dim); }
.rec-wave {
  flex: 1;
  min-width: 0;
  height: 34px;
  cursor: pointer;
}

/* El composer conserva su alto mientras se graba: la barra va encima en absoluto. */
.composer.recording > :not(.rec-bar) { visibility: hidden; }

/* --- Bandeja de emojis (categorías, recientes, tono de piel) --- */
.emoji-tray {
  position: absolute;

  /* Anclada al TOPE del composer (su contenedor): crece él, sube ella — sin JS. */
  bottom: calc(100% - 6px);
  left: 12px;

  /* 320px SIEMPRE que quepan. Antes había un `width: calc(100vw - 24px)` a partir de
     720px que la estiraba de lado a lado en cuanto la pantalla no era de escritorio
     (b_24): una bandeja de emojis de 900px de ancho no se lee mejor, se lee peor. Con
     min() el tope es el mismo en todas las pantallas y solo cede donde de verdad no cabe. */
  width: min(320px, calc(100vw - 24px));
  max-height: 300px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 20;
}
.emoji-tray.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.emoji-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.emoji-nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 5px;
  border-radius: 8px;
  flex: 0 0 auto;
  transition: background-color .12s ease;
}
.emoji-nav-btn:hover { background: var(--bg-hover); }
.emoji-tone-btn {
  margin-left: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 8px;
  flex: 0 0 auto;
  transition: background-color .12s ease;
}
.emoji-tone-btn:hover { background: var(--bg-hover); }

/* overflow-x:hidden mata el scroll horizontal; sin padding-top para que el
   título sticky quede pegado arriba sin dejar asomar emojis por encima. */
.emoji-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 8px;
}
.emoji-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-dim);
  font-weight: 600;

  /* margin negativo para cubrir el padding lateral del body (llega a right:0). */
  padding: 8px 10px 4px;
  margin: 0 -8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-panel);
}

/* minmax(0,1fr) permite que las columnas encojan y recorta emojis anchos
   (tono de piel / ZWJ) que antes desbordaban el ancho de la bandeja. */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
}
.skin-tone-pop {
  position: absolute;
  top: 42px;
  right: 8px;
  z-index: 21;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 6px;
  display: flex;
  gap: 2px;
}
.skin-tone-pop .emoji-cell.active { background: var(--accent-dim); }
.emoji-cell {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 5px;
  border-radius: 8px;
  min-width: 0;

  /* permite encoger en el grid sin desbordar */
  overflow: hidden;

  /* recorta glifos anchos en vez de empujar la columna */
  transition: background-color .12s ease;
}
.emoji-cell:hover { background: var(--bg-hover); }

/* Los <button>/<input> NO heredan font-family (usan la del UA, p. ej. Arial, sin la
   fuente de emojis) → los emojis salían como cajitas en la bandeja y las reacciones,
   pese a que sí funcionan en las burbujas (que son <span> y sí heredan). Forzamos
   inherit para que usen "Noto Color Emoji" del stack del body (item 35). */
.emoji-cell,
.emoji-nav-btn,
.emoji-tone-btn,
.msg-reaction,
#composer-input {
  font-family: inherit;
}

/* Bandeja de reacciones flotante: misma bandeja del composer, posicionada por JS y
   por encima del lightbox (item 35). */

/* La bandeja de reacciones se CREA ya abierta (no existe antes en el DOM), así que la
   transición de .emoji-tray.open no tiene estado inicial que animar y aparecía de golpe
   (item 22). Se le da una ANIMACIÓN de entrada, que sí corre al insertar el elemento —y
   sin depender de un rAF, que no dispara con la pestaña de fondo (escollo de la F78). */
.emoji-tray.reaction-tray {
  position: fixed;
  bottom: auto;
  left: auto;
  z-index: 500;
  transform-origin: top left;
  animation: trayIn .16s ease;
}
@keyframes trayIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Backdrop invisible bajo la bandeja de reacción: cierra solo la bandeja (item 38). */
.reaction-backdrop {
  position: fixed;
  inset: 0;
  z-index: 499;
}

/* --- Ayuda de redacción (item A1) ------------------------------------------ */

/* Fila de menú con explicación debajo. Sin ella, "Más breve" no dice si pierde información
   y elegir es adivinar. */
.msg-menu-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.msg-menu-txt small {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.25;
  white-space: normal;
}
.redaccion-menu { max-width: 320px; }
/* Desactivada se VE desactivada, y el porqué va en el title. */
.msg-menu-item:disabled { opacity: .45; cursor: default; }
.msg-menu-item:disabled:hover { background: none; }

.red-cargando, .red-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--text-dim);
}
.red-error { color: var(--danger); }
.red-cargando svg, .red-error svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Gira mientras escribe: sin movimiento, "pensando" y "colgado" se ven igual. */
.red-cargando svg { animation: red-gira 1s linear infinite; }
@keyframes red-gira { to { transform: rotate(360deg); } }

.red-bloque { margin-bottom: 12px; }
.red-bloque h4 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-dim);
}
.red-bloque p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
/* El ANTES se ve apagado y el DESPUÉS destacado: se compara de un vistazo cuál es cuál sin
   leer los encabezados. */
.red-antes p { background: var(--bg-elev); color: var(--text-dim); }
.red-despues p { background: var(--bg-elev); border-color: var(--accent); }
/* La propuesta puede ser larga: que crezca la modal y no el mensaje. */
.redaccion-modal .modal-body { max-height: min(60vh, 520px); overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  .red-cargando svg { animation: none; }
}