/* The Deyna page (legacy Home/Deyna.cshtml's styles): the chat's frame fills the window below the header.
   deyna-embed.js sets its height; these are the starting sizes before it runs. Unlike legacy, the page locks only on
   screens that are wide and tall, and the frame's floor is one small 240px, so the chat's message box stays reachable
   on iPhones turned sideways and on the iPhone SE (docs/deyna-page-plan.md, D3). */

.content-holder {
    min-height: auto;
}

/* The header has no space below it; the chat adds a gap (28px, 18px on smaller screens), as most pages' content does.
   deyna-embed.js measures from the frame's top, so the frame still fills the window exactly. The 240px floor matches deyna-embed.js; it lets the frame shrink to fit short screens. */
.deyna-chat-shell {
    width: 100%;
    min-height: 240px;
    margin-top: 28px;
    background: #fff;
}

@media (max-width: 991.98px) {
    .deyna-chat-shell {
        margin-top: 18px;
    }
}

.deyna-chat-frame {
    display: block;
    width: 100%;
    height: 640px;
    min-height: 240px;
    border: 0;
    background: #fff;
}

/* Desktop (at least 768px wide and 500px tall): the chat scrolls inside the frame; the page itself must never scroll or
   a second scrollbar appears. Legacy locked every screen 768px wide, which on an iPhone turned sideways pushed the
   message box below the screen with no way to reach it. */
@media (min-width: 768px) and (min-height: 500px) {
    html,
    body {
        overflow: hidden;
    }
}

/* Compact (phones, and any screen under 500px tall): the page may scroll (for the on-screen keyboard), and the chat gets
   all the room: no gap under the header. Placed after the 992px rule so its margin wins. */
@media (max-width: 767.98px), (max-height: 499.98px) {
    .deyna-chat-shell {
        margin-top: 0;
    }
}