*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,sans-serif}.layout{grid-template:"bar bar bar""avatar chat feed"minmax(0,1fr)/minmax(200px,1fr) minmax(0,2fr) minmax(220px,1fr);gap:8px;height:100%;padding:8px;display:grid}.layout__bar{grid-area:bar;align-items:center;gap:12px;display:flex}.layout__bar .badge{margin-right:auto}.zone{border:1px solid;flex-direction:column;min-height:0;padding:8px;display:flex}.zone--avatar{grid-area:avatar}.zone--chat{grid-area:chat}.zone--feed{grid-area:feed}.zone h2{margin:0 0 8px;font-size:1rem}.messages,.feed{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}.message{margin-bottom:8px}.message__text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.message__who{font-weight:600}.message small{display:block}.composer{gap:8px;margin-top:8px;display:flex}.composer textarea{resize:none;font:inherit;flex:1}.gate{max-width:360px;margin:15vh auto 0;padding:16px}.gate form{gap:8px;display:grid}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=800px){.layout{grid-template:"bar""avatar""chat"minmax(0,2fr)"feed"minmax(0,1fr)/minmax(0,1fr)}}