/* ============================================================
   RPH OS — Agentes: el contador de la esquina y el panel de sesiones.

   Prefijo `.ag-`, y ni un color ni un tamaño tipográfico nuevo: todo sale de
   `tokens.css`. Lo único propio es geometría de este chasis.

   DOS PIEZAS Y NINGUNA ES NUEVA DEL SISTEMA:

   · El contador es un `.r-orb` de verdad —la misma pieza del rail— dentro de
     su propio `.r-orbs`. No se reimplementa: un orbe con su propio fondo,
     su hairline, su vidrio y su nombre revelado al hover ya existe, y
     dibujar «algo parecido a un orbe» es exactamente cómo un OS deja de
     verse como un solo programa. Lo único que este archivo hace es moverlo
     al canto de ARRIBA en vez del centro vertical.
   · El panel es `popover`. La regla del design system es literal: «si se
     abre y se cierra, `popover`. Si vive puesto, estrato.» Y aquí compra lo
     de siempre: sale encima del panel flotante de un módulo sin negociar un
     z-index, y se cierra con `Escape` y al tocar fuera sin una línea nuestra.

   POR QUÉ NO USA EL PANEL FLOTANTE DEL CHASIS. `.r-flyout` es de los
   módulos: hay UNO y lo maneja `app/app.js`. Robarlo para las sesiones
   cerraría el módulo que Robbie tenía abierto cada vez que un agente
   arranca, que es justo cuando NO quiere que su pantalla cambie.
   ============================================================ */

/* ---------- El contador ----------
   Arriba a la derecha, ~28px abajo del canto: `--os-drag-h` es la franja por
   donde se arrastra la ventana (`.os-drag`), y cruzarla haría que el clic se
   lo pelearan el botón y el gesto de mover. El número sale del mismo token
   que reserva la franja, así que no se pueden desincronizar.

   `right: var(--orb-inset)` lo pone en la MISMA plomada que los orbes del
   rail: son la misma columna leída de arriba a abajo, y por eso nunca se
   traslapa con el panel flotante, que se detiene en `--flyout-rail`. */
.ag-top {
  top: calc(var(--os-drag-h) + var(--s-1));
  bottom: auto;
  right: var(--orb-inset);
  /* `.r-orbs` centra con `translateY(-50%)`; aquí el ancla es el canto. */
  transform: none;
}

/* La cabecera móvil cuenta su ancho como cualquier otro control. El cierre
   conserva su caja táctil y el contador sigue abriendo el mismo diagnóstico. */
.ag-top[data-ag-en-panel] {
  position: static;
  flex: 0 0 var(--orb-size);
  width: var(--orb-size);
  transform: none;
}

/* Invisible cuando está apagado. `hidden` y no `opacity: 0`: un botón
   transparente sigue recibiendo el foco con Tab, y un control que no dice
   nada en la ruta del tabulador es peor que ninguno. */
.ag-top[hidden] { display: none; }

/* El numeral de matriz de puntos dentro de la caja del icono. La caja mide
   siempre lo mismo (`.r-orb__i`), así que revelar el nombre no mueve el
   número — crece la otra columna, como en cualquier orbe. */
.ag-orb .r-lcd { margin: 0 auto; }

/* El tono del contador dice QUÉ clase de atención pide, y son tres estados
   porque son tres cosas distintas que hacer:

     normal  · hay agentes trabajando. No hay que hacer nada.
     warn    · uno está esperando una respuesta. **El bloqueado eres tú.**
     crit    · algo falló y su transcript es lo que hay que leer.

   Se pinta el CANTO y la tinta, no el fondo: el fondo invertido es el
   lenguaje de «éste es el módulo abierto» (`aria-current`) y usarlo aquí
   diría otra cosa. */
.ag-orb[data-ag-tono="warn"] { color: var(--warn); border-color: var(--warn); }
.ag-orb[data-ag-tono="crit"] { color: var(--crit); border-color: var(--crit); }

/* ---------- El panel ----------
   `popover` trae sus propios valores del navegador —`inset: 0`, `margin:
   auto`, borde y relleno— y hay que apagarlos todos: sin esto el panel sale
   centrado en la pantalla con un borde de sistema. */
