.dialogue {
  --portrait-accent: #d0bc96;
  left: 6%; right: 6%; bottom: 5%; min-height: 182px;
  padding: 30px 34px; display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 30px; overflow: visible; isolation: isolate;
  background: linear-gradient(105deg, #111c25f5, #12232af5 58%, #13252af0);
  border: 1px solid #b8a37b50; border-top-color: #c8b18c9c;
  box-shadow: 0 16px 90px #0007, inset 0 0 60px #060e1340;
}
.dialogue::before { content: ''; position: absolute; inset: 8px; pointer-events: none; border: 1px solid #b0a08014; z-index: -1; }
.dialogue.has-portrait { padding-left: 302px; }
.portrait-frame { position: absolute; left: 0; bottom: 0; width: 284px; height: 358px; pointer-events: none; overflow: hidden; }
.portrait-frame::after { content: ''; position: absolute; inset: auto 8% 0; height: 1px; background: linear-gradient(90deg, transparent, var(--portrait-accent), transparent); }
#dialogue-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; opacity: 0; transition: opacity .3s ease; mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 65%, transparent 100%), linear-gradient(to right, transparent, #000 10%, #000 88%, transparent); mask-composite: intersect; }
.dialogue[data-portrait-ready="true"] #dialogue-portrait { opacity: 1; }
.portrait-seal { position: absolute; left: 38%; top: 40%; font: 58px DreamSerif, serif; color: #c0ad8530; }
.dialogue[data-portrait-ready="true"] .portrait-seal { display: none; }
.dialogue:not(.has-portrait) .portrait-frame { display: none; }
.dialogue-copy { min-width: 0; align-self: center; }
.dialogue-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; }
#dialogue-speaker { font: 26px DreamSerif, serif; color: var(--portrait-accent); letter-spacing: 5px; margin: 0; }
#portrait-caption { font-size: 10px; letter-spacing: 3px; color: #a0b0ac; padding-left: 19px; border-left: 1px solid #bda6794d; }
#dialogue-text { font: 17px/1.95 DreamSerif, serif; color: #e1e6dc; letter-spacing: .8px; max-height: 30dvh; overflow: auto; scrollbar-width: thin; scrollbar-color: #bda67950 transparent; }
#dialogue-next { align-self: end; border-top: 1px solid #b7a37b45; padding-top: 12px; min-width: 78px; min-height: 42px; text-align: right; color: #d4c39e; }
body.in-dialogue .actor-label { opacity: .45; }
body.in-dialogue .cinematic-vignette { opacity: 1; }
.remake-credit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 18px 24px; margin-top: 20px; padding: 20px 0 4px; border-top: 1px solid #c7b18145; }
.remake-credit > span { grid-column: 1 / -1; }
.credit-contributor { display: grid; align-content: start; gap: 8px; min-width: 0; }
.remake-credit span { color: #acb8ad; font-size: 12px; letter-spacing: 2px; }
.remake-credit strong { font: 22px Georgia, serif; color: #e0c998; font-weight: 400; }
.remake-credit small { color: #869b93; font-size: 10px; letter-spacing: 2px; }
.save-mode { flex-wrap: wrap; }
.save-mode button { min-height: 42px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .dialogue { left: 4%; right: 4%; gap: 20px; padding: 25px; }
  .dialogue.has-portrait { padding-left: 249px; }
  .portrait-frame { width: 233px; height: 316px; }
}
@media (max-width: 760px) {
  .dialogue { left: 5%; right: 5%; bottom: max(5%, env(safe-area-inset-bottom)); min-height: 200px; padding: 22px 20px 16px; grid-template-columns: 1fr; gap: 10px; }
  .dialogue.has-portrait { padding-left: 126px; }
  .portrait-frame { width: 130px; height: 260px; }
  #dialogue-portrait { object-position: 50% 30%; }
  .dialogue-heading { display: block; margin-bottom: 11px; }
  #dialogue-speaker { font-size: 22px; letter-spacing: 3px; margin-bottom: 5px; }
  #portrait-caption { font-size: 8px; letter-spacing: 2px; border: 0; padding-left: 0; }
  #dialogue-text { font-size: 14px; line-height: 1.95; letter-spacing: .2px; max-height: 36dvh; }
  #dialogue-next { justify-self: end; font-size: 11px; margin: 0; min-width: 74px; min-height: 38px; padding-top: 9px; }
  .portrait-seal { left: 34%; font-size: 40px; }
}
@media (max-height: 550px) and (min-width: 761px) {
  .dialogue { bottom: 4%; min-height: 144px; padding-top: 18px; padding-bottom: 18px; }
  .dialogue.has-portrait { padding-left: 219px; }
  .portrait-frame { width: 205px; height: 262px; }
  #dialogue-text { font-size: 14px; max-height: 24dvh; }
  .dialogue-heading { margin-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) { #dialogue-portrait { transition: none; } }

/* Crop the approved full figure to a readable face; feather the final viewport,
   not the enlarged source image, so its edges remain soft at every breakpoint. */
.dialogue[data-portrait=zixuan] #dialogue-portrait { height:360%; width:auto; max-width:none; position:absolute; left:50%; top:-19%; transform:translateX(-50%); object-fit:contain; mask-image:none; -webkit-mask-image:none; }
.dialogue[data-portrait=zixuan] .portrait-frame { overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 76%,transparent 100%),linear-gradient(to right,transparent,#000 16%,#000 84%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 76%,transparent 100%),linear-gradient(to right,transparent,#000 16%,#000 84%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }