/* =========================
   COMMENTS — el chip (globito) y el panel de la conversación
   Ver js/ui/comments-chip.js y js/ui/comments-panel.js.
========================= */

/* -------------------------------------------------------------------------
   EL CHIP
   40px: una jerarquía que no existía, entre el badge (30, satélite de un botón) y el botón
   principal (80). Decidida con Guille en la sesión 71 — comments es la feature humana del
   producto y se va a usar seguido, así que no podía quedar leyéndose como una luz de estado;
   pero tampoco es una acción estructural como agregar un nodo.

   ⚠️ NO cuelga de un botón, así que NO le aplica la regla de la esquina exterior (sesión 66,
   ver styles.css): esa gobierna a los satélites. Vive dentro de #time-ui sólo para no tener que
   saber cuánto mide el panel de tiempo —que cambia de alto— y `right: 0` lo deja al MISMO margen
   derecho que el círculo de tiempo justo arriba (o sea el canal de 20 px de toda la app).
   ⚠️ Probamos centrarlo sobre el EJE del círculo (`right: 20px`, que es (80-40)/2) y no funciona:
   con dos piezas de distinto diámetro, lo que el ojo lee como alineado es el BORDE compartido, no
   el eje. Centrado se veía corrido hacia adentro.
------------------------------------------------------------------------- */
#comments-chip {
  position: absolute;
  top: calc(100% + var(--space-md));
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: #272727;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* ⚠️ Explícito a propósito: styles.css tiene una regla global `svg { width: 4% }` que aplasta
   cualquier SVG inline (trampa conocida, ver CLAUDE.md). */
#comments-chip svg {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
}

#comments-chip:hover  { filter: brightness(1.18); }
#comments-chip:active { transform: scale(0.94); }

/* Verde y no el agua (#19d3bf): en esta app el agua significa IA. Acá el verde significa
   "alguien dijo algo", lo diga una persona o la IA del usuario — es el mismo #22c55e que ya
   usa el resto de la UI. Tinta oscura porque sobre el verde el blanco no lee. */
#comments-chip[data-state="unread"] {
  background: #22c55e;
  color: #06280f;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
}

/* -------------------------------------------------------------------------
   EL PANEL — la conversación (js/ui/comments-panel.js)

   Hereda el lenguaje del cartel de conexión (ai-connect.css): tarjeta oscura translúcida,
   radio 18, sombra larga. Es la superficie más pensada que tiene la app y las dos son lo
   mismo — algo que te habla mientras el modelo sigue ahí atrás.

   Tres niveles tipográficos, igual que allá: el cuerpo del comment (13) es lo que se lee, la
   firma (11) dice de quién es, y el hint (10) no puede competir con ninguno de los dos.
   La geometría (top/left/max-height) la fija el JS, que es el único que sabe de qué cuelga.
------------------------------------------------------------------------- */
#comments-panel {
  /* El acento del panel. Naranja porque el agua está reservada para la IA (ver .cm-mention), y
     en el 400 de la escala y no en el ámbar #f59e0b del badge de conexión: ese ámbar YA quiere
     decir algo ("hay token, sin uso reciente") y es más amarillo, que sobre esta tarjeta oscura
     se lee como una advertencia. */
  --cm-accent: #fb923c;
  --cm-accent-soft: rgba(251, 146, 60, 0.55);
  position: fixed;
  z-index: 7000;
  width: 360px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(24, 24, 29, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.50);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* --- cabecera ------------------------------------------------------------ */
#comments-panel .cm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
  flex-shrink: 0;
}

#comments-panel .cm-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#comments-panel .cm-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.40);
  margin-top: 2px;
}

#comments-panel .cm-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#comments-panel .cm-tool {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}
#comments-panel .cm-tool:hover { color: #fff; }

/* Confirmación de que el copy salió: el ícono toma el acento del panel un segundo. Sin esto, un
   click en "copiar" no tiene ninguna consecuencia visible y el usuario lo vuelve a apretar. */
#comments-panel .cm-tool-done { color: var(--cm-accent); }

#comments-panel .cm-tool svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* --- buscar --------------------------------------------------------------- */
#comments-panel .cm-searchrow {
  padding: 0 18px 10px;
  flex-shrink: 0;
}

#comments-panel .cm-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 11.5px;
  color: #fff;
  outline: none;
}
#comments-panel .cm-search:focus        { border-color: rgba(255, 255, 255, 0.22); }
#comments-panel .cm-search::placeholder { color: rgba(255, 255, 255, 0.25); }

/* --- la lista ------------------------------------------------------------ */
#comments-panel .cm-list {
  overflow-y: auto;
  padding: 0 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#comments-panel .cm-list::-webkit-scrollbar { width: 3px; }
#comments-panel .cm-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

#comments-panel .cm-empty {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.35);
  padding: 6px 0 10px;
}

#comments-panel .cm-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  /* La barra de la izquierda existe sólo para los NO leídos; la transparente reserva su lugar
     para que un comment no se corra dos píxeles cuando deja de ser nuevo. */
  border-left: 2px solid transparent;
}

