.main {
      flex: 1;
      display: grid;
      grid-template-rows: 1fr auto auto;
      gap: var(--space-6);
      align-items: stretch;
      min-height: 0;
    }

    /* ── 대화 영역 — 최근 교환 1개만 보이도록 ───────── */
    .convo {
      padding: var(--space-6) var(--space-7);
      display: flex; flex-direction: column; gap: var(--space-5);
      overflow: hidden;
      min-height: 0;
    }

    .bubble {
      display: flex; gap: var(--space-4);
      align-items: flex-start;
      max-width: 88%;
    }
    .bubble--ai { align-self: flex-start; }
    .bubble--user {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .b-avatar {
      width: 64px; height: 64px; border-radius: 20px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      padding: 11px;
      background: var(--brand-orange-500);
      box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), 0.32);
    }
    .b-avatar svg { width: 100%; height: 100%; display: block; }

    .b-avatar--user {
      background: var(--color-bg-surface);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
      padding: 0;
      overflow: hidden;
      position: relative;
    }
    .b-avatar--user img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .b-content {
      display: flex; flex-direction: column; gap: 6px;
      flex: 1; min-width: 0;
    }
    .b-who {
      font: var(--weight-bold) 17px / 1 var(--font-family-base);
      color: var(--color-text-secondary);
      letter-spacing: -0.2px;
    }
    .bubble--user .b-who { text-align: right; }
    .b-text {
      font: var(--weight-medium) 26px / 1.45 var(--font-family-base);
      letter-spacing: -0.3px;
      padding: 18px 24px;
      border-radius: 22px;
    }
    .bubble--ai .b-text {
      background: var(--color-bg-surface);
      color: var(--color-text-primary);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    }
    .bubble--user .b-text {
      background: var(--patient-cream-warm);
      color: var(--color-text-primary);
    }

    /* 인식 중 사용자 텍스트 — 부드럽게 blink */
    .b-text--live {
      color: var(--brand-orange-700);
      font-style: normal;
    }
    .b-text--live::after {
      content: '…';
      display: inline-block;
      margin-left: 6px;
      animation: dot-blink 1.2s var(--easing-standard) infinite;
    }
    @keyframes dot-blink {
      0%, 100% { opacity: .3; }
      50%      { opacity: 1; }
    }

    /* ── 듣는 중 히어로 — 파형 + 상태 ─────────── */
    .listening {
      display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
      padding: var(--space-3) 0;
    }
    .wave {
      display: flex; align-items: center; gap: 10px;
      height: 84px;
    }
    .wave span {
      display: block;
      width: 12px;
      border-radius: 6px;
      background: var(--brand-orange-500);
      animation: wave-bounce 1.1s var(--easing-standard) infinite;
    }
    .wave span:nth-child(1) { animation-delay: 0s;    height: 30px; }
    .wave span:nth-child(2) { animation-delay: .12s;  height: 54px; }
    .wave span:nth-child(3) { animation-delay: .24s;  height: 72px; }
    .wave span:nth-child(4) { animation-delay: .36s;  height: 84px; }
    .wave span:nth-child(5) { animation-delay: .48s;  height: 66px; }
    .wave span:nth-child(6) { animation-delay: .60s;  height: 44px; }
    .wave span:nth-child(7) { animation-delay: .72s;  height: 28px; }
    @keyframes wave-bounce {
      0%, 100% { transform: scaleY(.35); opacity: .75; }
      50%      { transform: scaleY(1);   opacity: 1; }
    }
    .listen-status {
      font: var(--weight-bold) 28px / 1 var(--font-family-base);
      letter-spacing: -0.3px;
      color: var(--brand-orange-700);
    }
    .listen-hint {
      font: var(--weight-medium) 18px / 1.3 var(--font-family-base);
      color: var(--color-text-secondary);
      margin-top: -2px;
    }

    /* ── 액션 버튼 줄 ─────────────────────────── */
    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }
    .a-btn {
      height: 96px;
      border: 0; cursor: pointer;
      border-radius: 22px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
      font: var(--weight-bold) 24px / 1 var(--font-family-base);
      letter-spacing: -0.3px;
      transition: transform .15s, box-shadow .15s;
    }
    .a-btn:active { transform: scale(.97); }
    .a-btn--stop {
      background: var(--brand-orange-500);
      color: white;
      box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.38);
    }
    .a-btn--done {
      background: var(--color-bg-surface);
      color: var(--color-text-primary);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
      text-decoration: none;
    }

    @media (max-width: 820px) {
      .b-text { font-size: 20px; padding: 14px 18px; }
      .listen-status { font-size: 22px; }
      .actions { grid-template-columns: 1fr; }
      .a-btn { height: 76px; font-size: 20px; }
    }