/* Desktop shell for pc.qingnxuan.top — do not load on the phone site. */
html.desktop,
html.desktop body{
  height:100%;
  overflow:hidden;
  background:var(--bg, #f3f1ec);
}
html.desktop body{
  margin:0;
}

html.desktop .app{
  max-width:none !important;
  width:100%;
  height:100vh;
  height:100dvh;
  margin:0 !important;
  display:flex;
  flex-direction:row;
  overflow:hidden;
  position:relative;
}

/* Hide phone bottom tabs */
html.desktop nav.river-nav{
  display:none !important;
}

/* Left app rail */
html.desktop .desktop-rail{
  flex:none;
  width:84px;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 8px 18px;
  box-sizing:border-box;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  border-right:1px solid rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  z-index:200;
}
html.desktop .desktop-rail-brand{
  width:44px;
  height:44px;
  border-radius:14px;
  margin:2px 0 10px;
  background-image:var(--avatar-default, none);
  background-size:cover;
  background-position:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
html.desktop .desktop-rail-btn{
  appearance:none;
  border:0;
  background:transparent;
  width:68px;
  padding:8px 4px 6px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
  color:var(--text-soft, #6b7280);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
html.desktop .desktop-rail-btn:hover{
  background:rgba(255,255,255,.55);
  color:var(--text, #1f2937);
}
html.desktop .desktop-rail-btn.active{
  background:rgba(255,255,255,.78);
  color:var(--accent, #5a7a6a);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
html.desktop .desktop-rail-btn .desktop-rail-ico{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
}
html.desktop .desktop-rail-btn .desktop-rail-ico svg{
  width:22px;
  height:22px;
}
html.desktop .desktop-rail-btn .desktop-rail-label{
  font-size:10px;
  letter-spacing:.04em;
  line-height:1.1;
}
html.desktop .desktop-rail-spacer{
  flex:1;
}

/* Main stage: one visible page fills the rest */
html.desktop .desktop-stage{
  flex:1;
  min-width:0;
  height:100%;
  position:relative;
  overflow:hidden;
}
html.desktop .desktop-stage > .page{
  position:absolute;
  inset:0;
  display:none;
  padding:0 !important;
  overflow:auto;
  height:100%;
  box-sizing:border-box;
}
html.desktop .desktop-stage > .page.on{
  display:block;
}

/* Chat fills the stage */
html.desktop #page-murmur.page{
  padding:0 !important;
  overflow:hidden;
}
html.desktop #page-murmur .chat-app{
  position:relative !important;
  height:100% !important;
  max-width:none;
}
html.desktop #page-murmur .wall{
  position:absolute;
  inset:0;
}
html.desktop #page-murmur .scroll{
  max-width:920px;
  margin:0 auto;
  width:100%;
}
html.desktop #page-murmur .composer{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
html.desktop #page-murmur .bubble{
  max-width:min(560px, 46vw) !important;
}
html.desktop #page-murmur .think-block{
  width:min(560px, 46vw) !important;
  max-width:min(560px, 46vw) !important;
}
html.desktop #page-murmur .api-back{
  /* left rail replaces phone back */
  display:none !important;
}
html.desktop #page-murmur .scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}
html.desktop #page-murmur .scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);
  border-radius:999px;
}

/* Den / Cove / Amber / Dials breathe on wide screens */
html.desktop #page-den,
html.desktop #page-cove,
html.desktop #page-amber,
html.desktop #page-dials{
  padding:28px 36px 48px !important;
  max-width:1100px;
  margin:0 auto;
}
html.desktop #page-den.page.on,
html.desktop #page-cove.page.on,
html.desktop #page-amber.page.on,
html.desktop #page-dials.page.on{
  /* keep absolute fill from .desktop-stage > .page, but content centered via inner max-width */
}

html.desktop .gate{
  z-index:500;
}

@media (max-width: 860px){
  html.desktop .desktop-rail{ width:72px; }
  html.desktop .desktop-rail-btn{ width:60px; }
  html.desktop #page-murmur .bubble{
    max-width:min(480px, 58vw) !important;
  }
}