/* ============================================================
 *  02-igor.css — Dialogue scene using a pre-composed UI image
 *  The entire dialogue chrome (framed portrait + pennant + plate)
 *  is a single background image; we only overlay the dynamic
 *  dialogue text inside the plate region of the image.
 *  Scoped to #scene-igor so the shared .dialogue-box isn't touched.
 * ============================================================ */

#scene-igor { cursor: pointer; }

#scene-igor .igor-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 78%, transparent 0%, transparent 32%, rgba(2, 6, 18, 0.6) 78%, rgba(2, 6, 18, 0.9) 100%);
  z-index: 1;
}

/* ---------- Dialogue dock — fully responsive ----------
 * The image scales to fit BOTH a max-width (96vw) and max-height
 * (40vh) constraint — whichever is more restrictive wins, so the
 * dock always fits within the viewport on any device/orientation.
 * The inner wrapper uses `inline-block` so it shrinks to match the
 * image's actual rendered dimensions, and the dialogue-box inside
 * lands in the correct %-based plate region regardless of size. */
.igor-dock {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -14vh;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 100vw;
  z-index: 6;
  opacity: 0;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.igor-dock-inner {
  position: relative;
  display: inline-block;
  line-height: 0;   /* kill the inline-block baseline gap */
}
.igor-dock-bg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  /* Doubled — bar fills a commanding portion of the viewport. */
  max-height: clamp(560px, 90vh, 1280px);
  pointer-events: none;
  user-select: none;
}

/* ---------- Dialogue text overlay (inside the plate) ----------
 * The image's dialogue plate occupies roughly:
 *   left edge  ~ 32%   right edge ~ 98%
 *   top edge   ~ 34%   bottom     ~ 88%
 * We position the text in that region. Adjust these percentages
 * if you swap in a differently proportioned image. */
/* Dialogue-box sits inside the image-sized inner wrapper.
 * Insets are relative to the image itself (since .igor-dock-inner
 * shrinks to match the image). Adjust these % if your PNG has the
 * plate region at a different location. */
.igor-dock .dialogue-box {
  position: absolute;
  left: 30%;
  right: 4%;
  top: 30%;
  bottom: 28%;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0 3% 0 2%;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;  /* shell.css sets translateX(-50%) — override */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}
/* Suppress shell.css's ◆ corner ornaments inside this scoped dialogue */
.igor-dock .dialogue-box::before,
.igor-dock .dialogue-box::after {
  content: none !important;
  display: none !important;
}

.igor-dock .dialogue-box .dialogue-text {
  font-family: 'Work Sans', 'Mulish', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  /* Doubled to match the bigger dock. */
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.45;
  color: #ffffff;
  letter-spacing: 0.2px;
  text-align: center;
  width: 100%;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 0.9);
  /* Velvet-Room gold aura that breathes while the line types out. */
  animation: igor-text-glow 2.8s ease-in-out infinite;
}

/* Blinking gold caret right after the last typed character. */
.igor-dock .dialogue-box .dialogue-text::after {
  content: '▎';
  display: inline-block;
  margin-left: 0.18em;
  color: rgba(255, 216, 122, 0.95);
  text-shadow:
    0 0 8px rgba(201, 164, 97, 0.85),
    0 0 16px rgba(201, 164, 97, 0.45);
  animation: igor-caret-blink 0.85s steps(2) infinite;
  font-weight: 700;
  transform: translateY(-0.04em);
}

@keyframes igor-text-glow {
  0%, 100% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 8px rgba(255, 216, 122, 0.22);
  }
  50% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 18px rgba(255, 216, 122, 0.55),
      0 0 4px rgba(255, 248, 222, 0.25);
  }
}

@keyframes igor-caret-blink {
  50% { opacity: 0; }
}

/* Cyan continue arrow — the image already has a ▽ glyph in its
 * bottom-right corner so we suppress our own, but keep it in DOM for
 * the shared typewriter "press to continue" blink animation. */
.igor-dock .dialogue-box .dialogue-continue {
  position: absolute;
  right: 2.2%;
  bottom: -4%;
  color: transparent;   /* the arrow in the bg image takes over visually */
  font-size: 1.2rem;
  width: 28px;
  height: 22px;
  /* Keep a pulsing "interactive" hint via the bg's arrow — overlay a
   * very soft glow that lines up over the image's arrow */
  pointer-events: none;
  animation: igorDialogueArrow 1.4s ease-in-out infinite;
}
@keyframes igorDialogueArrow {
  0%, 100% { opacity: 0.0; }
  50%      { opacity: 0.0; }
}

/* ---------- Tablet / narrow desktop ---------- */
@media (max-width: 960px) {
  .igor-dock {
    bottom: -6vh;
  }
  .igor-dock-bg {
    max-width: 100vw;
    max-height: 70vh;
  }
  .igor-dock .dialogue-box {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    left: 32% !important;
    right: 5% !important;
    top: 30% !important;
    bottom: 28% !important;
    padding: 0 2% 0 1% !important;
    background: transparent !important;
    border: 0 !important;
  }
  .igor-dock .dialogue-box .dialogue-text {
    font-size: clamp(1.1rem, 2.8vw, 1.7rem) !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
  }
}

