/* The commons: rooms, the stream, the composer. */
.cm { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 17rem; gap: 32px clamp(24px, 3vw, 48px); align-items: start; margin-bottom: 60px; }
.cm-k { font-family: var(--mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.cm-side { position: sticky; top: 110px; display: grid; gap: 24px; align-content: start; }
.cm-rooms { display: grid; gap: 4px; }
.cm-rooms a { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 999px; font-weight: 500; transition: background .3s, color .3s; }
.cm-rooms a small { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); }
.cm-rooms a:hover { background: rgba(10,11,13,.05); }
.cm-rooms a.on { background: var(--ink); color: #fff; }
.cm-rooms a.on small { color: rgba(255,255,255,.6); }
.cm-me { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .8rem; color: var(--ink); }
.cm-here { font-size: .95rem; color: var(--ink-2); }
.cm-here b { font-family: var(--mono); font-weight: 400; color: var(--accent); }
.cm-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h) 70% 55%); flex: none; display: inline-block; }
.cm-room { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(72vh, 760px); min-height: 480px; background: #fff; border-radius: var(--radius); overflow: hidden; }
.cm-stream { overflow-y: auto; padding: 28px clamp(20px, 2.6vw, 36px) 12px; display: grid; gap: 14px; align-content: start; scroll-behavior: smooth; }
.cm-day { font-family: var(--mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin: 10px 0 4px; }
.cm-msg { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 4px; }
.cm-msg .cm-dot { margin-top: 7px; }
.cm-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.cm-meta b { font-family: var(--mono); font-weight: 400; font-size: .78rem; color: var(--ink); }
.cm-meta span { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); }
.cm-text { font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-msg.mine .cm-meta b { color: var(--accent); }
.cm-link { color: var(--ink); border-bottom: 1px solid var(--line); }
.cm-empty { color: var(--ink-3); padding: 20px 0; }
.cm-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; padding: 16px clamp(20px, 2.6vw, 36px) 20px; border-top: 1px solid var(--line); background: #fff; }
.cm-composer textarea { width: 100%; min-height: 48px; max-height: 160px; resize: vertical; border: 0; border-radius: 16px; padding: 13px 16px; background: rgba(10,11,13,.045); font: inherit; font-size: 1rem; color: var(--ink); outline: 0; }
.cm-composer textarea:focus { box-shadow: 0 0 0 2px rgba(36,56,255,.35); }
.cm-composer .pill { height: 48px; }
.cm-status { grid-column: 1 / -1; min-height: 1.2em; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-3); }
.cm-rules { position: sticky; top: 110px; }
.cm-rules .fetch { font-size: .74rem; line-height: 1.6; }
.cm-rules .fetch div { grid-template-columns: 5.5rem 1fr; }
@media (max-width: 1100px) { .cm { grid-template-columns: 12rem minmax(0, 1fr); } .cm-rules { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .cm { grid-template-columns: minmax(0, 1fr); } .cm-side { position: static; } .cm-rooms { display: flex; flex-wrap: wrap; } .cm-room { height: 70vh; } }
.cm-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 22px clamp(20px, 2.6vw, 36px) 18px; border-bottom: 1px solid var(--line); }
.cm-room-name { font-weight: 500; font-size: 1.35rem; letter-spacing: -.03em; }
.cm-room-desc { color: var(--ink-3); font-size: .9rem; margin-top: 2px; }
.cm-head-here { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cm-head-here b { font-weight: 400; color: var(--accent); }