/* ============================================================
   BrainChain · components.css
   bc-btn · bc-chip · bc-card · bc-kbd · bc-callout · bc-toggle · bc-badge
============================================================ */

/* ---------- Buttons ---------- */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  height: 40px;
  padding: 0 var(--bc-space-5);
  border-radius: var(--bc-radius-md);
  font-size: var(--bc-fs-13);
  font-weight: var(--bc-fw-semibold);
  font-family: var(--bc-font-mono);
  letter-spacing: var(--bc-ls-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bc-text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, transform 200ms cubic-bezier(.2,.7,.4,1.2), box-shadow 150ms;
  position: relative;
  user-select: none;
}
.bc-btn svg { width: 14px; height: 14px; }

.bc-btn--primary {
  background: var(--bc-accent);
  color: white;
  box-shadow: var(--bc-shadow-accent-glow);
}
.bc-btn--primary:hover { background: var(--bc-accent-dark); }
.bc-btn--primary:active { box-shadow: var(--bc-shadow-primary-press); }

.bc-btn--ghost {
  background: transparent;
  color: var(--bc-text-primary);
  border-color: var(--bc-border);
}
.bc-btn--ghost:hover { background: var(--bc-bg-tertiary); border-color: var(--bc-border); }

.bc-btn--white {
  background: white;
  color: var(--bc-bg-primary);
}
.bc-btn--white:hover { background: rgba(255,255,255,0.9); }

.bc-btn--outline-white {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.4);
}
.bc-btn--outline-white:hover { border-color: white; background: rgba(255,255,255,0.08); }

.bc-btn--sm { height: 32px; padding: 0 var(--bc-space-3); font-size: var(--bc-fs-11); }
.bc-btn--lg { height: 48px; padding: 0 var(--bc-space-6); font-size: var(--bc-fs-14); }
.bc-btn[disabled], .bc-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Chips ---------- */
.bc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  height: 22px;
  padding: 0 var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  font-weight: var(--bc-fw-semibold);
  letter-spacing: var(--bc-ls-wide);
  text-transform: uppercase;
  background: rgba(124,58,237,0.15);
  color: var(--bc-accent-light);
  white-space: nowrap;
}
.bc-chip--success { background: rgba(16,185,129,0.15); color: var(--bc-success); }
.bc-chip--warning { background: rgba(245,158,11,0.15); color: var(--bc-warning); }
.bc-chip--error   { background: rgba(239,68,68,0.15);  color: var(--bc-error); }
.bc-chip--info    { background: rgba(59,130,246,0.15); color: var(--bc-info); }
.bc-chip--muted   { background: rgba(255,255,255,0.06); color: var(--bc-text-tertiary); }
.bc-chip--lg      { height: 26px; font-size: var(--bc-fs-11); padding: 0 var(--bc-space-3); }

/* ---------- Cards ---------- */
.bc-card {
  background: var(--bc-bg-secondary);
  border: 1px solid var(--bc-border-soft);
  border-radius: var(--bc-radius-xl);
  padding: var(--bc-space-5);
  position: relative;
  overflow: hidden;
}
.bc-card--dense { padding: var(--bc-space-4); }
.bc-card--elevated { background: var(--bc-bg-elevated); }
.bc-card--accent-left {
  border-left: 2px solid var(--bc-accent);
}

/* Spotlight overlay -- driven by JS through --mx --my */
.bc-card[data-spotlight] {
  --mx: 50%;
  --my: 50%;
}
.bc-card[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 240px at var(--mx) var(--my), rgba(124,58,237,0.10), transparent 60%);
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.bc-card[data-spotlight]:hover::before { opacity: 1; }

/* ---------- kbd ---------- */
.bc-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bc-bg-tertiary);
  border: 1px solid var(--bc-border-soft);
  border-bottom-width: 2px;
  border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  color: var(--bc-text-secondary);
}

