/* Outer page: dark backdrop so the centered "phone frame" stands out on desktop. */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #060a0e;
}

body {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* The Compose app mounts inside #compose-root. On desktop browsers it is
 * constrained to a phone-app width and centered on the page. On viewports
 * narrower than the wrapper width it goes full-bleed so phones and small
 * tablets get the native-app experience. */
#compose-root {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: #0f1419;
    overflow: hidden;
}

/* Subtle vertical separators + shadow only when the wrapper isn't filling the
 * viewport (i.e. on desktop). The shadow makes the constrained app feel like
 * a device frame rather than a stranded panel. */
@media (min-width: 481px) {
    #compose-root {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        border-left: 1px solid #1a1f26;
        border-right: 1px solid #1a1f26;
    }
}

#loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1419;
}