Handoff 02 / MIA Chat System

Bloom Avatar

MIA's visual identity at three scales — each with precise CSS specifications for the bloom ring, glow, and inner mark.

Hero — 280px

Use: Chat landing, splash
Outer ring: 4px conic-gradient
Inner glow: radial 15% opacity
Letter: Playfair 72px 700

Chat Header — 44px

Use: Chat header, navigation
Outer ring: 2px conic-gradient
Inner glow: radial 10% opacity
Letter: Playfair 16px 700

Inline — 28px

Use: Bubble prefix, citations
Outer ring: 1px conic-gradient
Inner glow: radial 8% opacity
Letter: Playfair 10px 700

CSS Specification

/* Bloom outer ring */
.bloom::before {
  background: conic-gradient(from 0deg,
    rgba(196,154,60,0.4),
    rgba(224,193,122,0.2),
    rgba(196,154,60,0.4));
  animation: bloomSpin 4s linear infinite;
}

/* Bloom inner glow */
.bloom::after {
  background: radial-gradient(circle,
    rgba(196,154,60,0.15) 0%,
    transparent 70%);
}

/* Inner circle */
.bloom-inner {
  background: linear-gradient(135deg, #1A1510, #0D0B08);
  border: 1px solid rgba(196,154,60,0.2);
}

Spin speed4s linear

Pulse speed3s ease-in-out

aria-label"MIA AI Assistant"

role"img"

Handoff 02 / Chat Components

Chat Bubble Anatomy

Asymmetric border-radius, padding rules, max-width, and interaction states for MIA and user bubbles.

MIA Bubble

Based on your risk profile, I'd recommend a 60/40 equity-debt split. Shall I show you specific funds?

border-radius: 4px 16px 16px 16px

/* MIA bubble */
.mia-bubble {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px 16px 16px 16px;
  padding: 14px 16px;
  max-width: 85%;
  font: 400 14px/1.6 'DM Sans';
}

/* Feedback — min hit area 44px */
.feedback-btn {
  width: 32px; height: 32px;
  padding: 6px;
  aria-label: "Rate helpful / not helpful";
}

User Bubble

Show me large cap funds with low expense ratio

border-radius: 16px 4px 16px 16px

/* User bubble */
.user-bubble {
  background: rgba(196,154,60,0.1);
  border: 1px solid rgba(196,154,60,0.15);
  border-radius: 16px 4px 16px 16px;
  padding: 14px 16px;
  max-width: 80%;
  margin-left: auto;
  font: 400 14px/1.6 'DM Sans';
  color: var(--white);
}

Typing Indicator

Three bouncing dots — staggered 0.2s delay, 6px vertical travel.

/* Typing dots */
.typing-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-500);
  animation: typingBounce 1.4s ease-in-out infinite;
}

@keyframes typingBounce {
  0%, 60%, 100% { translateY(0); opacity: 0.4; }
  30% { translateY(-6px); opacity: 1; }
}

/* Stagger: nth-child(2) 0.2s, (3) 0.4s */
aria-label: "MIA is typing"
aria-live: "polite"

Regenerate & Session Context

Regenerate appears below MIA responses on error or user request.

↻ Regenerate response

/* Regenerate */
.regen-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  font: 400 12px 'DM Sans';
  aria-label: "Regenerate MIA response";
}

Session context pill — shows active advisory mode.

Advisory Mode · Portfolio Review

/* Session context */
.session-indicator {
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(196,154,60,0.05);
  border: 1px solid rgba(196,154,60,0.1);
  font: 500 11px 'JetBrains Mono';
  aria-label: "Current context: [mode]";
}