@media(max-width:760px){
 /* Keep editable text large enough for iOS focus without disabling pinch zoom. */
 input,select,textarea,.composer textarea,#draft{font-size:16px!important}
 body:has(.inbox){overflow:hidden}
 #root:has(.inbox){position:fixed;top:var(--mobile-viewport-top,0px);left:0;right:0;width:100%;height:var(--mobile-viewport-height,100dvh);min-height:0;overflow:hidden}
 .inbox.showchat{overflow:hidden}
 .inbox.showchat .messages{flex:1 1 0;overflow-y:auto}
 #root:has(.inbox)>main{min-height:0;min-width:0}
 #content:has(.inbox){min-height:0;min-width:0}
 .inbox.showchat{margin:0;border-radius:0;border-left:0;border-right:0;min-height:0}
 .inbox.showchat .thread{height:100%;min-height:0;min-width:0}
 .threadhead{padding:8px 12px;min-width:0;flex-shrink:0}
 .threadhead>div:last-of-type{min-width:0;flex:1}
 .threadhead h2,.threadhead p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .threadhead .customer-open{flex:0 0 auto;min-height:40px;margin-left:0}
 .threadhead .back,.threadhead .resolve{min-height:40px;flex-shrink:0}
 .assignment{padding:5px 12px;flex-shrink:0}
 .messages{min-height:0;padding:10px 12px;overscroll-behavior:contain}
 .message p{font-size:14px;line-height:1.45}
 .composer{flex-shrink:0;min-width:0;padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:8px}
 .composer>.tabs{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;max-width:100%;min-width:0;scrollbar-width:none}
 .composer>.tabs button{flex:0 0 auto;min-height:40px;padding:8px;font-size:12px;white-space:nowrap}
 .composer>.tabs .attach-button{margin-left:auto;font-size:12px}
 .composer textarea{height:56px;min-height:56px;max-height:112px;line-height:1.4;padding:10px 12px;resize:none;box-sizing:border-box}
 .composer>.actions{flex-wrap:nowrap;gap:8px;min-width:0}
 .composer>.actions small{flex:1 1 0;min-width:0;font-size:11px;line-height:1.35}
 .composer>.actions .primary{min-height:44px;padding:10px 16px;font-size:14px;white-space:nowrap}
}