/* ==========================================================================
   Quaderno — scrivere a mano in due (nota dal vivo, js/nb/ink.js)
   Tela dei tratti degli altri sopra la pagina, puntino con il nome di chi
   scrive, e nella barra degli strumenti chi c'è e lo stato della connessione.
   ========================================================================== */

/* tratti degli altri mentre li scrivono: stessa porzione di pagina della tela */
.ink-live-layer { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; border-radius: 6px; }

/* dove sta scrivendo un altro: puntino colorato con il nome */
.ink-peer {
  --pc: #ff9f0a;
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  transition: opacity 0.4s; /* il movimento lo fa js/nb/ink.js a ogni fotogramma (scivola verso il punto nuovo) */
  will-change: transform;
}
.ink-peer i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pc); box-shadow: 0 0 0 2px var(--raised), 0 1px 4px rgba(0, 0, 0, 0.3);
}
.ink-peer span {
  position: absolute; left: 9px; top: 7px; padding: 2px 7px; border-radius: 7px;
  background: var(--pc); color: #fff; font: 600 11.5px/1.35 -apple-system, system-ui, sans-serif;
  white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.ink-peer.idle { opacity: 0.45; }
.ink-peer.idle span { opacity: 0; transition: opacity 0.4s; }

/* barra: stato e persone nella nota */
.ink-live { gap: 8px; }
.ink-live-st { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 16px; background: var(--fill-2); color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.ink-live-st b { font-weight: 600; }
.ink-live-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.ink-live-st[data-st="live"] i { background: #30d158; box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); animation: ink-live-pulse 2.4s ease-out infinite; }
.ink-live-st[data-st="connecting"] i { background: #ff9f0a; animation: ink-live-blink 1s ease-in-out infinite; }
.ink-live-st[data-st="offline"] i { background: var(--ink-3); }
.ink-live-who { display: inline-flex; align-items: center; padding-left: 4px; }
.ink-live-av {
  --pc: #8e8e93;
  width: 28px; height: 28px; margin-left: -6px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  background: var(--pc); color: #fff; font: 700 11px/1 -apple-system, system-ui, sans-serif;
  box-shadow: 0 0 0 2px var(--raised);
}
.ink-live-av:first-child { margin-left: 0; }
/* testo scuro sui colori chiari, come in css/live.css */
@supports (color: oklch(from red l c h)) {
  .ink-peer span, .ink-live-av { color: oklch(from var(--pc) clamp(0.2, (0.72 - l) * 1000, 1) 0 0); }
}
.ink-live-av.me { opacity: 0.85; }

@keyframes ink-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0); }
}
@keyframes ink-live-blink { 50% { opacity: 0.35; } }

@media (max-width: 700px) {
  .ink-live-st b { display: none; }
  .ink-live-st { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-live-st i { animation: none !important; }
}