/* Plan with your AI assistant over MCP */

.bbi-mcp-chat { overflow: hidden; }

.bbi-mcp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bbi-line);
}

.bbi-mcp-head .bbi-tile { width: 38px; height: 38px; border-radius: 12px; }
.bbi-mcp-head .bbi-tile svg { width: 19px; height: 19px; }
.bbi-mcp-head b { display: block; font-size: 15px; font-weight: 800; color: var(--bbi-ink); }

.bbi-mcp-conn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  height: 22px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--bbi-good-bg);
  color: #12925c;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.bbi-mcp-conn i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bbi-good);
  box-shadow: 0 0 0 3px rgba(26, 174, 111, 0.22);
}

.bbi-mcp-count { margin-left: auto; align-self: flex-start; margin-top: 2px; }

.bbi-mcp-body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 0;
}

/* User request */
.bbi-mcp-me {
  align-self: flex-end;
  max-width: 322px;
  min-height: 45px;
  padding: 12px 16px;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, #3d4a6e, #1e2a4a);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 20px -12px rgba(30, 42, 74, 0.6);
}

.bbi-mcp-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  background: #fff;
  animation: bbi-mcp-blink 0.9s steps(2, start) infinite;
}

@keyframes bbi-mcp-blink { to { visibility: hidden; } }

.bbi-mcp-me.is-sent { animation: bbi-mcp-sent 0.45s var(--bbi-spring); }

@keyframes bbi-mcp-sent {
  0% { transform: scale(1); }
  45% { transform: scale(0.97) translateY(-2px); }
  100% { transform: none; }
}

/* Assistant turn */
.bbi-mcp-bot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.bbi-mcp-bot__av {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef0f8, #dfe3f1);
  color: var(--bbi-navy);
}

.bbi-mcp-bot__av svg { width: 15px; height: 15px; }

.bbi-mcp-bot__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bbi-muted);
}

.bbi-mcp-dots { display: inline-flex; gap: 3px; margin-left: 5px; }

.bbi-mcp-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bbi-muted);
  animation: bbi-mcp-dot 1s ease-in-out infinite;
}

.bbi-mcp-dots i:nth-child(2) { animation-delay: 0.15s; }
.bbi-mcp-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes bbi-mcp-dot {
  0%, 100% { opacity: 0.3; transform: none; }
  50% { opacity: 1; transform: translateY(-2px); }
}

.bbi-mcp-tools {
  display: grid;
  gap: 5px;
  margin: 8px 0 0 38px;
}

.bbi-mcp-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 10px;
  background: var(--bbi-surface-2);
  border: 1px solid var(--bbi-line);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bbi-mcp-tool.is-running {
  background: #fff;
  border-color: rgba(94, 114, 228, 0.4);
  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.1);
}

.bbi-mcp-tool.is-done { background: #fff; box-shadow: var(--bbi-shadow-sm); }

.bbi-mcp-tool__st {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--bbi-faint);
}

.bbi-mcp-tool.is-running .bbi-mcp-tool__st {
  border: 2.5px solid rgba(94, 114, 228, 0.22);
  border-top-color: var(--bbi-indigo);
  animation: bbi-spin 0.7s linear infinite;
}

.bbi-mcp-tool.is-done .bbi-mcp-tool__st {
  border: 0;
  background: var(--bbi-good);
  color: #fff;
}

.bbi-mcp-tool__st svg { width: 11px; height: 11px; }

.bbi-mcp-tool__name {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bbi-ink);
}

.bbi-mcp-tool__arg {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
  white-space: nowrap;
}

.bbi-mcp-done {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin: 14px 0 0;
  padding: 10px 16px 10px 10px;
  white-space: nowrap;
  border-radius: 18px 18px 18px 6px;
  background: var(--bbi-surface-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--bbi-ink);
}

.bbi-mcp-done b { font-weight: 800; }

.bbi-mcp-done__ok {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--bbi-grad-good);
  color: #fff;
}

.bbi-mcp-done__ok svg { width: 12px; height: 12px; }

