/* ==========================================================================
   BridgeBI — soporte / el botón de ayuda
   --------------------------------------------------------------------------
   Un botón fijo en todas las páginas y una hoja de una sola pregunta. Todo lo
   que se pinta aquí sale de los tokens de beautiful.css (--bb-*), con fallback
   a los del app shell, para que herede el tema oscuro sin una segunda paleta.

   POR QUÉ ES DORADO Y NO NAVY
   El launcher del analista (#bbAgentFab) ya es navy y vive en la misma esquina.
   Dos pastillas navy pegadas se leen como un solo control partido en dos. El
   dorado de la marca los separa sin inventar un color nuevo, y además dice de
   qué se trata: el navy hace trabajo, el dorado pide ayuda.
   ========================================================================== */

/* -------------------------------- launcher -------------------------------- */

#bbHelpFab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 8999;               /* debajo del panel del analista, encima de todo lo demás */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px 10px 13px;
  border: 1px solid rgba(13, 42, 94, 0.10);
  border-radius: 999px;
  background: var(--bb-surface, #fff);
  color: var(--bb-ink, #1a1a1a);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(13, 42, 94, 0.16), 0 1px 2px rgba(13, 42, 94, 0.08);
  transition: transform .16s cubic-bezier(.23, 1, .32, 1), box-shadow .16s ease, opacity .12s ease;
}
/* Se corre hacia arriba cuando el launcher del analista está presente, para no
   quedar uno encima del otro. La clase la pone support.js observando el fab. */
#bbHelpFab.stacked { bottom: 78px; }
#bbHelpFab:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(13, 42, 94, 0.22); }
#bbHelpFab:active { transform: translateY(0); }
#bbHelpFab[hidden] { display: none; }

.bb-help-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--bb-gold, #DEB83C);
  color: #3A2C05;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* --------------------------------- hoja ---------------------------------- */

.bb-help-back {
  position: fixed;
  inset: 0;
  z-index: 10050;              /* encima del panel del analista: se puede reportar desde ahí */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 22, 42, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: bb-help-fade .16s ease-out;
}
@keyframes bb-help-fade { from { opacity: 0; } }

.bb-help-sheet {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  /* overflow queda en el cuerpo, no aquí: overflow:hidden en una columna flex
     aplasta la caja a 0 de alto (documentado en beautiful.css). */
  border-radius: 16px;
  background: var(--bb-surface, #fff);
  color: var(--bb-ink, #1a1a1a);
  font-family: 'Outfit', system-ui, sans-serif;
  box-shadow: 0 0 0 1px var(--bb-line, #E6E1D8), 0 24px 60px -18px rgba(13, 42, 94, 0.38);
  animation: bb-help-in .22s cubic-bezier(.23, 1, .32, 1);
}
@keyframes bb-help-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.bb-help-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bb-line, #E6E1D8);
}
.bb-help-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bb-ink-3, #8A8578);
}
.bb-help-title {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bb-help-sub {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bb-ink-2, #5A564F);
}

.bb-help-body {
  padding: 16px 20px 4px;
  overflow-y: auto;
}

/* Los chips de contexto: lo que se manda solo. Compactos, como Bunker/PowerBI —
   un párrafo explicando qué se recoge se leería como relleno y nadie lo lee. */
.bb-help-ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.bb-help-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bb-accent-tint, #EAEFF8);
  color: var(--bb-accent-ink, #11326D);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-help-chip.warn { background: var(--bb-red-tint, #F9EBEB); color: var(--bb-red, #B23B3B); }
.bb-help-chip b { font-weight: 700; }
.bb-help-chip .mono,
.bb-help-chip code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.bb-help-ta {
  width: 100%;
  min-height: 132px;
  padding: 12px 13px;
  border: 1px solid var(--bb-line-strong, #D4CFC4);
  border-radius: 10px;
  background: var(--bb-field, #F1EFE8);
  color: var(--bb-ink, #1a1a1a);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.bb-help-ta:focus {
  outline: none;
  background: var(--bb-surface, #fff);
  border-color: var(--bb-accent, #0D2A5E);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-accent, #0D2A5E) 16%, transparent);
}
.bb-help-ta::placeholder { color: var(--bb-ink-3, #8A8578); }

.bb-help-shot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}
.bb-help-shot img {
  width: 62px;
  height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--bb-line, #E6E1D8);
}
.bb-help-shot-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bb-ink-3, #8A8578);
}
/* El botón no se encoge: en 390px la fila lo apretaba hasta partir la palabra
   ("Adjuntar captu"), que es peor que dejar la nota en dos líneas. */
#bbHelpShot { flex: none; }

.bb-help-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--bb-line, #E6E1D8);
  margin-top: 12px;
}
.bb-help-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--bb-ink-3, #8A8578);
}
.bb-help-hint kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--bb-line-strong, #D4CFC4);
  background: var(--bb-inset, #FAF9F6);
}

/* Botones: mismo vocabulario que el resto del app, escrito aquí para que el
   archivo sea autosuficiente y no dependa del orden de las hojas. */
.bb-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid var(--bb-line-strong, #D4CFC4);
  background: var(--bb-surface, #fff);
  color: var(--bb-ink, #1a1a1a);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .1s ease, opacity .14s ease;
}
.bb-help-btn:hover { background: var(--bb-hover, #F4F2EC); }
.bb-help-btn:active { transform: translateY(1px); }
.bb-help-btn.primary {
  border-color: transparent;
  background: var(--bb-accent, #0D2A5E);
  color: #fff;
}
.bb-help-btn.primary:hover { background: #11326D; }
.bb-help-btn.ghost { border-color: transparent; background: transparent; color: var(--bb-ink-2, #5A564F); }
.bb-help-btn.ghost:hover { background: var(--bb-hover, #F4F2EC); }
.bb-help-btn[disabled] { opacity: .55; cursor: default; transform: none; }

/* En dark el acento es un azul claro (#6FA8F5): texto blanco encima da ~2.3:1.
   La tinta del botón primario se invierte para que el contraste lo aguante. */
html[data-bb-theme="dark"] .bb-help-btn.primary { color: #0B1220; }
html[data-bb-theme="dark"] .bb-help-btn.primary:hover { background: var(--bb-accent-ink, #9CC5FF); }

/* Un SVG dentro de un contenedor flex colapsa a 0 de ancho con la regla
   svg{max-width:100%} de responsive.css. flex:none NO lo arregla — hay que
   fijar el ancho. (Documentado, y encontrado dos veces en este app.) */
.bb-help-btn svg, .bb-help-shot svg { width: 15px; height: 15px; flex: none; }

/* --------------------------------- éxito --------------------------------- */

.bb-help-done {
  padding: 34px 24px 32px;
  text-align: center;
}
.bb-help-done-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bb-green-tint, #E9F3ED);
  color: var(--bb-green, #2E7D52);
  font-size: 21px;
  font-weight: 700;
}
.bb-help-done h3 { margin: 0; font-size: 17px; font-weight: 700; }
.bb-help-done p { margin: 7px auto 0; max-width: 34ch; font-size: 13px; line-height: 1.6; color: var(--bb-ink-2, #5A564F); }
.bb-help-ref {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bb-inset, #FAF9F6);
  border: 1px solid var(--bb-line, #E6E1D8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--bb-ink-2, #5A564F);
}

/* -------------------------------- móvil ---------------------------------- */

@media (max-width: 640px) {
  #bbHelpFab { right: 14px; bottom: 14px; padding: 9px 13px 9px 11px; font-size: 13px; }
  #bbHelpFab.stacked { bottom: 68px; }
  .bb-help-back { padding: 0; align-items: flex-end; }
  .bb-help-sheet {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  /* No hay ⌘ en un teléfono. El espacio se lo quedan los botones. */
  .bb-help-hint { display: none; }
  .bb-help-foot { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-help-back, .bb-help-sheet { animation: none; }
  #bbHelpFab { transition: none; }
}