/* ===========================================================================
   AI connect — el cartelito paso a paso de conexión con la IA (js/ui/ai-connect-panel.js)

   POR QUÉ TIENE ARCHIVO PROPIO (sesión 60). Hasta la 59 estos estilos vivían en
   settings-panel.css porque el panel era un subpanel del menú Logo. Ya no lo es: se abre
   solo, desde el badge, y no comparte contenedor con nada. Un archivo por superficie es
   lo mismo que hace live-sync.css o help.css.

   ⚠️ EL TONO CAMBIÓ EN LA SESIÓN 67b (pedido de Guille). Era un panel de trámite: 11 px,
   listas numeradas de tres renglones, todo apretado en vertical. Se leía como un manual
   de instalación. Ahora es un CARTELITO QUE TE HABLA, y eso son tres reglas:

     1. TRES NIVELES TIPOGRÁFICOS, no uno. Título 19 px (el mensaje), sub 13 px (la
        explicación), nota 10.5 px (el detalle que no puede desaparecer pero tampoco
        competir). Si todo pesa igual, no hay nada que leer primero.
     2. AIRE. Padding 26/28, líneas de ~40 caracteres, gaps de 14. El aire es lo que
        separa "esto me lo están contando" de "esto lo tengo que completar".
     3. UN SOLO ACENTO. El agua (#19d3bf) es para lo único que hay que tocar en el cartel:
        el Next y el copy. Dos cosas en agua en la misma pantalla ya son ninguna.

   GEOMETRÍA: la fija el JS (abajo = 20 px por encima del botón ⚙; izquierda = la del botón)
   y el alto máximo se calcula contra la ventana. Acá va sólo el ancho.
   =========================================================================== */

#ai-connect-panel {
  position: fixed;
  z-index: 7000;
  /* Más ancho desde la sesión 67b: adentro entran capturas de la app de destino, y una captura
     angosta no se lee. El texto igual respira porque el padding es grande. */
  width: 40vw;
  min-width: 380px;
  max-width: 620px;
  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);
}

/* --- el progreso: puntos, no un contador -------------------------------- */
#ai-connect-panel .aic-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 16px 28px 0;
}

#ai-connect-panel .aic-dot-step {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  transition: background 0.2s, width 0.2s;
}

#ai-connect-panel .aic-dot-done { background: rgba(255,255,255,0.30); }

/* El de ahora es una barrita y no un punto: dice "estás acá" sin necesidad de un número. */
#ai-connect-panel .aic-dot-here {
  width: 16px;
  border-radius: 3px;
  background: #19d3bf;
}

/* --- el cartel ---------------------------------------------------------- */
#ai-connect-panel .aic-card {
  padding: 18px 28px 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#ai-connect-panel .aic-card::-webkit-scrollbar { width: 3px; }
#ai-connect-panel .aic-card::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}

/* El mensaje. Es lo único que algunos carteles tienen, y tiene que alcanzar. */
#ai-connect-panel .aic-h {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}

#ai-connect-panel .aic-sub {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}

#ai-connect-panel .aic-sub b { color: rgba(255,255,255,0.92); font-weight: 600; }
#ai-connect-panel .aic-sub i { color: rgba(255,255,255,0.85); font-style: italic; }

/* El detalle fino. Existe porque hay cosas que si no se dicen rompen la conexión (el
   Knowledge vacío del GPT, el chat nuevo), pero decirlas al mismo peso que el mensaje
   convertía cada cartel en un párrafo. */
#ai-connect-panel .aic-note {
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.34);
  padding-top: 2px;
}

#ai-connect-panel .aic-note b { color: rgba(255,255,255,0.52); font-weight: 600; }

/* --- la captura de la pantalla ajena + sus chapitas ---------------------- */
/* Describir con palabras dónde queda un botón de OTRA app es la parte cara del tutorial. La
   captura lo resuelve de un vistazo, y la chapita numerada ata el texto al lugar exacto: el
   mismo número está en la copy (`[1]`) y sobre la imagen. */
/* La caja es la VENTANITA del recorte: su proporción y el corrimiento de la imagen los calcula
   `_shot()` (ver ahí el porqué). La imagen va absoluta —o sea que no aporta alto— así que el alto
   sale del `aspect-ratio` inline; sin él la caja mediría cero. */
#ai-connect-panel .aic-shot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  line-height: 0;
}

#ai-connect-panel .aic-shot img {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
}

/* La chapita. Inline dentro del texto; absoluta (y un poco más grande) sobre la imagen. */
#ai-connect-panel .aic-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #19d3bf;
  color: #10201f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  margin: 0 1px;
}

#ai-connect-panel .aic-mark-on {
  position: absolute;
  width: 22px;
  height: 22px;
  font-size: 12px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.4);
}

/* --- el pie: volver y seguir -------------------------------------------- */
#ai-connect-panel .aic-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 28px 20px;
}

#ai-connect-panel .aic-back {
  font-size: 11.5px;
  color: rgba(255,255,255,0.40);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

#ai-connect-panel .aic-back:hover { color: rgba(255,255,255,0.75); }

/* Apagado, no escondido: que se vea que el camino tiene principio. */
#ai-connect-panel .aic-back-off {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* La única invitación de la pantalla. Sólido y no fantasma: un botón que hay que buscar
   no invita a nada. */
#ai-connect-panel .aic-next {
  padding: 9px 22px;
  border-radius: 999px;
  background: #19d3bf;
  color: #10201f;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.08s;
}

#ai-connect-panel .aic-next:hover  { background: #4fe3d3; }
#ai-connect-panel .aic-next:active { transform: translateY(1px); }

