/* Presence */
.tb-presence { display: flex; align-items: center; gap: 4px; position: relative; margin-right: 12px; }
.cc-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cc, #888); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .2px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25); flex: none;
}
.cc-avatar.sm { width: 20px; height: 20px; font-size: 8px; }
.cc-avatar.ring { box-shadow: 0 0 0 2px #fff; }
.cc-me { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
/* Menu cambio persona — prefisso #topbar per battere il bleed di "#topbar button" */
#topbar .cc-menu {
  position: absolute; top: 34px; right: 0; z-index: var(--z-modal);
  background: #fff; border: 1px solid var(--border-mid); border-radius: var(--r-md);
  box-shadow: var(--shadow-modal); padding: 5px; min-width: 200px;
}
#topbar .cc-menu-h { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-4); font-weight: 700; padding: 4px 8px 6px; }
#topbar .cc-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; padding: 6px 8px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: left;
}
#topbar .cc-menu-item:hover { background: var(--bg-soft); border-color: transparent; }
#topbar .cc-menu-item.on { background: var(--coop-red-tint); color: var(--ink-1); font-weight: 700; }
#topbar .cc-menu-check { margin-left: auto; color: var(--coop-red); font-weight: 800; }
#topbar .cc-menu-you { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink-1); }
#topbar .cc-logout { color: var(--coop-red); font-weight: 600; }
#topbar .cc-logout:hover { background: var(--coop-red-tint); }

/* Presence sugli slot del canvas */
.editor-screen .slot.cc-peer-slot { box-shadow: 0 0 0 2px var(--cc-peer); }
.cc-slot-peer {
  position: absolute; top: 2px; right: 2px; z-index: 4;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cc, #888); color: #fff; font-size: 7px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px #fff;
}

/* Badge presence sulle pagine del navigatore */
.cc-page-peer {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc, #888); box-shadow: 0 0 0 1px #fff; margin-left: 3px; vertical-align: middle;
}

.cc-panel-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.cc-back { background: var(--bg-soft); border: 1px solid var(--border-mid); border-radius: var(--r-sm); padding: 3px 8px; font-size: 11px; cursor: pointer; }
.cc-panel-title { font-size: 12px; }
.cc-filter { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); padding: 8px 12px; }
.cc-threads { flex: 1; overflow-y: auto; padding: 8px 12px; }
.cc-empty { color: var(--ink-4); font-size: 12px; padding: 12px 0; }
.cc-thread { border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px; margin-bottom: 10px; }
.cc-thread.risolto { opacity: .6; }
.cc-thread-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cc-thread-tgt { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-4); font-weight: 700; }
.cc-resolve { background: none; border: 1px solid var(--border-mid); border-radius: var(--r-sm); padding: 2px 7px; font-size: 10px; cursor: pointer; color: var(--ink-3); }
.cc-c { display: flex; gap: 7px; margin-bottom: 7px; }
.cc-c-body { flex: 1; }
.cc-c-head { font-size: 11px; }
.cc-c-ora { color: var(--ink-4); font-size: 10px; margin-left: 4px; }
.cc-c-text { font-size: 12px; color: var(--ink-2); line-height: 1.4; word-break: break-word; }
.cc-reply-input, .cc-new-input {
  width: 100%; border: 1px solid var(--border-mid); border-radius: var(--r-sm);
  padding: 5px 8px; font-size: 12px; font-family: inherit;
}
.cc-new { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border-soft); }
.cc-new-btn { background: var(--coop-red); color: #fff; border: none; border-radius: var(--r-sm); padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Pulsante "Commenta pagina" + badge conteggio */
.cc-page-btn { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; margin-left: var(--sp-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
.cc-page-btn:hover { border-color: var(--ink-3); }
.cc-badge { background: var(--coop-red); color: #fff; font-size: 9px; font-weight: 800; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }

/* Pin commento sullo slot */
.cc-slot-pin {
  position: absolute; bottom: 2px; right: 2px; z-index: 4;
  background: rgba(255,255,255,.92); border: 1px solid var(--border-mid); border-radius: 10px;
  font-size: 10px; line-height: 1; padding: 2px 4px; cursor: pointer; opacity: 0;
  display: inline-flex; align-items: center; gap: 3px;
}
.slot.filled:hover .cc-slot-pin, .slot.filled.selected .cc-slot-pin, .cc-slot-pin.has { opacity: 1; }

/* Sezione commenti nell'Inspector */
.cc-ins-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #666; font-weight: 700; margin-bottom: 6px; }
.cc-ins-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border-mid); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12px; cursor: pointer; }

/* Toast */
.cc-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal); display: flex; flex-direction: column; gap: 8px; }
.cc-toast { background: var(--ink-1); color: #fff; padding: 8px 12px; border-radius: var(--r-md); font-size: 12px; box-shadow: var(--shadow-modal); cursor: pointer; max-width: 280px; }

/* ===== Commenti dentro la card destra scura ===== */
.editor-screen .panel-right .cc-panel-top { border-bottom-color: var(--panel-border); }
.editor-screen .panel-right .cc-back {
  background: var(--panel-field); color: var(--panel-ink); border-color: var(--panel-border);
}
.editor-screen .panel-right .cc-panel-title { color: var(--panel-ink); }
.editor-screen .panel-right .cc-filter { color: var(--panel-muted); }
.editor-screen .panel-right .cc-empty { color: var(--panel-muted); }
.editor-screen .panel-right .cc-thread {
  background: var(--panel-card); border-color: var(--panel-border);
}
.editor-screen .panel-right .cc-thread-tgt { color: var(--panel-muted); }
.editor-screen .panel-right .cc-resolve {
  background: var(--panel-field); color: var(--panel-ink); border-color: var(--panel-border);
}
.editor-screen .panel-right .cc-c-text { color: var(--panel-ink); }
.editor-screen .panel-right .cc-c-ora { color: var(--panel-muted); }
.editor-screen .panel-right .cc-reply-input,
.editor-screen .panel-right .cc-new-input {
  background: var(--panel-field); color: var(--panel-ink); border-color: var(--panel-border);
}
.editor-screen .panel-right .cc-reply-input::placeholder,
.editor-screen .panel-right .cc-new-input::placeholder { color: var(--panel-muted); }
.editor-screen .panel-right .cc-new { border-top-color: var(--panel-border); }