/* ===================================================================
   先生とジュリの会話の吹き出し（仕様書 4.7）。先生は左（アイコンはスレート、吹き出しは bg）、
   ジュリは右（アイコンはアクアの縁、吹き出しはアクア）。顔は js/guide/characters.js のものを使う。
   =================================================================== */
.talk { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; }
.talk-right { flex-direction: row-reverse; }
.talk-person { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.talk-avatar-svg, .talk-person svg { width: 56px; height: 56px; border-radius: 50%; display: block; }
.talk-teacher .talk-person svg { box-shadow: 0 0 0 3px var(--slate); }
.talk-student .talk-person svg { box-shadow: 0 0 0 3px var(--aqua); }
.talk-name { font-size: 11px; color: var(--text-sub); font-weight: 700; white-space: nowrap; }
.talk-bubble {
  position: relative; max-width: min(600px, calc(100% - 76px));
  padding: 12px 16px; line-height: 1.8;
}
.talk-bubble > * { margin: 0; }
.talk-bubble > * + * { margin-top: 8px; }
.talk-teacher .talk-bubble { background: var(--bg); color: var(--text); }
.talk-student .talk-bubble { background: var(--aqua); color: #fff; }
.talk-student .talk-bubble strong { color: #fff; }
.talk-bubble::before {
  content: ''; position: absolute; top: 16px; border: 8px solid transparent;
}
.talk-left .talk-bubble::before { left: -16px; border-right-color: var(--bg); }
.talk-right .talk-bubble::before { right: -16px; border-left-color: var(--aqua); }
.talk-surface .talk-teacher .talk-bubble { background: var(--surface); }
.talk-surface .talk-left .talk-bubble::before { border-right-color: var(--surface); }

@media (max-width: 767px) {
  .talk-person { width: 48px; }
  .talk-avatar-svg, .talk-person svg { width: 44px; height: 44px; }
  .talk-bubble { max-width: calc(100% - 60px); padding: 10px 12px; }
}