/* BoogieBoard preview */
.bbi-mcp-prev { border-top: 5px solid var(--bbi-indigo); overflow: hidden; }
.bbi-mcp-state { margin-left: auto; }

.bbi-mcp-prev__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 18px 0;
}

.bbi-mcp-name {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--bbi-ink);
}

.bbi-mcp-src {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bbi-muted);
}

.bbi-mcp-label { margin: 14px 0 7px; }

.bbi-mcp-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 6px;
  border-radius: 10px;
  background: var(--bbi-surface-2);
  font-size: 14px;
  font-weight: 800;
  color: var(--bbi-ink);
}

.bbi-mcp-parent__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(94, 114, 228, 0.14);
  color: var(--bbi-indigo);
}

.bbi-mcp-parent__icon svg { width: 13px; height: 13px; }

.bbi-mcp-terrs {
  position: relative;
  display: grid;
  gap: 3px;
  margin: 3px 0 0 16px;
  padding-left: 16px;
}

.bbi-mcp-terr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bbi-ink);
}

.bbi-mcp-terr::before,
.bbi-mcp-terr::after {
  content: '';
  position: absolute;
  background: #dfe4f3;
}

.bbi-mcp-terr::before { left: -16px; top: 50%; width: 12px; height: 2px; margin-top: -1px; }
.bbi-mcp-terr::after { left: -16px; top: -4px; bottom: -1px; width: 2px; }
.bbi-mcp-terr:first-child::after { top: -6px; }
.bbi-mcp-terr:last-child::after { bottom: 50%; }

.bbi-mcp-terr__dot { width: 10px; height: 10px; flex: none; border-radius: 3px; }

.bbi-mcp-goals { display: flex; gap: 8px; }

.bbi-mcp-goal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px 0 9px;
  border-radius: 9px;
  background: rgba(94, 114, 228, 0.1);
  border: 1px solid rgba(94, 114, 228, 0.18);
  font-size: 13px;
  font-weight: 800;
  color: var(--bbi-indigo);
  white-space: nowrap;
}

.bbi-mcp-goal svg { width: 14px; height: 14px; }

.bbi-mcp-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin-top: 16px;
  height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1.5px dashed var(--bbi-faint);
  color: var(--bbi-muted);
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.bbi-mcp-ready .bbi-tile { background: var(--bbi-faint); transition: background 0.4s ease; }
.bbi-mcp-ready b { display: block; font-size: 14px; font-weight: 800; color: var(--bbi-ink); }
.bbi-mcp-ready small { display: block; font-size: 11.5px; font-weight: 700; color: var(--bbi-muted); }

.bbi-mcp-ready.is-ready {
  border: 1.5px solid rgba(94, 114, 228, 0.35);
  background: linear-gradient(135deg, rgba(94, 114, 228, 0.08), rgba(130, 94, 228, 0.1));
}

.bbi-mcp-ready.is-ready .bbi-tile { background: var(--bbi-grad-brand); }

.bbi-mcp-notes { display: grid; gap: 5px; margin-top: 12px; }

.bbi-mcp-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
  white-space: nowrap;
}

.bbi-mcp-note svg { width: 14px; height: 14px; flex: none; }
.bbi-mcp-note b { color: var(--bbi-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Skeleton placeholders that resolve as tools complete */
.bbi-mcp-sk { transition: color 0.35s ease, background-color 0.35s ease; }

.bbi-mcp-sk.is-pending {
  color: transparent;
  background: #eef1f8;
  border-color: transparent;
  border-radius: 8px;
}

.bbi-mcp-sk.is-pending > * { visibility: hidden; }
.bbi-mcp-terr.is-pending::before { background: #eef1f8; }
.bbi-mcp-terr.is-pending::after { background: #eef1f8; }
.bbi-mcp-sk.is-new { animation: bbi-mcp-new 0.9s ease; }

@keyframes bbi-mcp-new {
  0% { box-shadow: 0 0 0 0 rgba(94, 114, 228, 0.45); transform: scale(0.97); }
  40% { box-shadow: 0 0 0 5px rgba(94, 114, 228, 0.18); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 8px rgba(94, 114, 228, 0); transform: none; }
}