/* --- elegir la IA ------------------------------------------------------- */
/* Las tres a la vista: son el CONTENIDO del cartel, no un campo de un formulario. El
   desplegable de la sesión 60 escondía la única decisión de la pantalla detrás de un click. */
#ai-connect-panel .aic-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ai-connect-panel .aic-opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  border-radius: 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

#ai-connect-panel .aic-opt:hover  { background: rgba(255,255,255,0.11); }
#ai-connect-panel .aic-opt-sel    { border-color: rgba(25,211,191,0.45); background: rgba(25,211,191,0.10); }

#ai-connect-panel .aic-opt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#ai-connect-panel .aic-opt-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
}

#ai-connect-panel .aic-opt-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.42);
}

/* El requisito de la plataforma, dicho ANTES de entrar (Frente 3.3). Registro de etiqueta y
   no de alerta: gris para lo que hace falta tener, agua para el recomendado. Nada de rojo —
   "necesitás Plus" es un dato para elegir, no un error del usuario. */
#ai-connect-panel .aic-opt-req {
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

#ai-connect-panel .aic-opt-req-good {
  background: rgba(25,211,191,0.16);
  color: #7cf2e6;
}

/* --- el valor que hay que copiar ---------------------------------------- */
#ai-connect-panel .aic-value-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(25,211,191,0.10);
  border: 1px solid rgba(25,211,191,0.22);
}

#ai-connect-panel .aic-value-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(25,211,191,0.85);
}

#ai-connect-panel .aic-value-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#ai-connect-panel .aic-value {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  word-break: break-all;
}

#ai-connect-panel .aic-value-soft { color: rgba(255,255,255,0.60); font-style: italic; }
#ai-connect-panel .aic-mono .aic-value { font-family: 'Consolas', 'Menlo', monospace; }

/* `break-all` está bien para una URL o un token, y es horrible para una frase: parte las palabras
   por la mitad. Los valores que son texto para pegarle a la IA se marcan como prosa. */
#ai-connect-panel .aic-prose .aic-value { word-break: normal; overflow-wrap: anywhere; }

#ai-connect-panel .aic-copy {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #19d3bf;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.12s;
}

#ai-connect-panel .aic-copy:hover  { color: #7cf2e6; }
#ai-connect-panel .aic-copied      { color: rgba(255,255,255,0.95); }

/* --- el estado del cartel de verificación (Frente 3.4) ------------------- */
/* Tres estados y ninguno es un fallo: esperando (punto que late), conectado (agua), y
   "todavía no lo veo" (apagado, con una salida). Ver el comentario de _verifyStep. */
#ai-connect-panel .aic-status {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.60);
}

#ai-connect-panel .aic-status-ok { color: #7cf2e6; }

/* El escape hatch de la beta: aparece sólo cuando la verificación se rindió (ver _showHelpOut).
   Va apagado y sin caja: es una salida, no una acción del paso — el único elemento que se
   ilumina es el mail. */
#ai-connect-panel .aic-helpout {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.42);
}
#ai-connect-panel .aic-helpout a {
  color: #19d3bf;
  text-decoration: none;
  border-bottom: 1px solid rgba(25,211,191,0.35);
}
#ai-connect-panel .aic-helpout a:hover { border-bottom-color: #19d3bf; }

#ai-connect-panel .aic-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: #19d3bf;
  animation: aic-pulse 1.4s ease-in-out infinite;
}

#ai-connect-panel .aic-dot-ok  { animation: none; box-shadow: 0 0 6px rgba(25,211,191,0.8); }
#ai-connect-panel .aic-dot-off { animation: none; background: rgba(255,255,255,0.30); }

@keyframes aic-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

#ai-connect-panel .aic-linkbtn {
  color: #19d3bf;
  cursor: pointer;
  font-weight: 600;
}

#ai-connect-panel .aic-linkbtn:hover { color: #7cf2e6; }

/* --- generar una credencial extra (sólo en el cartel final) -------------- */
#ai-connect-panel .aic-genrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

#ai-connect-panel .aic-name {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
  font-family: inherit;
  font-size: 11.5px;
  outline: none;
}

#ai-connect-panel .aic-name::placeholder { color: rgba(255,255,255,0.30); }

#ai-connect-panel .aic-btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(25,211,191,0.18);
  color: #7cf2e6;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

#ai-connect-panel .aic-btn:hover   { background: rgba(25,211,191,0.30); color: #fff; }
#ai-connect-panel .aic-busy        { opacity: 0.5; pointer-events: none; }

#ai-connect-panel .aic-out:empty   { display: none; }
#ai-connect-panel .aic-out {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- lista de tokens ---------------------------------------------------- */
#ai-connect-panel .aic-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 26vh;
  overflow-y: auto;
}

#ai-connect-panel .aic-list::-webkit-scrollbar { width: 3px; }
#ai-connect-panel .aic-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}

#ai-connect-panel .aic-empty {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 6px 2px;
}

#ai-connect-panel .aic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  transition: background 0.12s;
}

#ai-connect-panel .aic-row:hover { background: rgba(255,255,255,0.06); }
#ai-connect-panel .aic-revoked   { opacity: 0.45; }

#ai-connect-panel .aic-prefix {
  font-size: 10px;
  font-family: 'Consolas', 'Menlo', monospace;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

#ai-connect-panel .aic-rowlabel {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ai-connect-panel .aic-used {
  font-size: 9.5px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}

#ai-connect-panel .aic-del {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}

#ai-connect-panel .aic-row:hover .aic-del { opacity: 0.55; }
#ai-connect-panel .aic-del:hover          { opacity: 1 !important; }