/* Phone classification is shared with JS and does not change on rotation or keyboard resize. */
html.ramen-phone body { isolation: isolate !important; overflow: hidden !important; width: 100%; height: 100dvh; }
html.ramen-phone body #app-container { position: relative !important; display: block; width: 100% !important; height: 100dvh !important; overflow: hidden; }
html.ramen-phone body #app-container.hidden { display: none !important; }
html.ramen-phone body #center-panel {
    position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important;
    width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding-bottom: 0 !important; transform: none !important; border: 0 !important;
}
html.ramen-phone body #center-panel-content { flex: 1; min-height: 0; overflow-y: auto; }
html.ramen-phone body #left-panel, html.ramen-phone body #left-panel.left-panel--collapsed {
    display: flex !important; position: fixed !important; inset: 0 auto 0 0 !important;
    width: min(300px, 85vw) !important; min-width: 0 !important; max-width: 85vw !important; height: 100dvh !important;
    transform: translateX(-105%) !important; z-index: 2147483647 !important; overflow-y: auto !important;
    background: var(--bg-secondary, #171717) !important; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
}
html.ramen-phone body #left-panel.drawer-open { transform: translateX(0) !important; }
html.ramen-phone body #right-view {
    position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
}
html.ramen-phone body:not(.chat-open) #right-view { display: none !important; pointer-events: none !important; }
html.ramen-phone body.chat-open #right-view { display: flex !important; flex-direction: column !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
html.ramen-phone body.chat-open #chat-view {
    display: flex !important; position: relative !important; flex: 1; flex-direction: column !important;
    inset: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important;
    transform: none !important; opacity: 1 !important; visibility: visible !important; border-radius: 0 !important;
}
html.ramen-phone body.chat-open #center-panel { display: none !important; }
html.ramen-phone body #message-container { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; }
html.ramen-phone body #footer-container, html.ramen-phone body .chat-view__header-container { flex-shrink: 0; }
html.ramen-phone body #chat-header { padding-top: env(safe-area-inset-top) !important; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
html.ramen-phone body #footer-container { padding-bottom: env(safe-area-inset-bottom) !important; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
html.ramen-phone body .mobile-back-btn, html.ramen-phone body #mobile-menu-btn { display: flex !important; }
html.ramen-phone body #panel-resizer, html.ramen-phone body .panel-resizer,
html.ramen-phone body #chat-placeholder, html.ramen-phone body .panel-background-video,
html.ramen-phone body .neko-bg-jail, html.ramen-phone body #left-panel::before,
html.ramen-phone body #center-panel::before, html.ramen-phone body #right-view::before { display: none !important; }
html.ramen-phone body #neko-fixed-bg {
    display: block !important; position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    z-index: -1 !important; pointer-events: none !important; overflow: hidden; background-image: none !important;
    background-color: var(--bg-primary, #171717); transition: none !important;
}
html.ramen-phone body #neko-fixed-bg > img, html.ramen-phone body #neko-fixed-bg > video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none !important;
}
html.ramen-phone body #neko-fixed-bg > img[hidden] { display: none !important; }
html.ramen-phone body #neko-fixed-bg > video { opacity: 0 !important; visibility: hidden !important; }
html.ramen-phone body #neko-fixed-bg.ramen-wallpaper-playing > video { opacity: 1 !important; visibility: visible !important; }
#neko-fixed-bg > video::-webkit-media-controls, #neko-fixed-bg > video::-webkit-media-controls-start-playback-button { display: none !important; }
html.ramen-phone.ramen-has-wallpaper body #app-container,
html.ramen-phone.ramen-has-wallpaper body #center-panel,
html.ramen-phone.ramen-has-wallpaper body #center-panel-content,
html.ramen-phone.ramen-has-wallpaper body #right-view,
html.ramen-phone.ramen-has-wallpaper body #chat-view,
html.ramen-phone.ramen-has-wallpaper body #message-container { background: transparent !important; background-image: none !important; }
@media (orientation: landscape) {
    html.ramen-phone body .center-panel__header { min-height: 44px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    html.ramen-phone body #left-panel .neko-mobile-wrapper { min-height: 0; }
}