/* The room's permanent memory, made visible — every message ever posted in
 * the room is one 8px block. Circles are human, squares are machines: the
 * same grammar as the roster and the composer audience strip. Every token
 * falls back to the value copied from styles.css :root, so the strip also
 * renders true on a page that loads only this sheet. */

#mosaic {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, #dfe2da);
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 0 var(--block-ink, rgba(17, 18, 15, 0.16));
  padding: 16px;
  margin-top: 18px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif);
  color: var(--ink, #11120f);
}

/* ── header line ───────────────────────────────────────────────────────── */

.mosaic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.mosaic-lede {
  margin: 0;
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.mosaic-count {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: var(--muted-foreground, #5e6259);
  white-space: nowrap;
}

/* ── the strip itself ──────────────────────────────────────────────────── */

.mosaic-grid {
  position: relative; /* floating notes anchor to blocks in here */
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  contain: content;   /* thousands of blocks must not tax the page around them */
}

.mosaic-block {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px; /* squares are machines */
  animation: mosaic-pop var(--motion-settle, 260ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
  animation-delay: var(--d, 0ms);
}
.mosaic-block.is-human { border-radius: 50%; } /* circles are human */
.mosaic-block.is-agent { background: var(--brand-accent, #6f52d9); }

/* entrance wave — each block's --d is set by index, whole sweep ≤ ~1.2s */
@keyframes mosaic-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* a message posted right now lands loud: hot core, overshoot, glow ring */
.mosaic-block.is-new {
  animation: mosaic-land 700ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
@keyframes mosaic-land {
  0% {
    opacity: 0;
    transform: scale(0);
    box-shadow: 0 0 0 0 rgba(111, 82, 217, 0.85);
    filter: brightness(2.6) saturate(0.5);
  }
  45% { opacity: 1; transform: scale(2.2); }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 16px rgba(111, 82, 217, 0);
    filter: none;
  }
}

/* tapping a block pings it — the mobile stand-in for the hover tooltip */
.mosaic-block.is-ping {
  animation: mosaic-ping 600ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
@keyframes mosaic-ping {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(111, 82, 217, 0.7); }
  40%  { transform: scale(1.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(111, 82, 217, 0); }
}

/* ── floating notes ────────────────────────────────────────────────────── */
/* "you're now part of this room — block #1,248", and the tap tooltip */

.mosaic-note {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, 0);
  font-family: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
  background: var(--ink, #11120f);
  border-radius: var(--radius, 6px);
  padding: 6px 9px;
  box-shadow: 0 3px 0 var(--block-ink, rgba(17, 18, 15, 0.16));
  white-space: nowrap;
  max-width: min(360px, calc(100% - 8px));
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: mosaic-note-float 2.8s var(--ease-glide, cubic-bezier(0.3, 1.18, 0.4, 1)) both;
}
.mosaic-note.is-mine {
  background: var(--brand-accent, #6f52d9);
  font-weight: 700;
}
@keyframes mosaic-note-float {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  10%  { opacity: 1; transform: translate(-50%, -14px); }
  78%  { opacity: 1; transform: translate(-50%, -20px); }
  100% { opacity: 0; transform: translate(-50%, -30px); }
}

/* ── legend ────────────────────────────────────────────────────────────── */

.mosaic-key {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--muted-foreground, #5e6259);
}
.mosaic-key span { display: inline-flex; align-items: center; gap: 6px; }
.mosaic-key i {
  font-style: normal;
  flex: none;
  width: 8px;
  height: 8px;
}
.mosaic-key .k-person { border-radius: 50%; background: hsl(210 45% 45%); }
.mosaic-key .k-agent  { border-radius: 2px; background: var(--brand-accent, #6f52d9); }

/* ── responsive + motion gates ─────────────────────────────────────────── */

@media (max-width: 560px) {
  #mosaic { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mosaic-block, .mosaic-note {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}