/* ============================================================
   CloudCLI — CSS generado por el plugin Themes
   Tema: CIPowerUp

   NO EDITAR A MANO: este fichero se regenera cada vez que se
   aplica un tema desde la pestaña Themes de CloudCLI.
   ============================================================ */

/* --- Colores base de CloudCLI --------------------------------------
   Sobrescriben las variables de :root/.dark del host. Van primero para
   que cualquier color de una sección concreta, más específico y
   posterior, gane sobre ellos. Solo se emite lo rellenado en cada modo:
   lo vacío deja el valor de serie de CloudCLI. */

:root {
  --background: 45 5.7% 86.3%;
  --card: 30 10% 96.1%;
  --primary: 0 0% 0%;
}

.dark {
  --background: 225 10.5% 14.9%;
  --card: 0 0% 12.2%;
  --primary: 45 3.1% 74.5%;
}

/* --- Escala global ------------------------------------------------
   x1.05 sobre el tamaño de letra raíz (16px).
   Al estar el diseño en rem, escala también espaciados y anchos. */

html {
  font-size: 16.8px;
}

/* --- Tamaños de letra de la conversación ---
   Escala x1.15 sobre los valores originales de Tailwind.
   Restringido a .chat-message para no afectar al resto de la interfaz, que reutiliza estas mismas clases. */

.chat-message .text-xs {
  font-size: 0.8625rem;   /* 13.8px */
  line-height: 1.15rem; /* 18.4px */
}

.chat-message .text-sm {
  font-size: 1.00625rem;   /* 16.1px */
  line-height: 1.4375rem; /* 23px */
}

.chat-message .text-base {
  font-size: 1.15rem;   /* 18.4px */
  line-height: 1.725rem; /* 27.6px */
}

.chat-message .text-lg {
  font-size: 1.29375rem;   /* 20.7px */
  line-height: 2.0125rem; /* 32.2px */
}

.chat-message .text-xl {
  font-size: 1.4375rem;   /* 23px */
  line-height: 2.0125rem; /* 32.2px */
}

.chat-message .text-\[8px\] { font-size: 9.2px; }
.chat-message .text-\[9px\] { font-size: 10.35px; }
.chat-message .text-\[10px\] { font-size: 11.5px; }
.chat-message .text-\[11px\] { font-size: 12.65px; }
.chat-message .text-\[12px\] { font-size: 13.8px; }
.chat-message .text-\[13px\] { font-size: 14.95px; }
.chat-message .text-\[14px\] { font-size: 16.1px; }
.chat-message .text-\[0\.8125rem\] { font-size: 0.93437rem; }

.chat-message .prose-sm {
  font-size: 1.00625rem;   /* 16.1px */
  line-height: 1.7142857;
}

/* --- Tamaño del texto de tus mensajes ------------------------------
   Escala x0.85 sobre la general (x1.15),
   es decir x0.9775 sobre el tamaño original. */

.chat-message.user .font-serif.text-sm {
  font-size: 0.85531rem;   /* 13.68px */
  line-height: 1.22187rem; /* 19.55px */
}

.chat-message.user .prose-sm {
  font-size: 0.85531rem;   /* 13.68px */
  line-height: 1.7142857;
}

