.chat { --accent: #e11d5b; --mine: #e2f0e6; --coach: #f8ede2; --muted: #6c7b71;
  max-width: 720px; margin: 0 auto; padding: 8px 0 48px; text-align: left; }
.chat h1 { font-weight: 500; font-size: 1.6rem; margin: 0 0 4px; }
.chat .status { display: inline-block; font-size: .8rem; background: #fff4d6; color: #6b4e00;
  padding: 2px 10px; border-radius: 99px; margin: 8px 0; }
.chat .intro { color: var(--muted); margin: 4px 0 28px; }
.chat .turn { margin: 22px 0; display: flex; }
.chat .turn.writer { justify-content: flex-end; }
.chat .turn.writer .bubble { background: var(--mine); border-radius: 18px 18px 4px 18px;
  padding: 10px 16px; max-width: 85%; }
.chat .turn.coach { gap: 12px; align-items: flex-start; }
.chat .avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95rem; margin-top: 2px; }
.chat .turn.coach .bubble { flex: 1; min-width: 0; background: var(--coach); border-radius: 4px 18px 18px 18px; padding: 10px 16px; }
.chat .bubble { line-height: 1.6; }
.chat .bubble p { margin: .55em 0; }
.chat .bubble ul, .chat .bubble ol { margin: .4em 0; padding-left: 1.3em; }
.chat .bubble li { margin: .25em 0; }
.chat .bubble li.e { list-style: none; margin-left: -1.3em; display: flex; gap: .5em; }
.chat .bubble li.e .em { flex: none; }
.chat .bubble > :first-child { margin-top: 0; }
.chat .bubble > :last-child { margin-bottom: 0; }
.chat .banner { background: #1c1216; color: #ffb36b; font: .95rem ui-monospace, Menlo, monospace;
  padding: 10px 16px; border-radius: 10px; margin: 4px 0 12px; overflow-x: auto; }
.chat .banner .title { text-align: center; white-space: pre; }
.chat iframe.embed { width: 100%; height: 760px; border: 1px solid #dfe7e1; border-radius: 10px; background: #fff; margin: 8px 0; }
.chat .bubble code { background: rgba(128,128,128,.15); padding: 0 4px; border-radius: 4px; }
.chat .chat-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid #dfe7e1; }
@media (max-width: 480px) { .chat .turn.writer .bubble { max-width: 95%; } }