/* ============================================================
   Volta — commenti dei soci (solo su comment.voltacasa.it).
   Tutto sta sopra la pagina, con il prefisso cm- per non
   toccare gli stili del sito.
   ============================================================ */
@import url('/css/tokens.css');

.cm { font-family: var(--font); font-size: 14px; color: var(--v-testo); }
.cm button { font: inherit; cursor: pointer; }

/* barra in basso a destra: «Commenta» e il numero dei commenti aperti */
.cm-barra {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2147483000;
  display: flex; gap: 6px; padding: 5px; background: var(--v-notte); border-radius: var(--r-pill); box-shadow: var(--ombra-3);
}
@media (max-width: 760px) { .cm-barra { bottom: calc(84px + env(safe-area-inset-bottom)); } }   /* sopra la barra in basso dell'app */
.cm-bottone, .cm-conta {
  border: 0; border-radius: var(--r-pill); padding: 8px 14px; color: #fff; background: transparent; text-decoration: none; font-weight: 600;
  transition: background var(--t-breve) var(--dolce);
}
.cm-bottone { background: var(--v-blu); }
.cm-scegli .cm-bottone { background: var(--v-ambra); }
@media (hover: hover) { .cm-bottone:hover { background: var(--v-blu-scuro); } .cm-conta:hover { background: rgba(255, 255, 255, .12); } }

/* modalita' scelta: mirino attorno alla parte sotto il mouse */
.cm-scegli, .cm-scegli * { cursor: crosshair !important; }
.cm-mirino {
  position: fixed; left: 0; top: 0; z-index: 2147482990; pointer-events: none; border-radius: 6px;
  outline: 2px solid var(--v-ambra); background: rgba(224, 145, 43, .08); opacity: 0;
  transition: opacity var(--t-breve) var(--dolce), translate var(--t-medio) var(--molla), width var(--t-medio) var(--molla), height var(--t-medio) var(--molla);
}
.cm-mirino.visibile { opacity: 1; }

/* segnaposto numerati */
.cm-segno {
  position: fixed; left: -13px; top: -13px; z-index: 2147482995; width: 26px; height: 26px; padding: 0;
  border: 2px solid #fff; border-radius: 50% 50% 50% 4px; background: var(--v-ambra); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: var(--ombra-2); transition: opacity var(--t-breve) var(--dolce), scale var(--t-medio) var(--molla);
}
@starting-style { .cm-segno { opacity: 0; scale: .4; } }
@media (hover: hover) { .cm-segno:hover { scale: 1.15; } }
.cm-segno.nascosto { opacity: 0; pointer-events: none; }

/* scheda: scrivere o leggere un commento */
.cm-scheda {
  position: fixed; z-index: 2147483001; width: min(320px, calc(100vw - 32px)); padding: 14px; display: grid; gap: 10px;
  background: var(--v-bianco); border: 1px solid var(--v-linea); border-radius: var(--r-card); box-shadow: var(--ombra-3);
  visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity var(--t-medio) var(--dolce), transform var(--t-medio) var(--cassetto), visibility 0s linear var(--t-medio);
}
.cm-scheda.aperta { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.cm-scheda textarea {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 8px 10px; color: var(--v-testo);
  border: 1px solid var(--v-bordo-input); border-radius: var(--r-input); transition: box-shadow var(--t-breve) var(--dolce), border-color var(--t-breve) var(--dolce);
}
.cm-scheda textarea:focus { outline: 0; border-color: var(--v-blu); box-shadow: var(--anello); }
.cm-comandi { display: flex; justify-content: flex-end; gap: 8px; }
.cm-primario, .cm-secondario { border-radius: var(--r-btn); padding: 7px 14px; font-weight: 600; transition: background var(--t-breve) var(--dolce); }
.cm-primario { border: 0; background: var(--v-blu); color: #fff; }
.cm-secondario { border: 1px solid var(--v-linea-forte); background: var(--v-bianco); color: var(--v-testo); }
.cm-primario:disabled { opacity: .6; }
.cm-testo { margin: 0; color: var(--v-notte); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-info { margin: 0; font-size: 12px; color: var(--v-testo-tenue); }
.cm-errore { margin: 0; font-size: 12px; color: var(--v-rosso-scuro); }
.cm-errore:empty { display: none; }

/* pannello con tutti i commenti della pagina */
.cm-pannello {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147482998; width: min(360px, 100vw); box-sizing: border-box; overflow-y: auto;
  padding: 20px 16px 100px; background: var(--v-bianco); border-left: 1px solid var(--v-linea); box-shadow: var(--ombra-3);
  visibility: hidden; transform: translateX(100%);
  transition: transform var(--t-lungo) var(--cassetto), visibility 0s linear var(--t-lungo);
}
.cm-pannello.aperto { visibility: visible; transform: none; transition-delay: 0s; }
.cm-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cm-pannello h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; color: var(--v-notte); }
.cm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-lista li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--v-linea); border-radius: var(--r-input); cursor: pointer; transition: background var(--t-breve) var(--dolce); }
@media (hover: hover) { .cm-lista li:hover { background: var(--v-blu-tenue); } }
.cm-lista li.risolto { opacity: .55; }
.cm-lista li.risolto .cm-testo { text-decoration: line-through; }
.cm-lista .cm-vuoto { cursor: default; color: var(--v-testo-tenue); border-style: dashed; }

@media print { .cm { display: none; } }
@media (prefers-reduced-motion: reduce) { .cm * { transition-duration: 0s !important; } }