/* Give the conversation priority over the answer tray. */
.site-head{height:64px}
main{margin:0 auto;padding:0 20px}
.chat{height:calc(100dvh - 102px);min-height:min(550px,calc(100dvh - 102px))}
.chat-head{padding:13px 24px}
.conversation{min-height:0;padding-top:22px;scrollbar-gutter:stable}
.composer{padding:13px 24px 15px;max-height:32%;scrollbar-gutter:stable}
.composer-title{margin-bottom:8px}
.composer .tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.composer .tool{min-height:46px;padding:9px 12px;font-size:13px}
.composer .all-tools{padding-top:9px;min-height:32px}
.chat-foot{padding-top:8px;padding-bottom:8px}
.preview-note{margin-top:7px}
.composer:has(.range-fields){max-height:42%}
@media(max-width:600px){
 .site-head{height:52px}
 main{padding:0}
 .chat{height:calc(100dvh - 52px);min-height:0}
 .chat-head{padding:10px 14px}
 .conversation{padding:18px 12px 8px}
 .composer{padding:11px 14px 12px;max-height:34%}
 .composer .tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .composer .tool{min-height:42px;padding:8px 10px;font-size:12px}
 .chat-foot{padding:8px 14px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .composer:has(.range-fields){max-height:45%}
}
@media(max-height:600px) and (min-width:601px){
 .site-head{height:48px}
 .chat{height:calc(100dvh - 60px);min-height:0}
 .chat-head{padding:8px 20px}
 .chat-head .face{height:36px;width:36px}
 .composer{max-height:35%;padding-top:10px;padding-bottom:10px}
 .preview-note{display:none}
}