.suggestion { animation: fade-up 180ms var(--ease) both; }
.suggestion:nth-child(2) { animation-delay: 30ms; }
.suggestion:nth-child(3) { animation-delay: 60ms; }
.suggestion:nth-child(4) { animation-delay: 90ms; }
/* ---------- Message actions + live stats (D3, D4, D8, D9, F1, F2) ---------- */
.msg-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin-top: 6px; min-height: 32px;
  color: var(--text-3);
}
.msg.user .msg-actions { opacity: 0; transition: opacity .15s; }
.msg.user:hover .msg-actions, .msg.user:focus-within .msg-actions { opacity: 1; }
.msg-actions .icon-btn { width: 32px; height: 32px; border-radius: 8px; color: var(--text-3); }
.msg-actions .icon-btn:hover { color: var(--text); }
.msg-actions .icon-btn.done { color: var(--success); }
.stats {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  margin-left: 6px; font: 12px/1.4 var(--mono); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.stats .stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stats .stat.live { color: var(--brand); }

/* Inline editor for "edit & resend" (D9) */
.edit-box { width: min(100%, 640px); background: var(--bubble); border-radius: 22px; padding: 12px 14px; }
.edit-box textarea {
  width: 100%; border: 0; outline: none; resize: none; background: none;
  font-size: 16px; line-height: 1.55; max-height: 50vh; display: block;
}
.edit-box .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------- Empty state (I2) ---------- */
.empty {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 0 40px;
  animation: fade-up .35s var(--ease);
}
.empty-logo {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand), #b85c3f);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 35%, transparent);
}
.empty h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.empty p { margin: 0 0 28px; color: var(--text-2); }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 640px; }
.suggestion {
  text-align: left; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
  transition: background .15s, border-color .15s, transform .15s;
}
.suggestion:hover { background: var(--bg-soft); border-color: var(--border-strong); transform: translateY(-1px); }
.suggestion b { display: block; font-size: 14px; font-weight: 600; }
.suggestion span { display: block; font-size: 13.5px; color: var(--text-3); margin-top: 2px; }
.setup-card {
  margin-top: 22px; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px dashed var(--border-strong); color: var(--text-2); font-size: 14px;
  max-width: 640px;
}
.setup-card .btn { flex-shrink: 0; }

@media (max-width: 560px) {
  .empty { justify-content: flex-start; padding-top: clamp(76px, 16vh, 150px); }
  .empty-logo { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 20px; }
  .empty h1 { font-size: 26px; letter-spacing: -.035em; margin-bottom: 8px; }
  .empty p { font-size: 18px; margin-bottom: 34px; }
  .suggestions { grid-template-columns: 1fr; }
  .suggestion:nth-child(n+3) { display: none; }
  .suggestion { min-height: 86px; padding: 17px 18px; border-radius: 16px; background: var(--bg); }
  .suggestion b { font-size: 16px; }
  .suggestion span { font-size: 15px; margin-top: 4px; }
  .messages-inner { padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); }
  .msg.user .msg-actions { opacity: 1; }
}