/* The page is only a frame: the app draws everything itself on a canvas inside #out. */
html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #E9E9E6;
    -webkit-text-size-adjust: 100%;
}

/* Phone-first UI: fills a phone screen; on a tablet or a desktop it stays a phone-width column in the
   middle instead of stretching tiles and lists across the whole window. dvh is the height actually
   visible, without a mobile browser's toolbars (100vh put the bottom of the app under them). */
#out {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    background: #F7F7F5;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.08);
}

/* iOS Safari zooms the page into any focused input with text under 16px and doesn't zoom back out;
   Avalonia's hidden text input would trigger that on every tap into a text field. */
.avalonia-input-element {
    font-size: 16px !important;
}

/* Loading splash (index.html) — the AsterConf logo on the app's background color with a gentle
   "breathing" pulse; Avalonia adds .splash-close to it once the app has started. */
.avalonia-splash {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #F7F7F5;
    justify-content: center;
    align-items: center;
    display: flex;
    pointer-events: none;
}

.avalonia-splash .splash-logo {
    width: 180px;
    height: auto;
    animation: splash-breathe 1.6s ease-in-out infinite;
}

@keyframes splash-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
    .avalonia-splash .splash-logo {
        animation: none;
    }
}

.avalonia-splash.splash-close {
    transition: opacity 200ms, display 200ms;
    display: none;
    opacity: 0;
}