:root{color-scheme:light;font-family:IBM Plex Sans,Segoe UI,sans-serif;background:linear-gradient(120deg,#f4f6fb,#eef7f2 55%,#f6f2ea);color:#1a1f2e}*{box-sizing:border-box}body{margin:0}.shell{min-height:100vh;padding:1.5rem;display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(12,minmax(0,1fr))}.card{background:#ffffff;border:1px solid #d7dfeb;border-radius:14px;padding:1rem;box-shadow:0 10px 30px rgba(19,34,67,.08)}.chat-card,.peers-card,.room-card{grid-column:span 4}.chat-card{display:flex;flex-direction:column;min-height:50vh}.row{display:grid;grid-gap:.4rem;gap:.4rem;margin-bottom:.8rem}label{font-size:.85rem;color:#4d5a75}input{width:100%;border:1px solid #bfcbde;border-radius:10px;padding:.6rem .75rem;background:#fdfefe}.actions{display:flex;gap:.5rem;margin-top:.9rem}button{border:none;border-radius:10px;padding:.65rem .9rem;font-weight:600;background:#0c6f5f;color:white;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.status{font-size:.9rem;color:#114560}.small{margin:.4rem 0;font-size:.75rem;color:#617086;word-break:break-word}.muted{color:#6d7583}.peer-list{display:grid;grid-gap:.6rem;gap:.6rem}.peer-item{display:grid;grid-gap:.25rem;gap:.25rem;border:1px solid #d3dbe7;border-radius:10px;padding:.7rem}.source-pill,.status-pill{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;padding:.15rem .45rem;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:uppercase}.status-pill.connected{background:#d5f2e7;color:#11654a}.status-pill.connecting,.status-pill.discovered{background:#ecf0f7;color:#4f607f}.status-pill.closed,.status-pill.failed{background:#f8e2df;color:#8f2e21}.source-pill{background:#e9f0fd;color:#315fbb}.messages{flex:1 1;overflow:auto;border:1px solid #d7dfeb;border-radius:10px;padding:.7rem;display:grid;grid-gap:.6rem;gap:.6rem}.message{border:1px solid #e2e8f2;border-radius:8px;padding:.55rem}.message header{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.3rem}.message p{margin:0}.composer{display:flex;gap:.5rem;margin-top:.7rem}@media (max-width:980px){.chat-card,.peers-card,.room-card{grid-column:span 12}}