/* ══ La bolita del asistente ══
   Esquina de abajo a la derecha, por encima de todo y sin empujar nada: se
   abre sobre la pantalla que estés mirando. La izquierda ya está ocupada por
   el menú y su botón de salir. */

.cgm-asst {
  --asst-ink: #1b2435;
  --asst-ink-2: #475067;
  --asst-muted: #79829a;
  --asst-line: #e9ebf1;
  --asst-line-2: #dfe3ec;
  --asst-card: #fff;
  --asst-canvas: #f4f6fa;
  --asst-accent: var(--ft-accent, #6d4aff);
  --asst-accent-2: var(--ft-accent-2, #8b5cf6);
  position: fixed;
  right: 24px;
  bottom: 24px;
  /* Por encima de las pantallas, por DEBAJO de los diálogos (que viven del
     100200 para arriba): una bolita flotando sobre un modal abierto tapa el
     botón de guardar y no hay manera de quitarla de en medio. */
  z-index: 100050;
  font-family: "Inter", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* ── El botón ── */
.cgm-asst__btn {
  position: relative;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  /* Los colores de la MARCA, los mismos del menú: si Brandello es azul
     oscuro, la bolita es azul oscuro. Antes usaba el acento —el morado de los
     botones—, que es otro color de la misma marca y hacía que el soporte
     pareciera de otra casa. `--ft-side-*` las escribe la marca de cada uno en
     `:root`, así que cambian solas al cambiar de marca. */
  background: linear-gradient(140deg, var(--ft-side-1, #181526), var(--ft-side-2, #0e0c18));
  border: 0;
  /* En una marca de menú claro, la propia marca define el color de texto; si
     no existe, blanco, que es lo que pide un menú oscuro. */
  color: var(--ft-side-fg-strong, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(20, 28, 46, 0.3), 0 2px 6px rgba(20, 28, 46, 0.18);
  transition: transform .16s ease, box-shadow .16s ease;
}

/* El globo blanco: fondo para un logo que es morado, y de paso dice «esto
   habla» sin añadir otro icono al lado. */
.cgm-asst__globo {
  position: relative;
  width: 36px;
  height: 36px;
  display: block;
}

.cgm-asst__globoBg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #fff;
}

/* Centrado en la PARTE REDONDA del globo, no en la caja: la cola de abajo a
   la izquierda ocupa caja pero no es sitio donde poner nada, y centrando a la
   brava el logo salía bajo y escorado. */
.cgm-asst__logo,
.cgm-asst__ini {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  display: block;
  object-fit: contain;
}

.cgm-asst__ini {
  width: auto;
  height: auto;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--asst-accent);
}

.cgm-asst__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 28, 46, 0.36), 0 2px 6px rgba(20, 28, 46, 0.2);
}

.cgm-asst__btn:active {
  transform: translateY(0);
}

.cgm-asst__ic {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .16s ease, transform .16s ease;
}

/* Solo el icono DIRECTO: el globo blanco también es un svg y vive aquí
   dentro, así que esta medida se lo tragaba y lo dejaba a 25px —más pequeño
   que el logo que iba dentro, de ahí que el logo se saliera por un lado—. */
.cgm-asst__ic > svg {
  width: 25px;
  height: 25px;
  display: block;
}

/* El icono cambia de globo a aspa según esté abierto: el mismo botón sirve
   para las dos cosas y no hace falta buscar dónde se cierra. */
.cgm-asst__ic--x {
  opacity: 0;
  transform: rotate(-45deg) scale(.7);
}

.cgm-asst.is-open .cgm-asst__ic--chat {
  opacity: 0;
  transform: rotate(45deg) scale(.7);
}

.cgm-asst.is-open .cgm-asst__ic--x {
  opacity: 1;
  transform: none;
}

.cgm-asst__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e2445c;
  border: 2.5px solid #fff;
}

/* ── El panel ── */
.cgm-asst__panel {
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(620px, calc(100vh - 120px));
  background: var(--asst-card);
  border: 1px solid var(--asst-line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 28, 46, 0.22), 0 2px 8px rgba(20, 28, 46, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  animation: cgm-asst-in .18s ease;
}

/* `[hidden]` por sí solo pierde contra el `display: flex` de arriba: sin esto
   el panel se queda abierto para siempre. */
.cgm-asst__panel[hidden] {
  display: none;
}

@keyframes cgm-asst-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cgm-asst__panel { animation: none; }
}

/* La cabecera, con los mismos colores de marca que la bolita: el panel es lo
   que sale de ella y tiene que parecer la misma pieza. */
.cgm-asst__head {
  background: linear-gradient(140deg, var(--ft-side-1, #181526), var(--ft-side-2, #0e0c18));
  color: var(--ft-side-fg-strong, #fff);
  padding: 18px 20px 26px;
  flex: none;
}

.cgm-asst__headTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cgm-asst__mark svg {
  width: 26px;
  height: 26px;
  display: block;
  opacity: .95;
}

.cgm-asst__x {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  /* Un velo del propio color del texto: sobre una marca de menú claro, un
     velo blanco desaparecería. */
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cgm-asst__x:hover {
  background: color-mix(in srgb, currentColor 26%, transparent);
}

.cgm-asst__x svg {
  width: 17px;
  height: 17px;
}

.cgm-asst__title {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.28;
  margin: 0;
  letter-spacing: -0.01em;
}

/* El saludo, más apagado que la pregunta: lo que importa es la pregunta. */
.cgm-asst__hi {
  display: block;
  font-weight: 500;
  color: var(--ft-side-fg-dim, rgba(255, 255, 255, .72));
}

.cgm-asst__body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: var(--asst-canvas);
}

.cgm-asst__pane[hidden] {
  display: none;
}

.cgm-asst__card {
  background: var(--asst-card);
  border: 1px solid var(--asst-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.cgm-asst__card--soon {
  border-style: dashed;
  border-color: var(--asst-line-2);
}

.cgm-asst__card b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--asst-ink);
  margin-bottom: 4px;
}

.cgm-asst__card span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--asst-muted);
}

.cgm-asst__lead {
  font-size: 13px;
  color: var(--asst-muted);
  margin: 0 0 10px;
}

.cgm-asst__ideas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cgm-asst__ideas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--asst-card);
  border: 1px solid var(--asst-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--asst-ink-2);
}

