/* ============================================================
   CHAT CON EL PIPELINE · el panel lateral de la pieza (Bloque 2D)
   Calcado de publicar.css: mismo drawer, misma cabecera, mismo pie. Lo propio de esta
   pantalla son tres cosas:

   1. **Tres pinturas para una sola línea de tiempo.** El pipeline a la izquierda con borde
      turquesa, la persona a la derecha, y en gris —chico, sin caja— lo que se hizo con los
      botones. Que el evento de UI se vea distinto de un mensaje es lo que hace legible que
      sea la misma conversación.
   2. **En 390 es una hoja desde abajo**, no un panel de costado: a ese ancho un panel
      lateral es la pantalla entera entrando de canto y tapa la pieza que se está mirando.
   3. El pie (atajos + textarea + Enviar) no scrollea con el feed: es lo único que se
      aprieta, y buscarlo scrolleando 90 eventos sería el gesto más repetido de la pantalla.

   Solo tokens de /tokens.css — cero hex hardcodeado. `.on` para "seleccionado".
   ============================================================ */

.chat-abrir{ position:relative; }
.chat-abrir .chat-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ambar); margin-left:var(--sp-2); vertical-align:middle;
}

:root{ --chat-ancho: 430px; }

.chat-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--chat-ancho), 100vw);
  background:var(--s1); border-left:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  /* El mismo escalón que publicar/cta/inbox: los cuatro se cierran entre ellos con el
     evento `tr3bol:drawer-abierto`, así que ninguno tiene que quedar arriba del otro. */
  z-index:calc(var(--z-drawer-alto) + 1);
}
.chat-panel.abierto{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .chat-panel{ transition:none; } }

/* La hoja desde abajo (390). Ocupa 82vh y no el alto entero: el borde de arriba deja ver
   que la pieza sigue ahí atrás, que es lo que hace que se lea como una hoja y no como otra
   pantalla. */
@media (max-width: 520px){
  .chat-panel{
    top:auto; bottom:0; left:0; right:0; width:100vw; height:82vh;
    border-left:0; border-top:1px solid var(--line);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    transform:translateY(100%);
  }
  .chat-panel.abierto{ transform:translateY(0); }
}

.chat-head{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-6) var(--gut); border-bottom:1px solid var(--line);
}
.chat-head h3{ margin:0; font-size:var(--fs-base); }
.chat-head small{ display:block; color:var(--ink-3); font-size:var(--fs-xs); font-weight:400; }

.chat-body{
  flex:1; overflow-y:auto; padding:var(--sp-6) var(--gut);
  display:flex; flex-direction:column; gap:var(--sp-4);
}

.chat-vacio{ color:var(--ink-3); font-size:var(--fs-sm); margin:0; }

/* ---------- las tres burbujas ---------- */

.chat-msg{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--s2);
  padding:var(--sp-4) var(--sp-5); font-size:var(--fs-md); line-height:var(--lh-base);
  color:var(--ink); max-width:92%;
}
.chat-msg .chat-q{
  display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-bottom:var(--sp-2);
}
.chat-msg pre{
  margin:var(--sp-2) 0 0; white-space:pre-wrap; word-break:break-word;
  font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-2);
}

.chat-pipe{ border-left:2px solid var(--turquesa); align-self:flex-start; }
.chat-chk{ background:var(--ambar-dim); border-left-color:var(--ambar); }
.chat-yo{ align-self:flex-end; background:var(--s3); border-left:2px solid var(--petroleo); }

/* Los eventos de UI y los `sistema`: gris, sin caja y en una línea. Son el registro de lo
   que pasó, no mensajes: darles el mismo peso que a un checkpoint haría ilegible el hilo. */
.chat-ev{
  color:var(--ink-3); font-size:var(--fs-sm); line-height:var(--lh-tight);
  border-left:1px solid var(--line); padding-left:var(--sp-4); max-width:100%;
}
.chat-err{ color:var(--rojo-ink); }

.chat-acts{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.chat-acts button{ font-size:var(--fs-sm); }

.chat-link{
  background:none; border:0; padding:0; color:var(--turquesa-ink);
  font-size:var(--fs-sm); text-decoration:underline; cursor:pointer;
}

/* Los `paso` y los `log`, plegados. Cerrado es una línea gris; abierto pide el feed con
   ?detalle=1 y los pinta en mono, que es como se leen los pasos en la pieza. */
.chat-detalle{ font-size:var(--fs-sm); color:var(--ink-3); }
.chat-detalle > summary{ cursor:pointer; color:var(--ink-3); }
.chat-detalle > summary:hover{ color:var(--ink-2); }
.chat-pasos{
  margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-1);
  font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-3);
  border-left:1px solid var(--line); padding-left:var(--sp-4);
}

/* ---------- el pie ---------- */

.chat-pie{
  padding:var(--sp-5) var(--gut); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.chat-rapidas{ display:flex; flex-wrap:wrap; gap:5px; }
.chat-rapidas button{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  color:var(--ink-2); padding:4px var(--sp-4); font-size:var(--fs-xs); cursor:pointer;
}
.chat-rapidas button:hover{ color:var(--ink); border-color:var(--line-soft); }

.chat-pie textarea{ width:100%; min-height:58px; resize:vertical; }
.chat-fila{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.chat-nota{ flex:1 1 160px; color:var(--ink-3); font-size:var(--fs-xs); line-height:var(--lh-tight); }
.chat-aviso{ color:var(--ambar-ink); font-size:var(--fs-sm); margin:0; }
.chat-aviso.err{ color:var(--rojo-ink); }

/* «No le podés escribir a esta pieza» con el motivo del server y, cuando el camino existe,
   el botón que lo abre. Nunca un textarea que va a dar 409. */
.chat-bloqueo{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:var(--sp-4) var(--sp-5); color:var(--ink-2); font-size:var(--fs-sm);
  display:flex; flex-direction:column; gap:var(--sp-3); align-items:flex-start;
}