:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 0 1rem 4rem; line-height: 1.45; }
.topbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #8884; padding: 0.5rem 0; }
.topbar h1 { font-size: 1.25rem; margin: 0; }
.login { max-width: 32rem; margin: 2rem auto; }
.login input { width: 100%; }
#presence { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
#presence li { border: 1px solid #8884; border-radius: 0.5rem; padding: 0.25rem 0.5rem; }
.lanes { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: 1rem; }
.lane { border: 1px solid #8884; border-radius: 0.5rem; min-width: 22rem; max-width: 26rem; flex: 0 0 auto; display: flex; flex-direction: column; max-height: 80vh; }
.lane header { padding: 0.5rem; border-bottom: 1px solid #8884; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.lane h3 { margin: 0; font-size: 1rem; }
.messages { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; flex: 1 1 auto; }
.messages li { margin: 0 0 0.5rem; }
.messages li.reply { margin-left: 1.25rem; border-left: 2px solid #8886; padding-left: 0.5rem; }
.msg-meta { font-size: 0.8rem; opacity: 0.75; }
.msg-body { white-space: pre-wrap; overflow-wrap: break-word; }
.composer { display: flex; gap: 0.5rem; padding: 0.5rem; border-top: 1px solid #8884; }
.composer input { flex: 1 1 auto; }
.new-indicator { background: #0366d6; color: #fff; border: 0; border-radius: 1rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
@media (max-width: 700px) {
  .lanes { flex-direction: column; overflow-x: visible; }
  .lane { min-width: 0; max-width: none; width: 100%; max-height: none; }
}