.cgm-asst__ideas svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--asst-accent);
}

/* ── Las pestañas, abajo ── */
.cgm-asst__tabs {
  display: flex;
  border-top: 1px solid var(--asst-line);
  background: var(--asst-card);
  flex: none;
}

.cgm-asst__tabs button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--asst-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 11px 6px 12px;
  cursor: pointer;
  transition: color .14s ease;
}

.cgm-asst__tabs button svg {
  width: 19px;
  height: 19px;
}

.cgm-asst__tabs button.is-on {
  color: var(--asst-accent);
}

/* ── Oscuro ── */
:root[data-theme="dark"] .cgm-asst {
  --asst-ink: #e7ecf5;
  --asst-ink-2: #c3cbdb;
  --asst-muted: #8d97ab;
  --asst-line: #28304a;
  --asst-line-2: #333d5c;
  --asst-card: #161d33;
  --asst-canvas: #111728;
}

:root[data-theme="dark"] .cgm-asst__panel {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ── El círculo, en oscuro ──
   La bolita se pinta con los colores del MENÚ para que soporte parezca de la
   misma casa, y el menú de Brandello es azul casi negro. Sobre el panel claro
   eso se recorta solo; sobre el panel oscuro queda negro sobre negro y el
   círculo desaparece — se veía el globito blanco flotando sin nada alrededor.
   La sombra tampoco ayudaba: una sombra negra sobre fondo negro no es nada.
   Se le pone un filo del propio color del texto, que es lo que dibuja el
   borde del círculo sin cambiarle el color.

   El filo usa `currentColor` y NO `var(--ft-side-fg-strong, #fff)`. Esa
   variable existe pero llega VACÍA, y una propiedad declarada vacía no es lo
   mismo que una sin declarar: el respaldo `#fff` no entra, el `color-mix` se
   queda sin color, y entonces la regla entera —sombra incluida— se tira a la
   basura y manda la de modo claro. Es la misma trampa del var() sin respaldo
   de siempre, y por eso el aro no aparecía. */
:root[data-theme="dark"] .cgm-asst__btn {
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 20%, transparent),
    0 10px 26px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .cgm-asst__btn:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 32%, transparent),
    0 14px 30px rgba(0, 0, 0, .6);
}

@media (max-width: 560px) {
  .cgm-asst {
    right: 16px;
    bottom: 16px;
  }

  .cgm-asst__panel {
    width: calc(100vw - 32px);
  }
}

