body {
  background: #050a0d;
}
.app,
.shell {
  isolation: isolate;
  background: transparent !important;
}
.room-scene {
  --room-x: 0px;
  --room-y: 0px;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #05090b;
}
.room-backdrop {
  position: absolute;
  inset: -2%;
  background-image: url('/assets/images/room/veles-spirit-chamber-wide-v6.png');
  background-image: image-set(
    url('/assets/images/room/veles-spirit-chamber-wide-v6.webp') type("image/webp"),
    url('/assets/images/room/veles-spirit-chamber-wide-v6.png') type("image/png")
  );
  background-position: left center;
  background-size: auto 108%;
  background-repeat: no-repeat;
  filter: brightness(.69) saturate(.9) contrast(1.1);
  transform: scale(1.025);
  animation: roomBreath 18s ease-in-out infinite alternate;
  will-change: transform;
}
.room-fire-glow,
.room-moon-glow,
.room-spirit-smoke,
.room-atmosphere {
  position: absolute;
  inset: 0;
}
.room-fire-glow {
  background: radial-gradient(circle at 15% 62%, rgba(235, 114, 39, .22), transparent 25%);
  mix-blend-mode: screen;
  animation: fireBreathe 3.8s ease-in-out infinite alternate;
}
.room-fire-glow::before {
  content: '';
  position: absolute;
  left: 4%;
  bottom: 20%;
  width: 24%;
  height: 42%;
  opacity: .52;
  background:
    radial-gradient(circle at 18% 92%, rgba(255, 205, 118, .95) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 79%, rgba(255, 143, 61, .88) 0 1px, transparent 2px),
    radial-gradient(circle at 61% 91%, rgba(255, 219, 151, .82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 69%, rgba(255, 128, 51, .8) 0 1px, transparent 2px);
  background-size: 47px 61px, 63px 79px, 89px 97px, 71px 83px;
  animation: emberRise 5.6s linear infinite;
}
.room-moon-glow {
  background: radial-gradient(circle at 84% 28%, rgba(117, 199, 236, .15), transparent 26%);
  mix-blend-mode: screen;
  animation: moonBreathe 11s ease-in-out infinite alternate;
}
.room-moon-glow::after {
  content: '';
  position: absolute;
  top: -12%;
  right: 4%;
  width: 38%;
  height: 120%;
  opacity: .13;
  clip-path: polygon(38% 0, 76% 0, 100% 100%, 0 100%);
  background: linear-gradient(165deg, rgba(190, 232, 255, .75), transparent 68%);
  transform-origin: 65% 0;
  animation: moonRay 17s ease-in-out infinite alternate;
}
.room-spirit-smoke {
  left: 49%;
  top: 34%;
  right: auto;
  bottom: auto;
  width: 34%;
  height: 48%;
  opacity: .22;
  filter: blur(15px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(154, 190, 202, .18), transparent 58%),
    radial-gradient(ellipse at 42% 48%, rgba(103, 145, 162, .12), transparent 51%);
  animation: spiritSmokeDrift 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.room-spirit-smoke::before,
.room-spirit-smoke::after {
  content: '';
  position: absolute;
  inset: 18% 7% 2%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 76%, rgba(184, 211, 218, .19), transparent 43%),
    radial-gradient(ellipse at 67% 60%, rgba(118, 165, 182, .14), transparent 46%);
}
.room-spirit-smoke::before {
  animation: spiritSmokeCurl 12s ease-in-out infinite alternate;
}
.room-spirit-smoke::after {
  opacity: .68;
  transform: scale(.8) translate3d(7%, -4%, 0);
  animation: spiritSmokeCurl 18s ease-in-out infinite alternate-reverse;
}
.room-atmosphere {
  opacity: .32;
  background-image:
    radial-gradient(circle at 16% 68%, rgba(255, 223, 166, .7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 31%, rgba(205, 238, 255, .55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 77%, rgba(255, 255, 255, .35) 0 1px, transparent 1.4px);
  background-size: 170px 190px, 230px 210px, 310px 270px;
  animation: dustDrift 22s linear infinite;
}
.room-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 5, 7, .12), transparent 17%, transparent 82%, rgba(2, 5, 7, .12)),
    radial-gradient(ellipse at 50% 45%, rgba(2, 7, 10, .18) 0 22%, transparent 58%, rgba(2, 5, 7, .28) 100%),
    linear-gradient(180deg, rgba(1, 4, 6, .06), rgba(1, 3, 5, .2));
}
@keyframes roomBreath {
  0% { transform: translate3d(var(--room-x), var(--room-y), 0) scale(1.01); }
  100% { transform: translate3d(var(--room-x), var(--room-y), 0) scale(1.022); }
}
@keyframes fireBreathe {
  from { opacity: .62; }
  to { opacity: 1; }
}
@keyframes dustDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(24px, -32px, 0); }
}
@keyframes emberRise {
  0% { transform: translate3d(0, 18px, 0) scale(.92); opacity: .12; }
  35% { opacity: .58; }
  100% { transform: translate3d(13px, -58px, 0) scale(1.08); opacity: 0; }
}
@keyframes moonBreathe {
  from { opacity: .72; }
  to { opacity: 1; }
}
@keyframes moonRay {
  from { transform: rotate(-1.2deg) translateX(-4%); opacity: .08; }
  to { transform: rotate(1.1deg) translateX(4%); opacity: .17; }
}
@keyframes spiritSmokeDrift {
  from { transform: translate3d(-2%, 2%, 0) scale(.96); opacity: .14; }
  to { transform: translate3d(3%, -4%, 0) scale(1.08); opacity: .28; }
}
@keyframes spiritSmokeCurl {
  from { transform: translate3d(-5%, 6%, 0) rotate(-2deg) scale(.92); }
  to { transform: translate3d(6%, -8%, 0) rotate(3deg) scale(1.08); }
}
.room-paused .room-backdrop,
.room-paused .room-fire-glow,
.room-paused .room-fire-glow::before,
.room-paused .room-moon-glow,
.room-paused .room-moon-glow::after,
.room-paused .room-spirit-smoke,
.room-paused .room-spirit-smoke::before,
.room-paused .room-spirit-smoke::after,
.room-paused .room-atmosphere {
  animation-play-state: paused;
}
.screen,
.nav,
.stars,
.app::before,
.app::after {
  z-index: 2;
}
.shell > header,
.shell > main {
  position: relative;
  z-index: 2;
}
.app.has-nav .nav {
  background: linear-gradient(180deg, #071015, #03090d) !important;
  backdrop-filter: none;
}
@media (min-width: 900px) {
  .app.has-nav {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .app.has-nav::before,
  .app.has-nav::after { display: none; }
  .app.has-nav .room-scene {
    position: absolute;
    inset: 0 0 0 218px;
    width: auto;
    height: 100%;
  }
  .app.has-nav .room-backdrop {
    inset: 0;
    background-image: url('/assets/images/room/veles-spirit-chamber-wide-v6.webp');
    background-image: image-set(
      url('/assets/images/room/veles-spirit-chamber-wide-v6.webp') type("image/webp"),
      url('/assets/images/room/veles-spirit-chamber-wide-v6.png') type("image/png")
    );
    background-position: center;
    background-size: contain;
    filter: brightness(.8) saturate(1.02) contrast(1.14);
    transform: none;
    animation: none;
    will-change: auto;
  }
  .app.has-nav .nav {
    border-right-color: rgba(155, 217, 255, .17);
    box-shadow: 16px 0 42px rgba(0, 0, 0, .28);
  }
}
.chat-area {
  background: radial-gradient(ellipse at center, rgba(3, 9, 13, .43), transparent 72%);
}
.input-bar {
  background: rgba(3, 8, 10, .58);
  backdrop-filter: blur(14px);
}
.onboarding,
.auth-card {
  background: linear-gradient(150deg, rgba(7, 15, 19, .9), rgba(4, 8, 10, .82)) !important;
  backdrop-filter: blur(16px);
}
@media (min-width: 900px) and (max-width: 1199px) {
  .room-backdrop {
    inset: -1%;
    background-position: -35px center;
    background-size: cover;
  }
  .room-spirit-smoke {
    left: 63%;
    width: 31%;
    opacity: .16;
    filter: blur(11px);
  }
}

@media (min-width: 1200px) {
  .room-backdrop { background-position: clamp(70px, 8vw, 130px) center; }
}

@media (max-width: 899px) {
  .room-backdrop {
    inset: -1%;
    background-image: url('/assets/images/room/veles-spirit-chamber-wide-v6.png');
    background-image: image-set(
      url('/assets/images/room/veles-spirit-chamber-mobile-v6.webp') type("image/webp"),
      url('/assets/images/room/veles-spirit-chamber-wide-v6.png') type("image/png")
    );
    background-position: 64% center;
    background-size: cover;
    filter: brightness(.53) saturate(.86) contrast(1.11);
    animation-name: roomBreathMobile;
  }
  .room-fire-glow {
    background: radial-gradient(circle at 12% 42%, rgba(237, 116, 39, .2), transparent 24%);
  }
  .room-fire-glow::before {
    left: -2%;
    bottom: 39%;
    width: 34%;
    height: 34%;
    opacity: .4;
  }
  .room-moon-glow {
    background: radial-gradient(circle at 86% 28%, rgba(117, 199, 236, .14), transparent 25%);
  }
  .room-moon-glow::after {
    right: -8%;
    width: 46%;
    opacity: .1;
  }
  .room-spirit-smoke {
    left: 30%;
    top: 29%;
    width: 63%;
    height: 49%;
    opacity: .17;
    filter: blur(13px);
  }
  .room-vignette {
    background:
      linear-gradient(90deg, rgba(2,5,7,.12), transparent 14%, transparent 86%, rgba(2,5,7,.12)),
      radial-gradient(ellipse at 50% 45%, rgba(2,7,10,.28) 0 27%, transparent 66%),
      linear-gradient(180deg, rgba(1,4,6,.05), rgba(1,3,5,.24));
  }
  .app.has-nav .nav {
    position: fixed;
    inset: auto 0 0;
    width: min(430px, 100%);
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    padding: 6px 8px calc(16px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid rgba(155, 217, 255, .13);
    transform: none;
    backdrop-filter: blur(14px);
  }
  .app.has-nav .nav-brand { display: none; }
  .app.has-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 4px;
    text-align: center;
  }
}
@keyframes roomBreathMobile {
  0% { transform: translate3d(var(--room-x), var(--room-y), 0) scale(1.015); }
  100% { transform: translate3d(var(--room-x), var(--room-y), 0) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .room-backdrop,
  .room-fire-glow,
  .room-fire-glow::before,
  .room-moon-glow,
  .room-moon-glow::after,
  .room-spirit-smoke,
  .room-spirit-smoke::before,
  .room-spirit-smoke::after,
  .room-atmosphere { animation: none; }
}

/* Keep the chamber alive without running a permanent compositor benchmark. */
.app.has-nav .stars { display: none; }
.app.has-nav .room-scene { contain: strict; }
.app.has-nav .room-backdrop,
.app.has-nav .room-fire-glow::before,
.app.has-nav .room-moon-glow,
.app.has-nav .room-moon-glow::after,
.app.has-nav .room-spirit-smoke,
.app.has-nav .room-spirit-smoke::before,
.app.has-nav .room-spirit-smoke::after,
.app.has-nav .room-atmosphere {
  animation: none;
}
.app.has-nav .room-fire-glow {
  animation: fireBreathe 6.5s ease-in-out infinite alternate;
  mix-blend-mode: normal;
}
.app.has-nav .room-moon-glow,
.app.has-nav .room-spirit-smoke { mix-blend-mode: normal; }
.app.has-nav .room-spirit-smoke {
  filter: blur(8px);
  will-change: auto;
}
.app.has-nav .input-bar { backdrop-filter: none; }