/* WHO'S AROUND (services.ts aroundPage): the people in the public rooms right now, as cards. */
.ar-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ar-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "face body" "face acts"; gap: 6px 14px; padding: 14px; border-radius: 16px; background: rgba(11, 16, 50, .82); border: 1px solid var(--nx-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .12s, box-shadow .12s, border-color .12s; }
.ar-card:hover { transform: translateY(-2px); border-color: var(--nx-cyan); box-shadow: 0 0 18px rgba(11, 222, 251, .3), 0 10px 28px rgba(0, 0, 0, .35); }
.ar-face { grid-area: face; position: relative; display: block; width: 64px; height: 64px; }
.ar-face img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px rgba(11, 222, 251, .5); background: #0a0f33; }
.ar-dot { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: #39ff8a; box-shadow: 0 0 0 3px #0b1032, 0 0 10px #39ff8a; }
.ar-body { grid-area: body; min-width: 0; }
.ar-name { font: 22px/1.1 var(--nx-font-display); letter-spacing: .02em; color: #fff; text-decoration: none; }
.ar-name:hover { color: var(--nx-cyan); }
.ar-handle { color: var(--nx-dim, #9aa3d6); font: 12px var(--nx-font-mono, monospace); }
.ar-line { margin: 4px 0 0; color: var(--nx-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ar-where { margin: 4px 0 0; color: var(--nx-dim, #9aa3d6); font: 12px var(--nx-font-mono, monospace); }
.ar-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 520px) { .ar-list { grid-template-columns: 1fr; } }