/* =====================================================================
 * NoBears chat widget — vanilla CSS.
 *
 * THEMING: every colour, radius, and z-index is exposed as a CSS variable
 * scoped to .nb-root. Override them at the page level OR pass --nb-* in
 * the `style` attribute on the `<div class="nb-root">` element OR call
 * NoBearsChat.init({ accentColor, ... }) which writes them inline.
 * See widget/theme.example.css for a copy-paste reference.
 * ===================================================================== */
.nb-root {
  --nb-accent:        #018BFF;          /* primary accent (launcher, send btn, links) */
  --nb-bg:            #1A1A1A;          /* chat window background */
  --nb-surface:       #262626;          /* user message bubble */
  --nb-bot-bg:        #111111;          /* bot message bubble */
  --nb-text:          #F1F5F9;          /* primary text */
  --nb-muted:         #94A3B8;          /* secondary text, borders */
  --nb-radius:        16px;
  --nb-send-bg:       var(--nb-accent); /* send button background */
  --nb-send-fg:       #ffffff;
  --nb-input-bg:      #111111;
  --nb-busy-overlay:  rgba(15, 15, 15, 0.78);
  --nb-z-launcher:    1000;
  --nb-z-window:      999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.nb-root * { box-sizing: border-box; }

.nb-launchers {
  position: fixed;
  bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-end;
  z-index: var(--nb-z-launcher);
}
.nb-root[data-position="bottom-right"] .nb-launchers { right: 24px; }
.nb-root[data-position="bottom-left"]  .nb-launchers { left: 24px; }

.nb-launcher { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.nb-label {
  background: var(--nb-bg);
  color: var(--nb-text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
  pointer-events: none;
}
.nb-launcher:hover .nb-label { opacity: 1; transform: translateY(0); }

.nb-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  background: var(--nb-accent);
  color: var(--nb-send-fg);
}
.nb-btn:hover { transform: scale(1.1); }
.nb-btn img,
.nb-btn svg { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.nb-btn.nb-active { animation: nb-pulse 2s infinite; }
@keyframes nb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.nb-window {
  position: fixed;
  bottom: 96px;
  width: 400px;
  max-height: 560px;
  background: var(--nb-bg);
  color: var(--nb-text);
  border-radius: var(--nb-radius);
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: var(--nb-z-window);
  animation: nb-slide-up 0.25s ease;
}
.nb-root[data-position="bottom-right"] .nb-window { right: 24px; }
.nb-root[data-position="bottom-left"]  .nb-window { left: 24px; }

@media (max-width: 480px) {
  .nb-root .nb-window { left: 12px; right: 12px; width: auto; bottom: 88px; max-height: 70vh; }
}

@keyframes nb-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nb-header-left { display: flex; align-items: center; gap: 8px; }
.nb-header h3 { font-size: 0.92rem; font-weight: 700; margin: 0; color: var(--nb-text); }

.nb-badge {
  font-size: 0.65rem; padding: 2px 8px; border-radius: 999px;
  color: #fff; font-weight: 600; background: var(--nb-accent);
}

.nb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nb-dot.ok       { background: #86EFAC; }
.nb-dot.error    { background: #FCA5A5; }
.nb-dot.pending  { background: #FDE68A; }
.nb-dot.degraded { background: #FDBA74; }
.nb-health { font-size: 0.65rem; color: var(--nb-muted); }

.nb-header-actions { display: flex; align-items: center; gap: 6px; }

.nb-reset {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--nb-muted);
  cursor: pointer;
  font-size: 0.68rem;
  padding: 3px 8px;
  font-family: inherit;
}
.nb-reset:hover { color: var(--nb-text); background: rgba(255,255,255,0.14); }

.nb-close {
  background: none; border: none;
  color: var(--nb-muted);
  cursor: pointer;
  font-size: 1.3rem; padding: 4px; line-height: 1;
}
.nb-close:hover { color: var(--nb-text); }

.nb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 400px;
}

.nb-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  word-wrap: break-word;
}
.nb-msg.user { align-self: flex-end; background: var(--nb-surface); }
.nb-msg.bot  { align-self: flex-start; background: var(--nb-bot-bg); }

.nb-answer { line-height: 1.6; }
.nb-answer p { margin: 0 0 0.5em; }
.nb-answer p:last-child { margin-bottom: 0; }
.nb-answer ul, .nb-answer ol { margin: 0.35em 0 0.6em 1.25em; padding: 0; }
.nb-answer li { margin-bottom: 0.2em; }
.nb-answer a { color: var(--nb-accent); text-decoration: underline; text-underline-offset: 2px; }
.nb-answer a:hover { opacity: 0.85; }
.nb-answer strong { font-weight: 700; }
.nb-answer em { font-style: italic; }
.nb-answer code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px; border-radius: 4px;
  font-size: 0.78rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.nb-answer pre {
  background: rgba(255,255,255,0.06);
  padding: 8px 10px; border-radius: 6px;
  overflow-x: auto; margin: 0.4em 0;
  font-size: 0.78rem;
}
.nb-answer pre code { background: transparent; padding: 0; }
.nb-answer blockquote {
  border-left: 3px solid rgba(255,255,255,0.18);
  padding-left: 10px; margin: 0.4em 0; color: var(--nb-muted);
}

.nb-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.nb-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--nb-muted);
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
}
.nb-toggle:hover { color: var(--nb-text); border-color: rgba(255,255,255,0.2); }

.nb-debug-wrap { position: relative; display: inline-block; }
.nb-debug-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; padding: 2px 4px;
  opacity: 0.5; transition: opacity 0.15s;
}
.nb-debug-toggle:hover { opacity: 1; }
.nb-debug {
  display: none;
  position: absolute; top: 100%; left: 0;
  margin-top: 4px; padding: 5px 8px;
  background: rgba(30,30,30,0.95);
  border: 1px solid rgba(255,200,0,0.2);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #F59E0B;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
  z-index: 1;
  width: max-content;
  max-width: min(90vw, 560px);
  max-height: 60vh;
  overflow: auto;
}
.nb-debug-wrap:hover .nb-debug { display: block; }

.nb-source {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border-left: 3px solid var(--nb-accent);
}
.nb-source-type { font-size: 0.65rem; color: var(--nb-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.nb-source-title { font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; color: var(--nb-text); }
.nb-source-text {
  font-size: 0.76rem; color: var(--nb-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nb-source-url { font-size: 0.7rem; color: var(--nb-muted); text-decoration: none; display: inline-block; margin-top: 3px; }
.nb-source-url:hover { color: var(--nb-text); }
.nb-source-score { font-size: 0.68rem; color: var(--nb-muted); margin-top: 3px; }

.nb-typing { display: flex; gap: 4px; padding: 10px 14px; align-self: flex-start; }
.nb-typing span {
  width: 7px; height: 7px; background: var(--nb-muted);
  border-radius: 50%; animation: nb-bounce 1.4s infinite;
}
.nb-typing span:nth-child(2) { animation-delay: 0.2s; }
.nb-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nb-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

.nb-input-area {
  display: flex; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nb-input-area input {
  flex: 1;
  background: var(--nb-input-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--nb-text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}
.nb-input-area input:focus { border-color: rgba(255,255,255,0.2); }
.nb-input-area input::placeholder { color: var(--nb-muted); }

.nb-send {
  background: var(--nb-send-bg);
  border: none; border-radius: 10px;
  padding: 10px 18px;
  color: var(--nb-send-fg);
  cursor: pointer;
  font-size: 0.85rem; font-weight: 600;
  font-family: inherit;
}
.nb-send:hover { opacity: 0.85; }
.nb-send:disabled { opacity: 0.4; cursor: default; }

/* ---------------------------------------------------------------------
 * Busy overlay — shown while /api/health reports ingest_status="running".
 * Covers the full chat window and disables interaction.
 * ------------------------------------------------------------------- */
.nb-busy {
  position: absolute;
  inset: 0;
  background: var(--nb-busy-overlay);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  z-index: 2;
  border-radius: var(--nb-radius);
}
.nb-busy-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--nb-accent);
  animation: nb-spin 1s linear infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }
.nb-busy-title { font-size: 0.9rem; font-weight: 700; color: var(--nb-text); }
.nb-busy-text  { font-size: 0.8rem; color: var(--nb-muted); max-width: 280px; }

/* The chat window is `position: fixed`; the overlay is absolute relative
   to it. Make sure the .nb-window is a positioning context. */
.nb-window { position: fixed; }