/* ---------- Mobile portrait ----------
 * Portrait phones: prefer fitting by width so the bar feels prominent. */
@media (max-width: 600px) {
  .igor-dock {
    bottom: -2vh;
  }
  .igor-dock-bg {
    max-width: 100vw;
    max-height: 60vh;
  }
  .igor-dock .dialogue-box {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    left: 32% !important;
    right: 6% !important;
    top: 30% !important;
    bottom: 28% !important;
    padding: 0 1% !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden;
  }
  .igor-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.95rem, 3.4vw, 1.25rem) !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    letter-spacing: 0.2px;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 420px) {
  .igor-dock {
    bottom: 0;
  }
  .igor-dock-bg {
    max-width: 100vw;
    max-height: 52vh;
  }
  .igor-dock .dialogue-box {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    left: 33% !important;
    right: 6% !important;
    top: 30% !important;
    bottom: 28% !important;
    padding: 0 1% !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden;
  }
  .igor-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.88rem, 3.6vw, 1.1rem) !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    letter-spacing: 0.1px;
  }
}

/* ---------- Mobile landscape ----------
 * Short viewport height → shrink so the bar doesn't dominate. */
@media (max-height: 500px) {
  .igor-dock {
    bottom: -2vh;
  }
  .igor-dock-bg {
    max-height: 78vh;
    max-width: 92vw;
  }
  .igor-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.9rem, 2.4vw, 1.25rem);
    line-height: 1.35;
  }
}

/* ============================================================
 *  Makoto dock modifier — smaller + scrollable on overflow
 *  Used by the Status scene so it doesn't dominate the viewport.
 * ============================================================ */
.makoto-dock .igor-dock-bg {
  /* Slightly bigger than half — gives the dock more presence on desktop. */
  max-height: clamp(360px, 56vh, 820px);
}
.makoto-dock .dialogue-box {
  /* Keep text clipped inside the plate bounds — no bleed outside the frame. */
  overflow: hidden;
  /* Makoto BG has a wider portrait+nameplate on the left, so shift the
   * text plate further right than the Igor layout. */
  left: 36% !important;
  right: 5% !important;
  top: 32% !important;
  bottom: 24% !important;
}
.makoto-dock .dialogue-box .dialogue-text {
  /* Scales with the bigger plate. */
  font-size: clamp(0.95rem, 1.55vw, 1.4rem);
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  /* P3R-style cyan aura that breathes while the line types out. */
  animation: makoto-text-glow 2.6s ease-in-out infinite;
}

/* Blinking cyan caret right after the last typed character — classic
 * video-game "text is being written" indicator. */
.makoto-dock .dialogue-box .dialogue-text::after {
  content: '▎';
  display: inline-block;
  margin-left: 0.18em;
  color: rgba(120, 220, 255, 0.95);
  text-shadow:
    0 0 8px rgba(0, 212, 255, 0.85),
    0 0 16px rgba(0, 212, 255, 0.45);
  animation: makoto-caret-blink 0.85s steps(2) infinite;
  font-weight: 700;
  transform: translateY(-0.04em);
}

@keyframes makoto-text-glow {
  0%, 100% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 8px rgba(120, 210, 255, 0.22);
  }
  50% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 18px rgba(120, 210, 255, 0.55),
      0 0 4px rgba(255, 255, 255, 0.25);
  }
}

@keyframes makoto-caret-blink {
  50% { opacity: 0; }
}

/* Bouncier, more "press A" feel on the continue chevron. */
.makoto-dock .dialogue-box .dialogue-continue {
  animation: makoto-continue-bounce 1.1s ease-in-out infinite;
  color: rgba(120, 220, 255, 1) !important;
  text-shadow:
    0 0 10px rgba(0, 212, 255, 0.75),
    0 0 22px rgba(0, 212, 255, 0.35) !important;
}

@keyframes makoto-continue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (max-width: 960px) {
  .makoto-dock {
    bottom: 0 !important;
  }
  .makoto-dock .igor-dock-bg {
    max-height: 48vh;
  }
  .makoto-dock .dialogue-box {
    left: 34% !important;
    right: 4% !important;
    top: 32% !important;
    bottom: 24% !important;
  }
  .makoto-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.82rem, 1.7vw, 1rem) !important;
  }
}

/* ============================================================
 *  Motoha dock modifier — Phantom X navigator for Confidants.
 *  Same dialogue-bar PNG format as Makoto/Igor, but with its own
 *  plate region and P5-red caret/aura to match the scene.
 * ============================================================ */
