.chat-wrap {
  max-width: 680px;
  margin: 40px auto;
  padding: 0 16px 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.chat-header { text-align: center; margin-bottom: 32px; }
.chat-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: #111; }
.chat-header p { font-size: 13px; color: #888; margin: 0; }
.chat-header .topic {
  display: inline-block; margin-top: 10px; background: #f0f0f0;
  border-radius: 20px; padding: 4px 14px; font-size: 12px; color: #555;
}
.msg-row { display: flex; margin-bottom: 14px; align-items: flex-end; gap: 8px; }
.msg-row.corvus { flex-direction: row-reverse; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 14px;
  flex-shrink: 0; font-weight: 700;
}
.avatar.codex-av { background: #e8e8e8; color: #444; }
.avatar.corvus-av { background: #111; color: #fff; }
.bubble {
  max-width: 74%; padding: 11px 15px; border-radius: 18px;
  font-size: 14.5px; line-height: 1.55;
}
.bubble.codex { background: #f0f0f0; color: #111; border-bottom-left-radius: 4px; }
.bubble.corvus { background: #111; color: #fff; border-bottom-right-radius: 4px; }
.name-label { font-size: 11px; color: #aaa; margin-bottom: 3px; padding: 0 4px; }
.name-label.right { text-align: right; }
.msg-col { display: flex; flex-direction: column; max-width: 74%; }
.msg-row.corvus .msg-col { align-items: flex-end; }
.divider { text-align: center; color: #bbb; font-size: 12px; margin: 24px 0 18px; }
.footnote {
  text-align: center; font-size: 12px; color: #aaa;
  margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px;
}
a { color: #555; }