/* A framed scene, not a cutout floating over a whole-card background.
   Preserve all existing display/hidden gates and original image bytes. */
:is(.cdx-character-band,.cdx-intake-band,.cdx-story-greet)[data-cdx-character] {
  --scene-width: 38%;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 200px;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--scene-paper, #fffdfa) !important;
}
:is(.cdx-character-band,.cdx-intake-band,.cdx-story-greet)[data-cdx-character]::before {
  inset: 0 auto 0 0;
  width: var(--scene-width);
  border-radius: 0;
  border-right: 1px solid #e5dfd4;
  background-image: var(--scene-art);
  background-size: cover;
  background-position: 35% center;
  background-repeat: no-repeat;
}
/* Keep the artwork's bottom at the scene frame's bottom. The natural portrait
   crop now continues out of frame instead of ending in empty landscape. */
:is(.cdx-character-band,.cdx-intake-band)[data-cdx-character] > :is(.char,.nm-char,.tchar) {
  position: relative !important;
  inset: auto !important;
  align-self: flex-end;
  flex: 0 0 var(--scene-width) !important;
  width: var(--scene-width) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 0;
}
:is(.cdx-character-band,.cdx-intake-band)[data-cdx-character] > :is(.char,.nm-char,.tchar) > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 3 / 4;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(.cdx-character-band,.cdx-story-greet)[data-cdx-character] > img.cdx-character-art {
  position: relative !important;
  inset: auto !important;
  align-self: flex-end;
  flex: 0 0 var(--scene-width) !important;
  display: block;
  width: var(--scene-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 3 / 4;
  object-fit: contain !important;
  object-position: center bottom !important;
  margin: 16px 0 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 0;
}
:is(.cdx-character-band,.cdx-intake-band,.cdx-story-greet)[data-cdx-character] > :is(.bubble,.cdx-character-copy,.cdx-intake-copy,p) {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 20px 18px !important;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
}
@media (max-width: 380px) {
  :is(.cdx-character-band,.cdx-intake-band,.cdx-story-greet)[data-cdx-character] {
    --scene-width: 36%;
    min-height: 184px;
  }
  :is(.cdx-character-band,.cdx-intake-band,.cdx-story-greet)[data-cdx-character] > :is(.bubble,.cdx-character-copy,.cdx-intake-copy,p) { padding: 18px 14px !important; }
}
@media (forced-colors: active) {
  :is(.cdx-character-band,.cdx-intake-band,.cdx-story-greet)[data-cdx-character] {
    background: Canvas !important;
  }
}