/*
* mcp-demo.css — MCP Demo Chat Transcript Component
* sfpermits.ai · Animated chat showing Claude using sfpermits.ai tools
*
* Source of truth: docs/DESIGN_TOKENS.md
* New component — logged in docs/DESIGN_COMPONENT_LOG.md
*/
/* ═══════════════════════════════════════════════════════════════════════════
SECTION CONTAINER
═══════════════════════════════════════════════════════════════════════════ */
.mcp-demo-section {
padding: var(--space-24) 0;
}
.mcp-demo-section__title {
font-family: var(--sans);
font-size: var(--text-xl);
font-weight: 300;
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--space-8);
}
/* ═══════════════════════════════════════════════════════════════════════════
CHAT TERMINAL WINDOW
═══════════════════════════════════════════════════════════════════════════ */
.mcp-demo-terminal {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
max-width: 800px;
margin: 0 auto;
position: relative;
}
/* Terminal title bar */
.mcp-demo-terminal__bar {
display: flex;
align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--obsidian-light);
border-bottom: 1px solid var(--glass-border);
gap: var(--space-2);
}
.mcp-demo-terminal__dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--glass-hover);
}
.mcp-demo-terminal__dot--red { background: rgba(248, 113, 113, 0.6); }
.mcp-demo-terminal__dot--amber { background: rgba(251, 191, 36, 0.6); }
.mcp-demo-terminal__dot--green { background: rgba(52, 211, 153, 0.6); }
.mcp-demo-terminal__label {
font-family: var(--mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-left: var(--space-2);
letter-spacing: 0.04em;
}
/* Chat body */
.mcp-demo-chat {
padding: var(--space-6);
min-height: 400px;
position: relative;
}
/* ═══════════════════════════════════════════════════════════════════════════
DEMO SLIDES (each conversation is a slide)
═══════════════════════════════════════════════════════════════════════════ */
.mcp-demo-slide {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.mcp-demo-slide.active {
display: block;
opacity: 1;
}
.mcp-demo-slide.fading-out {
display: block;
opacity: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
CHAT MESSAGES
═══════════════════════════════════════════════════════════════════════════ */
.mcp-msg {
margin-bottom: var(--space-4);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.mcp-msg.visible {
opacity: 1;
transform: translateY(0);
}
/* User message — right-aligned, accent bubble */
.mcp-msg--user {
display: flex;
justify-content: flex-end;
}
.mcp-msg--user .mcp-msg__bubble {
background: rgba(94, 234, 212, 0.12);
border: 1px solid rgba(94, 234, 212, 0.20);
border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
padding: var(--space-3) var(--space-4);
max-width: 80%;
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 400;
color: var(--text-primary);
line-height: 1.5;
}
/* Claude message — left-aligned, glass bubble */
.mcp-msg--claude {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mcp-msg--claude .mcp-msg__label {
font-family: var(--mono);
font-size: var(--text-xs);
color: var(--accent);
margin-bottom: var(--space-1);
letter-spacing: 0.04em;
}
.mcp-msg--claude .mcp-msg__bubble {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm);
padding: var(--space-4) var(--space-5);
max-width: 90%;
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 400;
color: var(--text-primary);
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════════════════
TOOL CALL BADGES
═══════════════════════════════════════════════════════════════════════════ */
.mcp-tool-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.mcp-tool-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 400;
color: var(--accent);
background: rgba(94, 234, 212, 0.06);
border: 1px solid rgba(94, 234, 212, 0.15);
border-radius: var(--radius-full);
padding: 3px 10px;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.mcp-tool-badge.visible {
opacity: 1;
transform: scale(1);
}
.mcp-tool-badge.pulse {
animation: mcp-badge-pulse 0.6s ease-out;
}
@keyframes mcp-badge-pulse {
0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.30); }
70% { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); }
100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}
.mcp-tool-badge__icon {
font-size: 11px;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
TYPED TEXT + TABLES INSIDE CLAUDE BUBBLES
═══════════════════════════════════════════════════════════════════════════ */
/* Text that gets "typed" — hidden until JS reveals */
.mcp-typed {
overflow: hidden;
}
.mcp-typed-line {
opacity: 0;
transition: opacity 0.15s ease;
}
.mcp-typed-line.visible {
opacity: 1;
}
/* Table within Claude response */
.mcp-response-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-3) 0;
font-family: var(--mono);
font-size: var(--text-xs);
opacity: 0;
transition: opacity 0.4s ease;
}
.mcp-response-table.visible {
opacity: 1;
}
.mcp-response-table th {
font-weight: 500;
color: var(--text-secondary);
text-align: left;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--glass-border);
white-space: nowrap;
}
.mcp-response-table td {
color: var(--text-primary);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
font-weight: 300;
}
.mcp-response-table tr:last-child td {
border-bottom: none;
}
/* Bold cells within tables */
.mcp-response-table .mcp-cell-label {
font-weight: 500;
color: var(--text-secondary);
}
/* Signal-colored values */
.mcp-val--red { color: var(--signal-red); }
.mcp-val--amber { color: var(--signal-amber); }
.mcp-val--green { color: var(--signal-green); }
/* Mobile stacked cards (replace tables on small screens) */
.mcp-stacked-cards {
display: none;
}
.mcp-stacked-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: var(--space-3);
margin-bottom: var(--space-3);
}
.mcp-stacked-card__title {
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 500;
color: var(--accent);
margin-bottom: var(--space-2);
letter-spacing: 0.04em;
}
.mcp-stacked-card .data-row {
padding: 8px 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
EXPAND BUTTON (mobile long responses)
═══════════════════════════════════════════════════════════════════════════ */
.mcp-expand-wrapper {
position: relative;
}
.mcp-expand-btn {
display: none; /* shown via JS on mobile */
width: 100%;
padding: var(--space-3);
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 400;
color: var(--accent);
background: linear-gradient(to bottom, transparent, var(--obsidian-mid) 40%);
border: none;
cursor: pointer;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
.mcp-expand-btn:hover {
color: var(--text-primary);
}
/* ═══════════════════════════════════════════════════════════════════════════
NAVIGATION CONTROLS
═══════════════════════════════════════════════════════════════════════════ */
.mcp-demo-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-4) 0;
}
.mcp-demo-arrow {
background: none;
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
font-size: 14px;
transition: border-color 0.3s, color 0.3s;
}
.mcp-demo-arrow:hover {
border-color: var(--glass-hover);
color: var(--text-primary);
}
.mcp-demo-dots {
display: flex;
gap: var(--space-2);
}
.mcp-demo-dot {
width: 12px;
height: 12px;
border-radius: var(--radius-full);
background: var(--glass-hover);
cursor: pointer;
border: none;
padding: 10px; /* expands touch target to 32px total */
box-sizing: content-box;
transition: background 0.3s;
}
.mcp-demo-dot.active {
background: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════════════════
CTA SECTION
═══════════════════════════════════════════════════════════════════════════ */
.mcp-demo-cta {
text-align: center;
padding-top: var(--space-12);
}
.mcp-demo-cta__btn {
display: inline-block;
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 400;
color: var(--obsidian);
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
padding: 12px 32px;
cursor: pointer;
text-decoration: none;
letter-spacing: 0.04em;
transition: opacity 0.3s;
}
.mcp-demo-cta__btn:hover {
opacity: 0.85;
}
/* How it works steps */
.mcp-demo-steps {
display: flex;
justify-content: center;
gap: var(--space-10);
margin-top: var(--space-12);
flex-wrap: wrap;
}
.mcp-demo-step {
text-align: center;
max-width: 200px;
}
.mcp-demo-step__number {
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 400;
color: var(--accent);
margin-bottom: var(--space-2);
letter-spacing: 0.1em;
}
.mcp-demo-step__title {
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.mcp-demo-step__desc {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-secondary);
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE — 480px breakpoint
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.mcp-demo-chat {
padding: var(--space-4);
min-height: 320px;
}
.mcp-msg--user .mcp-msg__bubble {
max-width: 90%;
font-size: var(--text-sm);
}
.mcp-msg--claude .mcp-msg__bubble {
max-width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
}
/* Hide desktop tables, show stacked cards */
.mcp-response-table {
display: none !important;
}
.mcp-stacked-cards {
display: block;
opacity: 0;
transition: opacity 0.4s ease;
}
.mcp-stacked-cards.visible {
opacity: 1;
}
/* Tool badges: allow 2-line wrap */
.mcp-tool-badges {
max-height: 60px;
overflow: hidden;
}
/* Expand button for long Claude responses */
.mcp-expand-wrapper.collapsible .mcp-msg__bubble {
max-height: 300px;
overflow: hidden;
}
.mcp-expand-wrapper.collapsible .mcp-expand-btn {
display: block;
}
.mcp-expand-wrapper.expanded .mcp-msg__bubble {
max-height: none;
}
.mcp-expand-wrapper.expanded .mcp-expand-btn {
display: none;
}
/* CTA steps stack vertically */
.mcp-demo-steps {
flex-direction: column;
align-items: center;
gap: var(--space-6);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.mcp-msg,
.mcp-tool-badge,
.mcp-demo-slide,
.mcp-typed-line,
.mcp-response-table,
.mcp-stacked-cards {
transition: none !important;
animation: none !important;
}
.mcp-msg {
opacity: 1;
transform: none;
}
.mcp-tool-badge {
opacity: 1;
transform: none;
}
.mcp-typed-line {
opacity: 1;
}
}
