/* System insets and Telegram's content inset occupy separate bands. */
:root {
    --nexus-viewport-height: 100dvh;
    --nexus-viewport-top: 0px;
    --nexus-safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
    --nexus-safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
    --nexus-safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
    --nexus-safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
    --nexus-modal-height: max(1px, calc(var(--nexus-viewport-height) - var(--nexus-safe-top) - var(--nexus-safe-bottom) - 20px));
    --nexus-dock-gap: 20px;
}
#main-interface-container {
    top: var(--nexus-viewport-top);
    height: var(--nexus-viewport-height);
    padding: var(--nexus-safe-top) var(--nexus-safe-right) var(--nexus-safe-bottom) var(--nexus-safe-left);
}
#main-scroll-area { min-height: 0; }
#main-interface-container .dock {
    bottom: auto !important;
    top: calc(var(--nexus-viewport-top) + var(--nexus-viewport-height) - var(--nexus-safe-bottom) - var(--nexus-dock-gap));
    transform: translate3d(-50%, -100%, 0);
    left: calc(50% + (var(--nexus-safe-left) - var(--nexus-safe-right)) / 2);
    width: min(470px, calc(100vw - var(--nexus-safe-left) - var(--nexus-safe-right) - 30px));
}
#nexus-modal {
    top: var(--nexus-viewport-top);
    bottom: auto;
    height: var(--nexus-viewport-height);
    padding: calc(var(--nexus-safe-top) + 10px) calc(var(--nexus-safe-right) + 10px)
             calc(var(--nexus-safe-bottom) + 10px) calc(var(--nexus-safe-left) + 10px);
}
#nexus-modal > .modal-content { max-height: var(--nexus-modal-height); }
#nexus-modal .modal-content:has(.forge-modal-wrapper),
#nexus-modal .modal-content:has(.polish-synthesis) {
    max-width: min(960px, calc(100vw - var(--nexus-safe-left) - var(--nexus-safe-right) - 20px));
    max-height: var(--nexus-modal-height);
}
#nexus-modal .forge-shell:not(.phase-result) { height: min(740px, calc(var(--nexus-modal-height) - 24px)); }
#nexus-modal .polish-synthesis .reactor-v1-layout { height: min(760px, calc(var(--nexus-modal-height) - 48px)); }
#toast-container { top: calc(var(--nexus-viewport-top) + var(--nexus-safe-top) + 20px); }
#onboarding-overlay {
    top: var(--nexus-viewport-top);
    bottom: auto;
    height: var(--nexus-viewport-height);
    padding-inline: var(--nexus-safe-left) var(--nexus-safe-right);
}
#onboarding-overlay .onboarding-ui { padding-bottom: calc(20px + var(--nexus-safe-bottom)); }
#nexus-bootloader {
    top: var(--nexus-viewport-top);
    bottom: auto;
    height: var(--nexus-viewport-height);
    min-height: 0;
    padding: max(18px, var(--nexus-safe-top)) max(18px, var(--nexus-safe-right))
             max(18px, var(--nexus-safe-bottom)) max(18px, var(--nexus-safe-left));
}
body #gateway-overlay {
    top: calc(var(--nexus-viewport-top) + var(--nexus-safe-top));
    min-height: 0;
    padding-inline: var(--nexus-safe-left) var(--nexus-safe-right);
}
body.has-virtual-keyboard #main-interface-container .dock { visibility: hidden; pointer-events: none; }
body.has-virtual-keyboard #main-scroll-area { padding-bottom: 20px; }
/* Keep balances, rank and navigation controls; the live tape yields space to play. */
body.compact-viewport #main-hud .command-hud { --hud-control-size: 44px; --hud-gap: 3px; }
body.compact-viewport #main-hud .command-shell { grid-template-columns: minmax(0, 1fr) 62px; }
body.compact-viewport #main-hud .command-topbar { grid-column: 1 / -1; grid-template-rows: 44px; min-height: 44px; }
body.compact-viewport #main-hud .command-resource-bay { min-width: 0; grid-column: 1; }
body.compact-viewport #main-hud .command-resource { min-height: 48px; padding: 4px; }
body.compact-viewport #main-hud .command-rank-strip {
    grid-column: 2; grid-row: 2; display: flex; justify-content: center;
    min-height: 48px; padding: 4px;
}
body.compact-viewport #main-hud .command-rank-summary { gap: 3px; }
body.compact-viewport #main-hud .nh-rank-level { font-size: 20px; }
body.compact-viewport #main-hud .command-rank-emblem { width: 16px; height: 16px; }
body.compact-viewport #main-hud .command-rank-label,
body.compact-viewport #main-hud .command-rank-xp,
body.compact-viewport #main-hud .nh-xp-track,
body.compact-viewport #main-hud .command-live-tape { display: none; }
@media (max-width: 480px) { :root { --nexus-dock-gap: 12px; } }
@media (max-width: 680px), (max-height: 520px) {
    #nexus-modal .polish-synthesis .reactor-v1-layout { height: calc(var(--nexus-modal-height) - 40px); }
}