.ag-panel {
  position: fixed;
  inset: auto;
  top: calc(var(--os-drag-h) + var(--orb-size) + var(--s-3));
  right: var(--orb-inset);
  margin: 0;
  padding: 0;
  border: var(--stroke) solid var(--hairline-strong);
  width: min(460px, calc(100vw - 2 * var(--s-5)));
  /* El alto máximo se mide contra la ventana y no se fija: el panel tiene que
     caber en una laptop de 900px de alto útil con la franja de arrastre y el
     contador ya restados. */
  max-height: calc(100vh - var(--os-drag-h) - var(--orb-size) - var(--s-8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* CERRADO NO PINTA. `display: flex` de arriba le gana al `display: none`
   del popover nativo (misma cascada, más específico el de acá), y el
   panel cerrado se queda en 2 px con su borde — la raya suelta a la
   derecha de Casa, entre el chrome y los orbes. */
.ag-panel:not(:popover-open) { display: none; }
/* SIN VELO, y es una decisión. `popover` ofrece `::backdrop` y la tentación es
   usarlo porque se ve bien; pero un velo dice «lo de atrás no existe», y aquí
   es al revés: esto es un indicador de estado que se consulta mientras se sigue
   trabajando, igual que los orbes. Medido a ojo con el velo puesto: el OS
   entero se apagaba para leer cuatro números, y cerrar el panel se volvía
   obligatorio en vez de opcional. El velo es del diálogo que sí interrumpe. */
.ag-panel::backdrop { background: transparent; }

.ag-panel__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: var(--stroke) solid var(--hairline);
}
/* La columna se declara, no se deja al auto-placement: sin `grid-column: 2` el
   navegador coloca la × en la primera celda libre —o sea la 1— y empuja la
   métrica a la derecha. Se vio en la primera revisión: el numeral quedaba
   pegado al canto y la × donde iba el dato. */
.ag-panel__x { grid-column: 2; grid-row: 1 / span 2; }

/* Los otros tres números. Renglón de texto con `tabular-nums`: el numeral de
   puntos es del protagonista —«trabajando»— y no de todos, que es lo que
   dice el no-negociable. */
.ag-nums {
  grid-column: 1;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-body-sm);
  font-variant-numeric: tabular-nums;
}
.ag-nums b { color: var(--ink-2); font-weight: var(--fw-medium); }
.ag-nums--warn b { color: var(--warn); }

.ag-secs { margin: var(--s-3) var(--s-4) 0; }

.ag-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  overflow-y: auto;
  min-height: 0;
}

/* ---------- Una sesión, colapsada ----------
   Renglón único: punto CUADRADO de estado, el runtime, la rama, cuánto lleva,
   y la última línea de avance. Todo lo demás vive detrás del plegado — es el
   patrón de Cursor y de Copilot, y es literal la regla del proyecto
   «comprimido de entrada, expande al tocar». */
.ag-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }

.ag-s {
  border-bottom: var(--stroke) solid var(--hairline);
  padding-bottom: var(--s-1);
}
.ag-s:last-child { border-bottom: 0; }

