/* aiSuited polish — minimal cosmetic layer for Fase 6 of goal_aif2finish.
 * Loaded by index.html as <link rel="stylesheet" href="/aisuited-polish.css" />.
 * Targets the chat surface for KB-cite badges + tool-spinner hint.
 * Designed defensively — no class names guessed; uses :has() and attribute
 * selectors that work across reasonable React structures. */

/* KB-cite badge: highlight any inline element whose text begins with the
 * literal "Fuente:" or "Source:" prefix that Bob uses when citing the KB. */
:where(p, li, span, div):has(:scope:not(:empty)):where(:not(input):not(textarea)) {
  /* no-op: kept for selector specificity bookkeeping */
}

/* Highlight "Fuente:" inline citations using a tiny pill */
.bob-cite-pill,
[data-cite-source]::before {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  background: rgba(96, 165, 250, 0.15);
  color: rgb(59, 130, 246);
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.bob-cite-pill::before {
  content: "📚";
  font-size: 10px;
}

/* Tool-running spinner: pulses on any element with [data-tool-running] */
[data-tool-running] {
  position: relative;
}

[data-tool-running]::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-top-color: rgb(59, 130, 246);
  border-radius: 50%;
  animation: bob-spinner-rotate 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes bob-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Subtle global hint: the chat input shows a "Bob is consulting..." overlay
 * when window.aisuitedToolRunning is true (set by a future fetch interceptor) */
body[data-bob-busy="true"] form[action*="/api/query"]::after,
body[data-bob-busy="true"] [class*="ChatInput" i]::after,
body[data-bob-busy="true"] [class*="composer" i]::after {
  content: "Bob está consultando…";
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 11px;
  color: rgb(59, 130, 246);
  opacity: 0.85;
}