.chat-layout{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:1rem;align-items:start}
.chat-page .app-centre>*{max-width:none}
.chat-layout aside,.chat-layout #conversation{min-width:0;padding:1.25rem}
.chat-sidebar h2{font-size:1.15rem;margin-top:1.5rem}
.chat-sidebar #status{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.chat-layout form,.chat-layout details{margin-top:1rem}
.chat-layout #room-list{margin-top:1rem}
.chat-layout summary{font-size:1.1rem}
.chat-layout #rooms{margin-top:1rem}
#rooms .chat-room{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .5rem;width:100%;text-align:left;margin-top:.5rem;padding:.75rem;border-color:var(--line);color:var(--cream);background:var(--dark)}
#rooms .chat-room[aria-pressed="true"]{border-color:var(--green);background:var(--shell-active,#c8e6a022)}
.chat-room strong{grid-column:1/-1}
.chat-room-status{justify-self:start;padding:.1rem .5rem;border:1px solid var(--line);border-radius:2rem;color:var(--muted);font-size:.75rem;font-weight:500}
.chat-room-open{color:var(--green);font-size:.8rem;align-self:center}
.chat-layout input,.chat-layout textarea,.chat-layout select{background:var(--field);box-shadow:inset 0 2px 4px #0004}
.chat-layout #conversation:not([hidden]){display:flex;flex-direction:column;min-height:65vh;grid-column:2;margin:0;width:100%}
#room-title{font-size:1.5rem;margin-bottom:.5rem}
#connection{font-size:.85rem;color:var(--muted)}
#messages{flex:1;min-height:14rem;max-height:55vh;overflow-y:auto;overscroll-behavior:contain;margin-block:1rem;padding:.75rem;background:var(--dark);border:1px solid var(--line);border-radius:.65rem}
#messages article{padding:.75rem;background:var(--panel);border-radius:.6rem}
#messages article+article{margin-top:.75rem}
#messages article>p:nth-child(2){font-size:.75rem;color:var(--muted);margin:.2rem 0 .5rem}
#messages article>p:last-child{margin-bottom:0}
#messages article button{font-size:.75rem;padding:.2rem .5rem;min-height:32px}
#send{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem;align-items:end;margin-top:0}
#send label{grid-column:1/-1;margin:0}
#send textarea{min-height:5rem}
#send button{margin:0}
#retry{justify-self:start;font-size:.8rem}
#send .primary{grid-column:2;grid-row:2}
#retry{grid-column:1;grid-row:2}
@media(max-width:700px){.chat-layout{grid-template-columns:minmax(0,1fr)}.chat-layout #conversation:not([hidden]){grid-column:1;min-height:60vh}.chat-layout aside,.chat-layout #conversation{padding:1rem}.chat-sidebar h2{margin-top:1rem}}
@media(max-width:767px){#messages{flex:none;height:min(50vh,420px);min-height:0;max-height:min(50vh,420px)}}