.ag-s__h {
  display: grid;
  /* CINCO columnas y no cuatro: punto · nombre · rama · cuándo · flecha. Con
     cuatro, la flecha se iba al renglón de abajo en cuanto la sesión tenía
     rama —o sea, en todas las que trabajan sobre un repo— y el plegado se veía
     como un glifo suelto debajo del nombre. Se vio en la primera revisión.
     La columna de la rama mide 0 cuando no hay rama, así que las sesiones sin
     repo no pagan el hueco. */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.ag-s__h:hover { color: var(--ink); background: var(--idle-bg); }

.ag-s__n {
  font-size: var(--t-body-sm);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-s__at {
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.ag-s__v { transition: transform var(--d-fast) var(--ease); }
.ag-s__h[aria-expanded="true"] .ag-s__v { transform: rotate(180deg); }

/* El avance: UN renglón, recortado. Que sea una línea es la decisión — el
   transcript completo está a un clic, y tres líneas por sesión × siete
   sesiones es la pantalla que este panel existe para no ser. */
.ag-s__av {
  /* Vive FUERA de la retícula del renglón (es hermano del botón, no su hijo),
     así que la sangría se pone a mano en vez de con `grid-column`: 7px del
     punto de estado más el hueco. Un `grid-column` aquí no hacía nada y
     confundía a quien lo leyera. */
  margin: 0 0 var(--s-2);
  padding-left: calc(7px + var(--s-2));
  color: var(--ink-3);
  font-size: var(--t-micro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-s__b { padding: 0 0 var(--s-3); display: grid; gap: var(--s-3); }

/* La rama, que es lo único que queda cuando la sesión cierra. */
.ag-rama {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Las acciones de la sesión: reveladas, como en todo el OS. */
.ag-s__a {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.ag-s:hover .ag-s__a,
.ag-s:focus-within .ag-s__a { opacity: 1; }

/* ---------- La pregunta que espera ----------
   Ésta NO se esconde ni se recorta, y es la excepción de la claridad del
   `CLAUDE.md`: es lo único de este panel que pide una decisión, y una
   decisión con el texto recortado es una decisión mal tomada. */
.ag-q {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border-left: 2px solid var(--warn);
}
.ag-q__t { margin: 0; font-size: var(--t-body-sm); color: var(--ink); }
.ag-q__o { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- Los eventos ----------
   Van dentro de `.r-stream`, que es la pieza del sistema para «texto crudo
   del modelo»: monoespacio, canto punteado a la izquierda y desvanecido por
   arriba. El canto punteado es la firma que dice «provisional», y aquí dice
   además algo más fuerte: esto lo escribió otro. */
/* Va DENTRO de `.r-stream` pero no es `.r-stream__raw`, y la diferencia es
   deliberada: aquél desvanece por arriba y recorta —es una cola en
   movimiento, no un texto que se lee— y aquí el transcript sí se lee. Se
   hereda la familia monoespaciada y el canto punteado del contenedor; lo que
   cambia es que esto scrollea y no se enmascara. */
.ag-ev {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 190px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.ag-ev__i { display: block; margin-bottom: 0; padding: var(--s-1) 0; }
.ag-ev__i + .ag-ev__i { padding-top: 0; }
.ag-ev__k { color: var(--ink-4, var(--ink-3)); text-transform: uppercase; }

/* ---------- La cola y el buzón ---------- */
.ag-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: var(--stroke) solid var(--hairline);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
}
.ag-row:last-child { border-bottom: 0; }
.ag-row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-row__m { color: var(--ink-3); font-size: var(--t-micro); }
.ag-row__x { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.ag-row:hover .ag-row__x,
.ag-row:focus-within .ag-row__x { opacity: 1; }

/* CF-A1.6: lista viva. Encima de las pestañas, renglón único. El vacío
   no se dibuja — lo decide JS. */
.ag-foco {
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-4) 0;
  display: grid;
  gap: var(--s-1);
  border-bottom: var(--stroke) solid var(--hairline);
}
.ag-foco__h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.ag-foco__h:hover { color: var(--ink); background: var(--idle-bg); }
.ag-foco__n {
  font-size: var(--t-body-sm);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-foco__st { font-variant-numeric: tabular-nums; }

/* El vacío de una sección. Una oración corta, sin ilustración: la sección
   vacía es el estado normal de este panel casi todo el día. */
.ag-nada {
  margin: var(--s-4) 0;
  color: var(--ink-3);
  font-size: var(--t-body-sm);
  text-align: center;
}

/* ---------- Angosto ----------
   Debajo de 520px el panel toma el ancho de la ventana menos el aire, y el
   renglón de la sesión pierde la columna de la rama: cuatro columnas en 320px
   dejan el nombre en dos caracteres. La rama sigue en el `title` y dentro del
   plegado. */
@media (max-width: 520px) {
  .ag-panel { right: var(--s-3); left: var(--s-3); width: auto; }
  .ag-s__h { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .ag-s__h .ag-rama { display: none; }
}