/* One room image for entry and the camera move toward its wall letter shelf. */
.atmosphere { background-image: url('/assets/ui/moonlit-home/room-letter-wall-v2-official.webp'); }
body[data-view="inbox"] { overflow: hidden; background: #15120f; }
body[data-view="inbox"] .app-shell { width: 100%; max-width: none; min-height: 100dvh; margin: 0; padding: 0; }
body[data-view="inbox"] .topbar,
body[data-view="inbox"] .atmosphere { display: none !important; }

#inbox-view.is-active {
  --inbox-zoom: 1.42;
  position: fixed !important;
  inset: 0 !important;
  z-index: 20;
  display: block !important;
  width: min(100vw, 520px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #15120f !important;
  transform: none !important;
  animation: none !important;
}
#inbox-view::before,
#inbox-view::after { content: none !important; }
#inbox-view .room-background,
#inbox-view .camera-transition,
#inbox-view .ambient-light { position: absolute; inset: 0; pointer-events: none; }
#inbox-view .room-background {
  z-index: -2;
  background: #15120f url('/assets/ui/moonlit-home/room-letter-wall-v2-official.webp') center / cover no-repeat;
}
#inbox-view .room-stage {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: max(100%, 46.258dvh);
  height: auto;
  aspect-ratio: 853 / 1844;
  transform: translate(-50%, -50%) scale(var(--inbox-zoom));
  transform-origin: 50% 42%;
}
#inbox-view .mailbox-scene {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
#inbox-view .camera-transition {
  z-index: 1;
  background: linear-gradient(180deg, rgb(11 10 12 / 18%), rgb(12 11 12 / 16%) 42%, rgb(11 8 7 / 8%) 80%);
}
#inbox-view .ambient-light {
  z-index: 1;
  background: radial-gradient(ellipse at 14% 73%, rgb(230 153 85 / 8%), transparent 43%),
              radial-gradient(ellipse at 83% 29%, rgb(156 175 204 / 6%), transparent 49%);
}
body.inbox-entering #inbox-view .room-stage {
  animation: shelf-camera-approach 1050ms cubic-bezier(.22,.75,.25,1) both;
}
body.inbox-entering #inbox-view .camera-transition {
  animation: room-dim 1050ms ease-out both;
}
body.inbox-entering #inbox-view .envelope-layer {
  animation: letters-arrive 1050ms ease-out both;
}
body.inbox-entering #inbox-view .minimal-copy {
  animation: wall-copy-arrive 1050ms cubic-bezier(.2,.7,.25,1) both;
}
@keyframes shelf-camera-approach {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(var(--inbox-zoom)); }
}
@keyframes room-dim {
  from { opacity: .15; }
  to { opacity: 1; }
}
@keyframes letters-arrive {
  0%, 54% { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wall-copy-arrive {
  0%, 62% { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

#inbox-view .minimal-copy {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: clamp(170px, 36dvh, 360px);
  width: 57%;
  padding: 0;
  color: #f4e8d8;
  text-align: right;
  text-shadow: 0 2px 9px rgb(10 7 7 / 94%), 0 8px 22px rgb(10 7 7 / 68%);
  pointer-events: none;
}
#inbox-view .minimal-copy h1 {
  margin: 0;
  color: inherit;
  font: 400 clamp(18px, 4.7vw, 23px)/1.35 Wenkai, 'Songti SC', serif;
  letter-spacing: .045em;
  white-space: normal;
  overflow: visible;
  cursor: text;
  touch-action: manipulation;
  user-select: none;
}
#inbox-view .inbox-title-line { display: flex; align-items: center; justify-content: flex-end; gap: 5px; pointer-events: auto; }
#inbox-view .inbox-title-line h1:focus-visible,
#inbox-view .inbox-rename:focus-visible { outline: 2px solid #f3d1a3; outline-offset: 3px; }
#inbox-view .inbox-rename {
  flex: none;
  min-width: 26px;
  min-height: 28px;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  color: #f4e8d8;
  font-size: 16px;
  opacity: .65;
  cursor: pointer;
}
#inbox-view .inbox-rename:hover { opacity: 1; }
#inbox-view .inbox-name-editor { display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: 100%; pointer-events: auto; }
#inbox-view .inbox-name-editor input {
  min-width: 0;
  width: min(60%, 170px);
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid rgb(240 218 192 / 50%);
  border-radius: 5px;
  outline-color: #f3d1a3;
  background: rgb(21 16 15 / 84%);
  color: #f4e8d8;
  font: 400 18px/1.35 Wenkai, 'Songti SC', serif;
  text-align: right;
}
#inbox-view .inbox-name-editor span { white-space: nowrap; font: 400 18px/1.35 Wenkai, 'Songti SC', serif; }
#inbox-view .inbox-name-editor[hidden],
#inbox-view .inbox-rename[hidden],
#inbox-view .inbox-title-line h1[hidden] { display: none !important; }
#inbox-view .minimal-copy.is-editing { top: max(64px, calc(env(safe-area-inset-top) + 52px)); bottom: auto; width: 82%; }
#inbox-view .minimal-copy.is-editing p { display: none !important; }
#inbox-view .minimal-copy p {
  display: block !important;
  margin: 6px 0 0;
  color: #ebdacb;
  font-size: clamp(11px, 2.9vw, 12px);
  line-height: 1.55;
  letter-spacing: .025em;
}
#inbox-view .inbox-exit {
  position: absolute;
  z-index: 5;
  top: max(12px, env(safe-area-inset-top));
  right: 15px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid rgb(233 208 180 / 43%);
  border-radius: 16px;
  background: rgb(34 23 20 / 64%);
  color: #f5e9db;
  font: 12px Wenkai, 'Songti SC', serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 4px #170f0c;
}
#inbox-view .inbox-exit[hidden] { display: none !important; }
#inbox-view .inbox-exit:focus-visible { outline: 2px solid #f3d1a3; outline-offset: 2px; }