.motoha-dock {
  /* Anchored at the bottom like Igor/Makoto docks */
  top: auto !important;
  bottom: -4vh !important;
  z-index: 8;
}
.motoha-dock .igor-dock-bg {
  max-height: clamp(280px, 42vh, 540px);
}
/* Text plate = the black arrow-ended bar at the bottom-right of the PNG.
 * These % are relative to the image itself. Nudge if text bleeds. */
.motoha-dock .dialogue-box {
  /* Measured from the 1536x1024 PNG:
   *   plate body: x 25.1%..91.7%, y 66%..85.5%
   *   nameplate covers upper-left → shift text left/top to clear it
   *   red accent bar runs along plate's bottom → keep text above it */
  overflow: hidden;
  left: 38% !important;
  right: 10% !important;
  top: 71% !important;
  bottom: 17% !important;
  padding: 0 1.2% !important;
  /* Center the text vertically inside the box */
  align-items: center !important;
  justify-content: flex-start !important;
}
.motoha-dock .dialogue-box .dialogue-text {
  color: #ffffff !important;
  font-family: 'Work Sans', 'Mulish', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif !important;
  font-size: clamp(0.85rem, 1.3vw, 1.2rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-align: left;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  min-height: 0;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 0.9);
  /* P5-red aura for the Phantom X vibe */
  animation: motoha-text-glow 2.6s ease-in-out infinite;
}
.motoha-dock .dialogue-box .dialogue-text::after {
  content: '▎';
  display: inline-block;
  margin-left: 0.18em;
  color: rgba(255, 90, 110, 0.95);
  text-shadow:
    0 0 8px rgba(232, 0, 29, 0.85),
    0 0 16px rgba(232, 0, 29, 0.45);
  animation: motoha-caret-blink 0.85s steps(2) infinite;
  font-weight: 700;
  transform: translateY(-0.04em);
}
@keyframes motoha-text-glow {
  0%, 100% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 8px rgba(232, 0, 29, 0.20);
  }
  50% {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 18px rgba(232, 0, 29, 0.55),
      0 0 4px rgba(255, 255, 255, 0.25);
  }
}
@keyframes motoha-caret-blink {
  50% { opacity: 0; }
}
.motoha-dock .dialogue-box .dialogue-continue {
  color: rgba(255, 90, 110, 1) !important;
  text-shadow:
    0 0 10px rgba(232, 0, 29, 0.75),
    0 0 22px rgba(232, 0, 29, 0.35) !important;
}

@media (max-width: 960px) {
  .motoha-dock { bottom: 0 !important; }
  .motoha-dock .igor-dock-bg { max-height: 36vh; }
  .motoha-dock .dialogue-box {
    left: 38% !important; right: 10% !important;
    top: 71% !important; bottom: 17% !important;
  }
  .motoha-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.68rem, 1.6vw, 0.9rem) !important;
  }
}
@media (max-width: 600px) {
  .motoha-dock {
    position: fixed !important;
    bottom: 0 !important;
  }
  .motoha-dock .igor-dock-bg {
    max-height: 34vh;
    max-width: 100vw;
  }
  .motoha-dock .dialogue-box {
    left: 40% !important; right: 11% !important;
    top: 71% !important; bottom: 17% !important;
    padding: 0 1% !important;
  }
  .motoha-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.58rem, 1.9vw, 0.75rem) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 600px) {
  /* Stick to the viewport so the dock stays visible while the status
   * scene scrolls. `position: fixed` escapes the scrollable scene. */
  .makoto-dock {
    position: fixed !important;
    bottom: 0 !important;
  }
  .makoto-dock .igor-dock-bg {
    /* Cap height so aspect ratio doesn't squash the dock at phone width. */
    max-height: 46vh;
    max-width: 100vw;
  }
  .makoto-dock .dialogue-box {
    left: 36% !important;
    right: 7% !important;
    top: 32% !important;
    bottom: 24% !important;
    padding: 0 1.5% !important;
  }
  .makoto-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.66rem, 2.1vw, 0.85rem) !important;
    line-height: 1.3 !important;
  }
  /* Reserve space at the bottom of the scrollable status scene so
   * profile content isn't hidden behind the fixed Makoto dock. */
  #scene-status.is-active .status-layout {
    padding-bottom: 50vh !important;
  }
}

@media (max-width: 420px) {
  .makoto-dock {
    position: fixed !important;
    bottom: 0 !important;
  }
  .makoto-dock .igor-dock-bg {
    max-height: 42vh;
    max-width: 100vw;
  }
  .makoto-dock .dialogue-box {
    left: 37% !important;
    right: 7% !important;
    top: 32% !important;
    bottom: 24% !important;
    padding: 0 1.5% !important;
  }
  .makoto-dock .dialogue-box .dialogue-text {
    font-size: clamp(0.6rem, 2.3vw, 0.74rem) !important;
    line-height: 1.25 !important;
  }
  #scene-status.is-active .status-layout {
    padding-bottom: 46vh !important;
  }
}