.cdlg-overlay {
  position: fixed;
  inset: 0;
  /* Sopra ogni pannello e sopra l'avviso di ricarica (--z-modal): finché la
     domanda è in piedi non ci deve essere niente di cliccabile sotto. */
  z-index: calc(var(--z-modal) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 12, 0.72);
}

.cdlg-box {
  max-width: 460px;
  min-width: 280px;
  padding: var(--space-6);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.cdlg-text {
  margin: 0 0 var(--space-6);
  /* I messaggi separano i blocchi con `\n\n` e il testo si assegna con
     `textContent`: le righe le fa il CSS, non del markup costruito a mano. */
  white-space: pre-line;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-primary);
}

.cdlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.cdlg-actions button {
  min-width: 92px;
  padding: 8px 16px;
  background: var(--bg-control);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.cdlg-actions button:hover {
  background: var(--bg-elevated);
}

/* Il No è il predefinito e si vede: è lui ad avere il fuoco all'apertura. */
.cdlg-no:focus-visible,
.cdlg-no:focus {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.35);
}

/* Il Sì è la risposta che distrugge: colorato come tale, mai come il primario. */
.cdlg-si {
  color: var(--accent-rec);
}

.cdlg-si:hover {
  border-color: var(--accent-rec);
}

.cdlg-si:focus-visible,
.cdlg-si:focus {
  border-color: var(--accent-rec);
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 69, 60, 0.35);
}