#inbox-view .envelope-layer,
#inbox-view .mailbox-pages,
#inbox-view .mailbox-page,
#inbox-view .mailbox-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
#inbox-view .mailbox-pages { pointer-events: auto; }
#inbox-view .mailbox-letter {
  position: absolute;
  top: 31.7%;
  left: 37.5%;
  width: 15.5%;
  height: 5.5%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}
#inbox-view .mailbox-letter:nth-child(even) { left: 52.5%; }
#inbox-view .mailbox-letter:nth-child(3),
#inbox-view .mailbox-letter:nth-child(4) { top: 37.3%; }
#inbox-view .mailbox-letter:nth-child(5),
#inbox-view .mailbox-letter:nth-child(6) { top: 42.9%; }
#inbox-view .mailbox-letter.is-unread::before {
  position: absolute;
  z-index: 0;
  left: 10%;
  bottom: 1%;
  width: 80%;
  height: 78%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(237 190 123 / 53%), rgb(222 151 91 / 24%) 43%, transparent 72%);
  filter: blur(6px);
  animation: unread-lamplight 3.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes unread-lamplight { from { opacity: .3; } to { opacity: .76; } }
#inbox-view .mailbox-letter .shelf-envelope {
  position: absolute;
  z-index: 1;
  top: auto;
  right: auto;
  bottom: 10%;
  left: 50%;
  display: block;
  width: 75%;
  height: auto;
  aspect-ratio: 640 / 400;
  transform: translateX(-50%) rotate(-1deg);
  transform-origin: 50% 85%;
  filter: drop-shadow(0 5px 4px rgb(3 2 2 / 53%));
  transition: transform .32s ease, filter .32s ease;
}
#inbox-view .mailbox-letter.is-unread .shelf-envelope {
  transform: translate(-50%, -4px) rotate(-1deg) scale(1.06);
  filter: drop-shadow(0 0 5px rgb(239 191 126 / 57%)) drop-shadow(0 7px 7px rgb(8 5 4 / 58%));
}
#inbox-view .mailbox-letter .shelf-envelope .envelope {
  width: 100%;
  height: 100%;
  aspect-ratio: 640 / 400;
}
#inbox-view .mailbox-letter .envelope-letter,
#inbox-view .mailbox-letter .envelope-inscription { display: none; }
#inbox-view .mailbox-letter .seal-button { width: 22%; min-width: 0; }
#inbox-view .mailbox-letter .seal-inlay { border-width: 1px; }
#inbox-view .mailbox-letter .seal-inlay > span { font-size: 11px; }
#inbox-view .mailbox-letter:hover .shelf-envelope,
#inbox-view .mailbox-letter:focus-visible .shelf-envelope,
#inbox-view .mailbox-letter:active .shelf-envelope {
  transform: translate(-50%, -8px) rotate(0);
  filter: drop-shadow(0 12px 8px rgb(3 2 2 / 58%));
}
#inbox-view .mailbox-letter.is-unread:hover .shelf-envelope,
#inbox-view .mailbox-letter.is-unread:focus-visible .shelf-envelope {
  transform: translate(-50%, -9px) rotate(0) scale(1.06);
}
#inbox-view .mailbox-letter:focus-visible {
  outline: 2px solid #f3d1a3;
  outline-offset: -3px;
}
#inbox-view .mailbox-nav {
  position: absolute;
  top: 51%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateX(-50%);
  color: #eee2cf;
  font: 13px Wenkai, serif;
  text-shadow: 0 2px 5px #100b09;
  pointer-events: auto;
}
#inbox-view .mailbox-nav button {
  width: 36px;
  height: 36px;
  border: 1px solid rgb(236 204 169 / 38%);
  border-radius: 50%;
  color: #f3e4d1;
  background: rgb(48 30 23 / 70%);
  font-size: 23px;
  line-height: 1;
}
#inbox-view .mailbox-nav button:disabled { opacity: .3; }

@media (max-width: 350px) {
  #inbox-view.is-active { --inbox-zoom: 1.28; }
  #inbox-view .minimal-copy { right: 9%; width: 58%; }
  #inbox-view .minimal-copy h1 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body.inbox-entering #inbox-view .room-stage,
  body.inbox-entering #inbox-view .camera-transition,
  body.inbox-entering #inbox-view .envelope-layer,
  body.inbox-entering #inbox-view .minimal-copy { animation: none; }
  #inbox-view .mailbox-letter .shelf-envelope { transition: none; }
  #inbox-view .mailbox-letter.is-unread::before { animation: none; opacity: .55; }
}