/* Messages page layout.
   Loaded render-blocking from App.razor <head> so the chat shell is styled at first
   paint (avoids the prerender stack-then-snap that the in-page <style> caused).
   One responsive DOM: two-pane on desktop, single-pane slide on mobile. The mobile
   panes are anchored to .chat-shell { height:100% } (the same content box the desktop
   layout uses), which keeps the message input on-screen and lets .chat-messages scroll. */

/* ---------- DESKTOP (default): two-pane flex ---------- */
.chat-shell{
    display:flex;
    height:100%;                 /* resolves to MudMainContent content box (100vh minus appbar) */
    overflow:hidden;
    position:relative;           /* anchor the absolute mobile panes */
    background:var(--mud-palette-surface);
}
.chat-sidebar{
    flex:0 0 400px;
    width:400px;
    border-right:1px solid var(--mud-palette-divider-light);
    overflow-y:auto;
    min-height:0;
}
.chat-main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
}

/* ---------- MOBILE (max-width 768px): single-pane slide ---------- */
@media (max-width:768px){
    .chat-sidebar,
    .chat-main{
        position:absolute;
        inset:0;                 /* fills .chat-shell, which is height:100% bounded */
        width:100%;
        max-width:100%;
        border:none;
        min-height:0;
        transition:transform .3s ease-in-out;
        will-change:transform;
    }
    .chat-sidebar{ transform:translateX(0); }      /* list in view */
    .chat-main   { transform:translateX(100%); }   /* chat parked off-canvas right */

    .chat-shell.chat-open .chat-sidebar{ transform:translateX(-100%); }
    .chat-shell.chat-open .chat-main   { transform:translateX(0); }
}
