@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .only-mobile{display:grid}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);z-index:30;transform:translateX(-100%);transition:transform .22s ease;padding-top:env(safe-area-inset-top)}
  .sidebar.open{transform:none}
  .chat-head{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}
  .messages{padding:14px 12px}
  .msg{max-width:82%}
  .composer{padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .composer textarea{font-size:16px} /* prevents iOS zoom-on-focus */
  input{font-size:16px}
}
@media (max-width:380px){.empty .serif{font-size:22px}.msg{max-width:88%}}
@media (min-width:1400px){.app{grid-template-columns:340px minmax(0,1fr)}.messages{padding:24px 8%}}