/* ROOM SHELL — shared spatial contract for physical Project Rooms. */
:root {
  --room-shell-floor-y: 72%;
  --room-shell-resident-zone: 30%;
  --room-shell-display-zone: 70%;
  --room-shell-gutter: clamp(12px, 3vw, 48px);
  /* Master geometry — calibrated from RESIDENT / MOVEMENT / TURN. */
  --room-master-door-width: min(25vw, 14rem);
  --room-master-door-height: clamp(18rem, 58vh, 32rem);
  /* The Corridor's original 20vh depth is the spatial reference. Keeping the
     same generous foreground lane in LAB 00 and White Room raises every
     threshold together instead of compensating with camera movement. */
  --room-master-floor-line: clamp(9rem, 20vh, 12rem);
  --room-master-resident-ratio: .76;
}

body[data-room-shell] {
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.white-room[data-room-shell] {
  --white-floor-depth: var(--room-master-floor-line);
  --white-wall-floor-y: calc(100% - var(--white-floor-depth));
}

/* Shared floor line: every scene has a readable wall/ground junction. */
body[data-room-shell] .room::after {
  position: absolute;
  right: var(--room-shell-gutter);
  bottom: 8%;
  left: var(--room-shell-gutter);
  height: 18%;
  content: "";
  border-top: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 64%);
  transform: perspective(700px) rotateX(58deg);
  transform-origin: top;
  pointer-events: none;
}

body[data-room-shell] .room > .door-wrap { position: relative; z-index: 3; }

/* White Room: centered door, wall-mounted controls, no floating UI under the threshold. */
.white-room[data-room-shell] .room {
  --white-door-width: var(--room-master-door-width);
  --white-door-height: var(--room-master-door-height);
  place-items: center;
  background:
    linear-gradient(180deg, transparent 0 var(--white-wall-floor-y), rgba(0,0,0,.045) var(--white-wall-floor-y) calc(var(--white-wall-floor-y) + 1%), transparent calc(var(--white-wall-floor-y) + 1%)),
    linear-gradient(180deg, #f8f8f4 0 var(--white-wall-floor-y), #eceeea var(--white-wall-floor-y) 100%);
}

.white-room[data-room-shell] .room::before { inset: clamp(1rem, 3vw, 3rem); background: transparent; box-shadow: inset 0 0 70px rgba(0,0,0,.05), 0 28px 70px rgba(0,0,0,.12); }
.white-room[data-room-shell] .door { width: var(--white-door-width); height: var(--white-door-height); }
/* The upper edge of the floor is the threshold reference. Keep the door
   planted on that line in every viewport; the lower floor remains foreground. */
.white-room[data-room-shell] .room > .door-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--white-floor-depth) + .5rem + 1px);
  width: var(--white-door-width);
  transform: translateX(-50%);
}
.white-room[data-room-shell] .journey-resident--white canvas {
  transform: none;
  filter: brightness(1.14) contrast(1.06);
}
.white-room[data-room-shell] .journey-resident--white [data-journey-status] {
  top: clamp(5rem, 12vh, 8rem);
}
.white-room[data-room-shell] .wall-fragment {
  right: auto;
  bottom: 29%;
  left: calc(50% - clamp(10rem, 16vw, 14rem));
}
.white-room[data-room-shell] .wall-fragment.fragment-found { color:rgba(27,49,51,.42); text-shadow:0 0 8px rgba(55,223,247,.12); }
.white-room[data-room-shell] .wall-message { color:rgba(35,57,59,.58); }
.white-room[data-room-shell][data-grid-phase="online"] :is(.wall-fragment.fragment-found,.wall-message) { color:rgba(118,205,218,.62); }
.white-room[data-room-shell] .door-label { position: relative; z-index: 3; }

/* Desktop micro-pass: one wall/floor junction, independent of metadata flow.
   The frame extends .5rem beyond the door; its outer threshold meets the wall. */
