@media (max-width:1100px) and (min-width:801px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.sidebar{padding-left:9px;padding-right:9px}.messages{padding-left:14px;padding-right:14px}.composer-wrap{padding-left:14px;padding-right:14px}}
.mobile-menu-btn,.mobile-backdrop{display:none}
@media (max-width:800px){.app-shell{display:block}.chat-main{height:100dvh}.sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:min(86vw,320px);z-index:30;transform:translateX(-105%);transition:transform .2s ease;box-shadow:18px 0 55px rgba(0,0,0,.35);padding-top:max(14px,env(safe-area-inset-top))}.app-shell.mobile-nav-open .sidebar{transform:translateX(0)}.mobile-backdrop{display:block;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.48);opacity:0;pointer-events:none;transition:opacity .2s ease}.app-shell.mobile-nav-open .mobile-backdrop{opacity:1;pointer-events:auto}.mobile-menu-btn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:20px;cursor:pointer;margin-left:-6px}.mobile-menu-btn:hover{background:rgba(255,255,255,.06)}.topbar{height:54px;flex-basis:54px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:8px}.topbar-title{flex:1}.messages{padding:14px max(10px,env(safe-area-inset-left)) 178px max(10px,env(safe-area-inset-right));overscroll-behavior:contain}.message{margin-bottom:22px}.message .avatar{width:28px;height:28px;flex-basis:28px}.welcome{margin-top:12vh}.composer-wrap{padding:30px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right))}.composer{border-radius:20px}.composer-tools{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}.composer-tools::-webkit-scrollbar{display:none}.tool-pill,.mode-select{flex:0 0 auto}.citation-cards{grid-template-columns:1fr}.user-label{max-width:30vw}}
@media (max-width:420px){.welcome h1{font-size:24px}.welcome p{font-size:13px}.bubble{font-size:14px}.composer textarea{min-height:38px}.icon-action,.send{width:36px;height:36px}.message{gap:8px}}
@media (orientation:landscape) and (max-height:520px) and (max-width:900px){.welcome{margin-top:4vh}.messages{padding-bottom:145px}.composer-wrap{padding-top:20px}.fineprint{display:none}}