/* Shared framing; text never lives inside the art. All silhouettes are prototypes. */
.dialogue-stage { grid-template-columns: minmax(160px, 1fr) minmax(0, 2.7fr); }
.dialogue-art { position: relative; overflow: hidden; min-height: 270px; background: linear-gradient(150deg, #384c4b, #111f28); border-right: 1px solid #60746b; isolation: isolate; }
.dialogue-background-lines { position: absolute; inset: 24px 12px 35px; border: 3px solid #8eb3a33b; border-radius: 60px 60px 3px 3px; }
.dialogue-background-lines i { position: absolute; display: block; left: 9%; right: 9%; height: 14%; border: 2px solid #adc8ad2a; background: #091b2433; top: 20%; }
.dialogue-background-lines i:nth-child(2) { top: 43%; }
.dialogue-background-lines i:nth-child(3) { top: 66%; }
.scenery-command { background: linear-gradient(145deg, #475a51, #14232b); }
.scenery-medical { background: linear-gradient(145deg, #527f79, #15252b); }
.scenery-garage { background: linear-gradient(145deg, #65523f, #1b2527); }
.scenery-communications { background: linear-gradient(145deg, #34566d, #15222b); }
.scenery-warehouse { background: linear-gradient(145deg, #726247, #252929); }
.scenery-laboratory { background: linear-gradient(145deg, #565878, #18252b); }
.scenery-quarters { background: linear-gradient(145deg, #67604b, #1e2b2b); }
.scenery-medical .dialogue-background-lines::after { content: '+'; position: absolute; top: 5%; right: 4%; color: #e3edcf80; font-size: 58px; }
.scenery-communications .dialogue-background-lines i { border-radius: 10px; border-color: #9ed1d552; }
.scenery-warehouse .dialogue-background-lines, .scenery-garage .dialogue-background-lines { border-radius: 0; }
.scenery-laboratory .dialogue-background-lines i { left: 30%; right: 30%; border-radius: 50%; }
.dialogue-bust { position: absolute; width: min(150px, 90%); height: 235px; bottom: 20px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 5px 4px #00121c99); }
.dialogue-head { position: absolute; width: 49%; height: 34%; left: 25.5%; top: 15%; border-radius: 40% 40% 43% 43%; background: #b6b9a5; border: 3px solid #233537; z-index: 1; }
.dialogue-head::before { content: ''; position: absolute; inset: -6px -4px 64%; background: #66736c; border-radius: 65% 65% 12% 12%; }
.dialogue-head::after { content: ''; position: absolute; left: 23%; right: 23%; bottom: 27%; height: 4px; border-top: 2px solid #465951; }
.dialogue-body { position: absolute; inset: 46% 0 0; border-radius: 46% 46% 4% 4%; background: #536b60; border: 3px solid #233537; }
.dialogue-body::before { content: ''; position: absolute; width: 25%; height: 30%; left: 37.5%; top: 0; background: #c7c9b7; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.portrait-caretaker .dialogue-head::before { background: #d2d5c5; }
.portrait-caretaker .dialogue-body::after { content: ''; position: absolute; top: 24%; left: 18%; width: 22%; height: 5px; border-top: 3px solid #d5b674; border-bottom: 3px solid #d5b674; }
.portrait-medic .dialogue-body { background: #adc9bf; }
.portrait-medic .dialogue-body::after { content: '+'; position: absolute; top: 15%; right: 14%; color: #426359; font: bold 35px sans-serif; }
.portrait-mechanic .dialogue-body { background: #9a7960; }
.portrait-mechanic .dialogue-head::before { background: #775f4e; border-radius: 25% 25% 0 0; }
.portrait-scientist .dialogue-body { background: #9fa3b9; }
.portrait-scientist .dialogue-head::after { bottom: 45%; left: 8%; right: 8%; height: 12%; border: 3px solid #495966; border-radius: 2px; }
.dialogue-art-label { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 5px 2px; color: #d0ddd3; font-size: 10px; background: #13242dc9; }
.dialogue-background-image { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.dialogue-portrait-image { position: absolute; width: 100%; height: 90%; bottom: 0; object-fit: contain; object-position: bottom; }
.campaign-speaker span { display: block; font-size: 11px; font-weight: 400; color: #b4c9c2; margin-top: 3px; }
.dialogue-stage .campaign-speech { position: relative; white-space: pre-line; overflow-wrap: anywhere; }
.dialogue-stage .campaign-speech::before { content: ''; position: absolute; left: -9px; top: 20px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid #101d24; }
.dialogue-choice-note { color: #a6bcb5; font-size: 11px; line-height: 1.7; margin: 12px 0 0; }
.dialogue-report-date { font-size: 12px; color: #b7cbbc; }
.dialogue-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dialogue-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding: 8px 12px; background: #263b3c; border: 1px solid #4c6961; }
.dialogue-notice p { margin: 0 auto 0 0; font-size: 13px; }
.dialogue-backlog { padding: 16px; background: #1b2c30; border: 1px solid #4c6961; }
.dialogue-backlog ol { list-style: none; padding: 0; margin: 12px 0; max-height: 55vh; overflow-y: auto; }
.dialogue-backlog li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #4c696155; padding: 10px 0; }
.dialogue-backlog li span { font-size: 13px; overflow-wrap: anywhere; }
.dialogue-backlog p { line-height: 1.7; font-size: 13px; }
.dialogue-history-choice { color: #d9c59d; font-size: 13px; }
@media (max-width: 650px) {
  .dialogue-stage { grid-template-columns: 84px minmax(0, 1fr); }
  .dialogue-art { min-height: 240px; }
  .dialogue-bust { height: 156px; top: 70px; bottom: auto; width: 86px; }
  .dialogue-background-lines { inset: 16px 4px 35px; }
  .dialogue-stage .campaign-conversation { padding: 12px 10px; }
  .dialogue-stage .campaign-topics, .dialogue-controls { flex-direction: column; }
  .dialogue-stage button, .dialogue-controls button { white-space: normal; overflow-wrap: anywhere; min-height: 44px; }
  .dialogue-notice button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .dialogue-stage * { transition: none !important; animation: none !important; } }