/* User pages only. Keep mobile viewport sizing; cap the desktop app at 412px. */
:root { --dia-vw: 1vw; }
@media (min-width: 600px) {
  :root { --dia-vw: 4.12px; background: #e8e6e2; }
  html { min-height: 100%; }
  body.dia-phone-shell {
    width: 412px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
    max-height: 915px;
    margin: 16px auto !important;
    position: relative;
    transform: translateZ(0);
    overflow: hidden;
    border-radius: 24px;
    clip-path: inset(0 round 24px);
    background: #fff;
    box-shadow: 0 12px 36px #17161135;
  }
  body.dia-phone-shell > #wrap {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    background: #fff;
  }
  body.dia-phone-shell > #wrap::-webkit-scrollbar { display: none; }
  body.dia-phone-shell .intro-phone {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: none;
  }
}

/* Legacy headers inherit the scroll container height on desktop shells. */
@media (min-width: 600px) {
  body.dia-phone-shell > #wrap > header { height: auto; }
  body.dia-phone-shell .diainner { height: auto; }
}

/* Keep the arrow artwork unchanged; extend its hit area to the right. */
header .new_h .back_btn {
  width:64px; min-width:64px; height:48px; min-height:48px;
  padding:0; display:flex; align-items:center; justify-content:flex-start;
  box-sizing:border-box; cursor:pointer; touch-action:manipulation;
}
header .new_h .back_btn img { flex:none; pointer-events:none; }
header .new_h .back_btn:focus-visible { outline:2px solid #1e3932; outline-offset:2px; border-radius:10px; }

@media(min-width:600px){body.dia-phone-shell:not(.dia-shell-ready)>#wrap{visibility:hidden;}}