html:has(body.chat-page){height:100%;overflow:hidden}
body.chat-page{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;min-height:0;overflow:hidden}
.chat-page>header{width:100%;min-width:0}
.chat-page>main{display:flex;width:100%;height:auto!important;min-width:0;min-height:0!important;overflow:hidden;flex-direction:column}
.chat-page>footer{display:none!important}
.chat-page .chat-shell{flex:1 1 0;width:100%;height:100%!important;min-width:0;min-height:0;overflow:hidden;grid-template-columns:clamp(260px,20vw,320px) minmax(0,1fr)}
.chat-page .history-sidebar{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.chat-page #historyList{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}
.chat-page .chat-main{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto!important}
.chat-page .messages{width:100%;min-height:0;overflow-x:hidden;overflow-y:auto}
.chat-page .composer{align-self:end;width:min(900px,calc(100% - 32px));max-width:calc(100% - 32px);margin:0 auto max(10px,env(safe-area-inset-bottom))}
@media(max-width:1200px){.chat-page>header{padding-inline:16px}.chat-page>header nav{gap:12px;font-size:13px}.chat-page .chat-shell{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:760px){body.chat-page{grid-template-rows:64px minmax(0,1fr)}.chat-page .chat-shell{grid-template-columns:minmax(0,1fr)}.chat-page .composer{width:calc(100% - 16px);max-width:calc(100% - 16px)}}
@media(max-height:700px){.chat-page .chat-top{max-height:min(25dvh,150px);overflow-y:auto}.chat-page .empty{margin-top:8px}}