/* BugOrBill — Inspector Bug, la ayuda de la aplicación: mascota en la esquina que vuela y se posa sobre el campo en
   que se escribe, burbuja con la pregunta al pasar por encima (o tocarla, o F2) y chat.
   Solo usa las variables de app.css. La ilustración es una imagen: los estados se animan con transformaciones (flotar,
   un guiño de vez en cuando, volar, pensar) y, con prefers-reduced-motion, se muestran quietos (la mascota cambia de
   sitio sin animación). static/js/inspector.js lee los tamaños y tiempos de aquí y fija por CSSOM el sitio en que se
   posa (--inspector-x, --inspector-y, --inspector-scale) y el de la burbuja. */

:root {
  /* Tamaño en la esquina y posada sobre un campo. */
  --inspector-size: 116px;
  --inspector-perch-size: 60px;
  /* Posada: cuánto pisa el borde superior del campo y cuánto se separa de su extremo derecho. */
  --inspector-perch-sink: 6px;
  --inspector-perch-inset: 6px;
  /* Duración del vuelo entre la esquina y el campo, y pausa antes de cerrar la pregunta al apartar el ratón. */
  --inspector-fly-duration: .5s;
  --inspector-bubble-hide-delay: 450ms;
  --inspector-gap: 1rem;
  /* Una página con un pie fijo abajo puede subir la mascota con esta variable. */
  --inspector-offset-bottom: 0px;
  --inspector-bottom: calc(var(--inspector-gap) + var(--inspector-offset-bottom) + env(safe-area-inset-bottom, 0px));
  --inspector-right: calc(var(--inspector-gap) + env(safe-area-inset-right, 0px));
}

/* Hueco al final de la página para que la mascota de la esquina nunca tape lo último que se puede desplazar. */
body.has-inspector .main > .page { padding-bottom: calc(var(--space-6) + var(--inspector-size) + var(--inspector-gap)); }
body.has-inspector .public-footer { padding-bottom: calc(var(--inspector-size) + var(--inspector-gap)); }

/* --- Mascota ------------------------------------------------------------------------------------- */
.inspector {
  position: fixed;
  right: var(--inspector-right);
  bottom: var(--inspector-bottom);
  z-index: 90;
  pointer-events: none;
}
.inspector-figure {
  pointer-events: auto;
  position: relative;
  display: block;
  width: var(--inspector-size);
  height: var(--inspector-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform var(--inspector-fly-duration) cubic-bezier(.34, .9, .3, 1.04), opacity .2s ease;
  transform-origin: 0 0;
  filter: drop-shadow(0 6px 10px rgba(10, 20, 45, .22));
}
.inspector-figure:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
/* Posada sobre un campo: más pequeña, en el sitio que calcula inspector.js. */
.inspector.is-perched .inspector-figure {
  transform: translate(var(--inspector-x, 0px), var(--inspector-y, 0px)) scale(var(--inspector-scale, 1));
  filter: drop-shadow(0 3px 5px rgba(10, 20, 45, .25));
}
/* Al desplazar la página o cambiar la vista, sigue al campo sin vuelo. */
.inspector.is-instant .inspector-figure { transition: none; }
.inspector-sprite, .inspector-sprite img { display: block; width: 100%; height: 100%; }
.inspector-sprite { animation: inspector-float 4.2s ease-in-out infinite; transform-origin: 50% 90%; }
.inspector-sprite img { animation: inspector-wink 7.5s ease-in-out infinite; transform-origin: 55% 70%; user-select: none; }
.inspector-figure:hover .inspector-sprite { animation-duration: 2.4s; }
.inspector.is-quiet .inspector-sprite, .inspector.is-quiet .inspector-sprite img { animation: none; }
.inspector.is-tucked .inspector-figure { opacity: 0; pointer-events: none; }
.inspector.is-open .inspector-figure { filter: drop-shadow(0 0 0 transparent); }

/* Pensando: pulso y tres puntos sobre la cabeza. */
.inspector-dots {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  display: none;
  gap: .18rem;
  padding: .28rem .4rem;
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: var(--shadow);
}
.inspector-dots i, .inspector-typing i {
  display: block;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--violet);
  animation: inspector-dot 1s ease-in-out infinite;
}
.inspector-dots i:nth-child(2), .inspector-typing i:nth-child(2) { animation-delay: .15s; }
.inspector-dots i:nth-child(3), .inspector-typing i:nth-child(3) { animation-delay: .3s; }
.inspector.is-thinking .inspector-dots { display: flex; }
.inspector.is-thinking .inspector-sprite { animation: inspector-pulse 1.1s ease-in-out infinite; }

