/* Assistants: a conversation in Claude that plays itself, and the tools behind it. */
.mcp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.chat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-size: 13px; color: var(--ink-subtle); }
.chat-bar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.chat-log { min-height: 300px; padding: 24px; display: grid; gap: 18px; align-content: start; font-size: 15px; }
.chat-log > * { animation: rise-in .4s var(--ease) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
.ask { justify-self: end; max-width: 85%; background: var(--raised); border-radius: 14px 14px 4px 14px; padding: 12px 16px; }
.call { justify-self: start; display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-subtle); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; }
.call::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.call.is-running::before { background: var(--amber); animation: blink .8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.answer ol, .answer ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.answer li::marker { color: var(--ink-subtle); }
.chat-chips { padding: 14px 16px; border-top: 1px solid var(--hairline); background: var(--sunken); }

.tools { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink-muted); }
.tools code { margin-right: 8px; }
.connect { margin-top: 28px; padding: 16px 18px; background: var(--sunken); border: 1px solid var(--hairline); border-radius: var(--r); font-size: 14px; color: var(--ink-muted); }
.connect-row { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connect code { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .mcp { grid-template-columns: 1fr; }
}