/* #040 / #041 Character Continuity / Presence — mobile framing hardened */

:root {
  --mjn-vvh: 100dvh;
  --mjn-vv-offset-top: 0px;
  --mjn-safe-top: env(safe-area-inset-top, 0px);
  --mjn-safe-right: env(safe-area-inset-right, 0px);
  --mjn-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mjn-safe-left: env(safe-area-inset-left, 0px);
  --mjn-dock-gap: 12px;
  --mjn-dock-w: min(36vw, 148px);
  --mjn-dock-h: min(36dvh, 210px);
  --mjn-dock-clearance: calc(var(--mjn-dock-h) + var(--mjn-safe-bottom) + var(--mjn-dock-gap) + 16px);
}

/* Content must not sit under the floating presence dock */
body.mjn-has-presence-dock {
  padding-bottom: max(var(--mjn-dock-clearance), env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.mjn-character-stage.mjn-character-presence,
.mjn-character-presence.mjn-character-stage {
  position: fixed;
  right: max(var(--mjn-dock-gap), var(--mjn-safe-right));
  bottom: max(var(--mjn-dock-gap), var(--mjn-vv-bottom, var(--mjn-safe-bottom)));
  z-index: 120000;
  width: var(--mjn-dock-w);
  height: var(--mjn-dock-h);
  min-width: 44px;
  min-height: 44px;
  max-width: calc(100vw - var(--mjn-safe-left) - var(--mjn-safe-right) - 24px);
  max-height: calc(var(--mjn-vvh) * 0.42);
  border-radius: 22px;
  overflow: hidden;
  contain: layout paint;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, #0b1f3a 0%, #07111f 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1.15, 0.36, 1),
    width 0.25s ease, height 0.25s ease, left 0.25s ease, right 0.25s ease, bottom 0.25s ease;
  /* Keep chrome/UI from colliding */
  margin: 0;
  touch-action: manipulation;
}

.mjn-character-stage.mjn-character-presence.is-live {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mjn-character-presence .mjn-character-stage__canvas,
.mjn-character-presence .mjn-character-stage__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 58%; /* favor torso; avoid head/feet crop bias */
  display: block;
}

/* Destination framing pockets — layout nudge only, identity unchanged */
.mjn-character-presence[data-framing="order-room"] {
  right: max(var(--mjn-dock-gap), var(--mjn-safe-right));
  bottom: max(18px, var(--mjn-vv-bottom, var(--mjn-safe-bottom)));
}

.mjn-character-presence[data-framing="my-room"] {
  left: max(var(--mjn-dock-gap), var(--mjn-safe-left));
  right: auto;
}

.mjn-character-presence[data-framing="settlement-room"] {
  right: max(14px, var(--mjn-safe-right));
  bottom: max(20px, var(--mjn-vv-bottom, var(--mjn-safe-bottom)));
  border-color: rgba(202, 138, 4, 0.35);
}

.mjn-character-presence[data-framing="ai-room"] {
  left: auto;
  right: max(var(--mjn-dock-gap), var(--mjn-safe-right));
  bottom: max(16px, var(--mjn-vv-bottom, var(--mjn-safe-bottom)));
  transform: none;
  border-color: rgba(99, 102, 241, 0.35);
}

.mjn-character-presence[data-framing="ai-room"].is-live {
  transform: none;
}

.mjn-character-presence[data-framing="message-room"] {
  right: max(var(--mjn-dock-gap), var(--mjn-safe-right));
  bottom: max(14px, var(--mjn-vv-bottom, var(--mjn-safe-bottom)));
  border-color: rgba(234, 88, 12, 0.35);
}

/* Desktop: larger dock, still clear of content */
@media (min-width: 960px) {
  :root {
    --mjn-dock-w: min(18vw, 200px);
    --mjn-dock-h: min(40dvh, 300px);
  }
}

/* Phone portrait — anti-clip sizing */
@media (max-width: 720px) {
  :root {
    --mjn-dock-w: min(34vw, 132px);
    --mjn-dock-h: min(34dvh, 188px);
    --mjn-dock-gap: 10px;
  }

  .mjn-character-presence .mjn-character-stage__img {
    object-position: center 56%;
  }
}

/* Short phones / large browser chrome */
@media (max-width: 720px) and (max-height: 700px) {
  :root {
    --mjn-dock-w: min(30vw, 118px);
    --mjn-dock-h: min(30dvh, 160px);
  }
}

/* Landscape mobile — avoid covering full width CTAs */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --mjn-dock-w: min(22vw, 120px);
    --mjn-dock-h: min(72svh, 148px);
    --mjn-dock-gap: 8px;
  }

  .mjn-character-presence[data-framing="my-room"],
  .mjn-character-presence[data-framing="ai-room"] {
    left: auto;
    right: max(8px, var(--mjn-safe-right));
  }

  body.mjn-has-presence-dock {
    padding-bottom: max(12px, var(--mjn-safe-bottom));
    padding-right: calc(var(--mjn-dock-w) + var(--mjn-safe-right) + 12px);
  }
}

html[data-mjn-orientation="landscape"] .mjn-character-presence {
  max-height: calc(var(--mjn-vvh) * 0.78);
}

html[data-mjn-orientation="portrait"] .mjn-character-presence {
  max-height: calc(var(--mjn-vvh) * 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .mjn-character-stage.mjn-character-presence {
    transition: none !important;
  }
}

/* Living overlay owns the stage; hide dock to prevent overlap */
body.mjn-lx-active .mjn-character-presence,
body.mjn-ce-active .mjn-character-presence {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Home dock without presence class still gets mobile-safe bottom */
.mjn-character-stage:not(.mjn-character-presence) {
  right: max(10px, var(--mjn-safe-right));
  bottom: max(10px, var(--mjn-vv-bottom, var(--mjn-safe-bottom)));
}