@media (min-width: 761px) {
  .white-room[data-room-shell] .room {
    position: relative;
  }
  .white-room[data-room-shell] .room::after {
    top: var(--white-wall-floor-y);
    bottom: 0;
    height: auto;
    border-top-color: rgba(0,0,0,.09);
    background: linear-gradient(180deg, rgba(0,0,0,.035), transparent 70%);
  }
  .white-room[data-room-shell] .door-label {
    position: absolute;
    top: 100%;
    left: 50%;
    width: max-content;
    max-width: 40vw;
    transform: translateX(-50%);
  }
  .white-room[data-room-shell] .room > .room-id,
  .white-room[data-room-shell] .room > .coordinate {
    position: absolute;
    top: var(--room-shell-gutter);
    max-width: calc(50% - var(--white-door-width) / 2 - 2 * var(--room-shell-gutter));
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .white-room[data-room-shell] .room > .room-id { left: var(--room-shell-gutter); right: auto; }
  .white-room[data-room-shell] .room > .coordinate { left: auto; right: var(--room-shell-gutter); }
  .white-room[data-room-shell] .journey-resident--white [data-journey-status] {
    top: max(1rem, calc((100dvh - var(--white-floor-depth) - var(--room-master-door-height)) / 2 - 1rem));
    max-width: var(--room-master-door-width);
    padding: .5rem .65rem;
    line-height: 1.5;
  }
  .white-room[data-room-shell] .room > .wall-fragment {
    position: absolute;
  }
  .white-room[data-room-shell] .room > .wall-message {
    position: absolute;
    bottom: 3%;
    right: 8%;
  }
}

/* The doorway sits on the common wall/floor junction. The Resident stands in
   the middle of the foreground floor lane, exactly as in the Corridor. */
.white-room[data-room-shell] .journey-calibration.resident-stage__threshold {
  bottom: calc(var(--white-floor-depth) / 2 - 3px) !important;
}

/* The Resident layer tracks the scene, never the document. */
body[data-room-shell] .journey-resident { transition: none; }
body[data-room-shell] .journey-resident.is-approaching-door { transition-duration: .82s; }

/* Corridor foreground lane: keep the Resident on the same floor as the
   selected door. Mobile needs a stronger foreground offset because its door
   occupies more of the viewport; the model scale itself remains unchanged. */
.project-corridor-room[data-room-shell] .journey-resident--corridor {
  --resident-floor-shift: clamp(12rem, 20vh, 16rem);
  overflow: visible;
  isolation: isolate;
  left: 0 !important;
  width: 100% !important;
}
.white-room.light-off[data-room-shell] .room { background: #0c0d0e; }
.project-corridor-room[data-room-shell] .journey-resident--corridor canvas {
  transform: translate3d(0, var(--resident-floor-shift), 0);
  filter: brightness(1.16) contrast(1.05);
  will-change: transform;
}
.project-corridor-room[data-room-shell] .journey-resident--corridor.is-arriving-left canvas {
  animation-name: journey-arrive-left-floor;
}
.project-corridor-room[data-room-shell] .journey-resident--corridor.is-leaving-right canvas {
  transform: translate3d(72vw, var(--resident-floor-shift), 0);
}
.project-corridor-room[data-room-shell] .journey-resident--corridor [data-journey-status] {
  top: .4rem;
  right: 1rem;
  left: auto;
  transform: none;
  max-width: min(42vw, 20rem);
  text-align: right;
}
@keyframes journey-arrive-left-floor {
  from { transform: translate3d(-65vw, var(--resident-floor-shift), 0); }
  to { transform: translate3d(0, var(--resident-floor-shift), 0); }
}

body[data-room-shell] :is(.room, .project-corridor, .prompt-shell) {
  min-height: 100svh;
  min-height: 100dvh;
}

/* One scene, one resident layer, one floor. Content may scroll only inside a display. */
.room-shell__resident-layer,
.room-shell__architecture,
.room-shell__display { position: relative; }

.project-display {
  isolation: isolate;
  contain: layout paint;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.project-display::-webkit-scrollbar { width: 6px; height: 6px; }
.project-display::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--project-accent, #c8ff4a) 55%, transparent); }

/* The resident is a scene occupant, never a document-flow element. */
body[data-room-shell] .journey-resident,
body[data-room-shell] .prompt-resident {
  contain: layout paint;
  overscroll-behavior: none;
}

body[data-room-shell] .journey-resident canvas,
body[data-room-shell] .prompt-resident canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Prompt Lab golden-room contract. */
.prompt-world[data-room-shell] .prompt-shell {
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.prompt-world[data-room-shell] .prompt-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.prompt-world[data-room-shell] .prompt-machine {
  max-height: min(70svh, 44rem);
}

/* White Room and Corridor are fixed scenes; no avatar fragments can follow page scroll. */
.white-room[data-room-shell] .room,
.project-corridor-room[data-room-shell] .project-corridor {
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

@media (min-width: 761px) {
  .project-corridor-room[data-room-shell] .project-corridor { --floor-height: var(--room-master-floor-line); }
  .project-corridor-room[data-room-shell] .project-corridor__viewport { inset: 5.2rem 0 var(--floor-height); }
  .project-corridor-room[data-room-shell] .project-corridor__track { padding-bottom: 0; }
  .project-corridor-room[data-room-shell] .project-corridor__bay { transform: translateY(clamp(-6rem, -7vh, -3.5rem)); }
  .project-corridor-room[data-room-shell] .project-door {
    width: var(--room-master-door-width);
    height: var(--room-master-door-height);
  }

  .project-corridor-room[data-room-shell] .journey-resident--corridor {
    inset: 5rem auto 8.5rem .5rem;
    width: var(--room-master-door-width);
  }

  .prompt-world[data-room-shell] .prompt-resident {
    inset: 5rem auto 5.5rem .35rem;
    width: var(--room-master-door-width);
    min-width: 15rem;
  }
}

@media (max-width: 760px) {
  body[data-room-shell] { min-width: 0; }

  .project-corridor-room[data-room-shell] .project-corridor__viewport { inset: 5.2rem 0 var(--floor-height); }
  .project-corridor-room[data-room-shell] .project-corridor__track { padding-bottom: 0; }
  .project-corridor-room[data-room-shell] .project-corridor__bay { transform: translateY(clamp(-5rem, -6vh, -3rem)); }

  .prompt-world[data-room-shell] .prompt-shell {
    width: calc(100% - 1rem);
    padding: .75rem 0 .65rem;
  }

  .prompt-world[data-room-shell] .prompt-nav {
    flex: 0 0 auto;
    gap: .35rem;
    font-size: .58rem;
  }

  .prompt-world[data-room-shell] .prompt-panel {
    display: grid;
    grid-template-rows: minmax(7.5rem, 25svh) minmax(0, 1fr);
    gap: .65rem;
    margin-top: .75rem;
    overflow: hidden;
  }

  .prompt-world[data-room-shell] .prompt-copy {
    min-height: 0;
    padding: 0 0 0 5.5rem;
    overflow: hidden;
  }

  .prompt-world[data-room-shell] .prompt-copy h1 {
    margin: .05em 0 .18em;
    font-size: clamp(2.5rem, 14vw, 4.6rem);
    line-height: .82;
  }

  .prompt-world[data-room-shell] .prompt-copy > p:not(.signature-kicker):not([data-project-visit-copy]),
  .prompt-world[data-room-shell] .prompt-wordfield {
    display: none;
  }

  .prompt-world[data-room-shell] .prompt-machine {
    min-height: 0;
    max-height: none;
    padding: 1rem;
    overflow: auto;
  }

  .prompt-world[data-room-shell] .prompt-machine li { padding: .7rem 0; }
  .prompt-world[data-room-shell] .prompt-status { flex: 0 0 auto; margin-top: .45rem; font-size: .58rem; }

  .prompt-world[data-room-shell] .prompt-resident {
    inset: auto auto 6.4rem .25rem;
    width: 5.8rem;
    height: 21svh;
    min-width: 0;
    z-index: 5;
  }

  .prompt-world[data-room-shell] .prompt-resident [data-journey-status] {
    right: auto;
    bottom: -1.15rem;
    left: 0;
    max-width: 11rem;
    padding: .3rem .4rem;
    font-size: .46rem;
    white-space: nowrap;
  }

  .prompt-world[data-room-shell] .prompt-resident [data-journey-follow] {
    right: auto;
    bottom: -4rem;
    left: 0;
    min-height: 2.75rem;
    padding: .45rem .6rem;
    font-size: .62rem;
  }

  .project-corridor-room[data-room-shell] .project-corridor { --floor-height: var(--room-master-floor-line); }
  .project-corridor-room[data-room-shell] .project-corridor__viewport { inset: 5.2rem 0 10.6rem; }
  .project-corridor-room[data-room-shell] .project-corridor__track { min-height: 100%; padding-inline: 39vw; }
  .project-corridor-room[data-room-shell] .project-corridor__bay { flex-basis: 64vw; min-height: 100%; }
  .project-corridor-room[data-room-shell] .project-door { width: min(54vw, 14rem); height: min(54svh, 27rem); }
  .project-corridor-room[data-room-shell] .journey-resident--corridor {
    inset: 5.2rem auto 10.8rem .1rem;
    width: 26vw;
    min-width: 5.2rem;
    z-index: 5;
    --resident-floor-shift: clamp(17rem, 30vh, 22rem);
  }

  .white-room[data-room-shell] .room { --white-door-width: min(54vw, 14rem); --white-door-height: min(54svh, 27rem); }
  .white-room[data-room-shell] .journey-resident--white { inset: 0; }
  .white-room[data-room-shell] .wall-fragment { bottom: 27%; left: calc(50% - 9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .project-display { scroll-behavior: auto; }
}

/* ROOM 02: one world, one camera. No canvas translation or native scroll tween.
   Door frames meet the upper floor edge; the resident stands in its middle. */
.project-corridor-room[data-room-shell] .project-corridor {
  background: linear-gradient(180deg, #111619 0 12%, #090c0e 12% calc(100% - var(--floor-height)), #050606 calc(100% - var(--floor-height)) 100%);
}
.project-corridor-room[data-room-shell] .project-corridor::after { z-index: 4; }
.project-corridor-room[data-room-shell] .project-corridor__viewport {
  inset: 5.2rem 0 var(--floor-height);
  overflow: clip;
  scroll-behavior: auto;
}
.project-corridor-room[data-room-shell] .project-corridor__track {
  height: 100%;
  min-height: 0;
  padding-bottom: calc(.48rem + 1px);
  transition: none;
  will-change: transform;
}
.project-corridor-room[data-room-shell] .project-corridor__bay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  min-height: 0;
  transform: none;
}
.project-corridor-room[data-room-shell] .corridor-return-bay {
  --door-accent: #7ad9e7;
}
.project-corridor-room[data-room-shell] .corridor-return-door {
  position: relative;
  left: auto;
  bottom: auto;
  width: var(--room-master-door-width);
  height: var(--room-master-door-height);
}
.project-corridor-room[data-room-shell] .project-door.is-ready {
  box-shadow: 0 0 0 .48rem #080b0c, 0 0 0 calc(.48rem + 1px) var(--door-accent), 0 0 4.8rem color-mix(in srgb,var(--door-accent) 30%,transparent);
}
.project-corridor-room[data-room-shell] .project-corridor__bay > p {
  align-self: flex-start;
  margin-bottom: auto;
}
.project-corridor-room[data-room-shell] .journey-resident--corridor {
  inset: 0 !important;
  width: 100% !important;
  min-width: 0;
  z-index: 14;
  transition: none;
}
.project-corridor-room[data-room-shell] .journey-resident--corridor canvas {
  transform: scale(var(--corridor-entry-scale, 1));
  transform-origin: 50% calc(100% - var(--floor-height) / 2);
  opacity: var(--corridor-entry-opacity, 1);
  animation: none;
  transition: opacity .12s linear;
}
/* Shared door-crossing occlusion: once the Resident has cleared the threshold,
   room-specific depth/opacity styling must not render him over closing leaves. */
body[data-room-shell] .journey-resident.is-concealed canvas {
  opacity: 0 !important;
}
.project-corridor-room[data-room-shell] .journey-calibration.resident-stage__threshold {
  bottom: calc(var(--floor-height) / 2 - 3px) !important;
}
.project-corridor-room[data-room-shell] .journey-resident--corridor [data-journey-status] {
  top: 5.2rem;
  right: auto;
  left: 50%;
  max-width: min(70vw, 32rem);
  text-align: center;
  transform: translateX(-50%);
}