/*
 * Shared dialogue-only frosted tiles.
 * Floating inner thoughts intentionally do not use these selectors. On the
 * every stacked character dialogue, only the newest/current line owns glass.
 */
:where(
  .story-dialogue-line,
  .park-yuting-dialogue-line
) {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: .44em .68em .5em;
  border: 0;
  border-radius: .72em;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none !important;
}

/*
 * Keep the glyphs in their own positive stacking layer.  The previous frost
 * lived at z-index:-1; Chromium could compute its backdrop-filter while still
 * painting the whole pseudo-element behind the isolated text stack.
 */
.dialogue-frost__content {
  display: block;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .3s ease,
    transform .34s cubic-bezier(.2, .74, .24, 1);
  will-change: opacity, transform;
}

:where(
  .story-dialogue-line.is-current,
  .park-yuting-dialogue-line.is-current
)::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -.28em -.38em;
  border-radius: 1em;
  background: linear-gradient(
    135deg,
    rgba(132, 143, 149, .34),
    rgba(55, 64, 69, .38)
  );
  -webkit-backdrop-filter: blur(18px) saturate(.7) contrast(.8) brightness(1.04);
  backdrop-filter: blur(18px) saturate(.7) contrast(.8) brightness(1.04);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='5' y='8' width='90' height='84' rx='12' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-30%25' width='140%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='5' y='8' width='90' height='84' rx='12' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  filter: none;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .3s ease,
    transform .34s cubic-bezier(.2, .74, .24, 1);
  will-change: opacity, transform, -webkit-backdrop-filter, backdrop-filter;
  pointer-events: none;
}

/*
 * The glyphs and the frosted pane enter and leave on the same two properties.
 * No ancestor opacity/filter animation is allowed here: Chromium otherwise
 * promotes the backdrop-filter one frame after the moving text.
 */
:where(
  .market-story-dialogue:not(.is-visible),
  .school-story-dialogue:not(.is-visible),
  .library-story-dialogue:not(.is-visible)
) .story-dialogue-line .dialogue-frost__content,
.story-dialogue-line.is-current.is-entering:not(.is-visible)
  .dialogue-frost__content {
  opacity: 0;
  transform: translateY(12px);
}

:where(
  .market-story-dialogue:not(.is-visible) .story-dialogue-line.is-current,
  .school-story-dialogue:not(.is-visible) .story-dialogue-line.is-current,
  .library-story-dialogue:not(.is-visible) .story-dialogue-line.is-current,
  .story-dialogue-line.is-current.is-entering:not(.is-visible)
)::after {
  opacity: 0;
  transform: translateY(12px);
}

.park-yuting-dialogue:not(.is-visible)
  .park-yuting-dialogue-line.is-current .dialogue-frost__content,
.park-yuting-dialogue-line.is-current.is-entering:not(.is-visible)
  .dialogue-frost__content {
  opacity: 0;
  transform: translateY(12px);
}

.park-yuting-dialogue:not(.is-visible)
  .park-yuting-dialogue-line.is-current::after,
.park-yuting-dialogue-line.is-current.is-entering:not(.is-visible)::after {
  opacity: 0;
  transform: translateY(12px);
}

/* Historical stacked lines stay readable but never retain an old glass tile. */
.story-dialogue-line:not(.is-current)::after,
.park-yuting-dialogue-line:not(.is-current)::after {
  content: none !important;
}

.story-dialogue-lines {
  position: relative;
  display: flex;
  width: 100%;
  min-height: min(68vh, 560px);
  max-height: 82vh;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}

.story-dialogue-line {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  font: inherit;
  text-wrap: pretty;
  transition:
    opacity .48s ease,
    transform .48s cubic-bezier(.2, .74, .24, 1),
    filter .48s ease;
}

.story-dialogue-line.is-oldest { opacity: .36; filter: blur(.35px); }
.story-dialogue-line.is-middle { opacity: .68; }
.story-dialogue-line.is-current { opacity: 1; }
.story-dialogue-line.is-entering,
.story-dialogue-line.is-entering.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}
.story-dialogue-line.is-ghost {
  position: absolute;
  z-index: 2;
  margin: 0;
  opacity: .36;
  pointer-events: none;
}
.story-dialogue-line.is-ghost.is-fading {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-18px);
}

/* Remove the former unbounded white wash behind dark dialogue text. */
.market-story-dialogue__text::before,
.library-story-dialogue__text::before {
  display: none !important;
}

/* Every speaker uses the same proven Dong'an Park glass treatment. */
.market-story-dialogue.speaker-shuhui .market-story-dialogue__text,
.market-story-dialogue.speaker-xiuqin .market-story-dialogue__text,
.market-story-dialogue.speaker-mingfen .market-story-dialogue__text,
.library-story-dialogue.speaker-mingfen .library-story-dialogue__text {
  background: transparent;
}

@media (max-width: 760px) {
  .story-dialogue-lines {
    min-height: 0;
    max-height: 42vh;
    gap: 10px;
  }

  :where(
    .story-dialogue-line,
    .park-yuting-dialogue-line
  ) {
    padding: .4em .58em .46em;
    border-radius: .68em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue-frost__content,
  :where(
    .market-story-dialogue__text,
    .school-story-dialogue__text,
    .library-story-dialogue__text,
    .story-dialogue-line.is-current,
    .park-yuting-dialogue-line.is-current
  )::after {
    transition: none;
  }

  .story-dialogue-line { transition: none; }
}

/* Dialogue text stays crisp; only the separate backdrop layer is softened. */
#marketStoryDialogue #marketStoryDialogueText,
#schoolStoryDialogue #schoolStoryDialogueText,
#libraryStoryDialogue #libraryStoryDialogueText,
#parkYutingDialogue .park-yuting-dialogue-line {
  text-shadow: none !important;
}