@keyframes inspector-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes inspector-wink {
  0%, 88%, 100% { transform: rotate(0) scale(1); }
  91% { transform: rotate(-5deg) scale(1.02, .97); }
  94% { transform: rotate(4deg) scale(.99, 1.02); }
  97% { transform: rotate(-1deg) scale(1); }
}
@keyframes inspector-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes inspector-dot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* --- Burbuja con la pregunta, junto a la mascota posada ---------------------------------------------- */
.inspector-bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 91;
  width: max-content;
  max-width: min(17rem, calc(100vw - 1rem));
  padding: .55rem .7rem .6rem;
  border: 1px solid var(--c-violet-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-lg);
  animation: inspector-appear .18s ease-out both;
}
.inspector-bubble[hidden] { display: none; }
.inspector-bubble-text { margin: 0 0 .45rem; font-weight: 600; font-size: .88rem; line-height: 1.3; }
.inspector-bubble-actions { display: flex; flex-wrap: nowrap; gap: .4rem; }
.inspector-bubble-actions .btn { white-space: nowrap; }
/* Piquito hacia la mascota (inspector.js fija --inspector-tail y el lado: is-above, is-below, is-left, is-right). */
.inspector-bubble::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--c-violet-border);
  background: var(--c-surface);
  transform: rotate(45deg);
}
.inspector-bubble.is-above::after { bottom: -6px; left: calc(var(--inspector-tail, 50%) - 5px); border-top: 0; border-left: 0; }
.inspector-bubble.is-below::after { top: -6px; left: calc(var(--inspector-tail, 50%) - 5px); border-bottom: 0; border-right: 0; }
.inspector-bubble.is-left::after { right: -6px; top: calc(var(--inspector-tail, 50%) - 5px); border-bottom: 0; border-left: 0; }
.inspector-bubble.is-right::after { left: -6px; top: calc(var(--inspector-tail, 50%) - 5px); border-top: 0; border-right: 0; }

