/* ═══════════════════════════════════════════════════════════════════════════
   ASISTENTE — lanzador fijo + panel de conversación
   ═══════════════════════════════════════════════════════════════════════════
   Todo cuelga de las variables de tema que ya define ui/theme.py, así que el
   panel sigue el modo claro/oscuro sin una sola regla duplicada. Es lo que el
   widget de ElevenLabs NO hacía: traía su propia paleta dentro de un shadow
   DOM y hubo que redefinirle trece tokens a mano para que no se viera blanco
   sobre el lienzo oscuro. Aquí no hay shadow DOM ni paleta ajena.

   Vive en assets/, que Dash sirve solo, y se monta fuera del árbol de
   componentes: ningún callback lo toca y sobrevive el cambio de pestaña.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lanzador ─────────────────────────────────────────────────────────── */
#jgp-asist-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 9000;
  width: 58px; height: 58px; border-radius: 999px; padding: 0;
  background: var(--surf-3); border: 1px solid var(--rule);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 18px 44px rgba(13,18,47,.16), 0 4px 12px rgba(13,18,47,.08);
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] #jgp-asist-fab { box-shadow: 0 18px 44px rgba(0,0,0,.5); }
#jgp-asist-fab:hover { transform: translateY(-2px) scale(1.04); }
#jgp-asist-fab:focus-visible { outline: 2px solid var(--pos); outline-offset: 3px; }
#jgp-asist-fab svg { width: 26px; height: 26px; display: block; }
#jgp-asist-fab .dot {
  position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px;
  border-radius: 999px; background: #01BF63; border: 2.5px solid var(--canvas-2);
}

/* ── Panel ────────────────────────────────────────────────────────────── */
#jgp-asist-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 9001;
  width: 400px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surf); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(10,14,30,.28);
  transform-origin: bottom right;
  animation: jgp-asist-open .3s cubic-bezier(.2,.8,.2,1) both;
  font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, sans-serif;
}
[data-theme="dark"] #jgp-asist-panel { box-shadow: 0 24px 80px rgba(0,0,0,.6); }
@keyframes jgp-asist-open {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
#jgp-asist-panel[hidden], #jgp-asist-fab[hidden] { display: none !important; }

.jgp-asist-head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-bottom: 1px solid var(--rule);
  background: var(--surf-2);
}
.jgp-asist-mark {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  background: var(--surf-3); display: grid; place-items: center; color: var(--ink);
}
.jgp-asist-mark svg { width: 16px; height: 16px; display: block; }
.jgp-asist-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.jgp-asist-id b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.jgp-asist-id span {
  font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px;
}
.jgp-asist-id i {
  width: 6px; height: 6px; border-radius: 999px; background: #01BF63; display: block;
}
.jgp-asist-ico {
  width: 30px; height: 30px; border-radius: 8px; border: 0; flex: none; padding: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: background .16s, color .16s;
}
.jgp-asist-ico:hover { background: var(--surf-3); color: var(--ink); }
.jgp-asist-ico svg { width: 15px; height: 15px; display: block; }

.jgp-asist-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 14px;
}

/* ── Mensajes ─────────────────────────────────────────────────────────── */
.jgp-asist-msg {
  display: flex; flex-direction: column; gap: 8px;
  animation: jgp-asist-rise .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes jgp-asist-rise {
  from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; }
}
.jgp-asist-msg.yo { align-items: flex-end; }
.jgp-asist-msg.yo .bub {
  background: var(--surf-3); color: var(--ink); border-radius: 14px 14px 4px 14px;
  padding: 9px 13px; font-size: 13.5px; max-width: 85%; line-height: 1.5;
}
.jgp-asist-msg.bot .txt {
  font-size: 13.5px; line-height: 1.62; color: var(--ink);
}

/* ── Bloques de respuesta ─────────────────────────────────────────────── */
.jgp-asist-cifras { display: flex; flex-wrap: wrap; gap: 8px; }
.jgp-asist-cifra {
  flex: 1 1 128px; min-width: 0; background: var(--surf-2);
  border: 1px solid var(--rule-lt); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.jgp-asist-cifra .k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); font-weight: 700;
}
.jgp-asist-cifra .v {
  font-size: 17px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.jgp-asist-ubi {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--surf-2); border: 1px solid var(--rule-lt);
  border-radius: 10px; padding: 9px 12px;
  font-size: 11px; color: var(--muted);
}
.jgp-asist-ubi b {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #fff; background: var(--navy-chip, #0D122F);
  border-radius: 5px; padding: 3px 7px; font-weight: 700;
}
[data-theme="dark"] .jgp-asist-ubi b { background: var(--surf-3); color: var(--ink); }
.jgp-asist-chips { display: flex; flex-direction: column; gap: 7px; }
.jgp-asist-chip {
  text-align: left; font-family: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--surf); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; line-height: 1.4;
  transition: border-color .16s, background .16s, transform .16s;
}
.jgp-asist-chip:hover {
  border-color: #01BF63; background: var(--surf-2); transform: translateY(-1px);
}

/* ── Estado vacío ─────────────────────────────────────────────────────── */
.jgp-asist-vacio { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.jgp-asist-vacio .saludo {
  font-size: 18px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.3;
}
.jgp-asist-vacio .sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── Escribiendo ──────────────────────────────────────────────────────── */
.jgp-asist-typing { display: flex; gap: 4px; padding: 4px 0; }
.jgp-asist-typing i {
  width: 6px; height: 6px; border-radius: 999px; background: var(--subtle);
  display: block; animation: jgp-asist-blink 1.3s infinite;
}
.jgp-asist-typing i:nth-child(2) { animation-delay: .18s; }
.jgp-asist-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes jgp-asist-blink { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }

/* ── Composer ─────────────────────────────────────────────────────────── */
.jgp-asist-foot {
  flex: none; border-top: 1px solid var(--rule); background: var(--surf);
  padding: 11px 13px 9px; display: flex; flex-direction: column; gap: 7px;
}
.jgp-asist-form {
  display: flex; align-items: center; gap: 6px; background: var(--surf-2);
  border: 1px solid var(--rule); border-radius: 12px; padding: 4px 5px 4px 12px;
  transition: border-color .16s;
}
.jgp-asist-form:focus-within { border-color: #01BF63; }
.jgp-asist-form input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 13.5px; padding: 8px 0; outline: none;
}
.jgp-asist-form input::placeholder { color: var(--subtle); }
.jgp-asist-send {
  width: 31px; height: 31px; border-radius: 9px; border: 0; flex: none; padding: 0;
  background: #01BF63; color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: filter .16s, opacity .16s;
}
.jgp-asist-send[disabled] { opacity: .3; cursor: not-allowed; }
.jgp-asist-send:not([disabled]):hover { filter: brightness(1.08); }
.jgp-asist-send svg { width: 15px; height: 15px; display: block; }
.jgp-asist-nota {
  font-size: 10px; color: var(--subtle); line-height: 1.45; text-align: center;
}

@media (max-width: 560px) {
  #jgp-asist-panel { right: 12px; left: 12px; bottom: 12px; width: auto; height: 74vh; }
  #jgp-asist-fab { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #jgp-asist-panel, .jgp-asist-msg, .jgp-asist-typing i { animation: none !important; }
}