#comments-panel .cm-item.cm-new { border-left-color: #22c55e; }

/* --- la firma ------------------------------------------------------------ */
#comments-panel .cm-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  flex-wrap: wrap;
}

#comments-panel .cm-who   { color: rgba(255, 255, 255, 0.88); font-weight: 600; }

/* La IA firma en AGUA porque en esta app el agua significa IA (viene del agente que se retiró
   en la sesión 57). Es lo que hace que "Claude · via Guille" se distinga de "Guille" sin leer:
   toda la razón de ser de la firma doble es que se note de un vistazo. */
#comments-panel .cm-who-ai { color: #19d3bf; }

#comments-panel .cm-via   { color: rgba(255, 255, 255, 0.35); }
#comments-panel .cm-when  { color: rgba(255, 255, 255, 0.28); margin-left: auto; white-space: nowrap; }

#comments-panel .cm-acts {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#comments-panel .cm-item:hover .cm-acts { opacity: 1; }

#comments-panel .cm-act {
  background: none;
  border: none;
  padding: 0 2px;
  font-family: inherit;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
#comments-panel .cm-act:hover      { color: #fff; }
#comments-panel .cm-act-del:hover  { color: #f87171; }
#comments-panel .cm-act-armed      { color: #f87171; opacity: 1; }

/* --- de qué nodo habla --------------------------------------------------- */
#comments-panel .cm-on {
  align-self: flex-start;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#comments-panel .cm-on:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Tachado = el nodo ya no está y el comment subió al modelo (sesión 61). No se puede ir a
   ningún lado, y por eso tampoco se comporta como un botón. */
#comments-panel .cm-on-dead {
  text-decoration: line-through;
  cursor: default;
  opacity: 0.55;
}
#comments-panel .cm-on-dead:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255,255,255,0.55); }

/* --- el cuerpo ------------------------------------------------------------ */
#comments-panel .cm-body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ⚠️ NARANJA Y NO AGUA, y es una regla de la app entera, no una preferencia (lo señaló Guille en
   la sesión 71): **el agua #19d3bf significa IA** — viene del agente que se retiró en la 57 y es
   por eso que el autor de un comment de IA se pinta así. Una mención la escribe cualquiera, humano
   o IA, así que en agua le habría prestado un significado que no tiene, y además habría dejado dos
   cosas distintas del mismo color adentro del MISMO comment: quién habla y de qué habla.
   Adentro de este panel el naranja es el acento propio: menciones, foco y confirmaciones. */
#comments-panel .cm-mention {
  color: var(--cm-accent);
  cursor: pointer;
}
#comments-panel .cm-mention:hover { text-decoration: underline; }

/* La mención a un nodo borrado queda TACHADA, como en un cuaderno: está para saber que estuvo
   (sesión 61 — el principio 5 aplicado a los comments). */
#comments-panel .cm-mention-dead {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
  cursor: default;
}
#comments-panel .cm-mention-dead:hover { text-decoration: line-through; }

/* --- escribir ------------------------------------------------------------- */
#comments-panel .cm-composer {
  flex-shrink: 0;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;              /* ancla del dropdown de @menciones */
}

/* --- el dropdown de @menciones -------------------------------------------
   Se abre HACIA ARRIBA (`bottom: 100%`) y no hacia abajo: el composer está pegado al piso del
   panel, así que abajo no hay lugar. Mismo razonamiento que el panel de conexión en la sesión 66.
   Va sobre el campo de edición también, y por eso .cm-item es su otro ancla. */
#comments-panel .cm-composer,
#comments-panel .cm-item {
  position: relative;
}

#comments-panel .cm-mentions-dd {
  position: absolute;
  bottom: 100%;
  left: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  background: rgba(28, 28, 34, 0.99);
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  max-height: 180px;
  overflow-y: auto;
  z-index: 2;
}

/* Sobre el campo de edición: en flujo, empujando el ítem. Ver el porqué en comments-panel.js
   (adentro de .cm-list, que scrollea, cualquier cosa flotante se recorta contra su borde). */
#comments-panel .cm-mentions-inline {
  position: static;
  margin-top: 4px;
  max-height: 140px;
}

#comments-panel .cm-mentions-dd::-webkit-scrollbar { width: 3px; }
#comments-panel .cm-mentions-dd::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

#comments-panel .cm-mention-opt {
  padding: 6px 12px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El resaltado del elegido usa el acento del panel — el mismo naranja de las menciones ya
   escritas, así que el color dice "esto va a terminar siendo una mención". */
#comments-panel .cm-mention-opt-on,
#comments-panel .cm-mention-opt:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--cm-accent);
}

#comments-panel .cm-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: #fff;
  resize: vertical;
  outline: none;
}
#comments-panel .cm-input:focus       { border-color: var(--cm-accent-soft); }
#comments-panel .cm-input::placeholder { color: rgba(255, 255, 255, 0.28); }

#comments-panel .cm-edit { margin-top: 2px; }

#comments-panel .cm-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 5px;
}