@keyframes inspector-appear {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* --- Panel del chat ----------------------------------------------------------------------------- */
.inspector-panel {
  position: fixed;
  right: var(--inspector-right);
  bottom: calc(var(--inspector-bottom) + var(--inspector-size) + .5rem);
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  height: min(36rem, calc(100vh - var(--inspector-size) - 3.5rem));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: inspector-appear .2s ease-out both;
}
.inspector-panel[hidden] { display: none; }
.inspector-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem .7rem .9rem;
  background: var(--navy-900);
  color: #fff;
}
.inspector-avatar, .inspector-avatar img { display: block; width: 44px; height: 44px; border-radius: 50%; }
.inspector-avatar img { background: #e9f1fe; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.inspector-head-text { min-width: 0; flex: 1 1 auto; }
.inspector-title { margin: 0; color: #fff; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.inspector-subtitle { margin: 0; color: #c9d5ea; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspector-close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.inspector-close:hover { background: rgba(255, 255, 255, .12); }
.inspector-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.inspector-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .9rem .9rem .4rem;
  background: var(--c-bg);
  overscroll-behavior: contain;
}
.inspector-empty { display: grid; justify-items: center; gap: .4rem; padding: .4rem .4rem .8rem; text-align: center; }
.inspector-empty[hidden] { display: none; }
.inspector-empty-figure, .inspector-empty-figure img { display: block; width: 120px; height: 120px; }
.inspector-greeting { margin: 0; font-size: .92rem; color: var(--c-text); }

.inspector-log { display: flex; flex-direction: column; gap: .65rem; }
.inspector-log:empty { display: none; }
.inspector-msg { display: flex; gap: .5rem; align-items: flex-start; max-width: 100%; }
.inspector-msg.is-user { justify-content: flex-end; }
.inspector-msg-avatar, .inspector-msg-avatar img { display: block; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; }
.inspector-msg-avatar img { background: #e9f1fe; }
.inspector-msg-body {
  min-width: 0;
  max-width: calc(100% - 2.25rem);
  padding: .55rem .7rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  border-top-left-radius: .3rem;
  background: var(--c-surface);
  font-size: .88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.inspector-msg.is-user .inspector-msg-body {
  border-color: var(--c-violet-border);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: .3rem;
  background: var(--c-violet-bg);
  color: #2b1c80;
}
.inspector-msg.is-ai .inspector-msg-body { border-color: var(--c-info-border); }
.inspector-msg-body p { margin: 0 0 .4rem; }
.inspector-msg-body > :last-child { margin-bottom: 0; }
.inspector-msg-title { font-weight: 650; }
.inspector-msg-note { color: var(--c-text-muted); font-size: .76rem; }
.inspector-steps { margin: 0 0 .4rem; padding-left: 1.15rem; }
.inspector-steps li + li { margin-top: .2rem; }
.inspector-sections { margin: 0 0 .4rem; }
.inspector-sections dt { font-weight: 650; font-size: .8rem; color: var(--violet-700); }
.inspector-sections dd { margin: .1rem 0 .45rem; }
.inspector-typing { display: inline-flex; gap: .22rem; padding: .2rem 0; }

.inspector-suggestions { margin-top: .8rem; }
.inspector-suggestions:empty, .inspector-suggestions[hidden] { display: none; }
.inspector-suggestions-title, .inspector-related-title { margin: 0 0 .35rem; color: var(--c-text-muted); font-size: .78rem; }
.inspector-related-title { margin-top: .5rem; }
.inspector-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.inspector-chip {
  padding: .35rem .65rem;
  border: 1px solid var(--c-violet-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-link);
  font: inherit;
  font-size: .8rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.inspector-chip:hover { background: var(--c-violet-bg); }
.inspector-chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.inspector-form { padding: .6rem .8rem .7rem; border-top: 1px solid var(--c-border); background: var(--c-surface); }
.inspector-note { margin: 0 0 .45rem; color: var(--c-warn); font-size: .76rem; line-height: 1.35; }
.inspector-input-row { display: flex; gap: .45rem; align-items: flex-end; }
.inspector-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.6rem;
  max-height: 7rem;
  padding: .5rem .6rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: .9rem;
  resize: vertical;
}
.inspector-input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.inspector-send { flex: 0 0 auto; }
.inspector-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin-top: .45rem; }
.inspector-quiet { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; cursor: pointer; }
.inspector-quiet input { width: 1rem; height: 1rem; accent-color: var(--violet); }
.inspector-quiet-help { color: var(--c-text-muted); font-size: .72rem; }

/* --- Tabletas y móviles --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --inspector-size: 96px; }
}
@media (max-width: 640px) {
  :root { --inspector-size: 80px; --inspector-perch-size: 56px; --inspector-gap: .75rem; }
  .inspector-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(85vh, calc(100vh - 3.5rem));
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .inspector.is-open .inspector-figure { opacity: 0; pointer-events: none; }
  .inspector-bubble { max-width: min(17rem, calc(100vw - 1rem)); padding: .55rem .65rem .6rem; }
  .inspector-bubble-text { font-size: .86rem; }
  .inspector-empty-figure, .inspector-empty-figure img { width: 96px; height: 96px; }
  /* En el móvil la explicación de «No molestar» queda para los lectores de pantalla (aria-describedby). */
  .inspector-quiet-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .inspector-body { padding: .75rem .75rem .3rem; }
}

/* Sin movimiento: la mascota no flota ni vuela (cambia de sitio sin animación) y los estados se muestran quietos (los
   puntos, sin saltar). */
@media (prefers-reduced-motion: reduce) {
  .inspector-figure, .inspector-bubble, .inspector-panel { transition: none; animation: none; }
  .inspector-sprite, .inspector-sprite img, .inspector-dots i, .inspector-typing i { animation: none; }
  .inspector-dots i, .inspector-typing i { opacity: .8; }
  .inspector.is-thinking .inspector-sprite { animation: none; }
}

@media print {
  .inspector, .inspector-bubble, .inspector-panel { display: none !important; }
}