/* ==========================================================================
   LeadSync - Destacados y respuesta
   El panel de mensajes destacados y la barra del mensaje citado sobre el composer.

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

/* --- Panel "Mensajes destacados" (item 33; rediseñado en el 31) --------------
   Como el de WhatsApp (f_24.png, f_25.png): buscador arriba y, por cada destacado,
   una cabecera ("de ▸ a" + hora + flecha) con la BURBUJA de verdad debajo, separadas
   por una línea. Antes era una lista de texto a una línea y no se parecía en nada. */
.modal-card.starred-modal .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.starred-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.starred-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 18px;
  background: var(--bg-elev);
}
.starred-search .ic {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.starred-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

/* La lista scrollea sola: el cuerpo de la modal no, o saldrían dos scrolls (item 17). */
.starred-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
.starred-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 10px 6px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background-color .12s ease;
}
.starred-item:last-child { border-bottom: none; }
.starred-item:hover { background: var(--bg-hover); }
.starred-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.starred-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
}
.starred-who b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.starred-arrow {
  color: var(--text-dim);
  flex: 0 0 auto;
}
.starred-when {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-dim);
}
.starred-go {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-dim);
}
.starred-go .ic {
  width: 15px;
  height: 15px;
}

/* La burbuja va SIEMPRE a la izquierda, aunque sea nuestra (f_25.png): en el panel no
   hay dos lados que distinguir, porque el "de ▸ a" de la cabecera ya dice de quién es.
   Solo se conserva el color. Los 3 niveles de especificidad ganan a .bubble.operator
   (align-self:flex-end) sin depender del orden del archivo. */
.starred-panel .starred-item .bubble {
  align-self: flex-start;
  max-width: 100%;
  margin-left: 32px;

  /* alineada bajo el nombre, no bajo el avatar */
}
.starred-panel .starred-item .bubble .meta {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* Adjunto de un destacado: arranca como etiqueta y pintarStarredMedia la cambia por la
   miniatura si consigue resolverlo. */
.starred-media {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, .16);
  border-radius: 8px;
}
.starred-media .ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.starred-media .media-kind {
  font-size: 12.5px;
  font-weight: 600;
}
.starred-media.ready {
  display: block;
  position: relative;
  padding: 0;
  background: none;
}
.starred-thumb {
  display: block;
  max-width: 180px;
  max-height: 180px;
  border-radius: 6px;
}
.starred-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  pointer-events: none;
}
.starred-nohits {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
  padding: 10px 0;
}
.fwd-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
  margin-bottom: 3px;
}
.fwd-tag .ic {
  width: 13px;
  height: 13px;
}

/* --- Barra de respuesta (mensaje citado antes de enviar) --- */
.reply-bar {
  --reply-t: .18s;

  /* también lo usa .reply-bar.hidden: es el mismo elemento */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--accent);

  /* item 41: la barra entra creciendo desde el composer (de abajo hacia arriba) y sale
     al revés, como en WhatsApp. Se anima el alto porque display:none no transiciona;
     va pegada al composer, así que al crecer empuja su borde superior hacia arriba. */
  overflow: hidden;
  max-height: 64px;
  transition: max-height var(--reply-t) ease, opacity var(--reply-t) ease,
              padding-top var(--reply-t) ease, padding-bottom var(--reply-t) ease,
              visibility 0s;
}
.reply-bar.hidden {

  /* .hidden global es display:none !important; hay que revertirlo (con !important, es
     la única forma de ganarle) para que la SALIDA se pueda animar en vez de cortarse. */
  display: flex !important;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;

  /* visibility se aplica al TERMINAR la animación: así la barra oculta no recibe foco
     al tabular ni clics, pero se sigue viendo mientras se desliza hacia abajo. */
  visibility: hidden;
  transition: max-height var(--reply-t) ease, opacity var(--reply-t) ease,
              padding-top var(--reply-t) ease, padding-bottom var(--reply-t) ease,
              visibility 0s linear var(--reply-t);
}
.reply-bar-icon {
  display: inline-flex;
  color: var(--accent);
  flex: 0 0 auto;
}
.reply-bar-icon .ic {
  width: 18px;
  height: 18px;
}
.reply-bar-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* item 43: miniatura del adjunto citado, misma idea que en la burbuja. */
.reply-bar-thumb {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, .18);
}
.reply-bar-thumb.hidden { display: none; }
.reply-bar-thumb img,
.reply-bar-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reply-bar-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.reply-bar-text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}