/* --- Tamaños de letra de los comandos del agente ---
   Escala x1.035 sobre los valores originales de Tailwind.
   Escala x0.9 sobre la general (x1.15). Acotado a .chat-message.tool, que es el bloque de ToolGroupContainer; incluye prose porque sus renderizadores de contenido también pintan markdown. */

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-xs {
  font-size: 0.77625rem;   /* 12.42px */
  line-height: 1.035rem; /* 16.56px */
}

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-sm {
  font-size: 0.90562rem;   /* 14.49px */
  line-height: 1.29375rem; /* 20.7px */
}

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-base {
  font-size: 1.035rem;   /* 16.56px */
  line-height: 1.5525rem; /* 24.84px */
}

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-lg {
  font-size: 1.16437rem;   /* 18.63px */
  line-height: 1.81125rem; /* 28.98px */
}

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-xl {
  font-size: 1.29375rem;   /* 20.7px */
  line-height: 1.81125rem; /* 28.98px */
}

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[8px\] { font-size: 8.28px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[9px\] { font-size: 9.31px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[10px\] { font-size: 10.35px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[11px\] { font-size: 11.38px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[12px\] { font-size: 12.42px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[13px\] { font-size: 13.45px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[14px\] { font-size: 14.49px; }
:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .text-\[0\.8125rem\] { font-size: 0.84094rem; }

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .prose-sm {
  font-size: 0.90562rem;   /* 14.49px */
  line-height: 1.7142857;
}

/* --- Bloques de código de la conversación --------------------------
   Escala x1.265 (conversación x1.15 × código
   x1.1) sobre los 0.8125rem que el resaltador
   escribe en el atributo style del <pre>. De ahí el !important: es lo
   único que gana a un estilo en línea. */

.chat-message .my-3.overflow-hidden.rounded-xl > pre {
  font-size: 1.02781rem !important;
}

.chat-message.user .my-3.overflow-hidden.rounded-xl > pre {
  font-size: 0.87364rem !important;
}

:is(.chat-message.tool, .chat-message.assistant:has(.prose:not(.prose-gray))) .my-3.overflow-hidden.rounded-xl > pre {
  font-size: 0.92503rem !important;
}

/* --- Tamaños de letra de la caja de escritura ---
   Escala x1.1 sobre los valores originales de Tailwind.
   data-slot es un atributo estable que pone el propio componente (PromptInput.tsx:80), más fiable que sus clases. */

[data-slot="prompt-input-body"] .text-xs {
  font-size: 0.825rem;   /* 13.2px */
  line-height: 1.1rem; /* 17.6px */
}

[data-slot="prompt-input-body"] .text-sm {
  font-size: 0.9625rem;   /* 15.4px */
  line-height: 1.375rem; /* 22px */
}

[data-slot="prompt-input-body"] .text-base {
  font-size: 1.1rem;   /* 17.6px */
  line-height: 1.65rem; /* 26.4px */
}

[data-slot="prompt-input-body"] .text-lg {
  font-size: 1.2375rem;   /* 19.8px */
  line-height: 1.925rem; /* 30.8px */
}

[data-slot="prompt-input-body"] .text-xl {
  font-size: 1.375rem;   /* 22px */
  line-height: 1.925rem; /* 30.8px */
}

[data-slot="prompt-input-body"] .text-\[8px\] { font-size: 8.8px; }
[data-slot="prompt-input-body"] .text-\[9px\] { font-size: 9.9px; }
[data-slot="prompt-input-body"] .text-\[10px\] { font-size: 11px; }
[data-slot="prompt-input-body"] .text-\[11px\] { font-size: 12.1px; }
[data-slot="prompt-input-body"] .text-\[12px\] { font-size: 13.2px; }
[data-slot="prompt-input-body"] .text-\[13px\] { font-size: 14.3px; }
[data-slot="prompt-input-body"] .text-\[14px\] { font-size: 15.4px; }
[data-slot="prompt-input-body"] .text-\[0\.8125rem\] { font-size: 0.89375rem; }

/* --- Color del texto de tus mensajes -------------------------------
   El markdown se pinta dentro de .prose, que fija su propio color con
   var(--tw-prose-body): hay que reasignar las variables ahí, porque una
   regla en la burbuja no alcanzaría. Los enlaces se dejan con su color
   para que sigan distinguiéndose. */

.chat-message.user .rounded-2xl.rounded-br-md {
  color: #0c274a;
}

.chat-message.user .prose {
  --tw-prose-body: #0c274a;
  --tw-prose-headings: #0c274a;
  --tw-prose-bold: #0c274a;
  --tw-prose-bullets: #0c274a;
  --tw-prose-counters: #0c274a;
  --tw-prose-quotes: #0c274a;
  --tw-prose-code: #0c274a;
}

.dark .chat-message.user .rounded-2xl.rounded-br-md {
  color: #e6e8f0;
}

.dark .chat-message.user .prose {
  --tw-prose-body: #e6e8f0;
  --tw-prose-headings: #e6e8f0;
  --tw-prose-bold: #e6e8f0;
  --tw-prose-bullets: #e6e8f0;
  --tw-prose-counters: #e6e8f0;
  --tw-prose-quotes: #e6e8f0;
  --tw-prose-code: #e6e8f0;
}

/* --- Fondo del mensaje enviado -----------------------------------
   Desde CloudCLI 1.37.2 la burbuja ya no usa bg-blue-600 (ahora es
   bg-muted/60 de día y dark:bg-gray-800/60 de noche): se engancha
   por su redondeo, cuya combinación es única en la aplicación. Las
   cuatro clases ganan por especificidad a la regla de modo noche
   del host. */

.chat-message.user .rounded-2xl.rounded-br-md {
  background-color: rgb(200 210 220);
}

.dark .chat-message.user .rounded-2xl.rounded-br-md {
  background-color: rgb(44 46 53);
}

/* --- Botón "New Session" -----------------------------------------
   Acotado al contenedor de la lista de sesiones para no afectar al
   resto de elementos que usan bg-primary.

   Hay una regla por modo porque --primary NO es el mismo en los dos:
   CloudCLI declara 221.2 83.2% 53.3% en :root y 217.2 91.2% 59.8% en
   .dark, o sea aclara el azul al pasar a noche. Un único color literal
   aplanaba esa diferencia. */

.ml-3.space-y-1.border-l.border-border.pl-3 .bg-primary {
  background-color: rgb(255 255 255);
  color: #0a0a0a;
}

.ml-3.space-y-1.border-l.border-border.pl-3 .hover\:bg-primary\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}

.dark .ml-3.space-y-1.border-l.border-border.pl-3 .bg-primary {
  background-color: rgb(0 0 0);
  color: #ffffff;
}

.dark .ml-3.space-y-1.border-l.border-border.pl-3 .hover\:bg-primary\/90:hover {
  background-color: rgb(0 0 0 / 0.9);
}

/* --- Ancho de la barra lateral -------------------------------------
   Original: 288px (md:w-72). Solo a partir del
   breakpoint md, para no tocar el panel deslizante del móvil. */

@media (min-width: 768px) {
  .md\:w-72.md\:select-none {
    width: 320px;
  }
}

/* --- Alto de los items de conversación ------------------------------
   El item lleva h-auto: su alto lo marca el contenido más el padding
   de p-2 (8px). Se ajusta solo el eje vertical, para no tocar
   el hueco derecho (pr-11) que reservan los botones de acción. */

a[href*="/session/"] {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* --- Alto de los items de proyectos ---------------------------------
   Misma idea que en las conversaciones: la fila lleva h-auto, así que
   se ajusta el eje vertical de su p-2 (8px). */

.w-full.justify-between.p-2.h-auto {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* --- Bloque de proyecto ---------------------------------------------
   El telón envuelve la fila del proyecto y su lista de conversaciones.
   La separación se da a TODOS los bloques, seleccionados o no, para que
   la lista no dé un salto al cambiar de proyecto. */

.md\:space-y-1:has(> .md\:group) {
  padding: 5px;
}

/* Sigue al proyecto SELECCIONADO, esté desplegado o contraído. */

.md\:space-y-1:has(> .md\:group > .w-full.justify-between.p-2.h-auto.bg-accent) {
  background-color: rgb(192 191 188);
  border-radius: 6px;
}

.dark .md\:space-y-1:has(> .md\:group > .w-full.justify-between.p-2.h-auto.bg-accent) {
  background-color: rgb(85 85 85);
}

/* La lista de conversaciones marca su jerarquía con una línea a la
   izquierda y su sangría. Con el telón detrás sobran las dos: el bloque
   ya agrupa visualmente. Se conserva el margen, que mantiene la sangría. */

.ml-3.space-y-1.border-l.border-border.pl-3 {
  padding-left: 0;
  border-left-width: 0;
}

/* --- Fondo de la conversación seleccionada --------------------------
   El host la pinta con hsl(var(--primary) / .05); esa utilidad gana a
   bg-card, de ahí que se vea casi transparente. Estas reglas son más
   específicas (enlace + clase, o cuatro clases en móvil), así que se
   imponen sin !important. */

a[href*="/session/"].bg-primary\/5,
.mx-3.my-0\.5.rounded-md.bg-primary\/5 {
  background-color: rgb(246 211 45 / 0.86);
}

/* --- Cabecera: ancho del título ajustado al contenido ---------------
   De serie el bloque reserva 18rem con tope del 34%. `flex: 0 1 auto`
   lo deja en el tamaño de su contenido conservando la capacidad de
   encoger (de ahí el 1 del medio), que es lo que permite que el título
   siga recortándose con puntos suspensivos en ventanas estrechas. */

@media (min-width: 640px) {
  .sm\:max-w-\[min\(34\%\,24rem\)\].sm\:flex-\[1_1_18rem\] {
    flex: 0 1 auto;
    max-width: none;
  }
}

/* --- Ancho mínimo del listado de archivos --------------------------
   Cabecera de columnas y área de filas son hermanas: las dos llevan el
   mismo mínimo para que sus columnas sigan cuadrando, y el panel que
   las contiene se encarga de desplazarlas juntas cuando no caben. */

.border-b.border-border.px-3.pb-1.pt-1\.5,
.flex-1.px-2.py-1.relative.overflow-hidden {
  min-width: 700px;
}

.relative.flex.h-full.flex-col.bg-background {
  overflow-x: auto;
  overflow-y: hidden;
}

/* --- Ancho de las columnas Size, Modified, Permissions ---
   Se declara en píxeles y no con max-content porque cada fila es un
   grid aparte: medir el contenido dejaría cada una con sus columnas en
   un sitio. La misma regla alcanza a la cabecera y a las filas, que es
   lo que las mantiene cuadradas. */

.grid-cols-12 {
  grid-template-columns:
    minmax(0, 5fr)
    80px
    105px
    90px;
}

/* Los col-span-* reparten doce pistas; ya solo hay cuatro. */

.grid-cols-12 > * {
  grid-column: auto;
}

/* Separación a cada lado, y recorte con puntos suspensivos si el texto
   no cabe: así nunca se derrama sobre la columna siguiente. */

.grid-cols-12 > :nth-child(2),
.grid-cols-12 > :nth-child(3),
.grid-cols-12 > :nth-child(4) {
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Ocultar: Avatar "U" de los mensajes propios --------------------------------
   Desde CloudCLI 1.37.2 la burbuja ya no lleva bg-blue-600, así que dentro del mensaje solo el avatar tiene esta combinación. */

.chat-message.user .rounded-full.bg-blue-600 {
  display: none !important;
}

/* --- Ocultar: Cabecera con el nombre del agente --------------------------------
   Combinación única en la aplicación (MessageComponent.tsx:143). Oculta la fila entera: icono y nombre. */

.chat-message .mb-2.flex.items-center.space-x-3 {
  display: none !important;
}

/* --- Ocultar "Report Issue" --------------------------------------
   Se ocultan los envoltorios de escritorio y móvil (para no dejar su
   padding suelto) y el enlace de la barra colapsada por separado. */

div.md\:block:has(> a[href*="/issues/new"]),
div.md\:hidden:has(> a[href*="/issues/new"]),
a.h-8.w-8[href*="/issues/new"] {
  display: none !important;
}

/* --- Ocultar "Join Community" --------------------------------------
   Se ocultan los envoltorios de escritorio y móvil (para no dejar su
   padding suelto) y el enlace de la barra colapsada por separado. */

div.md\:block:has(> a[href*="discord.gg"]),
div.md\:hidden:has(> a[href*="discord.gg"]),
a.h-8.w-8[href*="discord.gg"] {
  display: none !important;
}

/* --- Escala de los encabezados de tus mensajes ---------------------
   Una línea que empiece por "# " se sigue viendo como encabezado,
   pero a un tamaño propio de un mensaje y no de un documento. */

.chat-message.user h1 {
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
  margin-top: 0.6em;
  margin-bottom: 0.25em;
}

.chat-message.user h2 {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
  margin-top: 0.6em;
  margin-bottom: 0.25em;
}

.chat-message.user h3 {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  margin-top: 0.6em;
  margin-bottom: 0.25em;
}

.chat-message.user h4 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  margin-top: 0.6em;
  margin-bottom: 0.25em;
}

.chat-message.user h5 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  margin-top: 0.6em;
  margin-bottom: 0.25em;
}

.chat-message.user h6 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  margin-top: 0.6em;
  margin-bottom: 0.25em;
}

/* Un encabezado que abre el mensaje no necesita separación arriba:
   la burbuja ya tiene su propio relleno. */

.chat-message.user h1:first-child,
.chat-message.user h2:first-child,
.chat-message.user h3:first-child,
.chat-message.user h4:first-child,
.chat-message.user h5:first-child,
.chat-message.user h6:first-child {
  margin-top: 0;
}

/* --- Renderizado inmediato de los mensajes ------------------------
   Quita el renderizado diferido (content-visibility: auto) para que
   el alto de cada mensaje sea siempre el real y el scroll no dé
   saltos al subir. Cuesta CPU y memoria: es intencionado. */

.chat-message {
  content-visibility: visible;
}