.mobile-display-button {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(103, 232, 249, 0.32);
    border-radius: 10px;
    color: #cffafe;
    background: rgba(8, 24, 28, 0.72);
    box-shadow: 0 0 16px rgba(103, 232, 249, 0.12);
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-display-button .material-symbols-outlined {
    font-size: 24px;
}

.mobile-display-button.is-resume-needed {
    border-color: rgba(103, 232, 249, 0.78);
    animation: mobile-display-pulse 1.4s ease-in-out infinite;
}

#mobile-display-navigation-frame {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100%;
    height: 100%;
    border: 0;
    background: #020706;
}

html[data-mobile-display-host="true"],
html[data-mobile-display-host="true"] body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background: #020706;
}

html[data-mobile-display-host="true"] body > :not(#mobile-display-navigation-frame):not(script) {
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-mobile-display-host="true"] #mobile-display-navigation-frame {
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-display-toast {
    position: fixed;
    top: max(74px, calc(env(safe-area-inset-top) + 62px));
    left: 50%;
    z-index: 99999;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 9px 14px;
    border: 1px solid rgba(103, 232, 249, 0.42);
    border-radius: 9px;
    color: #cffafe;
    background: rgba(7, 18, 22, 0.92);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    font: 700 13px/1.45 "Noto Sans SC", system-ui, sans-serif;
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.mobile-display-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mobile-display-toast.is-error {
    border-color: rgba(248, 113, 113, 0.55);
    color: #fecaca;
}

@keyframes mobile-display-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(103, 232, 249, 0.14); }
    50% { box-shadow: 0 0 25px rgba(103, 232, 249, 0.52); }
}

@media (max-width: 767px), (pointer: coarse), (hover: none), (max-aspect-ratio: 3/4), (max-height: 500px) and (orientation: landscape) {
    .mobile-display-button,
    #mobile-landscape-button {
        display: inline-flex !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-display-button.is-resume-needed {
        animation: none;
    }
}