/* ---------- Callout ---------- */
.bc-callout {
  border: 1px solid var(--bc-border-soft);
  background: rgba(124,58,237,0.04);
  border-radius: var(--bc-radius-lg);
  padding: var(--bc-space-4);
  font-size: var(--bc-fs-13);
  color: var(--bc-text-secondary);
  line-height: var(--bc-lh-relaxed);
}

/* ---------- Toggle (theme/lang inline) ---------- */
.bc-segctrl {
  display: inline-flex;
  background: var(--bc-bg-tertiary);
  border-radius: var(--bc-radius-md);
  padding: 2px;
}
.bc-segctrl__btn {
  height: 24px;
  padding: 0 var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-10);
  color: var(--bc-text-tertiary);
  letter-spacing: var(--bc-ls-wide);
  text-transform: uppercase;
  transition: all 150ms;
}
.bc-segctrl__btn[aria-pressed="true"],
.bc-segctrl__btn[aria-current="true"] {
  background: var(--bc-bg-elevated);
  color: var(--bc-text-primary);
  box-shadow: var(--bc-shadow-sm);
}

/* ---------- Provider glyph ---------- */
.bc-glyph {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--bc-radius-md);
  font-family: var(--bc-font-mono);
  font-size: 13px;
  font-weight: var(--bc-fw-bold);
  color: white;
  letter-spacing: 0;
  flex-shrink: 0;
}
.bc-glyph img {
  display: block;
  width: 68%;
  height: 68%;
  object-fit: contain;
}
.bc-glyph--claude   { background: var(--bc-agent-claude); }
.bc-glyph--codex    { background: var(--bc-agent-codex); }
.bc-glyph--gemini   { background: var(--bc-agent-gemini); }
.bc-glyph--mistral  { background: var(--bc-agent-mistral); color: #1a1a1a; }
.bc-glyph--llama    { background: var(--bc-agent-llama); color: #1a1a1a; }
.bc-glyph--deepseek { background: var(--bc-agent-deepseek); color: #1a1a1a; }
.bc-glyph--qwen     { background: var(--bc-agent-qwen); }
.bc-glyph--cohere   { background: var(--bc-agent-cohere); color: #1a1a1a; }
.bc-glyph--sm { width: 22px; height: 22px; font-size: 11px; border-radius: var(--bc-radius-sm); }
.bc-glyph--sm img { width: 72%; height: 72%; }

/* ---------- Status dot (animated) ---------- */
.bc-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bc-success);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.55);
  animation: bc-pulse-g 2s ease-in-out infinite;
  flex-shrink: 0;
}
.bc-dot--warning { background: var(--bc-warning); box-shadow: 0 0 0 0 rgba(245,158,11,0.55); animation: bc-pulse-w 2s ease-in-out infinite; }
.bc-dot--error   { background: var(--bc-error);   box-shadow: 0 0 0 0 rgba(239,68,68,0.55);  animation: bc-pulse-e 2s ease-in-out infinite; }
.bc-dot--accent  { background: var(--bc-accent-light); box-shadow: 0 0 0 0 rgba(167,139,250,0.55); animation: bc-pulse 2s ease-in-out infinite; }
@keyframes bc-pulse-w { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55);} 50%{box-shadow:0 0 0 5px rgba(245,158,11,0);} }
@keyframes bc-pulse-e { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55);} 50%{box-shadow:0 0 0 5px rgba(239,68,68,0);} }

/* ---------- Mini bar chart ---------- */
.bc-bar {
  height: 4px;
  background: var(--bc-bg-tertiary);
  border-radius: var(--bc-radius-full);
  overflow: hidden;
  position: relative;
}
.bc-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bc-accent), var(--bc-accent-light));
  width: 0;
  border-radius: var(--bc-radius-full);
  transition: width 700ms cubic-bezier(0,0,.2,1);
}
.bc-bar--error .bc-bar__fill { background: var(--bc-error); }
.bc-bar--success .bc-bar__fill { background: var(--bc-success); }
.bc-bar--neutral .bc-bar__fill { background: var(--bc-text-muted); }

/* ---------- Tick (numeric animated) ---------- */
.bc-tick {
  font-variant-numeric: tabular-nums;
}