/* Shared viewport adaptations: keep desktop density, stack on phones. */
html{ -webkit-text-size-adjust:100%;scroll-padding-top:120px }
body{overflow-wrap:anywhere}
img,video,audio,canvas,svg{max-width:100%}
main,.main,.panel,.card,section,header nav{min-width:0}
button,input,select,textarea{max-width:100%}
pre{max-width:100%;overflow:auto}
@media(min-width:801px) and (max-width:1200px){
 header,.topbar{flex-wrap:wrap!important}
 header nav,.view-tabs{margin-left:0!important}
 .customer-main{padding:18px!important}
 .question-rail{width:210px}
}
@media(max-width:800px){
 header,.topbar{position:relative!important;flex-wrap:wrap!important;padding:12px 16px!important;gap:10px!important}
 header nav,.view-tabs,.nav{width:100%;max-width:100%;margin:0!important;display:flex;flex-wrap:nowrap!important;overflow-x:auto;gap:6px!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 header nav a,.view-tabs a,.nav a{flex:0 0 auto;white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:8px 12px!important}
 .anker-wordmark{width:88px;height:auto}.brand{font-size:19px}.brand small{display:none}
 main{width:100%;padding:16px!important;margin:0 auto!important}
 h1{font-size:24px!important;line-height:1.4}
 .grid,.merchant-grid,.results-grid,.flow,.arch-outputs{grid-template-columns:minmax(0,1fr)!important}
 .card,.panel{padding:16px!important;max-width:100%}
 .actions,.tone-row,.toolbar,.arch-heading,.results-heading{flex-wrap:wrap}
 .actions{gap:8px}.actions>*{min-width:0}
 input,select,textarea{font-size:16px!important;min-width:0!important}
 button{min-height:44px}.tabs{gap:6px}.tabs button{padding:8px 10px}
 .scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .scroll table{min-width:580px}
 .drawer{width:100%!important;max-width:100vw;padding:16px!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}
 .drawer-head{top:-16px!important}
 .facts{grid-template-columns:72px minmax(0,1fr)}
 .stats,.results-stats,.score-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .results-stat b,.stat b{font-size:27px}
 .arch-duel{grid-template-columns:minmax(0,1fr)!important}.arch-exchange{padding:10px}.arch-fork,.arch-join{display:none}
 .bar{grid-template-columns:100px minmax(25px,1fr) 76px;gap:8px}
 .chat-form{flex-direction:column}.chat-messages{max-height:55dvh}
 .customer-main{padding:10px!important;gap:10px;overflow-y:auto!important;flex:none;display:flex!important}
 body:has(.customer-main){height:auto;min-height:100dvh}
 .customer-main .chat{flex:none;width:100%;height:calc(100dvh - 190px);min-height:420px}
 .customer-main .log{min-height:0;flex:1;overflow-y:auto;padding:14px}
 .customer-main .composer{padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
 .customer-main .chat-head{padding:14px}
 .customer-main .msg{max-width:100%;font-size:14px;padding:12px}
 .customer-main .question-rail{width:100%;order:2}
 .customer-main .trace{flex:none;width:100%}
 .row .icon-btn{flex:0 0 42px}.row .send{flex:0 0 56px}.row input{width:0;min-width:0}
 .product-selection-card{padding:10px;gap:8px}.product-picture{width:66px}
 body:has(#model){margin:0;padding:18px 14px;box-sizing:border-box}
 body:has(#model) section{padding:16px;margin:16px 0}
 body:has(#model) label{display:block;margin-right:0}
 body:has(#model) select,body:has(#model) input{width:100%}
 body:has(#model) button{margin-top:8px}
 body:has(#model) code{word-break:break-all}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important}}