/* Una sola superficie visible; el desplazamiento pertenece al historial. */
:root { --chat-viewport-height: 100vh; --chat-viewport-top: 0px; }
@supports (height: 100dvh) { :root { --chat-viewport-height: 100dvh; } }
html { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#home-screen, body > .app, body > .login-screen, .modal-overlay {
    top: var(--chat-viewport-top);
    bottom: auto;
    height: var(--chat-viewport-height);
    min-height: 0;
}
body > .app { position: fixed; left: 0; right: 0; }
#home-screen.in-chat .home-main {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
}
#home-screen.in-chat #home-sec-chat {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    animation: none;
}
#home-screen.in-chat #home-sec-chat .home-chat-wrap {
    flex: 1 1 0;
    min-height: 0;
    height: 100% !important;
    overflow: hidden;
}
.app.in-home { position: absolute; inset: 0; height: 100% !important; min-height: 0; }
.login-screen { overflow-y: auto; overscroll-behavior: contain; }
.login-screen.in-home { top: 0; height: 100%; min-height: 0; }
.login-card { margin-block: auto; flex-shrink: 0; }
.chat-col, .chat-messages, .sl-nav, .sr-list { min-height: 0; }
.chat-col { padding-inline: var(--safe-left) var(--safe-right); }
.chat-header {
    position: relative;
    top: auto;
    height: calc(54px + var(--safe-top));
    padding-top: var(--safe-top);
}
.chat-messages { flex: 1 1 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chat-footer { position: relative; flex: 0 0 auto; }
.cf-input-wrap { min-width: 0; }
.modal-overlay { padding-block: calc(var(--sp-4) + var(--safe-top)) calc(var(--sp-4) + var(--safe-bottom)); }
.modal-overlay > :is(.modal-card, .section-modal, .settings-card, .whois-card) {
    min-height: 0;
    max-height: calc(var(--chat-viewport-height) - 2 * var(--sp-4) - var(--safe-top) - var(--safe-bottom));
}
.modal-body, .settings-body, #section-content { min-height: 0; }
html.kb-open { --safe-bottom: 0px; }
.radio-panel.open { max-height: min(160px, calc(var(--chat-viewport-height) * .3)); }
.sticker-tray, .emoji-pop {
    max-height: max(48px, calc(var(--chat-viewport-height) - var(--footer-height, 110px) - 70px - var(--safe-top)));
    min-height: 0;
}
@media (max-width: 900px) {
    .sidebar-right { position: absolute; top: 0; bottom: 0; height: 100%; max-width: 90%; }
}
@media (max-width: 640px) {
    .sidebar-left { position: absolute; top: 0; bottom: 0; height: 100%; }
}