/* ── Créditos de IA (datos reales, desde Cortex) ── */
.cgm-asst__loading { padding: 24px 4px; text-align: center; font-size: 13px; color: var(--asst-muted); }
.cgm-asst__crTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cgm-asst__crTile {
  background: var(--asst-card); border: 1px solid var(--asst-line); border-radius: 12px;
  padding: 10px 12px; min-width: 0;
}
.cgm-asst__crTile span { display: block; font-size: 11.5px; color: var(--asst-muted); margin-bottom: 3px; }
.cgm-asst__crTile strong {
  display: block; font-size: 15px; font-weight: 600; color: var(--asst-ink); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cgm-asst__crTile strong.is-low { color: #d64545; }

.cgm-asst__card.cgm-asst__crModel, .cgm-asst__card.cgm-asst__cr { margin-bottom: 12px; }
.cgm-asst__card .cgm-asst__crLbl { font-size: 11.5px; margin-bottom: 4px; }
.cgm-asst__crModelRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cgm-asst__crModelRow b { margin: 0; }
.cgm-asst__crModelRow em {
  font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--ft-accent-rgb, 109, 74, 255), .1); color: var(--asst-accent);
}
.cgm-asst__crModel code {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--asst-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
}

.cgm-asst__crList { list-style: none; margin: 6px 0 0; padding: 0; }
.cgm-asst__crList li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--asst-line); font-size: 13px;
}
.cgm-asst__crList li:first-child { border-top: 0; }
.cgm-asst__card .cgm-asst__crName { display: block; color: var(--asst-ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgm-asst__card .cgm-asst__crN { display: block; font-size: 11.5px; color: var(--asst-muted); white-space: nowrap; }
.cgm-asst__crList strong { font-weight: 600; color: var(--asst-ink); font-variant-numeric: tabular-nums; }
.cgm-asst__card .cgm-asst__crNone { font-size: 12.5px; }

.cgm-asst__crBtn {
  display: flex; justify-content: center; align-items: center; margin-top: 4px;
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: var(--asst-accent); color: #fff; font-size: 13.5px; font-weight: 600;
}
.cgm-asst__crBtn:hover { color: #fff; filter: brightness(1.06); }
.cgm-asst__card .cgm-asst__crBtn { margin-top: 10px; }

/* El logo de Brandello (blanco) en la cabecera morada. */
.cgm-asst__mark--logo { display: inline-flex; align-items: center; height: 40px; }
.cgm-asst__mark--logo img { display: block; height: 24px; width: auto; max-width: 140px; }

/* ── Nexo ──
   Mientras hay conversación la cabecera se encoge: el espacio es para hablar. */
.cgm-asst.is-chatting:not(.is-credits) .cgm-asst__head { padding-bottom: 12px; }
.cgm-asst.is-chatting:not(.is-credits) .cgm-asst__headTop { margin-bottom: 0; }
.cgm-asst.is-chatting:not(.is-credits) .cgm-asst__title { display: none; }
.cgm-asst__panel:has(.cgm-nexo:not([hidden])) { height: min(620px, calc(100vh - 120px)); }
.cgm-nexo { display: flex; flex-direction: column; min-height: 100%; }
.cgm-nexo__who { display: flex; gap: 12px; align-items: flex-start; }
.cgm-nexo__who svg { flex: none; }
.cgm-nexo__who p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--asst-ink-2); }
.cgm-nexo__chips { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cgm-nexo__chips button {
  text-align: left; font: inherit; font-size: 13.5px; color: var(--asst-ink); cursor: pointer;
  background: var(--asst-card); border: 1px solid var(--asst-line); border-radius: 12px; padding: 10px 12px;
}
.cgm-nexo__chips button:hover { border-color: var(--asst-accent); }
.cgm-nexo__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cgm-nexo__msg { display: flex; gap: 8px; align-items: flex-start; }
.cgm-nexo__face { flex: none; width: 28px; height: 28px; }
.cgm-nexo__face svg { display: block; }
.cgm-nexo__bubble { min-width: 0; max-width: 100%; padding: 10px 12px; border-radius: 14px; background: var(--asst-card); border: 1px solid var(--asst-line); font-size: 13.5px; line-height: 1.5; color: var(--asst-ink); }
.cgm-nexo__msg.is-user { justify-content: flex-end; }
.cgm-nexo__msg.is-user .cgm-nexo__bubble { background: var(--asst-accent); border-color: transparent; color: #fff; border-bottom-right-radius: 4px; max-width: 85%; }
.cgm-nexo__msg.is-user .cgm-nexo__meta { color: rgba(255, 255, 255, .75); }
.cgm-nexo__msg.is-nexo .cgm-nexo__bubble { border-top-left-radius: 4px; flex: 1; }
.cgm-nexo__msg.is-err .cgm-nexo__bubble { color: #d64545; background: transparent; border-style: dashed; }
.cgm-nexo__text p { margin: 0 0 6px; }
.cgm-nexo__text p:last-child { margin-bottom: 0; }
.cgm-nexo__text ul, .cgm-nexo__text ol { margin: 4px 0 8px; padding-left: 18px; }
.cgm-nexo__text li { margin: 2px 0; }
.cgm-nexo__text a { color: var(--asst-accent); font-weight: 600; text-decoration: none; }
.cgm-nexo__text a:hover { text-decoration: underline; }
.cgm-nexo__text b { font-weight: 650; }
.cgm-nexo__ctx { display: block; font-size: 11.5px; font-weight: 600; color: var(--asst-accent); margin-bottom: 4px; }
.cgm-nexo__meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 11.5px; color: var(--asst-muted); }
.cgm-nexo__meta span:empty { display: none; }
.cgm-nexo__bad { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--asst-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }
.cgm-nexo__bad:hover { color: #d64545; }
.cgm-nexo__msg.is-thinking small { display: block; font-size: 12px; color: var(--asst-muted); margin-top: 4px; }
.cgm-nexo__dots { display: inline-block; width: 30px; height: 8px; background: radial-gradient(circle, var(--asst-muted) 3px, transparent 3.5px) 0 50% / 10px 8px repeat-x; animation: cgm-nexo-dots 1s steps(3) infinite; }
@keyframes cgm-nexo-dots { from { clip-path: inset(0 66% 0 0); } to { clip-path: inset(0 -1% 0 0); } }
.cgm-nexo__form {
  position: sticky; bottom: -16px; margin: 12px -16px -16px; padding: 10px 12px 12px;
  background: var(--asst-canvas); display: flex; gap: 8px; align-items: flex-end;
}
.cgm-nexo__form textarea {
  flex: 1; resize: none; font: inherit; font-size: 14px; line-height: 1.4; color: var(--asst-ink);
  background: var(--asst-card); border: 1px solid var(--asst-line-2); border-radius: 14px; padding: 10px 12px; min-height: 42px; max-height: 140px;
}
.cgm-nexo__form textarea:focus { outline: 2px solid var(--asst-accent); outline-offset: -1px; }
.cgm-nexo__form button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--asst-accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cgm-nexo__form button svg { width: 20px; height: 20px; }
.cgm-nexo__reset { align-self: center; border: 0; background: none; font: inherit; font-size: 12px; color: var(--asst-muted); cursor: pointer; text-decoration: underline; margin-top: 8px; order: -1; margin-bottom: 4px; }
.cgm-nexo__reset[hidden], .cgm-nexo__empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cgm-nexo__dots { animation: none; } }

/* «Esto está mal»: el formulario que se abre debajo de una respuesta de la IA. */
.cgm-rep { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--asst-line-2, #dfe3ec); display: flex; flex-direction: column; gap: 6px; }
.cgm-rep label { font-size: 12.5px; font-weight: 600; color: var(--asst-ink, #1b2435); }
.cgm-rep textarea { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--asst-line-2, #dfe3ec); background: var(--asst-card, #fff); color: var(--asst-ink, #1b2435); resize: vertical; }
.cgm-rep__row { display: flex; gap: 8px; }
.cgm-rep__send, .cgm-rep__cancel { font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.cgm-rep__send { border: 0; background: #c8462a; color: #fff; }
.cgm-rep__send[disabled] { opacity: .6; cursor: wait; }
.cgm-rep__cancel { border: 1px solid var(--asst-line-2, #dfe3ec); background: transparent; color: var(--asst-ink-2, #475067); }
.cgm-rep__msg { margin: 0; font-size: 12px; color: #d64545; }
.cgm-rep__ok { margin: 0; font-size: 12.5px; color: #16a06b; font-weight: 600; }
.cgm-nexo__text blockquote { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid var(--asst-accent); background: var(--asst-canvas); border-radius: 0 8px 8px 0; white-space: pre-wrap; }