/* REST API: automate BoogieBoard from your own systems */

.bbi-api-term { overflow: hidden; background: #141a33; border-color: #232b4d; color: #d7dcf2; }

.bbi-api-term__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #1b2242;
  border-bottom: 1px solid #262f55;
}

.bbi-api-term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff8a8a; }
.bbi-api-term__bar i:nth-child(2) { background: #ffcf6e; }
.bbi-api-term__bar i:nth-child(3) { background: #7fdca3; }
.bbi-api-term__bar span { margin-left: 10px; font-size: 11px; font-weight: 700; color: #8f9bc2; }

.bbi-api-term__body { padding: 14px 18px; font: 600 12px/1.6 'SFMono-Regular', Menlo, Consolas, monospace; }
.bbi-api-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbi-api-line--muted { color: #7d88b3; }
.bbi-api-line--sub { padding-left: 14px; color: #7d88b3; }
.bbi-api-k { color: #c792ea; }
.bbi-api-s { color: #9ce39c; }
.bbi-api-p { color: #7d88b3; }
.bbi-api-host { color: #8f9bc2; }
.bbi-api-path { color: #fff; }

.bbi-api-m { padding: 1px 6px; border-radius: 4px; font-weight: 800; }
.bbi-api-m--post { background: rgba(94, 114, 228, 0.35); color: #c9d1ff; }
.bbi-api-m--get { background: rgba(26, 174, 111, 0.3); color: #a7f0cc; }

.bbi-api-calls { display: grid; gap: 12px; margin-top: 12px; }
.bbi-api-call { padding-top: 10px; border-top: 1px dashed #2a3460; }

.bbi-api-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(26, 174, 111, 0.18);
  color: #8ee7bd;
}

.bbi-api-ok svg { width: 11px; height: 11px; }

.bbi-api-json {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0e1328;
  border: 1px solid #262f55;
  font: inherit;
  color: #ffd38a;
  white-space: pre;
}

.bbi-api-plan .bbi-card__head,
.bbi-api-ends .bbi-card__head { padding: 14px 14px 0 16px; }

.bbi-api-plan__state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 14px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bbi-surface-2);
  font-size: 13px;
  color: var(--bbi-muted);
}

.bbi-api-plan__state b { font-weight: 800; color: var(--bbi-ink); }
.bbi-api-dot { width: 8px; height: 8px; border-radius: 50%; background: #c5cde3; }
.bbi-api-plan__state.is-busy { background: #eef1fb; }
.bbi-api-plan__state.is-busy .bbi-api-dot { background: var(--bbi-indigo); animation: bbi-api-blink 0.9s ease-in-out infinite; }
.bbi-api-plan__state.is-done { background: #e9f8f1; }
.bbi-api-plan__state.is-done .bbi-api-dot { background: var(--bbi-good); }
.bbi-api-plan__state.is-done b { color: #0d7347; }

@keyframes bbi-api-blink { 50% { opacity: 0.3; } }

.bbi-api-plan__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bbi-muted);
}

.bbi-api-plan__row b { font-weight: 800; color: var(--bbi-ink); font-variant-numeric: tabular-nums; }
.bbi-api-score.is-good { color: var(--bbi-good); }

.bbi-api-ends__list { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }

.bbi-api-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bbi-surface-2);
  border: 1px solid var(--bbi-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-ink);
}

.bbi-api-end svg { width: 12px; height: 12px; color: var(--bbi-indigo); }

.bbi-api-docs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 14px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #141a33;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  transition: transform 0.2s ease;
}

.bbi-api-docs svg { width: 14px; height: 14px; }
.bbi-api-docs svg:last-child { margin-left: auto; }
.bbi-api-docs.is-hover { transform: translateY(-2px); }