/* Size conversations against their actual canvas, including UI scaling. */
#npcDialogOverlay .npc-dialog-shell {
  container: npc-dialog / size;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* Keep the cinematic desktop composition; reflow only constrained canvases. */
@container npc-dialog (max-width: 1100px) or (max-height: 600px) {
#npcDialogOverlay .npc-dialog-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 28%);
  gap: clamp(16px, 2cqw, 36px);
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 3cqh, 40px) clamp(16px, 3cqw, 56px);
  box-sizing: border-box;
  align-items: center;
}

#npcDialogOverlay .npc-dialog-portrait-panel {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  inset: auto;
  width: 100%;
  height: min(84cqh, 640px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  animation: none;
}
#npcDialogOverlay .npc-dialog-portrait-frame { width: 100%; min-width: 0; }

#npcDialogOverlay .npc-dialog-stage > .npc-dialog-lowerbar {
  --npc-choice-column-lift: 0px;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  inset: auto;
  width: 100%;
  height: auto !important;
  max-height: calc(100cqh - 2 * clamp(16px, 3cqh, 40px)) !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#npcDialogOverlay .npc-dialog-lowerbar-top {
  width: 100%;
  flex: 0 0 auto;
  max-height: 30%;
  overflow: auto;
  margin: 0;
  transform: none;
}
#npcDialogOverlay .npc-dialog-name {
  font-size: clamp(24px, 3.5cqw, 48px);
  overflow-wrap: anywhere;
}
#npcDialogOverlay .npc-dialog-lowerbar .npc-dialog-body {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: none !important;
  overflow: auto !important;
  transform: none !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding: 0 12px 8px 0;
}
#npcDialogOverlay .npc-dialog-copy-block,
#npcDialogOverlay .npc-dialog-talk-view {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2cqw, 36px);
  align-items: start;
}
#npcDialogOverlay .npc-dialog-lowerbar .npc-dialog-copy-block > *,
#npcDialogOverlay .npc-dialog-lowerbar .npc-dialog-talk-view > * {
  position: static;
  inset: auto;
  min-width: 0;
  max-width: 100%;
  transform: none;
  align-self: start;
  box-sizing: border-box;
}
#npcDialogOverlay .npc-conversation-option-list,
#npcDialogOverlay .npc-talk-topic-list,
#npcDialogOverlay .npc-talk-prompt-choices {
  width: 100%;
  max-height: none;
  margin-left: 0;
  padding-left: 18px;
  padding-right: 8px;
  box-sizing: border-box;
  overflow: visible;
  flex: 0 0 auto;
}
#npcDialogOverlay .npc-dialog-speaker-block { display: block; }
#npcDialogOverlay .npc-dialog-lowerbar-top { display: block; }
#npcDialogOverlay .npc-dialog-lowerbar .npc-dialog-copy-block > .npc-conversation-option-list,
#npcDialogOverlay .npc-dialog-lowerbar .npc-dialog-talk-view > .npc-talk-topic-list {
  position: relative;
  margin-top: 0;
}
#npcDialogOverlay .npc-dialog-floating-response:empty,
#npcDialogOverlay .npc-dialog-actions:empty { display: none; }
#npcDialogOverlay .npc-dialog-body :is(p, button, h2, h3, .quest-row-title) {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#npcDialogOverlay .npc-conversation-option {
  font-size: clamp(18px, 2cqw, 28px);
}
#npcDialogOverlay .npc-talk-topic-response .npc-conversation-option {
  color: rgba(248, 238, 220, 0.68);
}
#npcDialogOverlay .npc-talk-topic-response .npc-conversation-option:is(:hover, :focus-visible) {
  color: #fff6df;
}
#npcDialogOverlay .npc-talk-topic-response .npc-conversation-option > span {
  color: inherit;
}
#npcDialogOverlay :is(.npc-dialog-greeting, .npc-talk-prompt-text, .npc-dialog-quest-description) {
  font-size: clamp(16px, 1.65cqw, 22px);
}
#npcDialogOverlay .npc-dialog-floating-response,
#npcDialogOverlay .npc-dialog-actions {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 0;
  max-height: 25%;
  overflow: auto;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}

@container npc-dialog (max-width: 1100px) {
  #npcDialogOverlay .npc-dialog-copy-block,
  #npcDialogOverlay .npc-dialog-talk-view { display: flex; flex-direction: column; }
  #npcDialogOverlay .npc-dialog-copy-block > *,
  #npcDialogOverlay .npc-dialog-talk-view > * { width: 100%; }
}
@container npc-dialog (max-width: 700px) {
  #npcDialogOverlay .npc-dialog-stage { grid-template-columns: minmax(0, 1fr); }
  #npcDialogOverlay .npc-dialog-portrait-panel { display: none; }
}
@container npc-dialog (max-height: 480px) {
  #npcDialogOverlay .npc-dialog-stage { padding: 10px 16px; }
  #npcDialogOverlay .npc-dialog-name { font-size: 24px; }
  #npcDialogOverlay .npc-dialog-lowerbar-top { max-height: 25%; }
}

}

/* Medium desktop windows retain the scene composition without pushing copy
   into the portrait. The wide 1440p layout above 2100px stays unchanged. */
@container npc-dialog (min-width: 1101px) and (max-width: 2100px) and (min-height: 601px) {
  #npcDialogOverlay .npc-dialog-stage {
    --npc-medium-left: clamp(40px, 5cqw, 100px);
    --npc-medium-right: clamp(24px, 4cqw, 96px);
    --npc-medium-portrait: min(460px, 30cqw);
  }
  #npcDialogOverlay .npc-dialog-portrait-panel {
    right: var(--npc-medium-right);
    width: var(--npc-medium-portrait);
  }
  #npcDialogOverlay .npc-dialog-lowerbar {
    left: var(--npc-medium-left);
    width: calc(100cqw - var(--npc-medium-left) - var(--npc-medium-right) - var(--npc-medium-portrait) - 32px);
  }
  #npcDialogOverlay .npc-dialog-copy-block,
  #npcDialogOverlay .npc-dialog-talk-view {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }
  #npcDialogOverlay .npc-dialog-copy-block > .npc-dialog-greeting,
  #npcDialogOverlay .npc-dialog-copy-block > .npc-talk-topic-response,
  #npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-response {
    left: 0;
    top: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #npcDialogOverlay .npc-dialog-floating-response { right: 0; }
}