/* FAIRYSBOX Web: additive layout only; original app styles and scripts stay intact. */
.fairysbox-web{min-height:100dvh}
@media(min-width:700px){
 .fairysbox-web{--web-width:860px;background:#eee7df}
 #app{max-width:var(--web-width);min-height:100dvh;margin:0 auto;background:var(--paper);box-shadow:0 0 64px #42273508}
 .topbar{padding-left:32px;padding-right:32px;border-bottom:1px solid #42273508}
 .topbar.homebar{padding-left:32px;padding-right:32px}
 .screen,.screen.dense,.screen.emotional{padding:28px 32px 112px}
 .screen>section+section{margin-top:32px}
 .bottomnav{width:min(100%,var(--web-width));left:50%;right:auto;transform:translateX(-50%);gap:0;justify-content:space-around}
 .navitem{width:25%;font-size:13px}
 .home-feature-grid,.toolsgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .boxgrid,.board{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .scenegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .carousel{margin:0 -32px;padding:0 32px 8px;gap:16px}
 .carousel .boxcard{flex-basis:224px}
 .home-feature{padding:20px;min-height:136px}
 .todaycard{padding:28px}
 .todaycard h3{max-width:100%}
 .sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:calc(100% - 64px);max-width:560px;max-height:85dvh;border-radius:24px;padding:20px 28px 28px}
 .composer{max-width:var(--web-width);left:50%;right:auto;width:100%;transform:translateX(-50%);padding:12px 32px}
 .fab{right:max(32px,calc((100vw - var(--web-width))/2 + 32px))}
 #toast{left:50%;right:auto;width:calc(100% - 64px);max-width:560px;transform:translate(-50%,8px)}
 #toast.visible{transform:translate(-50%,0)}
 .welcome-v4{min-height:100dvh;width:100%;max-width:520px;padding-top:48px;padding-bottom:40px;gap:32px}
 .welcome-actions{margin-top:24px}
 .onboarding{margin-inline:auto;max-width:600px}
 .screen:has(.immersive),.writing-screen,.future-self-screen,.chat-screen{max-width:700px;margin-inline:auto}
 .writing-screen{padding-bottom:40px}
 .chat-screen{padding-bottom:180px}
 .profile-v4,.profile-stats,.settings-group,.brand-signoff{max-width:600px;margin-left:auto;margin-right:auto}
 .boxhero .hero-cover,.box-mood.has-photo{height:220px}
 .memory-hero{height:300px}
 .visionlarge{max-height:450px}
}
@media(min-width:1100px){
 .fairysbox-web{--web-width:940px}
 .screen,.screen.dense,.screen.emotional{padding-left:40px;padding-right:40px}
 .topbar,.topbar.homebar{padding-left:40px;padding-right:40px}
 .carousel{margin:0 -40px;padding-left:40px;padding-right:40px}
 .carousel .boxcard{flex-basis:244px}
}

/* Shared fixed chrome: opaque surfaces and bottom safe-area clearance. */
.fairysbox-web{--app-nav-height:calc(68px + env(safe-area-inset-bottom,0px))}
.fairysbox-web .topbar{background:var(--paper)}
.fairysbox-web .bottomnav{height:var(--app-nav-height);background:var(--surface);backdrop-filter:none}
/* Mobile retains style.css spacing: 16px below the in-flow sticky header,
   96px + bottom inset for the 68px navigation plus 28px content clearance.
   No additional screen scroll-margin or document scroll-padding is needed. */
@media(min-width:700px){
 .fairysbox-web .screen:not(.chat-screen){padding-bottom:calc(var(--app-nav-height) + 32px)}
 .fairysbox-web .screen{scroll-margin-bottom:var(--app-nav-height)}
 html:has(body.fairysbox-web){scroll-padding-top:calc(54px + env(safe-area-inset-top,0px));scroll-padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}