.jft-character-dialogue {
  --jft-dialogue-width: 430px;
  --jft-dialogue-max-height: 180px;
  --jft-dialogue-accent: #ffd166;
  --jft-dialogue-secondary: #63dbe8;
  position: absolute;
  z-index: 6;
  top: var(--jft-dialogue-top, calc(max(68px, env(safe-area-inset-top, 0px) + 64px)));
  left: var(--jft-dialogue-left, 8px);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  width: min(var(--jft-dialogue-width), calc(100% - 18px));
  max-height: var(--jft-dialogue-max-height);
  padding: 7px 9px;
  border: 9px solid transparent;
  border-image: url("/game/assets/ui-remaster-phase3/notification-frame-v1.webp") 34 fill stretch;
  color: #fff8ea;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  font: 700 15px/1.2 "Trebuchet MS", Arial, system-ui, sans-serif;
  filter: drop-shadow(0 4px 9px rgba(5, 8, 18, .32));
  animation: jft-dialogue-in 150ms ease-out;
}
.jft-character-dialogue[hidden] { display: none !important; }
.jft-character-dialogue[data-mode="card"] { border-radius: 14px; }
.jft-character-dialogue[data-mode="bubble"] { border-radius: 16px; }
.jft-character-dialogue[data-kind="important"],
.jft-character-dialogue[data-kind="olivia-local"] { border-image-source: url("/game/assets/ui-remaster-phase3/major-frame-v1.webp"); }
.jft-character-dialogue[data-kind="boss"] { border-image-source: url("/game/assets/ui-remaster-phase3/boss-frame-v1.webp"); }
.jft-dialogue-speaker-mark {
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--jft-dialogue-accent);
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--jft-dialogue-secondary) 40%, #11182b), #11182b);
  color: #fff7d6;
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.jft-dialogue-copy { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.jft-dialogue-speaker { color: var(--jft-dialogue-accent); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.jft-dialogue-text { display: block; overflow-wrap: anywhere; white-space: normal; }
.jft-dialogue-detail { color: color-mix(in srgb, var(--jft-dialogue-secondary) 72%, #fff); font-size: 10.5px; font-weight: 800; letter-spacing: .025em; overflow-wrap: anywhere; }
.jft-dialogue-tail { display: none; position: absolute; width: 16px; height: 16px; background: #19142f; border-right: 2px solid var(--jft-dialogue-accent); border-bottom: 2px solid var(--jft-dialogue-accent); pointer-events: none; }
.jft-character-dialogue[data-mode="bubble"] .jft-dialogue-tail { display: block; }
.jft-character-dialogue[data-placement="above"] .jft-dialogue-tail { left: calc(var(--jft-dialogue-tail-x) - 8px); top: calc(100% - 5px); transform: rotate(45deg); }
.jft-character-dialogue[data-placement="left"] .jft-dialogue-tail { left: calc(100% - 5px); top: calc(var(--jft-dialogue-tail-y) - 8px); transform: rotate(-45deg); }
.jft-character-dialogue[data-placement="right"] .jft-dialogue-tail { left: -11px; top: calc(var(--jft-dialogue-tail-y) - 8px); transform: rotate(135deg); }
.jft-character-dialogue[data-layout="mobile"] {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px;
  padding: 4px 6px;
  border-width: 7px;
  font-size: 12.5px;
  line-height: 1.16;
}
.jft-character-dialogue[data-layout="mobile"] .jft-dialogue-speaker-mark { width: 28px; height: 28px; font-size: 13px; }
.jft-character-dialogue[data-layout="mobile"] .jft-dialogue-speaker { font-size: 10.5px; letter-spacing: .04em; }
.jft-character-dialogue[data-layout="mobile"] .jft-dialogue-detail { font-size: 9.5px; }
.jft-character-dialogue[data-layout="mobile"][data-mode="card"] { grid-template-columns: 28px minmax(0, 1fr); }
body[data-menu-active="true"] .jft-character-dialogue { visibility: hidden; }
.jft-character-dialogue[data-reduced="true"] { animation: none !important; transition: none !important; }
@keyframes jft-dialogue-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jft-character-dialogue { animation: none !important; transition: none !important; } }